WIP continue editor

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

@@ -1,12 +1,25 @@
 <template>
-  <h1>{{ $t('household_members_editor.concerned.title') }}</h1>
+  <h2>{{ $t('household_members_editor.concerned.title') }}</h2>
 
     <div>
-      <div v-for="person in personsUnpositionned" 
+      <div v-for="conc in concUnpositionned" 
+        v-bind:key="conc.person.id"
         draggable="true"
-        @dragstart="onStartDragConcern($event, person.id)"
+        @dragstart="onStartDragConcern($event, conc.person.id)"
       >
-        <span>{{ person.text }}</span>
+        <span>{{ conc.person.text }}</span>
+        <span>
+          {{ $t('household_members_editor.concerned.move_to') }}: 
+        </span>
+        <span 
+          v-for="position in positions" 
+          @click="moveToPosition(conc.person.id, position.id)"
+        >
+          {{ position.label.fr }}
+        </span>
+        <button v-if="conc.allowRemove" @click="removeConcerned(conc)">
+          {{ $t('household_members_editor.remove_concerned') }}
+        </button>
       </div>
     </div>
 
@@ -23,16 +36,19 @@
 
 
   <div class="positions">
-    <div v-for="position in positions">
+    <div 
+      v-for="position in positions"
+    >
       <h2>{{ position.label.fr }}</h2>
       <ul>
-        <li 
-          v-for="person in personByPosition(position.id)"
+        <member-details
+          v-for="conc in concByPosition(position.id)"
+          v-bind:key="conc.person.id"
+          v-bind:conc="conc"
           draggable="true"
-          @dragstart="onStartDragConcern($event, person.id)"
+          @dragstart="onStartDragConcern($event, conc.person.id)"
         >
-          {{ person.text }}, {{ person.id }}
-        </li>
+        </member-details>
         <li
           class="droppable"
           @drop="onDropConcern($event, position.id)"
@@ -65,18 +81,20 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import MemberDetails from './MemberDetails.vue';
 
 export default {
   name: 'Concerned',
   components: {
     AddPersons,
+    MemberDetails,
   },
   computed: {
     ...mapGetters([
-      'personsUnpositionned',
+      'concUnpositionned',
       'positions',
-      'personByPosition',
+      'concByPosition',
     ])
   },
   data() {
@@ -111,8 +129,15 @@ export default {
       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);
+    },
+    moveToPosition(person_id, position_id) {
       this.$store.dispatch('markPosition', { person_id, position_id });
-    }
+
+    },
+    removeConcerned(conc) {
+      this.$store.dispatch('removeConcerned', conc);
+    },
   }
 }
 </script>

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

@@ -0,0 +1,70 @@
+<template>
+  <h2>{{ $t('household_member_editor.household_part') }}</h2>
+
+  <div v-if="hasHousehold">
+    <span v-if="isHouseholdNew">
+      {{ $t('household_member_editor.new_household') }}
+    </span>
+    <div v-else>
+      Ménage existant 
+    </div>
+  </div>
+  <div v-else-if="isForceLeaveWithoutHousehold">
+      {{ $t('household_member_editor.will_leave_any_household') }}
+  </div>
+  <div v-else>
+    Aucun ménage
+  </div>
+
+  <button v-if="allowHouseholdCreate" class="sc-button bt-create" @click="createHousehold">
+    {{ $t('household_member_editor.create_household') }}
+  </button>
+  <button v-if="allowHouseholdSearch">
+    {{ $t('household_member_editor.search_household') }}
+  </button>
+  <button v-if="allowLeaveWithoutHousehold" @click="forceLeaveWithoutHousehold">
+    {{ $t('household_member_editor.leave_without_household') }}
+  </button>
+  
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'Household',
+  computed: {
+    ...mapGetters([
+      'hasHousehold',
+      'isHouseholdNew',
+    ]),
+    household() {
+      return this.$store.household;
+    },
+    allowHouseholdCreate() {
+      console.log('allowHouseholdcreate', this.$store.state.allowHouseholdCreate);
+      return this.$store.state.allowHouseholdCreate;
+    },
+    allowHouseholdSearch() {
+      console.log('allowHouseholdcreate', this.$store.state.allowHouseholdSearch);
+      return this.$store.state.allowHouseholdSearch;
+    },
+    allowLeaveWithoutHousehold() {
+      return this.$store.state.allowLeaveWithoutHousehold;
+    },
+    isForceLeaveWithoutHousehold() {
+      return this.$store.state.forceLeaveWithoutHousehold;
+    }
+  },
+  methods: {
+    createHousehold() {
+      this.$store.dispatch('createHousehold');
+    },
+    forceLeaveWithoutHousehold() {
+      this.$store.dispatch('forceLeaveWithoutHousehold');
+    }
+  },
+};
+
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <li>
+  <div>
+    <span>{{ conc.person.text }}</span>
+    <span v-if="conc.position.allowHolder">
+      <button class="badge badge-pill" :class="{ 'badge-primary': isHolder, 'badge-secondary': !isHolder}" @click="toggleHolder">
+         {{ $t('household_members_editor.holder') }}
+      </button>
+
+    </span>
+    <button @click="removePosition">
+      {{ $t('household_members_editor.remove_position', {position: conc.position.label.fr}) }}
+    </button>
+    <button @click="removeConcerned">
+      {{ $t('household_members_editor.remove_concerned') }}
+    </button>
+  </div>
+</li>
+</template>
+
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'MemberDetails',
+  props: [
+    'conc'
+  ],
+   computed: {
+     ...mapGetters( [
+       'concByPersonId'
+     ]),
+     isHolder() {
+        return this.conc.holder;
+      }
+   },
+  methods: {
+    toggleHolder() {
+      this.$store.dispatch('toggleHolder', this.conc); 
+    },
+    removePosition() {
+      this.$store.dispatch('removePosition', this.conc);
+    },
+    removeConcerned() {
+      this.$store.dispatch('removeConcerned', this.conc);
+    },
+  }
+
+};
+</script>