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

<template>
   <div class="vue-component">
      <h2><a id="section-90"></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 class="col-form-label" for="content">{{ $t('comment.label') }}</label>

            <ckeditor
               name="content"
               v-bind:placeholder="$t('comment.content')"
               :editor="editor"
               v-model="content"
               tag-name="textarea">
            </ckeditor>

            <div v-if="pinnedComment" class="metadata">
               {{ $t('comment.created_by', [
               pinnedComment.creator.text,
               $d(pinnedComment.createdAt.datetime, 'long')
            ]) }}
            </div>

            <div>
               <ul class="record_actions">
                  <li>
                     <button type="submit" class="btn btn-save">{{ $t('action.save') }}</button>
                  </li>
                  <li v-if="pinnedComment !== null">
                     <a class="btn btn-delete"
                        @click="removeComment">
                        {{ $t('action.delete') }}
                     </a>
                  </li>
               </ul>
            </div>

         </form>
      </div>

   </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from "ChillMainAssets/module/ckeditor5";

export default {
   name: "Comment",
   components: {
      ckeditor: CKEditor.component,
   },
   data() {
      return {
         editor: ClassicEditor,
         formdata: {
            type: "accompanying_period_comment",
            content: ''
         }
      }
   },
   computed: {
      pinnedComment() {
         return this.$store.state.accompanyingCourse.pinnedComment;
      },
      content: {
         set(value) {
            this.formdata.content = value;
         },
         get() {
            return (this.pinnedComment)? this.pinnedComment.content : {};
         }
      },
      errors() {
         return this.$store.state.errorMsg;
      }
   },
   methods: {
      submitform() {
         this.$store.dispatch('postFirstComment', this.formdata)
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });
      },
      removeComment() {
         this.$store.dispatch('postFirstComment', {})
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });
      }
   }
}
/*
* TODO
* - [x] delete button in ul record_actions, but not in form
* - [ ] display updatedAt => pinnedComment fetch PATCH content changes MUST NOT change object id !!
*/
</script>

<style lang="scss">
div.ck-editor.ck-reset {
   margin: 0.6em 0;
}
</style>