From 5fd7d869bf61c92e0507c433d8fe78237f724854 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 27 Aug 2021 15:49:49 +0200
Subject: [PATCH] Entity/PersonRenderBox.vue with render=badge

---
 .../Resources/public/vuejs/_js/i18n.js        |  3 +-
 .../components/Household.vue                  | 14 +++++-
 .../_components/Entity/HouseholdRenderBox.vue | 45 +++++++++----------
 .../_components/Entity/PersonRenderBox.vue    | 38 +++++++++++++++-
 4 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 63e0da95a..39bbd4cb1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -81,7 +81,8 @@ const messages = {
          type: {
             thirdparty: "Tiers",
             person: "Usager"
-         }
+         },
+         holder: "Titulaire"
       }
    }
 };
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 ca5447a29..4f093cf53 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -104,7 +104,7 @@
 
           <ul class="record_actions">
             <li>
-              <button class="btn btn-misc" @click="selectHousehold(h)">
+              <button class="btn btn-sm btn-misc" @click="selectHousehold(h)">
                 {{ $t('household_members_editor.select_household') }}
               </button>
             </li>
@@ -237,6 +237,18 @@ export default {
 </script>
 
 <style lang="scss">
+
+div.householdSuggestionList {
+   &.flex-table div.item-bloc div.item-row div.item-col {
+      &:first-child {
+         width: 25%;
+      }
+      &:last-child {
+         display: initial;
+      }
+   }
+}
+
 /*
 div.householdAddressSuggestionList {
   display: flex;
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 021f0976f..7207634b2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
@@ -4,51 +4,44 @@
          <div class="item-col">
 
             <!-- identifier -->
-            <div v-if="isHouseholdNew()" class="identifier">
+            <div v-if="isHouseholdNew()" class="h4">
                <i class="fa fa-home"></i>
                {{ $t('new_household') }}
             </div>
-            <div v-else class="identifier">
+            <div v-else class="h4">
                <i class="fa fa-home"></i>
                {{ $t('household_number', { number: household.id } ) }}
             </div>
 
          </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">
-                     <span v-if="m.holder">
-                    &nbsp;<span class="badge bg-primary">{{ $t('holder') }}</span>
-                  </span>
-                     <span v-if="index != (currentMembersLength() - 1)">, </span>
+               <div v-if="hasCurrentMembers" class="members" :title="$t('current_members')">
+                  <template v-for="m in currentMembers()" :key="m.id">
                      <person-render-box render="badge"
                        :person="m.person"
                        :options="{
+                          isHolder: m.holder,
+                          addLink: true
                        }">
                      </person-render-box>
                   </template>
-               </li>
-               <li v-else class="members">
-                  <i class="fa fa-li fa-user" :title="$t('current_members')"></i>
+               </div>
+               <div v-else class="members" :title="$t('current_members')">
                   <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
-               </li>
+               </div>
 
                <!-- 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>
+               <div v-if="hasAddress()" class="where">
+                  <i class="fa fa-fw fa-map-marker"></i>
+                  <show-address :address="household.current_address" isMultiline="false"></show-address>
+               </div>
+               <div v-else class="where">
+                  <i class="fa fa-fw fa-map-marker"></i>
+                  <span class="chill-no-data-statement">{{ $t('no_current_address') }}</span>
+               </div>
 
-
-            </ul>
          </div>
       </div>
    </section>
@@ -117,15 +110,17 @@ 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:
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index 9ee13b322..38d528d8b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -9,7 +9,7 @@
 
                 <div :class="'denomination h' + options.hLevel">
 
-                   <a v-if="this.options.addLink ==  true" href="#">
+                   <a v-if="this.options.addLink === true" :href="getUrl">
                         <span class="firstname">{{ person.firstName }}</span>
                         <span class="lastname">{{ person.lastName }}</span>
                         <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
@@ -88,6 +88,27 @@
     </div>
     </section>
   </div>
+
+  <span v-if="render === 'badge'"
+    class="chill-entity entity-person badge-person">
+
+     <a v-if="this.options.addLink === true" :href="getUrl">
+      <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
+        <i class="fa fa-circle fa-stack-1x text-success"></i>
+        <i class="fa fa-stack-1x">T</i>
+      </span>
+      {{ person.text }}
+    </a>
+
+    <span v-else>
+       <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
+        <i class="fa fa-circle fa-stack-1x text-success"></i>
+        <i class="fa fa-stack-1x">T</i>
+      </span>
+      {{ person.text }}
+    </span>
+
+  </span>
 </template>
 
 <script>
@@ -132,12 +153,26 @@ export default {
                 return this.person.altNames[i].key
             }
         },
+        getUrl() {
+           return `/fr/person/${this.person.id}/general`;
+        }
     }
 }
 </script>
 
 <style lang='scss'>
 
+span.fa-holder {
+   width: 1em;
+   margin: -10px 0.3em -8px 0;
+   i:last-child {
+      font-weight: 900;
+      color: white;
+      font-size: 70%;
+      font-family: "Open Sans Extrabold";
+   }
+}
+
 .lastname:before{
     content: " "
 }
@@ -150,6 +185,7 @@ div.flex-table {
          }
          div.item-col:last-child {
             justify-content: flex-start;
+
          }
       }
    }