From bb471fd4afc2fa006e1e26561bf950211dd43133 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 19 Aug 2021 18:56:38 +0200
Subject: [PATCH] AccompanyingCourse: fix errors with renderbox into Resources

---
 .../public/vuejs/AccompanyingCourse/App.vue   |  8 ++
 .../PersonsAssociated/ParticipationItem.vue   |  2 +-
 .../components/Resources/ResourceItem.vue     | 73 ++++++++-----------
 .../_components/Entity/PersonRenderBox.vue    | 60 ++++-----------
 .../Entity/ThirdPartyRenderBox.vue            | 58 ++++-----------
 5 files changed, 68 insertions(+), 133 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index d92f0abda..e621feead 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -98,6 +98,14 @@ export default {
             }
          }
 
+         div.flex-table {
+            div.item-row {
+               div.item-col:first-child {
+                  flex-basis: 33%;
+               }
+            }
+         }
+
          &.errors {
             //display: flex;
             //position: sticky;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index abdc28a55..aebde950a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -2,7 +2,7 @@
    <person-render-box
       :options="{
                addInfo : true,
-               addId : true,
+               addId : false,
                addEntity: false,
                addLink: false,
                addAltNames: true,
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
index 41e3c1507..ce92cf787 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -1,63 +1,54 @@
 <template>
-      <third-party-render-box
-         :options="{
-            addLink : false,
-            addId : false,
-            addEntity: true,
-            addInfo: true
-         }"
-         :thirdparty="resource.resource"
+   <person-render-box
+      v-if="resource.resource.type === 'person'"
+      :person="resource.resource"
+      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 1 }"
       >
