vue_household_members_editor: address suggestions in bootstrap accordion style

+ store manage show/hide suggestions toggle (like householdSuggestions)

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

@@ -1,5 +1,5 @@
 <template>
-  <h2>{{ $t('household_members_editor.concerned.title') }}</h2>
+  <h2 class="mt-4">{{ $t('household_members_editor.concerned.title') }}</h2>
 
   <h3 v-if="needsPositionning">
     {{ $t('household_members_editor.concerned.persons_to_positionnate') }}

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

@@ -1,30 +1,71 @@
 <template>
-  <h2>{{ $t('household_members_editor.household_part') }}</h2>
+
+  <h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2>
 
   <div v-if="hasHousehold">
+
     <div class="flex-table">
        <div class="item-bloc">
           <household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
        </div>
     </div>
+
     <div v-if="isHouseholdNew && !hasHouseholdAddress">
 
-      <h3>{{ $t('household_members_editor.household.where_live_the_household') }}</h3>
+      <div v-if="hasAddressSuggestion" class="householdAddressSuggestion my-5">
-
+          <h4 class="mb-3">
-      <div v-if="filterAddressesSuggestion.length > 0" class="flex-table householdAddressSuggestionList">
+             {{ $t('household_members_editor.household.where_live_the_household') }}
-        <div v-for="a in filterAddressesSuggestion" class="item-bloc">
+          </h4>
-          <address-render-box :address="a"></address-render-box>
+          <div class="accordion" id="addressSuggestions">
-           <ul class="record_actions">
+             <div class="accordion-item">
-              <li>
+                <h2 class="accordion-header" id="heading_address_suggestions">
-                  <button class="btn btn-action" @click="setHouseholdAddress(a)">
+                   <button v-if="!showAddressSuggestion"
-                     {{ $t('household_members_editor.household.household_live_to_this_address') }}
+                      class="accordion-button collapsed"
-                  </button>
+                      type="button"
-               </li>
+                      data-bs-toggle="collapse"
-           </ul>
+                      aria-expanded="false"
-        </div>
+                      @click="toggleAddressSuggestion">
-      </div>
+                      {{ $tc('household_members_editor.show_household_suggestion', countAddressSuggestion) }}
-      <div v-else>
+                   </button>
-        <span class="chill-no-data-statement">{{ $t('household_members_editor.household.no_suggestions') }}</span>
+                   <button v-if="showAddressSuggestion"
+                      class="accordion-button"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      aria-expanded="true"
+                      @click="toggleAddressSuggestion">
+                      {{ $t('household_members_editor.hide_household_suggestion') }}
+                   </button>
+                </h2>
+                <div class="accordion-collapse" id="collapse_address_suggestions"
+                   aria-labelledby="heading_address_suggestions" data-bs-parent="#addressSuggestions">
+                   <div v-if="showAddressSuggestion">
+                      <div class="flex-table householdAddressSuggestionList">
+                         <div v-for="a in filterAddressesSuggestion" class="item-bloc">
+                            <div class="float-button bottom">
+                               <div class="box">
+                                  <div class="action">
+                                     <ul class="record_actions">
+                                        <li>
+                                           <button class="btn btn-sm btn-choose" @click="setHouseholdAddress(a)">
+                                              {{ $t('household_members_editor.household.household_live_to_this_address') }}
+                                           </button>
+                                        </li>
+                                     </ul>
+                                  </div>
+                                  <ul class="list-content fa-ul">
+                                     <li>
+                                        <i class="fa fa-li fa-map-marker"></i>
+                                        <address-render-box :address="a"></address-render-box>
+                                     </li>
+                                  </ul>
+                               </div>
+                            </div>
+                         </div>
+                      </div>
+                   </div>
+                </div>
+             </div>
+          </div>
       </div>
 
       <ul class="record_actions">
@@ -39,8 +80,8 @@
           </add-address>
         </li>
       </ul>
-
     </div>
+
     <div v-if="isHouseholdNew && hasHouseholdAddress">
       <ul class="record_actions">
         <li >
@@ -49,15 +90,13 @@
           </button>
         </li>
       </ul>
-
     </div>
+
   </div>
   <div v-else-if="isForceLeaveWithoutHousehold">
       {{ $t('household_members_editor.household.will_leave_any_household') }}
   </div>
-  <div v-else>
+  <div v-else class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
-    <div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
-  </div>
 
   <ul v-if="allowChangeHousehold" class="record_actions">
     <li v-if="allowHouseholdCreate">
@@ -82,14 +121,13 @@
     </li>
   </ul>
 
-   <div v-if="hasHouseholdSuggestion" class="my-5">
+   <div v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
       <h4 class="mb-3">
          {{ $t('household_members_editor.household_for_participants_accompanying_period') }} :
       </h4>
-
       <div class="accordion" id="householdSuggestions">
          <div class="accordion-item">
-            <h2 class="accordion-header" id="heading_suggestions">
+            <h2 class="accordion-header" id="heading_household_suggestions">
                <button v-if="!showHouseholdSuggestion"
                   class="accordion-button collapsed"
                   type="button"
