show household suggestion in household members editor

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