finish merge (oups) + layout of household in members editor app

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/ShowAddress.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="chill_address_address chill_address_address--multiline">
    <div v-if="address.text">
       {{ address.text }}
    </div>
@@ -28,7 +29,8 @@
    </div>
    <div v-if="address.distribution">
       <span>{{ $t('distribution') }}</span>: {{ address.distribution }}
-   </div>
+    </div>
+  </div>
 </template>
 
 <script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue

@@ -1,13 +1,13 @@
 <template>
   <household></household>
-  <concerned></concerned>
-  <dates></dates>
-  <confirmation></confirmation>
+  <concerned v-if="hasHouseholdOrLeave"></concerned>
+  <dates v-if="showConfirm"></dates>
+  <confirmation v-if="showConfirm"></confirmation>
 </template>
 
 <script>
 
-import { mapState } from 'vuex';
+import { mapGetters } from 'vuex';
 import Concerned from './components/Concerned.vue';
 import Household from './components/Household.vue';
 import Dates from './components/Dates.vue';
@@ -22,11 +22,14 @@ export default {
     Confirmation,
   },
   computed: {
-    // for debugging purpose
-    // (not working)
-    //...mapState({
-    //  'concerned', 'household', 'positions'
-    //  })
+    ...mapGetters([
+      'hasHouseholdOrLeave',
+      'hasPersonsWellPositionnated',
+    ]),
+    showConfirm () {
+      return this.$store.getters.hasHouseholdOrLeave 
+        && this.$store.getters.hasPersonsWellPositionnated;
+    },
   }
 }
 

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

@@ -2,11 +2,8 @@
   <h2>{{ $t('household_members_editor.household_part') }}</h2>
 
   <div v-if="hasHousehold">
-    <span v-if="isHouseholdNew">
-      {{ $t('household_members_editor.household.new_household') }}
-    </span>
-    <div v-else>
-      Ménage existant 
+    <div>
+      <household-viewer :household="household"></household-viewer>
     </div>
   </div>
   <div v-else-if="isForceLeaveWithoutHousehold">
@@ -39,16 +36,20 @@
 <script>
 
 import { mapGetters } from 'vuex';
