Merge branch '232_resources_comment' into 'master'

232 resources comment

See merge request Chill-Projet/chill-bundles!276

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

@@ -14,8 +14,15 @@
       }">
       <template v-slot:record-actions>
          <ul class="record_actions">
+            <li>
+               <write-comment
+                  :resource="resource"
+                  @updateComment="updateComment"
+               ></write-comment>
+            </li>
             <li>
                <on-the-fly
+                  :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="show">
@@ -23,6 +30,7 @@
             </li>
             <li>
                <on-the-fly
+                  :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
@@ -48,13 +56,19 @@
          addId : false,
          addEntity: true,
          addInfo: false,
-         //addComment: true,
          hLevel: 3
       }">
       <template v-slot:record-actions>
          <ul class="record_actions">
+            <li>
+               <write-comment
+                  :resource="resource"
+                  @updateComment="updateComment"
+               ></write-comment>
+            </li>
             <li>
                <on-the-fly
+                  :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="show">
@@ -62,6 +76,7 @@
             </li>
             <li>
                <on-the-fly
+                  :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
@@ -85,6 +100,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',
@@ -92,11 +108,23 @@ export default {
       OnTheFly,
       ButtonLocation,
       PersonRenderBox,
-      ThirdPartyRenderBox
+      ThirdPartyRenderBox,
+      WriteComment
    },
    props: ['resource'],
    emits: ['remove'],
    computed: {
+      parent() {
+         return {
+            'type': this.resource.type,
+            'id': this.resource.id,
+            'comment': this.resource.comment,
+            'parent': {
+               'type': this.$store.state.accompanyingCourse.type,
+               'id': this.$store.state.accompanyingCourse.id
+            }
+         }
+      },
       hasCurrentHouseholdAddress() {
          if ( this.resource.resource.current_household_address !== null ) {
             return true;
@@ -116,6 +144,10 @@ export default {
                   this.$toast.open({message: 'An error occurred'})
                }
             });
+      },
+      updateComment(resource) {
+         console.log('updateComment', resource);
+         this.$store.commit('updateResource', resource);
       }
    }
 }

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

@@ -0,0 +1,116 @@
+<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",
+   components: {
+      Modal,
+      ckeditor: CKEditor.component,
+   },
+   props: ['resource'],
+   emits: ['updateComment'],
+   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 => {
+               let resource = {
+                  'type': 'accompanying_period_resource',
+                  'id': r.id,
+                  'comment': r.comment,
+                  'resource': r.resource
+               }
+               this.$emit('updateComment', resource);
+               this.modal.showModal = false;
+            }
+         )
+      }
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -124,6 +124,11 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                //console.log('### mutation: addResource', resource);
                state.accompanyingCourse.resources.push(resource);
             },
+            updateResource(state, payload) {
+               console.log('### mutation: updateResource', payload);
+               let i = state.accompanyingCourse.resources.findIndex(r => r.id === payload.id);
+               state.accompanyingCourse.resources[i] = payload;
+            },
             updatePerson(state, payload) {
                console.log('### mutation: updatePerson', payload);
                let i = null;
@@ -360,6 +365,23 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                      throw error;
                   })
             },
+            patchResource({ commit }, payload) {
+               const body = { type: "accompanying_period_resource" };
+               body['resource'] = {
+                  type: payload.result.type,
+                  id: payload.result.id
+               };
+               const url = `/api/1.0/person/accompanying-course/resource/${id}.json`;
+
+               return makeFetch('PATCH', url, body)
+                   .then((response) => {
+                      commit('patchResource', response);
+                   })
+                   .catch((error) => {
+                      commit('catchError', error);
+                      throw error;
+                   })
+            },
             /**
              * On The Fly
              */

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -187,7 +187,7 @@ export default {
          getPerson(this.id)
             .then(person => new Promise((resolve, reject) => {
                this.person = person;
-               console.log('get person', this.person);
+               //console.log('get person', this.person);
                resolve();
          }));
       },

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -4,11 +4,12 @@
     {{ 'Resume Accompanying Course'|trans }}
 {% endblock %}
 
-{% macro insert_onthefly(type, entity) %}
+{% macro insert_onthefly(type, entity, parent = null) %}
     {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
         action: 'show', displayBadge: true,
         targetEntity: { name: type, id: entity.id },
-        buttonText: entity|chill_entity_render_string
+        buttonText: entity|chill_entity_render_string,
+        parent: parent
     } %}
 {% endmacro %}
 
@@ -55,6 +56,7 @@
             </div>
         {% endif %}
 
+        {% if accompanyingCourse.locationStatus != 'none' %}
         <div class="mbloc col col-sm-6 col-lg-4">
             <div class="location">
                 {% if accompanyingCourse.locationStatus == 'person' %}
@@ -63,12 +65,10 @@
                 {%  elseif accompanyingCourse.locationStatus == 'address' %}
                     <h4>{{ 'This course has a temporarily location'|trans }}</h4>
                 {% endif %}
-
-                {% if accompanyingCourse.locationStatus != 'none' %}
-                    {{ accompanyingCourse.location|chill_entity_render_box }}
-                {% endif %}
+                {{ accompanyingCourse.location|chill_entity_render_box }}
             </div>
         </div>
+        {% endif %}
 
         {% if accompanyingCourse.pinnedComment is not empty %}
             <div class="mbloc col col-sm-6 col-lg-8">
@@ -107,11 +107,21 @@
             <div class="mbloc col col-sm-6 col-lg-4">
                 <div class="resources">
                     <h4 class="item-key">{{ 'Resources'|trans }}</h4>
+
                     {% for r in accompanyingCourse.resources %}
+                        {% set parent = {
+                            'type': 'accompanying_period_resource',
+                            'id': r.id,
+                            'comment': r.comment,
+                            'parent': {
+                                'type': 'accompanying_period',
+                                'id': accompanyingCourse.id
+                            }
+                        } %}
                         {% if r.person is not null %}
-                            {{ _self.insert_onthefly('person', r.person) }}
+                            {{ _self.insert_onthefly('person', r.person, parent) }}
                         {% elseif r.thirdParty is not null %}
-                            {{ _self.insert_onthefly('thirdparty', r.thirdParty) }}
+                            {{ _self.insert_onthefly('thirdparty', r.thirdParty, parent) }}
                         {% endif %}
                     {% endfor %}
                 </div>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig

@@ -87,7 +87,15 @@
                                                 {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                                     action: 'show', displayBadge: true,
                                                     targetEntity: { name: 'thirdparty', id: w.handlingThierParty.id },
-                                                    buttonText: w.handlingThierParty|chill_entity_render_string
+                                                    buttonText: w.handlingThierParty|chill_entity_render_string,
+                                                    parent: {
+                                                        'type': 'accompanying_period_resource',
+                                                        'id': r.id,
+                                                        'comment': r.comment,
+                                                        'parent': {
+                                                            'type': 'accompanying_period',
+                                                            'id': accompanyingCourse.id
+                                                        }
                                                 } %}
                                             </span>
                                         </div>