resources: add a WriteComment new subcomponent

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -14,6 +14,11 @@
       }">
       <template v-slot:record-actions>
          <ul class="record_actions">
+            <li>
+               <write-comment
+                  :resource="resource"
+               ></write-comment>
+            </li>
             <li>
                <on-the-fly
                   :type="resource.resource.type"
@@ -52,6 +57,11 @@
       }">
       <template v-slot:record-actions>
          <ul class="record_actions">
+            <li>
+               <write-comment
+                  :resource="resource"
+               ></write-comment>
+            </li>
             <li>
                <on-the-fly
                   :type="resource.resource.type"
@@ -84,6 +94,7 @@ import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
+import WriteComment from './WriteComment';
 
 export default {
    name: 'ResourceItem',
@@ -91,7 +102,8 @@ export default {
       OnTheFly,
       ButtonLocation,
       PersonRenderBox,
-      ThirdPartyRenderBox
+      ThirdPartyRenderBox,
+      WriteComment
    },
    props: ['resource'],
    emits: ['remove'],

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue

@@ -0,0 +1,108 @@
+<template>
+   <a class="btn btn-sm btn-misc change-icon"
+      :title="$t('write_comment')"
+      @click="openModal"
+   ><i class="fa fa-pencil-square-o"></i>
+   </a>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal"
+             :modalDialogClass="modal.modalDialogClass"
+             @close="modal.showModal = false">
+         <template v-slot:header>
+
+            <h3 class="modal-title">{{ $t('write_comment_about', { 'r': resource.resource.text }) }}</h3>
+
+         </template>
+         <template v-slot:body>
+
+            <ckeditor
+               name="content"
+               v-bind:placeholder="$t('comment_placeholder')"
+               :editor="editor"
+               v-model="content"
+               tag-name="textarea">
+            </ckeditor>
+
+         </template>
+         <template v-slot:footer>
+
+            <a class="btn btn-save"
+               @click="saveAction">
+               {{ $t('action.save')}}
+            </a>
+
+         </template>
+      </modal>
+   </teleport>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+
+export default {
+   name: "WriteComment",
+   props: ['resource'],
+   components: {
+      Modal,
+      ckeditor: CKEditor.component,
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+         editor: ClassicEditor,
+         formdata: {
+            content: this.resource.comment
+         }
+      }
+   },
+   i18n: {
+      messages: {
+         fr: {
+            write_comment: "Écrire un commentaire",
+            write_comment_about: "Écrire un commentaire à propos de {r}",
+            comment_placeholder: "Commencez à écrire..."
+         }
+      }
+   },
+   computed: {
+      content: {
+         set(value) {
+            this.formdata.content = value;
+         },
+         get() {
+            return this.formdata.content;
+         }
+      },
+   },
+   methods: {
+      openModal() {
+         //console.log('write comment for', this.resource.resource.type, this.resource.resource.id);
+         this.modal.showModal = true;
+      },
+      saveAction() {
+         //console.log('save comment', this.resource.id, this.formdata.content);
+         this.patchResource(this.resource.id, this.formdata.content);
+      },
+      patchResource(id, comment) {
+         let url = `/api/1.0/person/accompanying-period/resource/${id}.json`,
+             body = {
+                "type": "accompanying_period_resource",
+                "comment": comment
+             }
+         ;
+         makeFetch('PATCH', url, body)
+            .then(r => {
+               this.modal.showModal = false
+            }
+         )
+      }
+   }
+}
+</script>