Merge conflicts fixed

2025-08-21 23:23:51 +00:00 · 2022-02-04 10:25:46 +01:00
parent b87f14255d 2343a4a334
commit 481456a038
403 changed files with 15524 additions and 2846 deletions
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
@@ -0,0 +1,51 @@
+<template>
+<ul class="list-suggest add-items" v-if="suggested.length > 0">
+  <li v-for="r in suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
+</ul>
+</template>
+
+<script>
+
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+export default {
+  name: "SetReferrer",
+  props: {
+   suggested: {
+      type: Array,
+      required: false,
+      //default: [],
+    },
+    periodId: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      /*suggested: [
+        {id: 5, text: 'Robert'}, {id: 8, text: 'Monique'},
+      ]*/
+    }
+  },
+  emits: ['referrerSet'],
+  methods: {
+    setReferrer: function(ref) {
+      const url = `/api/1.0/person/accompanying-course/${this.periodId}.json`;
+      const body = { type: "accompanying_period", user: { id: ref.id, type: ref.type }};
+
+      return makeFetch('PATCH', url, body)
+          .then((response) => {
+            this.$emit('referrerSet', ref);
+          })
+          .catch((error) => {
+            throw error;
+          })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -1,12 +1,12 @@
 <template>
-   <ul class="record_actions">
+    <ul class="record_actions">
      <li class="add-persons">
-         <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
-            @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
+        <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
+           @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
      </li>
-   </ul>
+    </ul>

-   <teleport to="body">
+  <teleport to="body">
      <modal v-if="modal.showModal"
         :modalDialogClass="modal.modalDialogClass"
         @close="modal.showModal = false">
@@ -67,9 +67,10 @@
               <div class="create-button">
                  <on-the-fly
                     v-if="query.length >= 3"
-                     v-bind:buttonText="$t('onthefly.create.button', {q: query})"
+                     :buttonText="$t('onthefly.create.button', {q: query})"
                     action="create"
-                     @saveFormOnTheFly="saveFormOnTheFly">
+                     @saveFormOnTheFly="saveFormOnTheFly"
+                     :canCloseModal="canCloseOnTheFlyModal">
                  </on-the-fly>
               </div>

@@ -92,8 +93,7 @@ import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
 import { searchEntities } from 'ChillPersonAssets/vuejs/_api/AddPersons';
-import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
-import { postThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';

 export default {
   name: 'AddPersons',
@@ -121,7 +121,8 @@ export default {
            suggested: [],
            selected: [],
            priorSuggestion: {}
-         }
+         },
+         canCloseOnTheFlyModal: false
      }
   },
   computed: {
@@ -181,7 +182,7 @@ export default {
      },
      hasPriorSuggestion() {
         return this.search.priorSuggestion.key ? true : false;
-      }
+      },
   },
   methods: {
      openModal() {
@@ -195,18 +196,18 @@ export default {

         setTimeout(function() {
            if (query === "") {
-              this.loadSuggestions([]);
-              return;
+               this.loadSuggestions([]);
+               return;
            }
            if (query === this.search.query) {
-              if (this.currentSearchQueryController !== undefined) {
-                this.currentSearchQueryController.abort()
-              }
-              this.currentSearchQueryController = new AbortController();
-              searchEntities({ query, options: this.options }, this.currentSearchQueryController)
+               if (this.currentSearchQueryController !== undefined) {
+                  this.currentSearchQueryController.abort()
+               }
+               this.currentSearchQueryController = new AbortController();
+               searchEntities({ query, options: this.options }, this.currentSearchQueryController)
                  .then(suggested => new Promise((resolve, reject) => {
-                    this.loadSuggestions(suggested.results);
-                    resolve();
+                     this.loadSuggestions(suggested.results);
+                     resolve();
                  }));
            }
         }.bind(this), query.length > 3 ? 300 : 700);
@@ -241,13 +242,12 @@ export default {
         return item.result.type + item.result.id;
      },
      addPriorSuggestion() {
-         //console.log('addPriorSuggestion', this.hasPriorSuggestion);
+         // console.log('prior suggestion', this.priorSuggestion);
         if (this.hasPriorSuggestion) {
-            console.log('addPriorSuggestion',);
+            // console.log('addPriorSuggestion',);
            this.suggested.unshift(this.priorSuggestion);
            this.selected.unshift(this.priorSuggestion);

-            console.log('reset priorSuggestion');
            this.newPriorSuggestion(null);
         }
      },
@@ -261,6 +261,7 @@ export default {
            }
            this.search.priorSuggestion = suggestion;
            // console.log('search priorSuggestion', this.search.priorSuggestion);
+            this.addPriorSuggestion(suggestion);
         } else {
            this.search.priorSuggestion = {};
         }
@@ -268,23 +269,38 @@ export default {
      saveFormOnTheFly({ type, data }) {
         // console.log('saveFormOnTheFly from addPersons, type', type, ', data', data);
         if (type === 'person') {
-            // console.log('type person with', data);
-            postPerson(data)
-               .then(person => new Promise((resolve, reject) => {
-                  console.log('onthefly create: post person', person);
-                  this.newPriorSuggestion(person);
-                  resolve();
-               }));
+            makeFetch('POST', '/api/1.0/person/person.json', data)
+               .then(response => {
+                  this.newPriorSuggestion(response);
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                        this.$toast.open({message: v });
+                     }
+                  } else {
+                     this.$toast.open({message: 'An error occurred'});
+                  }
+               })
         }
         else if (type === 'thirdparty') {
-            // console.log('type thirdparty with', data);
-            postThirdparty(data)
-               .then(thirdparty => new Promise((resolve, reject) => {
-                  // console.log('onthefly create: post thirdparty', thirdparty);
-                  this.newPriorSuggestion(thirdparty);
-                  resolve();
-               }));
+            makeFetch('POST', '/api/1.0/thirdparty/thirdparty.json', data)
+               .then(response => {
+                  this.newPriorSuggestion(response);
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                        this.$toast.open({message: v });
+                     }
+                  } else {
+                     this.$toast.open({message: 'An error occurred'});
+                  }
+               })
         }
