From 337a6eb974b8beb11f3c37ba5585ef5aa6851b3f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 13 Sep 2021 13:29:37 +0200
Subject: [PATCH 1/4] vue_household_members_editor: toggle suggestion button
 out of conditionnal record_actions

---
 .../components/Household.vue                  | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
index ba77e2e18..f9c241dfe 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -60,23 +60,6 @@
   </div>
 
   <ul v-if="allowChangeHousehold" class="record_actions">
-    <li v-if="!showHouseholdSuggestion" class="cancel">
-      <button
-        class="btn btn-misc"
-        @click="toggleHouseholdSuggestion"
-      ><i class="fa fa-fw fa-caret-right"></i>
-        {{ $tc('household_members_editor.show_household_suggestion',
-          countHouseholdSuggestion) }}
-      </button>
-    </li>
-    <li v-if="showHouseholdSuggestion && hasHouseholdSuggestion" class="cancel">
-      <button
-        class="btn btn-misc"
-        @click="toggleHouseholdSuggestion"
-      ><i class="fa fa-fw fa-caret-down"></i>
-        {{ $t('household_members_editor.hide_household_suggestion') }}
-      </button>
-    </li>
     <li v-if="allowHouseholdCreate">
       <button class="btn btn-create" @click="createHousehold">
         {{ $t('household_members_editor.household.create_household') }}
@@ -99,6 +82,21 @@
     </li>
   </ul>
 
