chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue

<template>
   <div class="vue-component">
      <h3>{{ $t('comment.title') }}</h3>
      
      <div class="error flash_message" v-if="errors.length > 0">
         {{ errors[0] }}
      </div>
      
      <div v-if="initialComment">
         créé par {{ initialComment.creator.text }}
         le {{ $d(initialComment.createdAt.datetime, 'long') }}
         <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
            modifié par {{ initialComment.updatedBy.text }}
            le {{ $d(initialComment.updatedAt.datetime, 'long') }}
         </div>
      </div>
      
      <form @submit.prevent="submitform">
         <textarea 
            name="content" 
            v-bind:placeholder="$t('comment.content')"
            rows="8" 
            cols="80"
            ckeditor="ckeditor"
            v-model="content">
         </textarea>
         <ul class="record_actions">
            <li>
               <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
            </li>
            <li id="xyz">
            </li>
         </ul>
      </form>
      
      <button v-if="initialComment !== null"
         class="sc-button bt-delete" 
         @click="removeComment">
         {{ $t('action.delete') }}
      </button>
      
   </div>
</template>

<script>
export default {
   name: "Comment",
   data() {
      return {
         formdata: { 
            type: "accompanying_period_comment",
            content: ''
         }
      }
   },
   computed: {
      initialComment() {
         return this.$store.state.accompanyingCourse.initialComment;
      },
      content: {
         set(value) {
            this.formdata.content = value;
         },
         get() {
            return (this.initialComment)? this.initialComment.content : null;
         }
      },
      errors() {
         return this.$store.state.errorMsg;
      }
   },
   methods: {
      submitform() {
         console.log('submit');
         this.$store.dispatch('postFirstComment', this.formdata);
      },
      removeComment() {
         console.log('remove');
         this.$store.dispatch('postFirstComment', null);
      }
   }
}
/*
* TODO
* - patch endpoint to update Content
* - delete/reset button ?
* - manage flash messages => specific component ?
* - ckeditor
*/
</script>