Merge branch 'ameliorations_composants_vue' into improve_ux

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;

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,
@@ -13,6 +13,10 @@
 
       <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="participation.person.type"
@@ -39,23 +43,13 @@
                   v-bind:title="$t('action.remove')"
                   @click.prevent="$emit('close', participation)">
                </button>
-               <button v-else class="btn btn-sm btn-remove disabled"></button>
+               <button v-else
+                  class="btn btn-sm btn-remove disabled"></button>
             </li>
          </ul>
 
       </template>
    </person-render-box>
-
-   <!-- dates of participation
-      <tr>
-         <td><span v-if="participation.startDate">
-             {{ $d(participation.startDate.datetime, 'short') }}</span>
-         </td>
-         <td><span v-if="participation.endDate">
-             {{ $d(participation.endDate.datetime, 'short') }}</span>
-         </td>
-      </tr>
-   -->
 </template>
 
 <script>
@@ -95,4 +89,23 @@ export default {
       }
    }
 }
+
+/*
+ *  dates of participation
+ *
+ *   :title="$t('persons_associated.date_start_to_end', {
+ *      start: $d(participation.startDate.datetime, 'short'),
+ *      end: $d(participation.endDate.datetime, 'short')
+ *   })"
+ *
+ *   <tr>
+ *      <td><span v-if="participation.startDate">
+ *          {{ $d(participation.startDate.datetime, 'short') }}</span>
+ *      </td>
+ *      <td><span v-if="participation.endDate">
+ *          {{ $d(participation.endDate.datetime, 'short') }}</span>
+ *      </td>
+ *   </tr>
+ *
+*/
 </script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -9,9 +9,30 @@
          <input type="checkbox" v-model="isAnonymous" class="me-2" />
          {{ $t('requestor.is_anonymous') }}
       </label>
-
-      <div class="item-bloc">
-         <h4>
+      
+      <!-- <div class="flex-bloc row row-cols-1 g-0"> -->
+      <third-party-render-box v-if="accompanyingCourse.requestor.type == 'thirdparty'"
+         :thirdparty="accompanyingCourse.requestor"
+         :options="{
+            addLink: false,
+            addId: false,
+            addEntity: true,
+            addInfo: true
+            }"
+      ></third-party-render-box>
+      <person-render-box v-else-if="accompanyingCourse.requestor.type == 'person'"
+         :person="accompanyingCourse.requestor"
+         :options="{
+            addLink: false,
+            addId: false,
+            addAltNames: false,
+            addEntity: true,
+            addInfo: true
+            }"
+      ></person-render-box>
+      
+      <!-- </div> -->
+         <!-- <h4>
             <span class="badge rounded-pill bg-secondary">{{ accompanyingCourse.requestor.type }}</span>
             {{ accompanyingCourse.requestor.text }}
          </h4>
@@ -54,8 +75,8 @@
                   action="edit">
                </on-the-fly>
             </li>
-         </ul>
-      </div>
+         </ul> -->
+
       <ul class="record_actions">
          <li>
             <button class="btn btn-remove"
@@ -87,12 +108,16 @@
 <script>
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
+import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 
 export default {
    name: 'Requestor',
    components: {
       AddPersons,
-      OnTheFly
+      OnTheFly,
+      PersonRenderBox,
+      ThirdPartyRenderBox,
    },
    data() {
       return {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -1,59 +1,54 @@
 <template>
-      <third-party-render-box
-         :options="{
-            addLink : false,
-            addId : false,
-            addEntity: true,
-            addInfo: true
-         }"
-         :thirdparty="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" :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>
 
-         <template v-slot:record-actions>
-            <ul class="record_actions">
-               <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>
+   </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;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -41,6 +41,7 @@ const appMessages = {
          startdate: "Date d'entrée",
          enddate: "Date de sortie",
          add_persons: "Ajouter des usagers",
+         date_start_to_end: "Participation du {start} au {end}",
       },
       requestor: {
          title: "Demandeur",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -1,51 +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') }}
@@ -55,47 +37,34 @@
                     </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="this.person.mobilenumber">
+                <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="this.person.phonenumber">
+                <li v-else-if="person.phonenumber">
                     <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';
 
@@ -130,16 +99,14 @@ export default {
                 return this.person.altNames[i].key
             }
         },
-    }  
+    }
 }
 </script>
 
 <style>
