From 9cbac89cae9245eb43a7dd94e5364cf8239909e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Fri, 15 Oct 2021 17:43:28 +0200
Subject: [PATCH] handle leaving household

---
 .../vuejs/HouseholdMembersEditor/App.vue      | 27 +++++++-
 .../components/CurrentHousehold.vue           | 25 +++++++-
 .../components/Household.vue                  | 62 +++++++++++++++----
 .../vuejs/HouseholdMembersEditor/js/i18n.js   |  4 +-
 4 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
index c2112007f..52eac5ea6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
@@ -15,7 +15,7 @@
   <confirmation v-if="step === 'confirm'"></confirmation>
 
   <ul class="record_actions sticky-form-buttons">
-    <li class="cancel">
+    <li class="cancel" v-if="step !== 'concerned' || hasReturnPath">
       <button class="btn btn-cancel" @click="goToPrevious">
         {{ $t('household_members_editor.app.cancel') }}
       </button>
@@ -77,6 +77,11 @@ export default {
 
       return s;
     },
+    hasReturnPath() {
+      let params = new URLSearchParams(window.location.search);
+
+      return params.has('returnPath');
+    },
     // return true if the next step is allowed
     isNextAllowed() {
       switch (this.$data.step) {
@@ -105,6 +110,9 @@ export default {
           if (this.$store.getters.isHouseholdNew) {
             this.$data.step = 'household_address';
             break;
+          } else if (this.$store.getters.isModeLeave) {
+            this.$data.step = 'confirm';
+            break;
           } else {
             this.$data.step = 'positioning';
             break;
@@ -118,7 +126,22 @@ export default {
       }
     },
     goToPrevious() {
-      this.$data.step = 'concerned';
+      if (this.$data.step === 'concerned') {
+        let params = new URLSearchParams(window.location.search);
+        if (params.has('returnPath')) {
+          window.location.replace(params.get('returnPath'));
+        } else {
+          return;
+        }
+      }
+
+      let s = this.steps;
+      let index = s.indexOf(this.$data.step);
+      if (s[index - 1] === undefined) {
+        throw Error("step not found");
+      }
+
+      this.$data.step = s[index - 1];
     },
     confirm() {
       this.$store.dispatch('confirm');
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
index 01667eab7..1f76c8a5b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
@@ -4,10 +4,30 @@
       <household-render-box :household="fakeHouseholdWithConcerned"></household-render-box>
     </div>
   </div>
+  <div class="flex-table" v-if="isModeLeave">
+    <div class="item-bloc">
+      <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>
+    </div>
+  </div>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapGetters } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
 
 export default {
@@ -16,11 +36,10 @@ export default {
     HouseholdRenderBox,
   },
   computed: {
-    ...mapState([
-    ]),
     ...mapGetters([
         'hasHousehold',
         'fakeHouseholdWithConcerned',
+        'isModeLeave'
     ])
   }
 }
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 2e3f05976..2ce52c4e6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -9,21 +9,54 @@
     <current-household></current-household>
   </template>
 
-  <div class="flex-table householdSuggestionList">
-    <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 v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
+    <h4 class="mb-3">
+      {{ $t('household_members_editor.household.household_suggested') }}
+    </h4>
+    <p>{{ $t('household_members_editor.household.household_suggested_explanation') }}</p>
+    <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="s in getSuggestions" class="item-bloc">
+                <household-render-box :household="s.household"></household-render-box>
+                <ul class="record_actions">
+                  <li>
+                    <button class="btn btn-sm btn-choose" @click="selectHousehold(s.household)">
+                      {{ $t('household_members_editor.select_household') }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 
+
   <ul class="record_actions">
     <li v-if="hasHousehold">
       <button @click="resetMode" class="btn btn-sm btn-misc">{{ $t('household_members_editor.household.reset_mode')}}</button>
@@ -32,7 +65,7 @@
       <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
     </li>
     <li v-if="isModeLeaveAllowed && !hasHousehold">
-      <button @click="setModeLeave" class="btn btn-sm">
+      <button @click="setModeLeave" class="btn btn-sm btn-misc">
         <i class="fa fa-sign-out"></i>
         {{ $t('household_members_editor.household.leave') }}
       </button>
@@ -94,7 +127,7 @@ export default {
       'getAddressContext',
     ]),
     ...mapState([
-        'household',
+      'household',
       'showHouseholdSuggestion',
       'showAddressSuggestion',
       'mode',
@@ -136,6 +169,9 @@ export default {
     removeHouseholdAddress() {
       this.$store.commit('removeHouseholdAddress');
     },
+    toggleHouseholdSuggestion() {
+      this.$store.commit('toggleHouseholdSuggestion');
+    },
   },
 };
 
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 5db77da0b..7dfff9794 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
@@ -10,10 +10,12 @@ const appMessages = {
         create_household: "Créer",
         search_household: "Chercher un ménage",
         will_leave_any_household: "Les usagers ne rejoignent pas de ménage",
-        leave: "Quitter",
+        leave: "Quitter sans rejoindre un ménage",
         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",
         reset_mode: "Modifier la destination",
+        household_suggested: "Suggestions de ménage",
+        household_suggested_explanation: "Les ménages suivants sont connus et pourraient peut-être correspondre à des ménages recherchés."
         // remove ?
         /*
         where_live_the_household: "À quelle adresse habite ce ménage ?",