show household suggestion in household members editor

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

@@ -23,6 +23,21 @@ const householdMove = (payload) => {
     });
 };
 
+const fetchHouseholdSuggestionByAccompanyingPeriod = (personId) => {
+  const url = `/api/1.0/person/household/suggest/by-person/${personId}/through-accompanying-period-participation.json`;
+  return window.fetch(url)
+    .then(response => {
+      if (response.ok) {
+        return response.json();
+      }
+
+      throw Error ({m: 'Error while fetching household suggestion', status: response.status});
+    }).then(data => Promise.resolve(data.results))
+    .catch(e => console.err(e));
+  ;
+};
+
 export { 
   householdMove,
+  fetchHouseholdSuggestionByAccompanyingPeriod,
 };

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

@@ -14,6 +14,23 @@
   </div>
 
   <ul v-if="allowChangeHousehold" class="record_actions">
+    <li v-if="!showHouseholdSuggestion">
+      <button
+        class="sc-button"
+        @click="toggleHouseholdSuggestion"
+      >
+        {{ $tc('household_members_editor.show_household_suggestion', 
+          countHouseholdSuggestion) }}
+      </button>
+    </li>
+    <li v-if="showHouseholdSuggestion">
+      <button
+        class="sc-button"
+        @click="toggleHouseholdSuggestion"
+      >
+        {{ $t('household_members_editor.hide_household_suggestion') }}
+      </button>
+    </li>
     <li v-if="allowHouseholdCreate">
       <button class="sc-button bt-create" @click="createHousehold">
         {{ $t('household_members_editor.household.create_household') }}
@@ -30,12 +47,56 @@
       </button>
     </li>
   </ul>
+
+  <div class="householdSuggestions">
+    <div v-if="showHouseholdSuggestion">
+      <p>{{ $t('household_members_editor.household_for_participants_accompanying_period') }}:</p>
+      <div class="householdSuggestionList">
+        <div
+          v-for="h in filterHouseholdSuggestionByAccompanyingPeriod"
+          class="item"
+        >
+          <household-viewer :household="h"></household-viewer>
+
+          <ul class="record_actions">
+            <li>
+              <button class="sc-button" @click="selectHousehold(h)">
+                {{ $t('household_members_editor.select_household') }}
+              </button>
+            </li>
+          </ul>
+        </div >
+      </div>
+    </div>
+  </div>
   
 </template>
 
