Merge branch 'ameliorations_composants_vue' into improve_ux

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

@@ -9,7 +9,15 @@
       <label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
 
-   <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
+   <participation-item
+      v-for="participation in participations"
+      v-bind:participation="participation"
+      v-bind:key="participation.id"
+      @remove="removeParticipation"
+      @close="closeParticipation">
+   </participation-item>
+
+   <!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
       <thead>
          <tr>
             <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
@@ -19,15 +27,15 @@
          </tr>
       </thead>
       <tbody>
-         <person-item
+         <participation-item
             v-for="participation in participations"
             v-bind:participation="participation"
             v-bind:key="participation.id"
             @remove="removeParticipation"
             @close="closeParticipation">
-         </person-item>
+         </participation-item>
       </tbody>
-   </table>
+   </table> -->
 
    <div>
       <add-persons
@@ -45,13 +53,13 @@
 
 <script>
 import { mapState } from 'vuex';
-import PersonItem from "./PersonsAssociated/PersonItem.vue"
+import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue"
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
 export default {
    name: 'PersonsAssociated',
    components: {
-      PersonItem,
+      ParticipationItem,
       AddPersons
    },
    data() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -1,8 +1,26 @@
 <template>
-<tr>
+
+   <person-render-box
+      :options="{
+               addInfo : true,
+               addId : true,
+               addEntity: false,
+               addLink: false,
+               addAltNames: true,
+               addAge : false,
+               hLevel : 1
+            }"
+      :participation="participation">
+   </person-render-box>
+
+<!-- <tr>
    <td>
       {{ participation.person.firstName }}
       {{ participation.person.lastName }}
+      <person-render-box
+         v-bind:options="options"
+         v-bind:participation="participation"
+      ></person-render-box>
    </td>
    <td><span v-if="participation.startDate">
        {{ $d(participation.startDate.datetime, 'short') }}</span>
@@ -30,12 +48,12 @@
                action="edit">
             </on-the-fly>
          </li>
-         <!--li>
+         li>
             <button class="btn btn-delete"
                :title="$t('action.delete')"
                @click.prevent="$emit('remove', participation)">
             </button>
-         </li-->
+         </li
          <li>
             <button v-if="!participation.endDate"
                class="btn btn-sm btn-remove"
@@ -46,21 +64,36 @@
          </li>
       </ul>
    </td>
-</tr>
+</tr> -->
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
+import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 
 export default {
-   name: 'PersonItem',
+   name: 'ParticipationItem',
    components: {
       OnTheFly,
-      ButtonLocation
+      ButtonLocation,
+      PersonRenderBox
    },
    props: ['participation'],
    emits: ['remove', 'close'],
+   data() {
+      return {
+         PersonRenderBox: {
+            participation: 'participation',
+            options: {
+               addInfo: false,
+               addId: true,
+               addAge: false,
+               hLevel: 1
+            }
+         }
+      }
+   },
    computed: {
       hasCurrentHouseholdAddress() {
          if ( !this.participation.endDate

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

@@ -0,0 +1,170 @@
+<template>
+<div class="flex-table mb-3">
+    <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 -->
+                <div class="denomination h3">
+                
+                    <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
+                    <a v-if="this.options.addLink ==  true" href="#">
+                        <span class="firstname">{{ participation.person.firstName }}</span>
+                        <span class="lastname">{{ participation.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">{{ participation.person.firstName }}</span>
+                    <span class="lastname">{{ participation.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>
+
+                    <!-- 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>
+
+                </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 }}
+                    </time>
+                    <span class="age">{{ participation.person.age }}</span>
+                </p>
+                <!-- END BIRTH/DEATH AND AGE -->
+            </div>
+        </div>
+        <!-- END LABEL -->
+
+        <!-- EXTRA INFO AND ACTIONS-->
+        <div class="item-col">
+            <ul class="list-content fa-ul">
+                <li>
+                <!-- 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>
+                </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>
+            </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> -->
+            <!-- END ACTIONS -->
+        </div>
+        <!-- END EXTRA INFO AND ACTIONS -->
+
+    </div>
+    </section>
+    </div>
+</div>
+</template>
+
+<script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
+export default {
+    name: "PersonRenderBox",
+    components: {
+        OnTheFly
+    },
+    props: ['participation', 'options'],
+    computed: {
+        getGender: function() {
+            // gender 
+            return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.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}`;
+        },
+        altNameLabel: function(){
+            for(let i = 0; i < this.participation.person.altNames.length; i++){
+                return this.participation.person.altNames[i].label
+            }
+        },
+        altNameKey: function(){
+            for(let i = 0; i < this.participation.person.altNames.length; i++){
+                return this.participation.person.altNames[i].key
+            }
+        },
+    }  
+}
+</script>
+
+<style>
+
+.lastname:before{
+    content: " "
+}
+
+</style>
+
+