From 1a6c0529cccc1dad6e9b510ba05b04fe9c9264cb Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 17 Aug 2021 14:05:48 +0200
Subject: [PATCH] date formatting using dateToISO function, still fix with
 translations. + record-actions inserted via <slot>

---
 .../PersonsAssociated/ParticipationItem.vue   | 79 ++++++++--------
 .../_components/Entity/PersonRenderBox.vue    | 89 ++++++-------------
 2 files changed, 71 insertions(+), 97 deletions(-)

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 a50fa049f..fce8351c2 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
@@ -1,5 +1,5 @@
 <template>
-
+<div class="flex-table mb-3">
    <person-render-box
       :options="{
                addInfo : true,
@@ -10,8 +10,47 @@
                addAge : false,
                hLevel : 1
             }"
-      :participation="participation"
-   ></person-render-box>
+      :person="participation.person"
+   >
+   
+      <template v-slot:record-actions>
+         <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>
+      </template>
+
+   </person-render-box>
+</div>
+</template>
+
+
 <!-- <tr>
    <td>
       {{ participation.person.firstName }}
@@ -28,39 +67,9 @@
        {{ $d(participation.endDate.datetime, 'short') }}</span>
    </td>
    <td>
-      <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>
+
    </td>
 </tr> -->
-</template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
@@ -77,7 +86,7 @@ export default {
    data() {
       return {
          PersonRenderBox: {
-            participation : 'participation',
+            person : 'participation.person',
             options : {
                addInfo : false,
                addId : true,
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 d504cb60f..e7a0d2486 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/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 -->
@@ -14,8 +14,8 @@
                 
                     <!-- 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>
+                        <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 +25,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 -->
@@ -36,7 +36,7 @@
 
                     <!-- 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.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
 
                 </div>
                 <!-- END NAME TAG -->
@@ -44,10 +44,10 @@
                 <!-- 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**">
+                    <time datetime="{{ person.birthdate }}" title="**birthdate**">
                         Né le {{ birthdate }}
                     </time>
-                    <span class="age">{{ participation.person.age }}</span>
+                    <span class="age">{{ person.age }}</span>
                 </p>
                 <!-- END BIRTH/DEATH AND AGE -->
             </div>
@@ -63,96 +63,61 @@
 
                 <!-- PHONENUMBER -->
                 <li>
-                    <div v-if="this.participation.person.mobilenumber">
+                    <div v-if="this.person.mobilenumber">
                         <i class="fa fa-li fa-mobile"></i>
-                        <a href="#">{{ participation.person.mobilenumber }}</a>
+                        <a href="#">{{ person.mobilenumber }}</a>
                     </div>
-                    <div v-else-if="this.participation.person.phonenumber">
+                    <div v-else-if="this.person.phonenumber">
                         <i class="fa fa-li fa-phone"></i>
-                        <a href="#">{{ participation.person.phonenumber }}</a>
+                        <a href="#">{{ 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> -->
+            <slot name="record-actions"></slot>
             <!-- END ACTIONS -->
         </div>
         <!-- END EXTRA 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';
 
 export default {
     name: "PersonRenderBox",
     components: {
         OnTheFly
     },
-    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' ? '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);
+            // 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 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
             }
         },
     }