+<style lang="scss">
+
+.householdSuggestionList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  & > .item {
+    margin-bottom: 0.8rem;
+    width: calc(50% - 1rem);
+    border: 1px solid var(--chill-light-gray);
+    padding: 0.5rem 0.5rem 0 0.5rem;
+
+    ul.record_actions {
+      margin-bottom: 0;
+    }
+  }
+}
+
+</style>
+
 <script>
 
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import HouseholdViewer from 'ChillPersonAssets/vuejs/_components/Household/Household.vue';
 
 export default {
@@ -47,6 +108,12 @@ export default {
     ...mapGetters([
       'hasHousehold',
       'isHouseholdNew',
+      'hasHouseholdSuggestion',
+      'countHouseholdSuggestion',
+      'filterHouseholdSuggestionByAccompanyingPeriod',
+    ]),
+    ...mapState([
+      'showHouseholdSuggestion',
     ]),
     household() {
       return this.$store.state.household;
@@ -74,6 +141,12 @@ export default {
     },
     forceLeaveWithoutHousehold() {
       this.$store.dispatch('forceLeaveWithoutHousehold');
+    },
+    toggleHouseholdSuggestion() {
+      this.$store.commit('toggleHouseholdSuggestion');
+    },
+    selectHousehold(h) {
+      this.$store.dispatch('selectHousehold', h);
     }
   },
 };

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

@@ -29,6 +29,10 @@ const appMessages = {
       remove_position: "Retirer des {position}",
       remove_concerned: "Ne plus transférer",
       household_part: "Ménage de destination",
+      hide_household_suggestion: "Masquer les suggestions",
+      show_household_suggestion: 'Aucune suggestion | Afficher une suggestion | Afficher {count} suggestions',
+      household_for_participants_accompanying_period: "Ces ménages partagent le même parcours",
+      select_household: "Choisir ce ménage",
       dates_title: "Période de validité",
       dates: {
         start_date: "Début de validité",

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

@@ -1,5 +1,5 @@
 import { createStore } from 'vuex';
-import { householdMove, householdMoveTest } from './../api.js';
+import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod } from './../api.js';
 import { datetimeToISO } from 'ChillMainAssets/js/date.js';
 
 const debug = process.env.NODE_ENV !== 'production';
@@ -33,11 +33,16 @@ const store = createStore({
     allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
     allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
     forceLeaveWithoutHousehold: false,
+    householdSuggestionByAccompanyingPeriod: [],
+    showHouseholdSuggestion: false,
     warnings: [],
     errors: []
   },
   getters: {
     isHouseholdNew(state) {
+      if (state.household === null) {
+        return false;
+      }
       return !Number.isInteger(state.household.id);
     },
     hasHousehold(state) {
@@ -46,6 +51,21 @@ const store = createStore({
     hasHouseholdOrLeave(state) {
       return state.household !== null || state.forceLeaveWithoutHousehold;
     },
+    hasHouseholdSuggestion(state, getters) {
+      return getters.filterHouseholdSuggestionByAccompanyingPeriod.length > 0;
+    },
+    countHouseholdSuggestion(state, getters) {
+      return getters.filterHouseholdSuggestionByAccompanyingPeriod.length;
+    },
+    filterHouseholdSuggestionByAccompanyingPeriod(state) {
+      if (state.household === null) {
+        return state.householdSuggestionByAccompanyingPeriod;
+      }
+
+      return state.householdSuggestionByAccompanyingPeriod
+        .filter(h => h.id !== state.household.id)
+        ;
+    },
     hasPersonsWellPositionnated(state, getters) {
       return getters.needsPositionning === false
         || (getters.persons.length > 0 && getters.concUnpositionned.length === 0);
@@ -172,9 +192,25 @@ const store = createStore({
       state.household = null;
       state.forceLeaveWithoutHousehold = true;
     },
+    selectHousehold(state, household) {
+      state.household = household;
+      state.forceLeaveWithoutHousehold = false;
+    },
+    setHouseholdSuggestionByAccompanyingPeriod(state, households) {
+      let existingIds = state.householdSuggestionByAccompanyingPeriod
+        .map(h => h.id);
+      for (let i in households) {
+        if (!existingIds.includes(households[i].id)) {
+          state.householdSuggestionByAccompanyingPeriod.push(households[i]);
+        }
+      }
+    },
     setStartDate(state, dateI) {
       state.startDate = dateI;
     },
+    toggleHouseholdSuggestion(state) {
+      state.showHouseholdSuggestion = !state.showHouseholdSuggestion;
+    },
     setWarnings(state, warnings) {
       state.warnings = warnings;
       // reset errors, which should come from servers
@@ -213,6 +249,10 @@ const store = createStore({
       commit('forceLeaveWithoutHousehold');
       dispatch('computeWarnings');
     },
+    selectHousehold({ commit }, h) {
+      commit('selectHousehold', h);
+      dispatch('computeWarnings');
+    },
     setStartDate({ commit, dispatch }, date) {
       commit('setStartDate', date);
       dispatch('computeWarnings');
@@ -220,6 +260,12 @@ const store = createStore({
     setComment({ commit }, payload) {
       commit('setComment', payload);
     },
+    fetchHouseholdSuggestionForConcerned({ commit, state }, person) {
+      fetchHouseholdSuggestionByAccompanyingPeriod(person.id)
+        .then(households => {
+          commit('setHouseholdSuggestionByAccompanyingPeriod', households);
+        });
+    },
     computeWarnings({ commit, state, getters }) {
       let warnings = [],
         payload;
@@ -274,4 +320,10 @@ const store = createStore({
 
 store.dispatch('computeWarnings');
 
+if (concerned.length > 0) {
+  concerned.forEach(c => {
+    store.dispatch('fetchHouseholdSuggestionForConcerned', c.person);
+  });
+}
+
 export { store };