From 61488e98769ea726a636857ac5fbd9471076603e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 4 Oct 2021 15:02:07 +0200
Subject: [PATCH] WIP test filtering elements on household [household editor]

---
 .../components/Household.vue                  | 107 ++++++++----------
 1 file changed, 50 insertions(+), 57 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 12c8bf0dc..98cf71bb3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -2,14 +2,15 @@
 
   <h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2>
 
-  <div v-if="mode == null">
+  <div>
 
     <div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
 
     <div class="flex-table householdSuggestionList">
-      <div v-if="isModeNewAllowed" class="item-bloc">
+      <!-- mode new is allowed and no mode is checked -->
+      <div v-if="isModeNewAllowed && !isHouseholdNew" class="item-bloc">
         <div>
-          <section>
+          <section :class="{filtered: isHouseholdNewDesactivated}">
             <div class="item-row">
               <div class="item-col">
                 <div class="h4">
@@ -18,7 +19,7 @@
               </div>
             </div>
           </section>
-          <ul class="record_actions">
+          <ul :class="{filteredButActive: isHouseholdNewDesactivated}" class="record_actions">
             <li>
               <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
             </li>
@@ -26,10 +27,35 @@
         </div>
       </div>
 
+      <!-- mode new is allowed and checked -->
+      <div>
+        <div v-if="isModeNewAllowed && isHouseholdNew" class="item-bloc" >
+          <div>
+            <household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
+            <ul class="record_actions" v-if="isHouseholdNew">
+              <li>
+                <add-address
+                    :context="getAddressContext"
+                    :key="addAddress.key"
+                    :options="addAddress.options"
+                    :addressChangedCallback="addressChanged"
+                ></add-address>
+              </li>
+              <li v-if="hasHouseholdAddress">
+                <button class="btn btn-remove"
+                        @click="removeHouseholdAddress">
+                  {{ $t('household_members_editor.household.remove_address') }}
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
       <!-- if allow leave household -->
       <div v-if="isModeLeaveAllowed" class="item-bloc">
         <div>
-          <section>
+          <section :class="{filtered: isHouseholdNewDesactivated}">
             <div class="item-row">
               <div class="item-col">
                 <div class="h4">
@@ -45,7 +71,7 @@
              {{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
             </div>
           </section>
-          <ul class="record_actions">
+          <ul class="record_actions" :class="{filteredButActive: isHouseholdNewDesactivated}">
             <li>
               <button @click="setModeLeave" class="btn btn-sm">
                 <i class="fa fa-sign-out"></i>
@@ -71,57 +97,6 @@
     </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 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>
-        <ul class="record_actions" v-if="isHouseholdNew">
-          <li>
-            <add-address
-              :context="getAddressContext"
-              :key="addAddress.key"
-              :options="addAddress.options"
-              :addressChangedCallback="addressChanged"
-              ></add-address>
-          </li>
-          <li v-if="hasHouseholdAddress">
-            <button class="btn btn-remove"
-                    @click="removeHouseholdAddress">
-              {{ $t('household_members_editor.household.remove_address') }}
-            </button>
-          </li>
-        </ul>
-      </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>
@@ -190,6 +165,12 @@ export default {
       return false;
       return this.$store.state.allowHouseholdSearch && !this.$store.getters.hasHousehold;
     },
+    isHouseholdNewDesactivated() {
+      return this.$store.state.mode !== null && !this.$store.getters.isHouseholdNew;
+    },
+    isHouseholdLeaveDesactivated() {
+      return this.$store.state.mode !== null && this.$store.state.mode !== "leave";
+    }
   },
   methods: {
     setModeNew() {
@@ -218,6 +199,18 @@ export default {
 
 <style lang="scss">
 
+.filtered {
+  filter: grayscale(1) opacity(0.6);
+}
+
+.filteredButActive {
+
+  filter: grayscale(1) opacity(0.6);
+  &:hover {
+    filter: unset;
+  }
+}
+
 div#household_members_editor div,
 div.householdSuggestionList {
    &.flex-table {