+  <ul class="record_actions">
+   <li v-if="!showHouseholdSuggestion" class="cancel">
+      <button class="btn btn-misc" @click="toggleHouseholdSuggestion">
+         <i class="fa fa-fw fa-caret-right"></i>
+         {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
+      </button>
+   </li>
+   <li v-if="showHouseholdSuggestion && hasHouseholdSuggestion" class="cancel">
+      <button class="btn btn-misc" @click="toggleHouseholdSuggestion">
+         <i class="fa fa-fw fa-caret-down"></i>
+         {{ $t('household_members_editor.hide_household_suggestion') }}
+      </button>
+   </li>
+   </ul>
+
   <div class="householdSuggestions">
     <div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
 
@@ -220,6 +218,7 @@ export default {
     },
     selectHousehold(h) {
       this.$store.dispatch('selectHousehold', h);
+      this.toggleHouseholdSuggestion();
     },
     removeHousehold() {
       this.$store.dispatch('removeHousehold');

From dc2f094ca269b0779d7f9ed12d22b5d10f909266 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 13 Sep 2021 14:03:07 +0200
Subject: [PATCH 2/4] vue_household_members_editor: suggestions in bootstrap
 accordion style

---
 .../components/Household.vue                  | 95 +++++++++++--------
 .../vuejs/HouseholdMembersEditor/js/i18n.js   |  2 +-
 2 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
index f9c241dfe..ec55484db 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -82,42 +82,54 @@
     </li>
   </ul>
 
-  <ul class="record_actions">
-   <li v-if="!showHouseholdSuggestion" class="cancel">
-      <button class="btn btn-misc" @click="toggleHouseholdSuggestion">
-         <i class="fa fa-fw fa-caret-right"></i>
-         {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
-      </button>
-   </li>
-   <li v-if="showHouseholdSuggestion && hasHouseholdSuggestion" class="cancel">
-      <button class="btn btn-misc" @click="toggleHouseholdSuggestion">
-         <i class="fa fa-fw fa-caret-down"></i>
-         {{ $t('household_members_editor.hide_household_suggestion') }}
-      </button>
-   </li>
-   </ul>
+   <div v-if="hasHouseholdSuggestion" class="my-5">
+      <h4 class="mb-3">
+         {{ $t('household_members_editor.household_for_participants_accompanying_period') }} :
+      </h4>
 
-  <div class="householdSuggestions">
-    <div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
-
-      <h3>{{ $t('household_members_editor.suggestions') }}</h3>
-      <p>{{ $t('household_members_editor.household_for_participants_accompanying_period') }}:</p>
-
-      <div class="flex-table householdSuggestionList">
-         <div v-for="h in filterHouseholdSuggestionByAccompanyingPeriod" class="item-bloc">
-          <household-render-box :household="h"></household-render-box>
-          <ul class="record_actions">
-            <li>
-              <button class="btn btn-sm btn-choose" @click="selectHousehold(h)">
-                {{ $t('household_members_editor.select_household') }}
-              </button>
-            </li>
-          </ul>
-        </div>
+      <div class="accordion" id="householdSuggestions">
+         <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_suggestions">
+               <button v-if="!showHouseholdSuggestion"
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  aria-expanded="false"
+                  @click="toggleHouseholdSuggestion">
+                  {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
+               </button>
+               <button v-if="showHouseholdSuggestion && hasHouseholdSuggestion"
+                  class="accordion-button"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  aria-expanded="true"
+                  @click="toggleHouseholdSuggestion">
+                  {{ $t('household_members_editor.hide_household_suggestion') }}
+               </button>
+               <!-- disabled bootstrap behaviour:  data-bs-target="#collapse_suggestions" aria-controls="collapse_suggestions" -->
+            </h2>
+            <div class="accordion-collapse"
+               aria-labelledby="heading_suggestions"
+               data-bs-parent="#householdSuggestions"
+               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>
+                        <ul class="record_actions">
+                           <li>
+                              <button class="btn btn-sm btn-choose" @click="selectHousehold(h)">
+                                 {{ $t('household_members_editor.select_household') }}
+                              </button>
+                           </li>
+                        </ul>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
       </div>
-
-    </div>
-  </div>
+   </div>
 
 </template>
 <script>
@@ -245,12 +257,15 @@ export default {
 
 div#household_members_editor div,
 div.householdSuggestionList {
-   &.flex-table div.item-bloc div.item-row div.item-col {
-      &:first-child {
-         width: 25%;
-      }
-      &:last-child {
-         display: initial;
+   &.flex-table {
+      margin: 0;
+      div.item-bloc div.item-row div.item-col {
+         &:first-child {
+            width: 25%;
+         }
+         &:last-child {
+            display: initial;
+         }
       }
    }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
index 794d664ca..7080728ec 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
@@ -36,7 +36,7 @@ const appMessages = {
       suggestions: "Suggestions",
       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",
+      household_for_participants_accompanying_period: "Des ménages partagent le même parcours",
       select_household: "Sélectionner",
       dates_title: "Période de validité",
       dates: {

From 6c61b2da3024dbba51f93714fc25cc41cbecd8a4 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 13 Sep 2021 12:56:20 +0200
Subject: [PATCH 3/4] translations

---
 .../Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
index 7080728ec..08a3d4f17 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
@@ -7,7 +7,7 @@ const appMessages = {
       household: {
         no_household_choose_one: "Aucun ménage de destination. Choisissez un ménage. Les usagers concernés par la modification apparaitront ensuite.",
         new_household: "Nouveau ménage",
-        create_household: "Créer un ménage de destination",
+        create_household: "Créer un nouveau ménage de destination",
         search_household: "Chercher un ménage",
         will_leave_any_household: "Ne rejoignent pas de ménage",
         leave_without_household: "Sans nouveau ménage",

From 7dc85b84743a73d7735b42e894597dcdfd48a8a7 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 13 Sep 2021 19:15:04 +0200
Subject: [PATCH 4/4] vue_household_members_editor: address suggestions in
 bootstrap accordion style

+ store manage show/hide suggestions toggle (like householdSuggestions)
---
 .../components/Concerned.vue                  |   2 +-
 .../components/Household.vue                  | 113 ++++++++++++------
 .../vuejs/HouseholdMembersEditor/js/i18n.js   |   6 +-
 .../HouseholdMembersEditor/store/index.js     |  10 ++
 4 files changed, 93 insertions(+), 38 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
index b8ca3be30..1d119ce40 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
+++ b/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') }}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
index ec55484db..d1aa166b2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/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="filterAddressesSuggestion.length > 0" class="flex-table householdAddressSuggestionList">
-        <div v-for="a in filterAddressesSuggestion" class="item-bloc">
-          <address-render-box :address="a"></address-render-box>
-           <ul class="record_actions">
-              <li>
-                  <button class="btn btn-action" @click="setHouseholdAddress(a)">
-                     {{ $t('household_members_editor.household.household_live_to_this_address') }}
-                  </button>
-               </li>
-           </ul>
-        </div>
-      </div>
-      <div v-else>
-        <span class="chill-no-data-statement">{{ $t('household_members_editor.household.no_suggestions') }}</span>
+      <div v-if="hasAddressSuggestion" class="householdAddressSuggestion my-5">
+          <h4 class="mb-3">
+             {{ $t('household_members_editor.household.where_live_the_household') }}
+          </h4>
+          <div class="accordion" id="addressSuggestions">
+             <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_address_suggestions">
+                   <button v-if="!showAddressSuggestion"
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      aria-expanded="false"
+                      @click="toggleAddressSuggestion">
+                      {{ $tc('household_members_editor.show_household_suggestion', countAddressSuggestion) }}
+                   </button>
+                   <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 class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
-  </div>
+  <div v-else class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</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"
-               aria-labelledby="heading_suggestions"
-               data-bs-parent="#householdSuggestions"
-               id="collapse_suggestions">
-               <div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
+            <div class="accordion-collapse" id="collapse_household_suggestions"
+                 aria-labelledby="heading_household_suggestions" data-bs-parent="#householdSuggestions">
+               <div v-if="showHouseholdSuggestion">
                   <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');
-    }
+    },
   },
 };
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
index 08a3d4f17..635f9788c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/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é",
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
index f66e68514..ce9ee9340 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
+++ b/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