Merge branch 'household_integration'

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,34 +90,15 @@
           </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="!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,29 +121,54 @@
     </li>
   </ul>
 
-  <div class="householdSuggestions">
+   <div v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
-    <div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
+      <h4 class="mb-3">
-
+         {{ $t('household_members_editor.household_for_participants_accompanying_period') }} :
-      <h3>{{ $t('household_members_editor.suggestions') }}</h3>
+      </h4>
-      <p>{{ $t('household_members_editor.household_for_participants_accompanying_period') }}:</p>
+      <div class="accordion" id="householdSuggestions">
-
+         <div class="accordion-item">
-      <div class="flex-table householdSuggestionList">
+            <h2 class="accordion-header" id="heading_household_suggestions">
-         <div v-for="h in filterHouseholdSuggestionByAccompanyingPeriod" class="item-bloc">
+               <button v-if="!showHouseholdSuggestion"
-          <household-render-box :household="h"></household-render-box>
+                  class="accordion-button collapsed"
-          <ul class="record_actions">
+                  type="button"
-            <li>
+                  data-bs-toggle="collapse"
-              <button class="btn btn-sm btn-choose" @click="selectHousehold(h)">
+                  aria-expanded="false"
-                {{ $t('household_members_editor.select_household') }}
+                  @click="toggleHouseholdSuggestion">
-              </button>
+                  {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
-            </li>
+               </button>
-          </ul>
+               <button v-if="showHouseholdSuggestion"
-        </div>
+                  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_household_suggestions" aria-controls="collapse_household_suggestions" -->
+            </h2>
+            <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>
+                        <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>
 import { mapGetters, mapState } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
@@ -154,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,
           },
         }
@@ -173,11 +220,14 @@ export default {
       'hasHouseholdSuggestion',
       'countHouseholdSuggestion',
       'filterHouseholdSuggestionByAccompanyingPeriod',
+      'hasAddressSuggestion',
+      'countAddressSuggestion',
       'filterAddressesSuggestion',
       'hasHouseholdAddress',
     ]),
     ...mapState([
       'showHouseholdSuggestion',
+      'showAddressSuggestion'
     ]),
     household() {
       return this.$store.state.household;
@@ -218,8 +268,12 @@ export default {
     toggleHouseholdSuggestion() {
       this.$store.commit('toggleHouseholdSuggestion');
     },
+    toggleAddressSuggestion() {
+      this.$store.commit('toggleAddressSuggestion');
+    },
     selectHousehold(h) {
       this.$store.dispatch('selectHousehold', h);
+      this.toggleHouseholdSuggestion();
     },
     removeHousehold() {
       this.$store.dispatch('removeHousehold');
@@ -236,7 +290,7 @@ export default {
     },
     removeHouseholdAddress() {
       this.$store.commit('removeHouseholdAddress');
-    }
+    },
   },
 };
 
@@ -246,12 +300,15 @@ export default {
 
 div#household_members_editor div,
 div.householdSuggestionList {
-   &.flex-table div.item-bloc div.item-row div.item-col {
+   &.flex-table {
-      &:first-child {
+      margin: 0;
-         width: 25%;
+      div.item-bloc div.item-row div.item-col {
-      }
+         &:first-child {
-      &:last-child {
+            width: 25%;
-         display: initial;
+         }
+         &:last-child {
+            display: initial;
+         }
       }
    }
 }

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

@@ -7,14 +7,16 @@ 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",
         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",
@@ -36,8 +38,8 @@ 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",
+      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