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"
               tag-name="textarea">
            </ckeditor>

            <div class="sub-comment">
               <div v-if="pinnedComment !== null && typeof pinnedComment.creator !== 'undefined'" class="metadata">
                  {{ $t('comment.created_by', [
                        pinnedComment.creator.text,
                        $d(pinnedComment.updatedAt.datetime, 'long')
                     ])
                  }}
               </div>
               <div class="loading">
                  <i v-if="loading" class="fa fa-circle-o-notch fa-spin" :title="$t('loading')"></i>
               </div>
            </div>

            <div>
               <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";
import { mapState } from "vuex";

export default {
   name: "Comment",
   components: {
      ckeditor: CKEditor.component,
   },
   data() {
      return {
         editor: ClassicEditor,
         loading: false,
         lastRecordedContent: null,
      }
   },
   computed: {
      ...mapState({
         pinnedComment: state => state.accompanyingCourse.pinnedComment,
      }),
      content: {
         set(value) {
           console.log('new comment value', value);
            console.log('previous value', this.lastRecordedContent);
            this.lastRecordedContent = value;

           setTimeout(() => {
               console.log('performing test on ', value);
               if (this.lastRecordedContent === value) {
                 this.loading = true;
                 if (value !== '') {
                   this.$store.dispatch('updatePinnedComment', value)
                       .then(() => {
                         this.loading = false;
                       })
                       .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 {
                   if (this.$store.state.accompanyingCourse.pinnedComment !== null) {
                     this.$store.dispatch('removePinnedComment', {id: this.pinnedComment.id})
                         .then(() => {
                           this.loading = false;
                           this.lastRecoredContent = null;
                         })
                         .catch(({name, violations}) => {
                           if (name === 'ValidationException' || name === 'AccessException') {
                             violations.forEach((violation) => this.$toast.open({message: violation}));
                           } else {
                             this.$toast.open({message: 'An error occurred'})
                           }
                         });
                   }
                 }
               }
           }, 3000);

         },
        get() {
          return this.pinnedComment ? this.pinnedComment.content : '';
         }
      },
      errors() {
         return this.$store.state.errorMsg;
      }
   },
   methods: {
      onContentChange() {
         let lastRecordedContent = this.formData.content;
      },
      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;
}
div.sub-comment {
   display: flex;
   justify-content: space-between;
   div.loading {
      margin-right: 6px;
      margin-left: 6px;
   }
}
</style>