+         this.canCloseOnTheFlyModal = false;
      }
   },
 }
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -26,6 +26,11 @@
            v-if="item.result.type === 'user'"
            v-bind:item="item">
         </suggestion-user>
+
+        <suggestion-household
+            v-if="item.result.type === 'household'"
+            v-bind:item="item">
+        </suggestion-household>
      </label>

   </div>
@@ -35,6 +40,7 @@
 import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
 import SuggestionUser from './TypeUser';
+import SuggestionHousehold from './TypeHousehold';

 export default {
   name: 'PersonSuggestion',
@@ -42,6 +48,7 @@ export default {
      SuggestionPerson,
      SuggestionThirdParty,
      SuggestionUser,
+      SuggestionHousehold,
   },
   props: [
      'item',
@@ -87,11 +94,11 @@ export default {
         label {
            display: inline-flex;
            width: 100%;
-            div.container {
+            div.container:not(.household) {
               & > input {
                  margin-right: 0.8em;
               }
-               span:not(.name) {
+               > span:not(.name) {
                  margin-left: 0.5em;
                  opacity: 0.5;
                  font-size: 90%;
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue
@@ -0,0 +1,27 @@
+<template>
+   <div class="container household">
+     <household-render-box :household="item.result" :isAddressMultiline="false"></household-render-box>
+   </div>
+
+   <div class="right_actions">
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
+   </div>
+</template>
+
+<script>
+
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
+
+export default {
+   name: 'SuggestionHousehold',
+   components: {
+     BadgeEntity,
+     HouseholdRenderBox,
+   },
+   props: ['item'],
+}
+</script>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
      <span class="name">
-         {{ item.result.text }}
+         <person-text :person="item.result"></person-text>
      </span>
      <span class="birthday" v-if="hasBirthdate">
         {{ $d(item.result.birthdate.datetime, 'short') }}
@@ -28,12 +28,14 @@
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';

 export default {
   name: 'SuggestionPerson',
   components: {
     OnTheFly,
-     BadgeEntity
+     BadgeEntity,
+     PersonText,
   },
   props: ['item'],
   computed: {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
@@ -2,9 +2,9 @@
    <div class="container tpartycontainer">
      <div class="tparty-identification">
        <span class="name">
-            {{ item.result.text }}
+           {{ item.result.text }}&nbsp;
        </span>
-          <span class="location">
+        <span class="location">
          <template v-if="hasAddress">
            {{ getAddress.text }} -
            {{ getAddress.postcode.name }}
@@ -100,5 +100,13 @@ export default {
      font-variant: all-small-caps;
    }
 }
+ .tparty-identification {
+   span:not(.name) {
+     margin-left: 0.5em;
+     opacity: 0.5;
+     font-size: 90%;
+     font-style: italic;
+   }
+ }
 }
 </style>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -1,14 +1,15 @@
 <template>
-  <div v-if="render === 'bloc'" class="item-bloc">
+<div v-if="render === 'bloc'" class="item-bloc">
    <section class="chill-entity entity-person">
-      <div class="item-row entity-bloc">
+        <div class="item-row entity-bloc">

        <div  class="item-col">
            <div class="entity-label">

                <div :class="'denomination h' + options.hLevel">

-                   <a v-if="options.addLink === true" :href="getUrl">
+                    <a v-if="options.addLink === true" :href="getUrl">
+                      <!-- use person-text here to avoid code duplication ? TODO -->
                        <span class="firstname">{{ person.firstName }}</span>
                        <span class="lastname">{{ person.lastName }}</span>
                        <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
@@ -16,19 +17,20 @@
                        </span>
                    </a>

-                   <span class="firstname">{{ person.firstName }}</span>
-                   <span class="lastname">{{ person.lastName }}</span>
-                   <span v-if="person.deathdate" class="deathdate"> (‡)</span>
-                   <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
-                       <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
-                   </span>
+                  <!-- use person-text here to avoid code duplication ? TODO -->
+                    <span class="firstname">{{ person.firstName }}</span>
+                    <span class="lastname">{{ person.lastName }}</span>
+                    <span v-if="person.deathdate" class="deathdate"> (‡)</span>
+                    <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
+                        <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
+                    </span>

-                   <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>

-                   <badge-entity v-if="options.addEntity === true"
-                      :entity="person"
-                      :options="{ displayLong: options.entityDisplayLong }">
-                   </badge-entity>
+                    <badge-entity v-if="options.addEntity === true"
+                        :entity="person"
+                        :options="{ displayLong: options.entityDisplayLong }">
+                    </badge-entity>

                </div>

@@ -47,96 +49,96 @@
                        {{ $t('renderbox.deathdate') + ' ' + deathdate }}
                    </time>

-                    <span v-if="options.addAge && person.birthdate" class="age">{{ getAge }} {{ $t('renderbox.years_old')}}</span>
+                    <span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span>
                </p>
            </div>
        </div>

        <div class="item-col">
-           <div class="float-button bottom">
-              <div class="box">
-                 <div class="action">
-                    <slot name="record-actions"></slot>
-                 </div>
-                 <ul class="list-content fa-ul">
+            <div class="float-button bottom">
+                <div class="box">
+                    <div class="action">
+                        <slot name="record-actions"></slot>
+                    </div>
+                    <ul class="list-content fa-ul">
+                        <li v-if="person.current_household_id">
+                            <i class="fa fa-li fa-map-marker"></i>
+                            <address-render-box v-if="person.current_household_address"
+                                :address="person.current_household_address"
+                                :isMultiline="isMultiline">
+                            </address-render-box>
+                            <p v-else class="chill-no-data-statement">
+                                {{ $t('renderbox.household_without_address') }}
+                            </p>
+                            <a v-if="options.addHouseholdLink === true"
+                                :href="getCurrentHouseholdUrl"
+                                :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
+                                <span class="badge rounded-pill bg-chill-beige">
+                                    <i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
+                                </span>
+                            </a>
+                        </li>
+                        <li v-else-if="options.addNoData">
+                            <i class="fa fa-li fa-map-marker"></i>
+                            <p class="chill-no-data-statement">
+                                {{ $t('renderbox.no_data') }}
+                            </p>
+                        </li>

-                    <li v-if="person.current_household_id">
-                       <i class="fa fa-li fa-map-marker"></i>
-                       <address-render-box v-if="person.current_household_address"
-                         :address="person.current_household_address"
-                         :isMultiline="isMultiline">
-                       </address-render-box>
-                       <p v-else class="chill-no-data-statement">
-                          {{ $t('renderbox.household_without_address') }}
-                       </p>
-                       <a v-if="options.addHouseholdLink === true"
-                          :href="getCurrentHouseholdUrl"
-                          :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
-                          <span class="badge rounded-pill bg-chill-beige">
-                             <i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
-                          </span>
-                       </a>
-                    </li>
-                    <li v-else-if="options.addNoData">
-                       <i class="fa fa-li fa-map-marker"></i>
-                       <p class="chill-no-data-statement">
-                          {{ $t('renderbox.no_data') }}
-                       </p>
-                    </li>
+                        <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="options.addNoData">
+                            <i class="fa fa-li fa-mobile"></i>
+                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                        </li>
+                        <li v-if="person.phonenumber">
+                            <i class="fa fa-li fa-phone"></i>
+                            <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
+                        </li>
+                        <li v-else-if="options.addNoData">
+                            <i class="fa fa-li fa-phone"></i>
+                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                        </li>

-                    <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="options.addNoData">
-                       <i class="fa fa-li fa-mobile"></i>
-                       <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                    </li>
-                    <li v-if="person.phonenumber">
-                       <i class="fa fa-li fa-phone"></i>
-                       <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
-                    </li>
-                    <li v-else-if="options.addNoData">
-                       <i class="fa fa-li fa-phone"></i>
-                       <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                    </li>
+                        <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
+                            <i class="fa fa-li fa-long-arrow-right"></i>
+                            <template v-for="c in person.centers">{{ c.name }}</template>
+                        </li>
+                        <li v-else-if="options.addNoData">
+                            <i class="fa fa-li fa-long-arrow-right"></i>
+                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                        </li>
+                        <slot name="custom-zone"></slot>

-                    <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
-                        <i class="fa fa-li fa-long-arrow-right"></i>
-                        <template v-for="c in person.centers">{{ c.name }}</template>
-                    </li>
-                    <li v-else-if="options.addNoData">
-                       <i class="fa fa-li fa-long-arrow-right"></i>
-                       <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                    </li>
-                    <slot name="custom-zone"></slot>
+                    </ul>
+                </div>
+            </div>
+            </div>

-                 </ul>
-              </div>
-           </div>
        </div>
-
-      </div>
    </section>
-  </div>
+</div>

-  <span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
-     <a v-if="options.addLink === true" :href="getUrl">
-      <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
-        <i class="fa fa-circle fa-stack-1x text-success"></i>
-        <i class="fa fa-stack-1x">T</i>
-      </span>
-      {{ person.text }}
+<span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
+    <a v-if="options.addLink === true" :href="getUrl">
+        <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
+            <i class="fa fa-circle fa-stack-1x text-success"></i>
+            <i class="fa fa-stack-1x">T</i>
+        </span>
+
+        <person-text :person="person"></person-text>
    </a>
    <span v-else>
-       <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
-        <i class="fa fa-circle fa-stack-1x text-success"></i>
-        <i class="fa fa-stack-1x">T</i>
-      </span>
-      {{ person.text }}
+        <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
+            <i class="fa fa-circle fa-stack-1x text-success"></i>
+            <i class="fa fa-stack-1x">T</i>
+        </span>
+        <person-text :person="person"></person-text>
    </span>
    <slot name="post-badge"></slot>
-  </span>
+</span>

 </template>

@@ -145,13 +147,15 @@ import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';

 export default {
    name: "PersonRenderBox",
    components: {
        AddressRenderBox,
        Confidential,
-        BadgeEntity
+        BadgeEntity,
+        PersonText
    },
    props: ['person', 'options', 'render', 'returnPath'],
    computed: {
@@ -166,7 +170,7 @@ export default {
            return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
        },
        getGenderTranslation: function() {
-           return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+            return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
        },
        getGender() {
            return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
@@ -198,24 +202,6 @@ export default {
        getUrl: function() {
            return `/fr/person/${this.person.id}/general`;
        },
-        getAge: function() {
-            // TODO only one abstract function
-            if(this.person.birthdate && !this.person.deathdate){
-                const birthday = new Date(this.person.birthdate.datetime)
-                const now = new Date()
-                return (now.getFullYear() - birthday.getFullYear())
-            } else if(this.person.birthdate && this.person.deathdate){
-                    const birthday = new Date(this.person.birthdate.datetime)
-                    const deathdate = new Date(this.person.deathdate.datetime)
-                    return (deathdate.getFullYear() - birthday.getFullYear())
-            } else if(!this.person.birthdate && this.person.deathdate.datetime) {
-                // todo: change this
-                    return "Age unknown"
-            } else {
-                // todo: change this
-                    return "Age unknown"
-            }
-        },
        getCurrentHouseholdUrl: function() {
           let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
           return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
@@ -0,0 +1,50 @@
+<template>
+    <span v-if="isCut">{{ cutText }}</span>
+    <span v-else class="person-text">
+        <span class="firstname">{{ person.firstName }}</span>
+        <span class="lastname">{{ person.lastName }}</span>
+        <span v-if="person.altNames && person.altNames.length > 0" class="altnames">
+            <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
+        </span>
+        <span class="age" v-if="this.addAge && person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', person.age) }}</span>
+        <span v-else-if="this.addAge && person.deathdate !== null">&nbsp;(‡)</span>
+    </span>
+</template>
+
+<script>
+
+export default {
+    name: "PersonText",
+    props: {
+      person: {
+        required: true,
+      },
+      isCut: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      addAge: {
+        type: Boolean,
+        required: false,
+        default: true,
+      }
+    },
+    computed: {
+        altNameLabel: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].label
+            }
+        },
+        altNameKey: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].key
+            }
+        },
+        cutText: function() {
+            let more = (this.person.text.length > 15) ?'…' : '';
+            return this.person.text.slice(0,15) + more;
+        }
+    }
+}
+</script>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -22,24 +22,45 @@
 <div v-else-if="action === 'edit' || action === 'create'">

   <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
+      <input
+          class="form-control form-control-lg"
+          id="lastname"
+          v-model="lastName"
+          :placeholder="$t('person.lastname')"
+          @change="checkErrors"
+      />
      <label for="lastname">{{ $t('person.lastname') }}</label>
   </div>

   <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
+      <input
+          class="form-control form-control-lg"
+          id="firstname"
+          v-model="firstName"
+          :placeholder="$t('person.firstname')"
+          @change="checkErrors"
+      />
      <label for="firstname">{{ $t('person.firstname') }}</label>
   </div>

   <div v-for="(a) in config.altNames" :key="a.key" class="form-floating mb-3">
-      <input class="form-control form-control-lg" :id="a.key" @input="onAltNameInput" />
+      <input
+          class="form-control form-control-lg"
+          :id="a.key"
+          @input="onAltNameInput"
+      />
      <label :for="a.key">{{ a.labels.fr }}</label>
   </div>

   <!--  TODO fix placeholder if undefined
   -->
   <div class="form-floating mb-3">
-      <select class="form-select form-select-lg" id="gender" v-model="gender">
+      <select
+         class="form-select form-select-lg"
+         id="gender"
+         v-model="gender"
+         @change="checkErrors"
+         >
         <option selected disabled >{{ $t('person.gender.placeholder') }}</option>
         <option value="woman">{{ $t('person.gender.woman') }}</option>
         <option value="man">{{ $t('person.gender.man') }}</option>
@@ -62,8 +83,8 @@
      <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
      <input class="form-control form-control-lg"
         v-model="phonenumber"
-         v-bind:placeholder="$t('person.phonenumber')"
-         v-bind:aria-label="$t('person.phonenumber')"
+         :placeholder="$t('person.phonenumber')"
+         :aria-label="$t('person.phonenumber')"
         aria-describedby="phonenumber" />
   </div>

@@ -71,8 +92,8 @@
      <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
      <input class="form-control form-control-lg"
         v-model="mobilenumber"
-         v-bind:placeholder="$t('person.mobilenumber')"
-         v-bind:aria-label="$t('person.mobilenumber')"
+         :placeholder="$t('person.mobilenumber')"
+         :aria-label="$t('person.mobilenumber')"
         aria-describedby="mobilenumber" />
   </div>

@@ -80,11 +101,17 @@
      <span class="input-group-text" id="email"><i class="fa fa-fw fa-at"></i></span>
      <input class="form-control form-control-lg"
         v-model="email"
-         v-bind:placeholder="$t('person.email')"
-         v-bind:aria-label="$t('person.email')"
+         :placeholder="$t('person.email')"
+         :aria-label="$t('person.email')"
         aria-describedby="email" />
   </div>

+   <div class="alert alert-warning" v-if="errors.length">
+     <ul>
+       <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+     </ul>
+   </div>
+
 </div>
 </template>

@@ -108,6 +135,7 @@ export default {
         config: {
            altNames: []
         },
+         errors: []
      }
   },
   computed: {
@@ -183,6 +211,18 @@ export default {
      }
   },
   methods: {
+      checkErrors(e) {
+         this.errors = [];
+         if (!this.person.lastName) {
+             this.errors.push("Le nom ne doit pas être vide.");
+         }
+         if (!this.person.firstName) {
+             this.errors.push("Le prénom ne doit pas être vide.");
+         }
+         if (!this.person.gender) {
+             this.errors.push("Le genre doit être renseigné");
+         }
+      },
      loadData() {
         getPerson(this.id)
            .then(person => new Promise((resolve, reject) => {