-
 .lastname:before{
     content: " "
 }
-
 </style>
 
 

src/Bundle/ChillPersonBundle/Resources/views/Person/layout.html.twig

@@ -36,8 +36,11 @@
         'args' : {'person_id': person.id, 'person': person },
         'activeRouteKey': activeRouteKey
     }) }}
-    
-    <div class="block-post-menu">
-        {{ chill_delegated_block('person_post_vertical_menu', { 'person': person } ) }}
-    </div>
+
+    {% block block_post_menu %}
+        <div class="block-post-menu">
+            {{ chill_delegated_block('person_post_vertical_menu', { 'person': person } ) }}
+        </div>
+    {% endblock %}
+
 {% endblock %}

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -1,82 +1,58 @@
 <template>
-    <div class="item-bloc">
-    <section class="chill-entity entity-person">
-    <!-- ENTIRE RENDER_BOX -->
+<div class="item-bloc col">
+    <section class="chill-entity entity-thirdparty">
     <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.resource.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
-                    <span v-if="options.addEntity ==  true && thirdparty.resource.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.resource.text }}</span>
+                        <span class="name">{{ thirdparty.text }}</span>
                     </a>
-                    <!-- WITHOUT LINK JUST NAME -->
-                    <span class="name">{{ thirdparty.resource.text }}</span>
-    
-                    <!-- IF ADD ENTITY OPTION -->
-                  
+                    <span class="name">{{ thirdparty.text }}</span>
+
                     <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 :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
-                    <time v-if="thirdparty.resource.birthdate" datetime="{{ thirdparty.birthdate.datetime }}" title="{{ birthdate }}">
+                    <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') }}
                     </time>
-                    <time v-else-if="thirdparty.resource.deathdate" datetime="{{ thirdparty.deathdate.datetime }}" title="{{ thirdparty.deathdate }}">
+                    <time v-else-if="thirdparty.deathdate" datetime="{{ thirdparty.deathdate.datetime }}" title="{{ thirdparty.deathdate }}">
                         {{ birthdate }} - {{ deathdate }}
                     </time>
                     <span class="age">{{ thirdparty.age }}</span>
                 </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.resource.address">
+                <li v-if="thirdparty.address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="thirdparty.resource.address" :isMultiline="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.resource.telephone" :href="'tel: ' + thirdparty.resource.telephone">{{ thirdparty.resource.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.resource.type == 'thirdparty'">
+                <li v-if="thirdparty.email">
                     <i class="fa fa-li fa-envelope-o"></i>
-                    <a v-if="thirdparty.resource.email" :href="'mailto: ' + thirdparty.resource.email">{{ thirdparty.resource.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>
 
@@ -92,17 +68,17 @@ export default {
     props: ['thirdparty', 'options'],
     computed: {
         getGender: function() {
-            return this.thirdparty.resource.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+            return this.thirdparty.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
         },
         getGenderIcon: function() {
-            return this.thirdparty.resource.gender == 'woman' ? 'fa-venus' : this.thirdparty.resource.gender == 'man' ? 'fa-mars' : 'fa-neuter';
+            return this.thirdparty.gender == 'woman' ? 'fa-venus' : this.thirdparty.gender == 'man' ? 'fa-mars' : 'fa-neuter';
         },
         birthdate: function(){
-            var date = new Date(this.thirdparty.resource.birthdate.datetime);
+            var date = new Date(this.thirdparty.birthdate.datetime);
             return dateToISO(date);
         },
         deathdate: function(){
-            var date = new Date(this.thirdparty.resource.deathdate.datetime);
+            var date = new Date(this.thirdparty.deathdate.datetime);
             return dateToISO(date);
         },
     }
@@ -110,18 +86,11 @@ export default {
 </script>
 
 <style lang="scss">
-
-.lastname{
-    &:before{
-        content: " "
-    }
-}
 .name{
     &:before{
         content: " "
     }
 }
-
 </style>