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); 
     },