Merge branch 'ameliorations_composants_vue' of gitlab.com:Chill-Projet/chill-bundles into ameliorations_composants_vue

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

@@ -0,0 +1,48 @@
+// CURRENTLY NOT IN USE
+
+<template>
+
+        <li v-if="address" class="chill-entity entity-address">
+            <i v-if="options.with_picto == true" class="fa fa-fw fa-map-marker"></i>
+            <span v-if="options.render == 'list' || options.render == 'list'" :class="'address ' + {'multiline' : options.multiline === true}">
+                
+                    
+                    <!-- if address.street is not empty -->
+                    <p v-if="address.street" class="street">{{ address.street }}
+                        <!-- if address.streetNumber is not empty -->
+                        <span v-if="address.streetNumber" class="streetnumber">{{ address.streetNumber }}</span>
+                    </p>
+
+                        <!-- if options['extended_infos'] -->
+                        <div v-if="options.extended_infos == true">
+                            <span v-if="address.floor" class="floor">{{ address.floor }}</span>
+                            <span v-if="address.corridor" class="corridor">{{ address.corridor }}</span>
+                            <span v-if="address.steps" class="steps">{{ address.steps }}</span>
+                            <span v-if="address.buildingName" class="buildingName">{{ address.buildingName }}</span>
+                            <span v-if="address.flat" class="flat">{{ address.flat }}</span>
+                            <span v-if="address.distribution" class="distribution">{{ address.distribution }}</span>
+                            <span v-if="address.extra" class="extra">{{ address.extra }}</span>
+                        </div>
+
+                    <!-- if address.postCode is not empty -->
+                    <div v-if="address.postCode">
+                        <p class="postcode">
+                            <span class="code">{{ address.postCode.code }}</span>
+                            <span class="name">{{ address.postCode.name }}</span>
+                        </p>
+                        <p class="country">{{ address.postCode.country.name }}</p>
+                    </div>
+                
+            </span>
+        </li> 
+
+</template>
+
+<script>
+
+export default{
+    name: "AddressRenderBox",
+    props: ['address', 'options']
+}
+
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-<div class="flex-table mb-3">
+
     <div class="item-bloc">
     <section class="chill-entity entity-person">
     <!-- ENTIRE RENDER_BOX -->
@@ -10,12 +10,14 @@
             <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="#">
-                        <span class="firstname">{{ participation.person.firstName }}</span>
-                        <span class="lastname">{{ participation.person.lastName }}</span>
+                        <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 -->
@@ -25,8 +27,8 @@
                     </a>
 
                     <!-- WITHOUT LINK JUST NAME -->
-                    <span class="firstname">{{ participation.person.firstName }}</span>
-                    <span class="lastname">{{ participation.person.lastName }}</span>
+                    <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 -->
@@ -35,124 +37,97 @@
                     </span>
 
                     <!-- IF ADD ENTITY OPTION -->
-                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">Person</span>
-                    <span v-if="this.options.addId ==  true" class="id-number" title="n° participation.person.id">{{ participation.person.id }}</span>
+                    <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>
 
                 </div>
                 <!-- END NAME TAG -->
 
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
-                    <time datetime="{{ participation.person.birthdate }}" title="**birthdate**">
-                        Né le {{ birthdate }}
+                    <!-- 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') }}
                     </time>
-                    <span class="age">{{ participation.person.age }}</span>
+                    <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
+                        {{ birthdate }} - {{ deathdate }}
+                    </time>
+                    <span class="age">{{ person.age }}</span>
                 </p>
                 <!-- END BIRTH/DEATH AND AGE -->
             </div>
         </div>
         <!-- END LABEL -->
 
-        <!-- EXTRA INFO AND ACTIONS-->
+        <!-- CONTACT INFO AND ACTIONS-->
         <div class="item-col">
             <ul class="list-content fa-ul">
-                <li>
                 <!-- ADDRESS -->
+                <li v-if="person.current_household_address" class="chill-entity entity-address">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <show-address :address="person.current_household_address" :multiline="false"></show-address>
                 </li>
-
                 <!-- PHONENUMBER -->
-                <li>
-                    <div v-if="this.participation.person.mobilenumber">
-                        <i class="fa fa-li fa-mobile"></i>
-                        <a href="#">{{ participation.person.mobilenumber }}</a>
-                    </div>
-                    <div v-else-if="this.participation.person.phonenumber">
-                        <i class="fa fa-li fa-phone"></i>
-                        <a href="#">{{ participation.person.phonenumber }}</a>
-                    </div>
-                    <span v-else class="chill-no-data-statement">Pas d'information</span>
+                <!-- todo: change href for phonenumbers and format phone number? -->
+                <li v-if="this.person.mobilenumber">
+                    <i class="fa fa-li fa-mobile"></i>
+                    <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
                 </li>
-            </ul>
-            <ul class="record_actions">
-                <li>
-                    <on-the-fly
-                        v-bind:type="participation.person.type"
-                        v-bind:id="participation.person.id"
-                        action="show">
-                    </on-the-fly>
-                </li>
-                <li>
-                    <on-the-fly
-                        v-bind:type="participation.person.type"
-                        v-bind:id="participation.person.id"
-                        action="edit">
-                    </on-the-fly>
-                </li>
-                <li>
-                    <button class="btn btn-delete"
-                        :title="$t('action.delete')" 
-                        @click.prevent="$emit('remove', participation)">
-                    </button>
-                </li>
-                <li>
-                    <button v-if="!participation.endDate"
-                        class="btn btn-remove"
-                        v-bind:title="$t('action.remove')" 
-                        @click.prevent="$emit('close', participation)">
-                    </button>
-                    <button v-else class="btn btn-remove disabled"></button>
+                <li v-else-if="this.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 -->
-            <!-- <ul class="record_actions">
-                <li>
-                    <a class="btn btn-show" target="_blank" title="Show person"
-                    href="#"></a>
-                </li>
-            </ul> -->
+            <slot name="record-actions"></slot>
             <!-- END ACTIONS -->
         </div>
-        <!-- END EXTRA INFO AND ACTIONS -->
-
+        <!-- END CONTACT INFO AND ACTIONS -->
     </div>
     </section>
     </div>
-</div>
+
 </template>
 
 <script>
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+// 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';
 
 export default {
     name: "PersonRenderBox",
     components: {
-        OnTheFly
+        ShowAddress
     },
-    props: ['participation', 'options'],
+    props: ['person', 'options'],
     computed: {
         getGender: function() {
-            // gender 
-            return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
+            return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+        },
+        getGenderIcon: function() {
+            return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
         },
         birthdate: function(){
-            var date = new Date(this.participation.person.birthdate.datetime);
-            var day = date.getDate()
-            var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."]
-            var month = date.getMonth()
-            var year = date.getFullYear()
-            return `${day} ${months[month]} ${year}`;
+            var date = new Date(this.person.birthdate.datetime);
+            return dateToISO(date);
+        },
+        deathdate: function(){
+            var date = new Date(this.person.deathdate.datetime);
+            return dateToISO(date);
         },
         altNameLabel: function(){
-            for(let i = 0; i < this.participation.person.altNames.length; i++){
-                return this.participation.person.altNames[i].label
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].label
             }
         },
         altNameKey: function(){
-            for(let i = 0; i < this.participation.person.altNames.length; i++){
-                return this.participation.person.altNames[i].key
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].key
             }
         },
     }