From 704ec76ca43c5d1bd9326e6d0f03419c8022ace1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Tue, 28 Sep 2021 21:35:41 +0200
Subject: [PATCH] rewrite the destination for household / leave household

---
 .../components/Household.vue                  | 285 +++++++-----------
 .../vuejs/HouseholdMembersEditor/js/i18n.js   |   9 +-
 .../HouseholdMembersEditor/store/index.js     |  54 ++++
 3 files changed, 165 insertions(+), 183 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 bdbacf2bd..51b86fefa 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -2,171 +2,110 @@
 
   <h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2>
 
-  <div v-if="hasHousehold">
+  <div v-if="mode == null">
 
-    <div class="flex-table">
-       <div class="item-bloc">
-          <household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
-       </div>
-    </div>
+    <div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
 
-    <div v-if="isHouseholdNew && !hasHouseholdAddress">
-
-      <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 class="flex-table householdSuggestionList">
+      <div v-if="isModeNewAllowed" class="item-bloc">
+        <div>
+          <section>
+            <div class="item-row">
+              <div class="item-col">
+                <div class="h4">
+                  <i class="fa fa-home"></i> {{ $t('household_members_editor.household.new_household') }}
                 </div>
-             </div>
+              </div>
+            </div>
+          </section>
+          <ul class="record_actions">
+            <li>
+              <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- if allow leave household -->
+      <div v-if="isModeLeaveAllowed" class="item-bloc">
+        <div>
+          <section>
+            <div class="item-row">
+              <div class="item-col">
+                <div class="h4">
+                  <span class="fa-stack fa-lg">
+                     <i class="fa fa-home fa-stack-1x"></i>
+                     <i class="fa fa-ban fa-stack-2x text-danger"></i>
+                  </span>
+                   {{ $t('household_members_editor.household.leave_without_household') }}
+                </div>
+              </div>
+            </div>
+            <div class="item-row">
+             {{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
+            </div>
+          </section>
+          <ul class="record_actions">
+            <li>
+              <button @click="setModeLeave" class="btn btn-sm">
+                <i class="fa fa-sign-out"></i>
+                {{ $t('household_members_editor.household.leave') }}
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div v-for="item in getSuggestions">
+          <div class="item-bloc">
+            <household-render-box :household="item.household"></household-render-box>
+            <ul class="record_actions">
+              <li>
+                <button class="btn btn-sm btn-choose" @click="selectHousehold(item.household)">
+                  {{ $t('household_members_editor.select_household') }}
+                </button>
+              </li>
+            </ul>
           </div>
       </div>
-
-      <ul class="record_actions">
-        <li >
-          <add-address
-              :context="addAddress.context"
-              :key="addAddress.key"
-              :options="addAddress.options"
-              :result="addAddress.result"
-              @addressChangedCallback="setHouseholdCreatedAddress"
-              ref="addAddress">
-          </add-address>
-        </li>
-      </ul>
     </div>
-
-    <div v-if="isHouseholdNew && hasHouseholdAddress">
-      <ul class="record_actions">
-        <li >
-          <button class="btn btn-misc" @click="removeHouseholdAddress">
-             {{ $t('household_members_editor.household.delete_this_address') }}
-          </button>
-        </li>
-      </ul>
-    </div>
-
   </div>
-  <div v-else-if="isForceLeaveWithoutHousehold">
-      {{ $t('household_members_editor.household.will_leave_any_household') }}
-  </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">
-      <button class="btn btn-create" @click="createHousehold">
-        {{ $t('household_members_editor.household.create_household') }}
-      </button>
-    </li>
-    <li v-if="allowHouseholdSearch">
-      <button class="btn btn-misc">
-        <i class="fa fa-search"></i>{{ $t('household_members_editor.household.search_household') }}
-      </button>
-    </li>
-    <li v-if="allowLeaveWithoutHousehold" >
-      <button @click="forceLeaveWithoutHousehold" class="btn btn-orange">
-        <i class="fa fa-sign-out"></i>{{ $t('household_members_editor.household.leave_without_household') }}
-      </button>
-    </li>
-    <li v-if="allowRemoveHousehold">
-      <button @click="removeHousehold" class="btn">
-        {{ $t('household_members_editor.household.change') }}
-      </button>
-    </li>
-  </ul>
-
-   <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_household_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"
-                  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 v-else>
+    <div class="flex-table">
+      <div class="item-bloc">
+        <template v-if="isModeLeave">
+          <section>
+            <div class="item-row">
+              <div class="item-col">
+                <div class="h4">
+                <span class="fa-stack fa-lg">
+                   <i class="fa fa-home fa-stack-1x"></i>
+                   <i class="fa fa-ban fa-stack-2x text-danger"></i>
+                </span>
+                  {{ $t('household_members_editor.household.leave_without_household') }}
+                </div>
+              </div>
             </div>
-         </div>
-      </div>
-   </div>
+            <div class="item-row">
+              {{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
+            </div>
+          </section>
+      </template>
+      <template v-else>
+        <household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
+      </template>
+    </div>
 
+    <ul v-if="isModeNewAllowed || isModeLeaveAllowed || getModeSuggestions.length > 0" class="record_actions">
+      <li>
+        <button class="btn btn-sm btn-chill-beige" @click="resetMode">
+          {{ $t('household_members_editor.household.reset_mode') }}
+        </button>
+      </li>
+    </ul>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -214,6 +153,9 @@ export default {
   },
   computed: {
     ...mapGetters([
+      'isModeNewAllowed',
+      'isModeLeaveAllowed',
+      'getSuggestions',
       'hasHousehold',
       'isHouseholdNew',
       'hasHouseholdSuggestion',
@@ -223,47 +165,31 @@ export default {
       'countAddressSuggestion',
       'filterAddressesSuggestion',
       'hasHouseholdAddress',
+      'isModeLeave'
     ]),
     ...mapState([
       'showHouseholdSuggestion',
-      'showAddressSuggestion'
+      'showAddressSuggestion',
+      'mode',
     ]),
     household() {
       return this.$store.state.household;
     },
-    allowHouseholdCreate() {
-      return this.$store.state.allowHouseholdCreate && !this.$store.getters.hasHousehold;
-    },
     allowHouseholdSearch() {
       return false;
       return this.$store.state.allowHouseholdSearch && !this.$store.getters.hasHousehold;
     },
-    allowLeaveWithoutHousehold() {
-      return this.$store.state.allowLeaveWithoutHousehold && !this.$store.getters.hasHousehold;
-    },
-    allowRemoveHousehold() {
-      return this.$store.getters.hasHousehold &&
-        (
-          this.allowHouseholdCreate || this.allowHouseholdSearch ||
-            this.allowLeaveWithoutHousehold
-        )
-      ;
-    },
-    allowChangeHousehold() {
-      return this.allowHouseholdCreate || this.allowHouseholdSearch ||
-        this.allowLeaveWithoutHousehold;
-    },
-    isForceLeaveWithoutHousehold() {
-      return this.$store.state.forceLeaveWithoutHousehold;
-    }
   },
   methods: {
-    createHousehold() {
+    setModeNew() {
       this.$store.dispatch('createHousehold');
     },
-    forceLeaveWithoutHousehold() {
+    setModeLeave() {
       this.$store.dispatch('forceLeaveWithoutHousehold');
     },
+    resetMode() {
+      this.$store.commit('resetMode');
+    },
     toggleHouseholdSuggestion() {
       this.$store.commit('toggleHouseholdSuggestion');
     },
@@ -272,7 +198,6 @@ export default {
     },
     selectHousehold(h) {
       this.$store.dispatch('selectHousehold', h);
-      this.toggleHouseholdSuggestion();
     },
     removeHousehold() {
       this.$store.dispatch('removeHousehold');
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 635f9788c..da147ab75 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
@@ -7,9 +7,11 @@ 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 nouveau ménage de destination",
+        create_household: "Créer",
         search_household: "Chercher un ménage",
-        will_leave_any_household: "Ne rejoignent pas de ménage",
+        will_leave_any_household: "Les usagers ne rejoignent pas de ménage",
+        leave: "Quitter",
+        will_leave_any_household_explanation: "Les usagers quitteront leur ménage actuel, et ne seront pas associés à un autre ménage. Par ailleurs, ils seront enregistrés comme étant sans adresse connue.",
         leave_without_household: "Sans nouveau ménage",
         where_live_the_household: "À quelle adresse habite ce ménage ?",
         household_live_to_this_address: "Sélectionner l'adresse",
@@ -17,6 +19,7 @@ const appMessages = {
         delete_this_address: "Supprimer cette adresse",
         create_new_address: "Créer une nouvelle adresse",
         or_create_new_address: "Ou créer une nouvelle adresse",
+        reset_mode: "Modifier la destination",
       },
       concerned: {
         title: "Nouveaux membres du ménage",
@@ -34,7 +37,7 @@ const appMessages = {
       is_not_holder: "N'est pas titulaire",
       remove_position: "Retirer des {position}",
       remove_concerned: "Ne plus transférer",
-      household_part: "Ménage de destination",
+      household_part: "Destination",
       suggestions: "Suggestions",
       hide_household_suggestion: "Masquer les suggestions",
       show_household_suggestion: 'Aucune suggestion | Afficher une suggestion | Afficher {count} suggestions',
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 ce9ee9340..2cfe0055b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
@@ -29,6 +29,15 @@ const store = createStore({
         return 0;
       }),
     startDate: new Date(),
+    /**
+     * Indicates if the destination is:
+     *
+     * * "new" => a new household
+     * * "existing" => an existing household
+     * * "leave" => leave without household
+     * * null if not set
+     */
+    mode: window.household_members_editor_data.household === null ? null : "existing",
     allowHouseholdCreate: window.household_members_editor_data.allowHouseholdCreate,
     allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
     allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
@@ -41,11 +50,48 @@ const store = createStore({
     errors: []
   },
   getters: {
+    /**
+     * return true if this page allow to create a new household
+     *
+     * @returns {boolean}
+     */
+    isModeNewAllowed(state) {
+      return state.allowHouseholdCreate;
+    },
+    /**
+     * return true if this page allow to "leave without household"
+     *
+     * @returns {boolean}
+     */
+    isModeLeaveAllowed(state) {
+      return state.allowLeaveWithoutHousehold;
+    },
+    /**
+     * return true if the mode "leave" is selected
+     *
+     * @returns {boolean}
+     */
+    isModeLeave(state) {
+      return state.mode === "leave";
+    },
+    getSuggestions(state) {
+      let suggestions = [];
+      state.householdSuggestionByAccompanyingPeriod.forEach(h => {
+        console.log(h);
+        suggestions.push({household: h});
+      });
+
+      return suggestions;
+    },
     isHouseholdNew(state) {
+      return state.mode === "new";
+    /*
       if (state.household === null) {
         return false;
       }
       return !Number.isInteger(state.household.id);
+
+     */
     },
     hasHouseholdAddress(state) {
       if (null === state.household) {
@@ -180,6 +226,11 @@ const store = createStore({
     },
   },
   mutations: {
+    resetMode(state) {
+      state.mode = null;
+      state.household = null;
+      state.forceLeaveWithoutHousehold = false;
+    },
     addConcerned(state, person) {
       let persons = state.concerned.map(conc => conc.person.id);
       if (!persons.includes(person.id)) {
@@ -222,6 +273,7 @@ const store = createStore({
         current_address: null,
         current_members_id: []
       };
+      state.mode = "new";
       state.forceLeaveWithoutHousehold = false;
     },
     removeHousehold(state) {
@@ -246,10 +298,12 @@ const store = createStore({
     },
     forceLeaveWithoutHousehold(state) {
       state.household = null;
+      state.mode = "leave";
       state.forceLeaveWithoutHousehold = true;
     },
     selectHousehold(state, household) {
       state.household = household;
+      state.mode = "existing";
       state.forceLeaveWithoutHousehold = false;
     },
     setHouseholdSuggestionByAccompanyingPeriod(state, households) {