git.r.bdr.sh - rbdr/dasein/blob - app/components/comment_form.js

   1 import Axios from 'axios';
   2 import Vue from 'vue';
   3 import AuthService from '../services/auth';
   4
   5 const internals = {};
   6
   7 internals.kPostsRoute = '/api/posts';
   8 internals.kCommentsRoute = '/comments';
   9
  10 export default internals.CommentFormComponent = Vue.component('comment-form', {
  11   template: '<div class="comment-form-container">' +
  12       '<p v-show="!active" class="comment-form-error">' +
  13       '<button class="comment-activate" v-on:click="activate">Add comment.</button>' +
  14       '</p>' +
  15       '<textarea v-show="active" :disabled="submitting" v-model="content" class="comment-content-input" placeholder="tell us something" maxlength=255></textarea>' +
  16       '<p v-show="message" class="comment-form-error">{{message}}</p>' +
  17       '<button v-show="active" :disabled="submitting" class="comment-submit" v-on:click="submit">Go.</button>' +
  18       '</div>',
  19
  20   props: ['postUuid'],
  21
  22   data() {
  23
  24     return {
  25       content: '',
  26       message: '',
  27       active: false,
  28       submitting: false,
  29       authService: new AuthService()
  30     };
  31   },
  32
  33   methods: {
  34
  35     // Activates the form.
  36
  37     activate() {
  38
  39       this.active = true;
  40     },
  41
  42     // Creates a comment
  43
  44     submit() {
  45
  46       this.submitting = true;
  47       const route = `${internals.kPostsRoute}/${this.postUuid}${internals.kCommentsRoute}`;
  48
  49       return Axios({
  50         method: 'post',
  51         headers: {
  52           Authorization: `Bearer ${this.authService.token}`
  53         },
  54         data: {
  55           content: this.content
  56         },
  57         url: route
  58       }).then((response) => {
  59
  60         this.$emit('comment-submitted', response.data);
  61         this.content = '';
  62         this.message = '';
  63         this.submitting = false;
  64         this.active = false;
  65       }).catch((err) => {
  66
  67         console.error(err.stack);
  68         this.submitting = false;
  69         this.message = 'Error while creating the post...';
  70       });
  71     }
  72   }
  73 });