-         <template v-slot:record-actions>
-            <ul class="record_actions">
-               <button-location
-                  v-if="hasCurrentHouseholdAddress"
-                  v-bind:person="participation.person">
-               </button-location>
-               <li>
-                  <on-the-fly
-                     v-bind:type="resource.resource.type"
-                     v-bind:id="resource.resource.id"
-                     action="show">
-                  </on-the-fly>
-               </li>
-               <li>
-                  <on-the-fly
-                     v-bind:type="resource.resource.type"
-                     v-bind:id="resource.resource.id"
-                     action="edit">
-                  </on-the-fly>
-               </li>
-               <li>
-                  <button
-                     class="btn btn-sm btn-remove"
-                     v-bind:title="$t('action.remove')"
-                     @click.prevent="$emit('remove', resource)">
-                  </button>
-               </li>
-            </ul>
-         </template>
-      </third-party-render-box>
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <button-location v-if="hasCurrentHouseholdAddress" :person="resource.resource"></button-location>
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit"></on-the-fly></li>
+            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+         </ul>
+      </template>
+
+   </person-render-box>
+   <third-party-render-box
+      v-if="resource.resource.type === 'thirdparty'"
+      :thirdparty="resource.resource"
+      :options="{ addLink : false, addId : false, addEntity: true, addInfo: true }"
+      >
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit"></on-the-fly></li>
+            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+         </ul>
+      </template>
+
+   </third-party-render-box>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
-import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue'
+import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 
 export default {
    name: 'ResourceItem',
    components: {
       OnTheFly,
       ButtonLocation,
+      PersonRenderBox,
       ThirdPartyRenderBox
    },
    props: ['resource'],
    emits: ['remove'],
    computed: {
       hasCurrentHouseholdAddress() {
-         if ( this.resource.resource.type === 'person'
-            && this.resource.resource.current_household_address !== null ) {
+         if ( this.resource.resource.current_household_address !== null ) {
             return true;
          }
          return false;
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 6c4a26bf0..bde9be461 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -1,50 +1,33 @@
 <template>
-    <div class="item-bloc">
+ <div class="item-bloc">
     <section class="chill-entity entity-person">
-    <!-- ENTIRE RENDER_BOX -->
     <div class="item-row entity-bloc">
 
-        <!-- LABEL -->
         <div  class="item-col">
             <div class="entity-label">
 
-                <!-- NAME TAG -->
-                <!-- todo: make h class dynamic -->
                 <div class="denomination h3">
-                
-                    <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
-                    <!-- todo: change href -->
-                    <a v-if="this.options.addLink ==  true" href="#">
+
+                   <a v-if="this.options.addLink ==  true" href="#">
                         <span class="firstname">{{ person.firstName }}</span>
                         <span class="lastname">{{ person.lastName }}</span>
-                        <!-- IF ALT NAMES -->
                         <span v-if="this.options.addAltNames ==  true" class="altnames">
-                            <!-- LOOP THROUGH ALT NAMES -->
                             <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
-                            <!-- END LOOP -->
                         </span>
                     </a>
 
-                    <!-- WITHOUT LINK JUST NAME -->
-                    <span class="firstname">{{ person.firstName }}</span>
-                    <span class="lastname">{{ person.lastName }}</span>
-                    <!-- IF ALT NAMES -->
-                    <span v-if="this.options.addAltNames ==  true" class="altnames">
-                        <!-- LOOP THROUGH ALT NAMES -->
-                        <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
-                        <!-- END LOOP -->
-                    </span>
+                   <span class="firstname">{{ person.firstName }}</span>
+                   <span class="lastname">{{ person.lastName }}</span>
+                   <span v-if="this.options.addAltNames ==  true" class="altnames">
+                       <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
+                   </span>
 
-                    <!-- IF ADD ENTITY OPTION -->
-                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
-                    <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+                   <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+                   <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
 
                 </div>
-                <!-- END NAME TAG -->
 
-                <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <!-- todo: change icon if person is deceased? -->
                     <i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
                     <time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
                         {{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
@@ -54,21 +37,15 @@
                     </time>
                     <span class="age">{{ person.age }}</span>
                 </p>
-                <!-- END BIRTH/DEATH AND AGE -->
             </div>
         </div>
-        <!-- END LABEL -->
 
-        <!-- CONTACT INFO AND ACTIONS-->
-        <div class="item-col">
+        <div class="item-col separator">
             <ul class="list-content fa-ul">
-                <!-- ADDRESS -->
                 <li v-if="person.current_household_address">
                     <i class="fa fa-li fa-map-marker"></i>
                     <show-address :address="person.current_household_address" :isMultiline="false"></show-address>
                 </li>
-                <!-- PHONENUMBER -->
-                <!-- todo: change href for phonenumbers and format phone number? -->
                 <li v-if="person.mobilenumber">
                     <i class="fa fa-li fa-mobile"></i>
                     <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
@@ -77,24 +54,17 @@
                     <i class="fa fa-li fa-phone"></i>
                     <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
                 </li>
-                <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
-                
             </ul>
-            <!-- END ADDRESS AND PHONE NUMBER -->
 
-            <!-- ACTION BUTTONS -->
             <slot name="record-actions"></slot>
-            <!-- END ACTIONS -->
         </div>
-        <!-- END CONTACT INFO AND ACTIONS -->
+
     </div>
     </section>
-    </div>
-
+ </div>
 </template>
 
 <script>
-// import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
 
@@ -129,16 +99,14 @@ export default {
                 return this.person.altNames[i].key
             }
         },
-    }  
+    }
 }
 </script>
 
 <style>
-
 .lastname:before{
     content: " "
 }
-
 </style>
 
 
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 bee724ebe..e9706cd4c 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -1,38 +1,24 @@
 <template>
-
-    <div class="item-bloc col">
+<div class="item-bloc col">
     <section class="chill-entity entity-thirdparty">
-    <!-- ENTIRE RENDER_BOX -->
     <div class="item-row entity-bloc">
 
-        <!-- LABEL -->
         <div  class="item-col">
             <div class="entity-label">
 
-                <!-- NAME TAG -->
-                <!-- todo: make h class dynamic -->
                 <div class="denomination h3">
-                
-                    <span v-if="options.addEntity ==  true && thirdparty.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
-                    <span v-if="options.addEntity ==  true && thirdparty.type == 'person'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.person') }}</span>
-                    <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
-                    <!-- todo: change href -->
+
                     <a v-if="this.options.addLink ==  true" href="#">
                         <span class="name">{{ thirdparty.text }}</span>
                     </a>
-                    <!-- WITHOUT LINK JUST NAME -->
                     <span class="name">{{ thirdparty.text }}</span>
-    
-                    <!-- IF ADD ENTITY OPTION -->
-                  
+
                     <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
+                    <span v-if="options.addEntity ==  true && thirdparty.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
 
                 </div>
-                <!-- END NAME TAG -->
 
-                <!-- EXTRA INFO -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <!-- todo: change icon if person is deceased? -->
                     <i v-if="thirdparty.birthdate" :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
                     <time v-if="thirdparty.birthdate" datetime="{{ thirdparty.birthdate.datetime }}" title="{{ birthdate }}">
                         {{ $t(getGender) + ' ' + $d(birthdate, 'short') }}
@@ -44,40 +30,29 @@
                 </p>
             </div>
         </div>
-        <!-- END LABEL -->
 
-        <!-- CONTACT INFO AND ACTIONS-->
-        <div class="item-col">
+        <div class="item-col separator">
             <ul class="list-content fa-ul">
-                <!-- ADDRESS -->
                 <li v-if="thirdparty.address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="thirdparty.address" :multiline="false"></show-address>
+                    <show-address :address="thirdparty.address" :isMultiline="false"></show-address>
                 </li>
-                <!-- PHONENUMBER -->
-                <!-- todo: change href for phonenumbers -->
-                <li>
+                <li v-if="thirdparty.telephone">
                     <i class="fa fa-li fa-mobile"></i>
-                    <a v-if="thirdparty.telephone" :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
-                    <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
+                    <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
                 </li>
-                <li v-if="thirdparty.type == 'thirdparty'">
+                <li v-if="thirdparty.email">
                     <i class="fa fa-li fa-envelope-o"></i>
-                    <a v-if="thirdparty.email" :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
-                    <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
+                    <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
                 </li>
-                
-            </ul>
-            <!-- END ADDRESS AND PHONE NUMBER -->
 
-            <!-- ACTION BUTTONS -->
+            </ul>
+
             <slot name="record-actions"></slot>
-            <!-- END ACTIONS -->
         </div>
-        <!-- END CONTACT INFO AND ACTIONS -->
     </div>
     </section>
-    </div>
+</div>
 
 </template>
 
@@ -111,18 +86,11 @@ export default {
 </script>
 
 <style lang="scss">
-
-.lastname{
-    &:before{
-        content: " "
-    }
-}
 .name{
     &:before{
         content: " "
     }
 }
-
 </style>