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] 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: {