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

<template>
   <div class="vue-component">
      <h2><a name="section-60"></a>{{ $t('comment.title') }}</h2>
      
      <!--div class="error flash_message" v-if="errors.length > 0">
         {{ errors[0] }}
         TODO fix errors flashbag for app component
      </div-->
      
      <div>
         <form @submit.prevent="submitform">
            
            <label for="content">{{ $t('comment.label') }}</label>
            
            <div v-if="initialComment">
               {{ $t('comment.created_by', [
                  initialComment.creator.text, 
                  $d(initialComment.createdAt.datetime, 'long')
               ]) }}
            </div>
            
            <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="btn btn-save">{{ $t('action.save') }}</button>
               </li>
               <li v-if="initialComment !== null">
                  <a class="btn btn-delete" 
                     @click="removeComment">
                     {{ $t('action.delete') }}
                  </a>
               </li>
            </ul>
            
         </form>
      </div>
      
   </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
* - [x] delete button in ul record_actions, but not in form
* - [ ] display updatedAt => initialComment fetch PATCH content changes MUST NOT change object id !!
* - [ ] ckeditor integration
*/
</script>

<style lang="scss" scoped>
   div.vue-component > div {
      //margin: 1em;
   }
</style>