From d4430246f766bf87133fb952b76f589f2058574f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 27 Aug 2021 11:17:30 +0200
Subject: [PATCH] hop

---
 .../components/Household.vue                  |  71 ++++-----
 .../_components/Entity/HouseholdRenderBox.vue | 144 ++++++++++--------
 2 files changed, 108 insertions(+), 107 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 23334a0f9..ca5447a29 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -96,11 +96,10 @@
   <div class="householdSuggestions">
     <div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
       <p>{{ $t('household_members_editor.household_for_participants_accompanying_period') }}:</p>
-      <div class="householdSuggestionList">
-        <div
-          v-for="h in filterHouseholdSuggestionByAccompanyingPeriod"
-          class="item"
-        >
+      <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">
@@ -117,43 +116,7 @@
 
 </template>
 
-<style lang="scss">
-
-div.householdAddressSuggestionList {
-  /*
-  display: flex;
-  list-style-type: none;
-  padding: 0;
-
-   */
-
-  & > li {
-
-  }
-}
-
-.householdSuggestionList {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  & > .item {
-    margin-bottom: 0.8rem;
-    width: calc(50% - 1rem);
-    border: 1px solid var(--chill-light-gray);
-    padding: 0.5rem 0.5rem 0 0.5rem;
-
-    ul.record_actions {
-      margin-bottom: 0;
-    }
-  }
-}
-
-</style>
-
 <script>
-
 import { mapGetters, mapState } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
@@ -272,3 +235,29 @@ export default {
 };
 
 </script>
+
+<style lang="scss">
+/*
+div.householdAddressSuggestionList {
+  display: flex;
+  list-style-type: none;
+  padding: 0;
+  & > li {}
+}
+.householdSuggestionList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  & > .item {
+    margin-bottom: 0.8rem;
+    width: calc(50% - 1rem);
+    border: 1px solid var(--chill-light-gray);
+    padding: 0.5rem 0.5rem 0 0.5rem;
+    ul.record_actions {
+      margin-bottom: 0;
+    }
+  }
+}
+*/
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
index 21734e7e8..741470b81 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
@@ -1,71 +1,56 @@
-<template>A
-  <section class="chill-entity entity-household">
-    <!-- identifier -->
-    <div v-if="isHouseholdNew()" class="identifier">
-      <i class="fa fa-home"></i>
-      {{ $t('new_household') }}
-    </div>
-    <div v-else class="identifier">
-      <i class="fa fa-home"></i>
-      {{ $t('household_number', { number: household.id } ) }}
-    </div>
+<template>
+   <section class="chill-entity entity-household">
+      <div class="item-row">
+         <div class="item-col">
 
-    <!-- member part -->
-    <div v-if="hasCurrentMembers" class="members">
-      <span class="current-members">{{ $t('current_members') }}: </span>
-      <template v-for="(m, index) in currentMembers()" :key="m.id">
-        <person :person="m.person"></person>
-        <span v-if="m.holder">
-          &nbsp;<span class="badge bg-primary">{{ $t('holder') }}</span>
-        </span>
-        <span v-if="index != (currentMembersLength() - 1)">, </span>
-      </template>
-    </div>
-    <div v-else class="members">
-      <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
-    </div>
+            <!-- identifier -->
+            <div v-if="isHouseholdNew()" class="identifier">
+               <i class="fa fa-home"></i>
+               {{ $t('new_household') }}
+            </div>
+            <div v-else class="identifier">
+               <i class="fa fa-home"></i>
+               {{ $t('household_number', { number: household.id } ) }}
+            </div>
 
-    <!-- address part -->
-    <div v-if="hasAddress()" class="where">
-      <i class="fa fa-where"></i>
-      <show-address :address="household.current_address"></show-address>
-    </div>
-    <div v-else class="where">
-      <i class="fa fa-where"></i>
-      <p class="chill-no-data-statement">{{ $t('no_current_address') }}</p>
-    </div>
-  </section>B
+         </div>
+         <div class="item-col">
+            <ul class="list-content fa-ul">
+
+               <!-- member part -->
+               <li v-if="hasCurrentMembers" class="members">
+                  <i class="fa fa-li fa-user" :title="$t('current_members')"></i>
+                  <template v-for="(m, index) in currentMembers()" :key="m.id">
+                     <person :person="m.person"></person>
+                     <span v-if="m.holder">
+                    &nbsp;<span class="badge bg-primary">{{ $t('holder') }}</span>
+                  </span>
+                     <span v-if="index != (currentMembersLength() - 1)">, </span>
+                  </template>
+               </li>
+               <li v-else class="members">
+                  <i class="fa fa-li fa-user" :title="$t('current_members')"></i>
+                  <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
+               </li>
+
+               <!-- address part -->
+               <li v-if="hasAddress()" class="where">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <show-address :address="household.current_address"></show-address>
+               </li>
+               <li v-else class="where">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <p class="chill-no-data-statement">{{ $t('no_current_address') }}</p>
+               </li>
+
+
+            </ul>
+         </div>
+      </div>
+   </section>
 </template>
 
-<style lang="scss">
-section.chill-entity {
-   &.entity-household {
-      display: grid;
-      grid-template-columns: auto auto 30%;
-      grid-template-areas:
-         "iden iden where"
-         "who  who  where";
-      .identifier {
-         grid-area: iden;
-         font-size: 1.3em;
-         font-weight: 700;
-         color: var(--chill-blue);
-      }
-      .members {
-         grid-area: who;
-         .current-members {
-            font-weight: 700;
-         }
-      }
-      .where {
-         grid-area: where
-      }
-   }
-}
-</style>
-
 <script>
-
 import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
 
@@ -82,8 +67,7 @@ const i18n = {
         "holder": "titulaire",
       }
   }
-}
-;
+};
 
 export default {
   name: 'Household',
@@ -126,5 +110,33 @@ export default {
     }
   }
 };
-
 </script>
+
+<style lang="scss">
+section.chill-entity {
+   &.entity-household {
+      .identifier {
+         //grid-area: iden;
+         font-size: 1.3em;
+         font-weight: 700;
+         color: var(--chill-blue);
+      }
+      /*
+      display: grid;
+      grid-template-columns: auto auto 30%;
+      grid-template-areas:
+         "iden iden where"
+         "who  who  where";
+      .members {
+         //grid-area: who;
+         .current-members {
+            font-weight: 700;
+         }
+      }
+      .where {
+         //grid-area: where
+      }
+      */
+   }
+}
+</style>