git.r.bdr.sh - rbdr/dasein/blob - app/components/post_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
   9 export default internals.PostFormComponent = Vue.component('post-form', {
  10   template: '<div class="post-form-container">' +
  11       '<h1>hi {{authService.user.name}}</h1>' +
  12       '<button v-show="!active" class="post-submit" v-on:click="activate">Post something.</button>' +
  13       '<textarea v-show="active" :disabled="submitting" v-model="content" class="post-content-input" placeholder="tell us something" maxlength=255></textarea>' +
  14       '<p v-show="message" class="post-form-error">{{message}}</p>' +
  15       '<button v-show="active" :disabled="submitting" class="post-submit" v-on:click="submit">Go.</button>' +
  16       '</div>',
  17
  18   data() {
  19
  20     return {
  21       content: '',
  22       message: '',
  23       submitting: false,
  24       active: false,
  25       authService: new AuthService()
  26     };
  27   },
  28
  29   methods: {
  30
  31     // Activates the form.
  32
  33     activate() {
  34
  35       this.active = true;
  36     },
  37
  38     // Creates a post
  39
  40     submit() {
  41
  42       this.submitting = true;
  43
  44       return Axios({
  45         method: 'post',
  46         headers: {
  47           Authorization: `Bearer ${this.authService.token}`
  48         },
  49         data: {
  50           content: this.content
  51         },
  52         url: internals.kPostsRoute
  53       }).then((response) => {
  54
  55         this.$emit('post-submitted', response.data);
  56         this.content = '';
  57         this.message = '';
  58         this.submitting = false;
  59         this.active = false;
  60       }).catch((err) => {
  61
  62         console.error(err.stack);
  63         this.submitting = false;
  64         this.message = 'Error while creating the post...';
  65       });
  66     }
  67   }
  68 });
  69
  70