+import HouseholdViewer from 'ChillPersonAssets/vuejs/_components/Household/Household.vue';
 
 export default {
   name: 'Household',
+  components: {
+    HouseholdViewer,
+  },
   computed: {
     ...mapGetters([
       'hasHousehold',
       'isHouseholdNew',
     ]),
     household() {
-      return this.$store.household;
+      return this.$store.state.household;
     },
     allowHouseholdCreate() {
       return this.$store.state.allowHouseholdCreate;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js

@@ -23,8 +23,8 @@ const appMessages = {
       drop_persons_here: "Glissez-déposez ici les usagers pour la position \"{position}\"",
       all_positionnated: "Tous les usagers sont positionnés",
       holder: "Titulaire",
-      is_holder: "Sera titulaire",
-      is_not_holder: "Ne sera pas titulaire",
+      is_holder: "Est titulaire",
+      is_not_holder: "N'est pas titulaire",
       remove_position: "Retirer des {position}",
       remove_concerned: "Ne plus transférer",
       household_part: "Ménage de destination",

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

@@ -19,13 +19,22 @@ const store = createStore({
   state: {
     concerned,
     household: window.household_members_editor_data.household,
-    positions: window.household_members_editor_data.positions,
+    positions: window.household_members_editor_data.positions.sort((a, b) => {
+        if (a.ordering < b.ordering) {
+          return -1;
+        }
+        if (a.ordering > b.ordering) {
+          return 1;
+        }
+        return 0;
+      }),
     startDate: new Date(),
     allowHouseholdCreate: window.household_members_editor_data.allowHouseholdCreate,
     allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
     allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
     forceLeaveWithoutHousehold: false,
     warnings: [],
+    errors: []
   },
   getters: {
     isHouseholdNew(state) {
@@ -34,6 +43,13 @@ const store = createStore({
     hasHousehold(state) {
       return state.household !== null;
     },
+    hasHouseholdOrLeave(state) {
+      return state.household !== null || state.forceLeaveWithoutHousehold;
+    },
+    hasPersonsWellPositionnated(state, getters) {
+      return getters.needsPositionning === false
+        || (getters.persons.length > 0 && getters.concUnpositionned.length === 0);
+    },
     persons(state) { 
       return state.concerned.map(conc => conc.person);
     },
@@ -149,7 +165,7 @@ const store = createStore({
       )
     },
     createHousehold(state) {
-      state.household = { type: 'household', members: [], address: null }
+      state.household = { type: 'household', members: [], current_address: null }
       state.forceLeaveWithoutHousehold = false;
     },
     forceLeaveWithoutHousehold(state) {
@@ -161,6 +177,11 @@ const store = createStore({
     },
     setWarnings(state, warnings) {
       state.warnings = warnings;
+      // reset errors, which should come from servers
+      state.errors.splice(0, state.errors.length);
+    },
+    setErrors(state, errors) {
+      state.errors = errors;
     },
   },
   actions: {
@@ -172,8 +193,9 @@ const store = createStore({
       commit('markPosition', { person_id, position_id });
       dispatch('computeWarnings');
     },
-    toggleHolder({ commit }, conc) {
+    toggleHolder({ commit, dispatch }, conc) {
       commit('toggleHolder', conc);
+      dispatch('computeWarnings');
     },
     removePosition({ commit, dispatch }, conc) {
       commit('removePosition', conc);
@@ -191,8 +213,9 @@ const store = createStore({
       commit('forceLeaveWithoutHousehold');
       dispatch('computeWarnings');
     },
-    setStartDate({ commit }, date) {
+    setStartDate({ commit, dispatch }, date) {
       commit('setStartDate', date);
+      dispatch('computeWarnings');
     },
     setComment({ commit }, payload) {
       commit('setComment', payload);
@@ -216,19 +239,34 @@ const store = createStore({
 
       commit('setWarnings', warnings);
     },
-    confirm({ getters, state }) {
+    confirm({ getters, state, commit }) {
       let payload = getters.buildPayload,
+        errors = [],
         person_id,
-        household_id;
-      householdMove(payload).then(household => {
-        if (household === null) {
-          person_id = getters.persons[0].id;
-          window.location.replace(`/fr/person/${person_id}/general`);
-        } else {
-          household_id = household.id;
-          // nothing to do anymore here, bye-bye !
-          window.location.replace(`/fr/person/household/${household_id}/members`);
-        }
+        household_id,
+        error
+      ;
+
+        householdMove(payload).then(household => {
+          if (household === null) {
+            person_id = getters.persons[0].id;
+            window.location.replace(`/fr/person/${person_id}/general`);
+          } else {
+            if (household.type === 'household') {
+              household_id = household.id;
+              // nothing to do anymore here, bye-bye !
+              window.location.replace(`/fr/person/household/${household_id}/members`);
+            } else {
+              // we assume the answer was 422...
+              error = household;
+              for (let i in error.violations) {
+                let e = error.violations[i];
+                errors.push(e.title); 
+              }
+
+              commit('setErrors', errors);
+            }
+          }
       });
     },
   }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Household/Household.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="chill-entity chill-entity__household">
+    <!-- identifier -->
+    <div v-if="isHouseholdNew()" class="identifier">
+      <i class="fa fa-home"></i>
+      {{ $t('new_household') }}
+    </div>
+    <div v-else class="identifier">
+      <i class="fa fa-home"></i>
+      {{ $t('household_number', { number: household.id } ) }}
+    </div>
+
+    <!-- member part --> 
+    <div v-if="hasMembers" class="members">
+      <span class="current-members">{{ $t('current_members') }}: </span>
+      <template v-for="(m, index) in current_members()" :key="m.id">
+        <person :person="m.person"></person>
+        <span v-if="index != (current_members_length() - 1)">, </span>
+      </template>
+    </div>
+    <div v-else class="members">
+      <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
+    </div>
+
+    <!-- address part -->
+    <div v-if="hasAddress()" class="where">
+      <i class="fa fa-where"></i>
+      <show-address :address="household.current_address"></show-address>
+    </div>
+    <div v-else class="where">
+      <i class="fa fa-where"></i>
+      <p class="chill-no-data-statement">{{ $t('no_current_address') }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.chill-entity__household {
+  display: grid;
+  grid-template-areas: 
+    "identifier identifier where"
+    "who        who        where"
+    ;
+  grid-template-columns:
+    auto        auto       30%
+    ;
+
+  .identifier {
+    grid-area: identifier;
+    
+    font-size: 1.3em;
+    font-weight: 700;
+    color: var(--chill-blue);
+
+  }
+  .members {
+    grid-area: who;
+
+    .current-members {
+      font-weight: 700;
+    }
+  }
+  .where {
+    grid-area: where
+  }
+
+
+}
+</style>
+
+
+
+<script>
+
+import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/_components/ShowAddress.vue';
+
+const i18n = {
+  "messages":
+    {
+      "fr":
+      {
+        "household_number": "Ménage #{number}",
+        "current_members": "Membres actuels",
+        "no_current_address": "Sans adresse actuellement",
+        "new_household": "Nouveau ménage",
+        "no_members_yet": "Aucun membre actuellement",
+      }
+  }
+}
+;
+
+export default {
+  name: 'Household',
+  props: ['household'],
+  components: {
+    Person,
+    ShowAddress,
+  },
+  i18n,
+  methods: {
+    current_members() {
+      return this.household.members.filter(m => this.household.current_members_id.includes(m.id));
+    },
+    current_members_length() {
+      return this.household.current_members_id.length;
+    },
+    isHouseholdNew() {
+      return !Number.isInteger(this.household.id);
+    },
+    hasAddress() {
+      return this.household.current_address !== null;
+    }
+  }
+};
+
+</script>