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

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue

@@ -0,0 +1,127 @@
+<template>
+    <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">
+                
+                    <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>
+                    </a>
+                    <!-- WITHOUT LINK JUST NAME -->
+                    <span class="name">{{ thirdparty.resource.text }}</span>
+    
+                    <!-- IF ADD ENTITY OPTION -->
+                  
+                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</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 }}">
+                        {{ $t(getGender) + ' ' + $d(birthdate, 'short') }}
+                    </time>
+                    <time v-else-if="thirdparty.resource.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">
+            <ul class="list-content fa-ul">
+                <!-- ADDRESS -->
+                <li v-if="thirdparty.resource.address" class="chill-entity entity-address">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <show-address :address="thirdparty.resource.address" :multiline="false"></show-address>
+                </li>
+                <!-- PHONENUMBER -->
+                <!-- todo: change href for phonenumbers -->
+                <li>
+                    <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>
+                </li>
+                <li v-if="thirdparty.resource.type == 'thirdparty'">
+                    <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>
+                </li>
+                
+            </ul>
+            <!-- END ADDRESS AND PHONE NUMBER -->
+
+            <!-- ACTION BUTTONS -->
+            <slot name="record-actions"></slot>
+            <!-- END ACTIONS -->
+        </div>
+        <!-- END CONTACT INFO AND ACTIONS -->
+    </div>
+    </section>
+    </div>
+
+</template>
+
+<script>
+import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
+import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
+
+export default {
+    name: "ThirdPartyRenderBox",
+    components: {
+        ShowAddress
+    },
+    props: ['thirdparty', 'options'],
+    computed: {
+        getGender: function() {
+            return this.thirdparty.resource.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';
+        },
+        birthdate: function(){
+            var date = new Date(this.thirdparty.resource.birthdate.datetime);
+            return dateToISO(date);
+        },
+        deathdate: function(){
+            var date = new Date(this.thirdparty.resource.deathdate.datetime);
+            return dateToISO(date);
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+
+.lastname{
+    &:before{
+        content: " "
+    }
+}
+.name{
+    &:before{
+        content: " "
+    }
+}
+
+</style>
+
+