first impl for household editor

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

@@ -0,0 +1,118 @@
+<template>
+  <h1>{{ $t('household_members_editor.concerned.title') }}</h1>
+
+    <div>
+      <div v-for="person in personsUnpositionned" 
+        draggable="true"
+        @dragstart="onStartDragConcern($event, person.id)"
+      >
+        <span>{{ person.text }}</span>
+      </div>
+    </div>
+
+  <div>
+    <add-persons
+      buttonTitle="household_members_editor.concerned.add_persons"
+      modalTitle="household_members_editor.concerned.search"
+      v-bind:key="addPersons.key"
+      v-bind:options="addPersons.options"
+      @addNewPersons="addNewPersons"
+      ref="addPersons"> <!-- to cast child method -->
+    </add-persons>
+  </div>
+
+
+  <div class="positions">
+    <div v-for="position in positions">
+      <h2>{{ position.label.fr }}</h2>
+      <ul>
+        <li 
+          v-for="person in personByPosition(position.id)"
+          draggable="true"
+          @dragstart="onStartDragConcern($event, person.id)"
+        >
+          {{ person.text }}, {{ person.id }}
+        </li>
+        <li
+          class="droppable"
+          @drop="onDropConcern($event, position.id)"
+          @dragover.prevent
+          @dragenter.prevent
+        >
+        </li>
+      </ul>
+    </div>
+  </div>
+
+
+</template>
+
+<style scoped>
+.concerned_box {
+  cursor: move;
+  padding: 1.5em;
+  border: 1px solid black;
+}
+.concerned_box * {
+  cursor: move;
+}
+.droppable_zone {
+  min-height: 50px;
+  width: 100%;
+  border: 1px solid black;
+}
+</style>
+
+<script>
+import { mapGetters } from 'vuex';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
+
+export default {
+  name: 'Concerned',
+  components: {
+    AddPersons,
+  },
+  computed: {
+    ...mapGetters([
+      'personsUnpositionned',
+      'positions',
+      'personByPosition',
+    ])
+  },
+  data() {
+    return {
+      addPersons: {
+        key: 'household_members_editor_concerned',
+        options: {
+          type: ['person'],
+            priority: null,
+            uniq: false,
+          }
+        }
+      }
+  },
+  methods: {
+    addNewPersons({ selected, modal }) {
+      console.log(selected);
+      selected.forEach(function(item) {
+        this.$store.dispatch('addConcerned', item.result);
+      }, this);
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      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.$store.dispatch('markPosition', { person_id, position_id });
+    }
+  }
+}
+</script>