@@ -98,7 +136,7 @@
                   @click="toggleHouseholdSuggestion">
                   {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
                </button>
-               <button v-if="showHouseholdSuggestion && hasHouseholdSuggestion"
+               <button v-if="showHouseholdSuggestion"
                   class="accordion-button"
                   type="button"
                   data-bs-toggle="collapse"
@@ -106,13 +144,11 @@
                   @click="toggleHouseholdSuggestion">
                   {{ $t('household_members_editor.hide_household_suggestion') }}
                </button>
-               <!-- disabled bootstrap behaviour:  data-bs-target="#collapse_suggestions" aria-controls="collapse_suggestions" -->
+               <!-- disabled bootstrap behaviour:  data-bs-target="#collapse_household_suggestions" aria-controls="collapse_household_suggestions" -->
             </h2>
-            <div class="accordion-collapse"
+            <div class="accordion-collapse" id="collapse_household_suggestions"
-               aria-labelledby="heading_suggestions"
+                 aria-labelledby="heading_household_suggestions" data-bs-parent="#householdSuggestions">
-               data-bs-parent="#householdSuggestions"
+               <div v-if="showHouseholdSuggestion">
-               id="collapse_suggestions">
-               <div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
                   <div class="flex-table householdSuggestionList">
                      <div v-for="h in filterHouseholdSuggestionByAccompanyingPeriod" class="item-bloc">
                         <household-render-box :household="h"></household-render-box>
@@ -132,6 +168,7 @@
    </div>
 
 </template>
+
 <script>
 import { mapGetters, mapState } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
@@ -164,12 +201,12 @@ export default {
           },
           button: {
             text:  {
-              create: null,
+              create: 'household_members_editor.household.or_create_new_address',
               edit: null,
             }
           },
           title: {
-            create: null,
+            create: 'household_members_editor.household.create_new_address',
             edit: null,
           },
         }
@@ -183,11 +220,14 @@ export default {
       'hasHouseholdSuggestion',
       'countHouseholdSuggestion',
       'filterHouseholdSuggestionByAccompanyingPeriod',
+      'hasAddressSuggestion',
+      'countAddressSuggestion',
       'filterAddressesSuggestion',
       'hasHouseholdAddress',
     ]),
     ...mapState([
       'showHouseholdSuggestion',
+      'showAddressSuggestion'
     ]),
     household() {
       return this.$store.state.household;
@@ -228,6 +268,9 @@ export default {
     toggleHouseholdSuggestion() {
       this.$store.commit('toggleHouseholdSuggestion');
     },
+    toggleAddressSuggestion() {
+      this.$store.commit('toggleAddressSuggestion');
+    },
     selectHousehold(h) {
       this.$store.dispatch('selectHousehold', h);
       this.toggleHouseholdSuggestion();
@@ -247,7 +290,7 @@ export default {
     },
     removeHouseholdAddress() {
       this.$store.commit('removeHouseholdAddress');
-    }
+    },
   },
 };
 

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

@@ -12,9 +12,11 @@ const appMessages = {
         will_leave_any_household: "Ne rejoignent pas de ménage",
         leave_without_household: "Sans nouveau ménage",
         where_live_the_household: "À quelle adresse habite ce ménage ?",
-        household_live_to_this_address: "Le ménage habite cette adresse",
+        household_live_to_this_address: "Sélectionner l'adresse",
         no_suggestions: "Aucune adresse à suggérer",
         delete_this_address: "Supprimer cette adresse",
+        create_new_address: "Créer une nouvelle adresse",
+        or_create_new_address: "Ou créer une nouvelle adresse",
       },
       concerned: {
         title: "Nouveaux membres du ménage",
@@ -37,7 +39,7 @@ const appMessages = {
       hide_household_suggestion: "Masquer les suggestions",
       show_household_suggestion: 'Aucune suggestion | Afficher une suggestion | Afficher {count} suggestions',
       household_for_participants_accompanying_period: "Des ménages partagent le même parcours",
-      select_household: "Sélectionner",
+      select_household: "Sélectionner le 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

@@ -36,6 +36,7 @@ const store = createStore({
     householdSuggestionByAccompanyingPeriod: [],
     showHouseholdSuggestion: window.household_members_editor_expand_suggestions === 1,
     addressesSuggestion: [],
+    showAddressSuggestion: true,
     warnings: [],
     errors: []
   },
@@ -73,6 +74,12 @@ const store = createStore({
         .filter(h => h.id !== state.household.id)
         ;
     },
+    hasAddressSuggestion(state, getters) {
+      return getters.filterAddressesSuggestion.length > 0;
+    },
+    countAddressSuggestion(state, getters) {
+      return getters.filterAddressesSuggestion.length;
+    },
     filterAddressesSuggestion(state) {
       if (state.household === null) {
         return state.addressesSuggestion;
@@ -260,6 +267,9 @@ const store = createStore({
     toggleHouseholdSuggestion(state) {
       state.showHouseholdSuggestion = !state.showHouseholdSuggestion;
     },
+    toggleAddressSuggestion(state) {
+      state.showAddressSuggestion = !state.showAddressSuggestion;
+    },
     setWarnings(state, warnings) {
       state.warnings = warnings;
       // reset errors, which should come from servers