]> git.r.bdr.sh - rbdr/dasein/blob - app/components/comment_form.js
bf60d060c5fc3a57c93ac4872637ac7780fa6776
[rbdr/dasein] / 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 });