add ckeditor for comment

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue

@@ -76,8 +76,6 @@
           v-for="conc in concByPosition(position.id)"
           v-bind:key="conc.person.id"
           v-bind:conc="conc"
-          draggable="true"
-          @dragstart="onStartDragConcern($event, conc.person.id)"
         >
         </member-details>
         <div
@@ -163,7 +161,6 @@ export default {
   },
   methods: {
     addNewPersons({ selected, modal }) {
-      console.log(selected);
       selected.forEach(function(item) {
         this.$store.dispatch('addConcerned', item.result);
       }, this);
@@ -171,15 +168,11 @@ export default {
       modal.showModal = false;
     },
     onStartDragConcern(evt, person_id) {
-      console.log(evt);
-      console.log(person_id);
       evt.dataTransfer.dropEffect = 'move'
       evt.dataTransfer.effectAllowed = 'move'
       evt.dataTransfer.setData('application/x.person', person_id)
     },
     onDropConcern(evt, position_id) {
-      console.log(evt);
-      console.log('position_id', position_id);
       const person_id = Number(evt.dataTransfer.getData('application/x.person'));
       this.moveToPosition(person_id, position_id);
     },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue

@@ -3,7 +3,6 @@
     <div class="item-row person">
       <div class="item-col box-person">
         <div>
-          <img src="~ChillMainAssets/img/draggable.svg" class="drag-icon" />
           <person :person="conc.person"></person>
           <span v-if="isHolder" class="badge badge-primary holder">
             {{ $t('household_members_editor.holder') }}
@@ -21,6 +20,10 @@
       </div>
     </div>
 
+    <div class="item-row comment">
+      <ckeditor :editor="editor" v-model="comment" tag-name="textarea"></ckeditor>
+    </div>
+
     <div class="item-row participation-details">
       <div v-if="conc.position.allowHolder" class="action">
         <button class="btn" :class="{ 'btn-primary': isHolder, 'btn-secondary': !isHolder}" @click="toggleHolder">
@@ -71,24 +74,43 @@ div.participation-details {
 <script>
 import { mapGetters } from 'vuex';
 import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from 'ChillMainAssets/modules/ckeditor5/index.js';
 
 export default {
   name: 'MemberDetails',
   components: {
     Person,
+    ckeditor: CKEditor.component,
   },
   props: [
     'conc'
   ],
+   data() {
+    return {
+      editor: ClassicEditor,
+    };
+   },
    computed: {
      ...mapGetters( [
        'concByPersonId'
      ]),
      isHolder() {
         return this.conc.holder;
+     },
+     comment: {
+      get() {
+        return this.conc.comment;
+      },
+      set(text) {
+        console.log('set comment');
+        console.log('comment', text);
+
+        this.$store.dispatch('setComment', { conc: this.conc, comment: text });
       }
+     },
    },
-  methods: {
+   methods: {
     toggleHolder() {
       this.$store.dispatch('toggleHolder', this.conc); 
     },

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

@@ -9,7 +9,8 @@ const concerned = window.household_members_editor_data.persons.map(p => {
     person: p,
     position: null,
     allowRemove: false,
-    holder: false
+    holder: false,
+    comment: "",
   };
 });
 
@@ -28,8 +29,6 @@ const store = createStore({
   },
   getters: {
     isHouseholdNew(state) {
-      console.log('isHouseholdNew', !Number.isInteger(state.household.id));
-      console.log('household', state.household);
       return !Number.isInteger(state.household.id);
     },
     hasHousehold(state) {
@@ -80,7 +79,6 @@ const store = createStore({
 
       for (let i in state.concerned) {
         conc = state.concerned[i];
-        console.log('loop', conc);
         payload.concerned.push({
           person: {
             id: conc.person.id,
@@ -91,7 +89,7 @@ const store = createStore({
             type: conc.position.type
           },
           holder: conc.holder,
-          comment: "",
+          comment: conc.comment,
           start_date: {
             datetime: datetimeToISO(state.startDate)
           }
@@ -109,26 +107,23 @@ const store = createStore({
           person,
           position: null, 
           allowRemove: true,
-          holder: false
+          holder: false,
+          comment: "",
         });
       } else {
         console.err("person already included");
       }
     },
     markPosition(state, { person_id, position_id}) {
-      console.log('from mutation markPosition');
-      console.log('person_id', person_id);
-      console.log('position_id', position_id);
-      console.log('state', state.concerned);
       let
         position = state.positions.find(pos => pos.id === position_id),
         conc = state.concerned.find(c => c.person.id === person_id);
-      console.log(position);
-      console.log(conc);
       conc.position = position;
     },
+    setComment(state, {conc, comment}) {
+      conc.comment = comment;
+    },
     toggleHolder(state, conc) {
-      console.log('toggleHolder', conc);
       conc.holder = !conc.holder;
     },
     removePosition(state, conc) {
@@ -156,14 +151,10 @@ const store = createStore({
   },
   actions: {
     addConcerned({ commit, dispatch }, person) {
-      console.log('from actions addConcerned');
       commit('addConcerned', person);
       dispatch('computeWarnings');
     },
     markPosition({ commit, state, dispatch }, { person_id, position_id }) {
-      console.log('from action markPosition');
-      console.log('person_id', person_id);
-      console.log('position_id', position_id);
       commit('markPosition', { person_id, position_id });
       dispatch('computeWarnings');
     },
@@ -189,6 +180,9 @@ const store = createStore({
     setStartDate({ commit }, date) {
       commit('setStartDate', date);
     },
+    setComment({ commit }, payload) {
+      commit('setComment', payload);
+    },
     computeWarnings({ commit, state, getters }) {
       let warnings = [],
         payload;
@@ -211,7 +205,6 @@ const store = createStore({
     confirm({ getters }) {
       let payload = getters.buildPayload;
       householdMove(payload).then(household => {
-        console.log('move success', household);
         let id = household.id;
         // nothing to do anymore here, bye-bye !
         window.location.replace(`/fr/person/household/{id}/members`);