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

<template>
   <div class="vue-component">
      <h2><a id="section-100"></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"
               :placeholder="$t('comment.content')"
               :editor="editor"
               v-model="content"
               @input="onContentChange"
               tag-name="textarea">
            </ckeditor>

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

            <!-- <div> //DOES NOT WORk
               <ul class="record_actions">
                  <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: {
      onContentChange() {
         let lastRecordedContent = this.formData.content;
         setTimeout(() => {
            if (lastRecordedContent === this.formData.content) {
               if (this.pinnedComment) {
                  let body = this.formData;
                  Object.assign(body, {id: this.pinnedComment.id});

                  this.$store.dispatch('updatePinnedComment', body)
                     .catch(({name, violations}) => {
                        if (name === 'ValidationException' || name === 'AccessException') {
                           violations.forEach((violation) => this.$toast.open({message: violation}));
                        } else {
                           this.$toast.open({message: 'An error occurred'})
                        }
                     });
               } else {
                  this.$store.dispatch('addPinnedComment', 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'})
                        }
                     });
               }
               lastRecordedContent = null;
            }
         }, 3000);
      },
      removeComment() {
         this.$store.dispatch('removePinnedComment', {id: this.pinnedComment.id})
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });
      }
   }
}
</script>

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