From 98b0b3beeb7ce0434ebb6256bb1f48a7e358ba9c Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 6 Sep 2021 15:49:15 +0200
Subject: [PATCH] applying floatbutton logic on person/thirdparty vue renderbox

---
 .../public/chill/scss/flex_table.scss         |  4 +-
 .../vuejs/AccompanyingCourse/js/i18n.js       |  2 +-
 .../_components/Entity/PersonRenderBox.vue    | 85 ++++++++++---------
 .../Entity/ThirdPartyRenderBox.vue            | 37 ++++----
 4 files changed, 70 insertions(+), 58 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
index 0f4dc3e8a..82ea0aa04 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
@@ -260,6 +260,8 @@ div.wrap-header {
 
 /*
 *  FLOATBUTTON
+*  pas convaincant:
+*    conflits avec les fa-ul > li, lien non cliquables, text qui ne se place pas correctement
 */
 
 div.floatbutton {
@@ -302,6 +304,6 @@ div.floatbutton {
 
     // avoid a position relative that make links unclickable
     .fa-ul > li {
-        position: initial;
+        //position: initial; // in conflict with picto fa-ul !!
     }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 1486ec956..9ce5eb8b8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -43,7 +43,7 @@ const appMessages = {
          add_persons: "Ajouter des usagers",
          date_start_to_end: "Participation du {start} au {end}",
          leave_course: "L'usager quitte le parcours",
-         show_household_number: "Voir le ménage n° {id}",
+         show_household_number: "Voir le ménage (n° {id})",
          show_household: "Voir le ménage"
       },
       requestor: {
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 d05b4ce99..adac402d9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -41,54 +41,59 @@
         </div>
 
         <div class="item-col">
-            <ul class="list-content fa-ul">
+           <div class="floatbutton bottom">
+              <div class="box">
+                 <div class="action">
+                    <slot name="record-actions"></slot>
+                 </div>
+                 <ul class="list-content fa-ul">
 
-                <li v-if="person.current_household_address">
-                   <i class="fa fa-li fa-map-marker"></i>
-                   <address-render-box :address="person.current_household_address" :isMultiline="isMultiline"></address-render-box>
-                   <a :href="getCurrentHouseholdUrl" :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
+                    <li v-if="person.current_household_address">
+                       <i class="fa fa-li fa-map-marker"></i>
+                       <address-render-box :address="person.current_household_address" :isMultiline="isMultiline"></address-render-box>
+                       <a :href="getCurrentHouseholdUrl" :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
                       <span class="badge rounded-pill bg-chill-beige">
                          <i class="fa fa-fw fa-home"></i>
                          <!--{{ $t('persons_associated.show_household') }}-->
                       </span>
-                   </a>
-                   <br>
-                </li>
-                <li v-else-if="options.addNoData">
-                    <i class="fa fa-li fa-map-marker"></i>
-                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                </li>
+                       </a>
+                       <br>
+                    </li>
+                    <li v-else-if="options.addNoData">
+                       <i class="fa fa-li fa-map-marker"></i>
+                       <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                    </li>
 
-                <li v-if="person.mobilenumber">
-                    <i class="fa fa-li fa-mobile"></i>
-                    <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
-                </li>
-                <li v-else-if="options.addNoData">
-                    <i class="fa fa-li fa-mobile"></i>
-                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                </li>
-                <li v-if="person.phonenumber">
-                    <i class="fa fa-li fa-phone"></i>
-                    <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
-                </li>
-                <li v-else-if="options.addNoData">
-                    <i class="fa fa-li fa-phone"></i>
-                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                </li>
+                    <li v-if="person.mobilenumber">
+                       <i class="fa fa-li fa-mobile"></i>
+                       <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
+                    </li>
+                    <li v-else-if="options.addNoData">
+                       <i class="fa fa-li fa-mobile"></i>
+                       <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                    </li>
+                    <li v-if="person.phonenumber">
+                       <i class="fa fa-li fa-phone"></i>
+                       <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
+                    </li>
+                    <li v-else-if="options.addNoData">
+                       <i class="fa fa-li fa-phone"></i>
+                       <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                    </li>
 
-                <li v-if="person.center && options.addCenter">
-                    <i class="fa fa-li fa-long-arrow-right"></i>
-                    {{ person.center.name }}
-                </li>
-                <li v-else-if="options.addNoData">
-                    <i class="fa fa-li fa-long-arrow-right"></i>
-                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                </li>
-                <slot name="custom-zone"></slot>
+                    <li v-if="person.center && options.addCenter">
+                       <i class="fa fa-li fa-long-arrow-right"></i>
+                       {{ person.center.name }}
+                    </li>
+                    <li v-else-if="options.addNoData">
+                       <i class="fa fa-li fa-long-arrow-right"></i>
+                       <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                    </li>
+                    <slot name="custom-zone"></slot>
 
-            </ul>
-
-            <slot name="record-actions"></slot>
+                 </ul>
+              </div>
+           </div>
         </div>
 
       </div>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
index f3a41e4e4..90dd51837 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -32,23 +32,28 @@
         </div>
 
         <div class="item-col">
-            <ul class="list-content fa-ul">
-                <li v-if="thirdparty.address">
-                    <i class="fa fa-li fa-map-marker"></i>
-                    <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
-                </li>
-                <li v-if="thirdparty.telephone">
-                    <i class="fa fa-li fa-mobile"></i>
-                    <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
-                </li>
-                <li v-if="thirdparty.email">
-                    <i class="fa fa-li fa-envelope-o"></i>
-                    <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
-                </li>
+           <div class="floatbutton bottom">
+              <div class="box">
+                 <div class="action">
+                    <slot name="record-actions"></slot>
+                 </div>
+                 <ul class="list-content fa-ul">
+                    <li v-if="thirdparty.address">
+                       <i class="fa fa-li fa-map-marker"></i>
+                       <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
+                    </li>
+                    <li v-if="thirdparty.telephone">
+                       <i class="fa fa-li fa-mobile"></i>
+                       <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                    </li>
+                    <li v-if="thirdparty.email">
+                       <i class="fa fa-li fa-envelope-o"></i>
+                       <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                    </li>
+                 </ul>
+              </div>
+           </div>
 
-            </ul>
-
-            <slot name="record-actions"></slot>
         </div>
     </div>
     </section>