Feature: [person][creation] Add center field to OnTheFly/Person

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -87,6 +87,18 @@
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
+  <div class="form-floating mb-3" v-if="showCenters && config.centers.length > 1">
+    <select
+         class="form-select form-select-lg"
+         id="center"
+         v-model="center"
+         >
+         <option selected disabled>{{ $t('person.center.placeholder') }}</option>
+         <option v-for="c in config.centers" :value="c" :key="c.id" >{{ c.name }}</option>
+    </select>
+    <label>{{ $t('person.center.title') }}</label>
+  </div>
+
    <div class="form-floating mb-3">
       <select
          class="form-select form-select-lg"
@@ -166,7 +178,7 @@
 </template>
 
 <script>
-import { getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
+import { getCentersForPersonCreation, getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
 
@@ -182,13 +194,18 @@ export default {
       return {
          person: {
             type: 'person',
+            lastName: '',
+            firstName: '',
             altNames: [],
-            addressId: null
+            addressId: null,
+            center: null,
          },
          config: {
             altNames: [],
-            civilities: []
+            civilities: [],
+            centers: [],
          },
+         showCenters: false, // NOTE: must remains false if the form is not in create mode
          showAddressFormValue: false,
          addAddress: {
             options: {
@@ -254,6 +271,19 @@ export default {
          set(value) { this.showAddressFormValue = value; },
          get() { return this.showAddressFormValue; }
       },
+      center: {
+         set(value) {
+           console.log('will set center', value);
+           this.person.center = {id: value.id, type: value.type};
+         },
+         get() {
+           const center = this.config.centers.find(c => this.person.center !== null && this.person.center.id === c.id);
+
+           console.log('center get', center);
+
+           return typeof center === 'undefined' ? null : center;
+         },
+      },
       genderClass() {
          switch (this.person.gender) {
             case 'woman':
@@ -295,23 +325,35 @@ export default {
                this.config.civilities = civilities.results;
             }
          });
-
       if (this.action !== 'create') {
          this.loadData();
+      } else {
+        getCentersForPersonCreation()
+            .then(params => {
+              this.config.centers = params.centers;
+              this.showCenters = params.showCenters;
+
+              if (this.showCenters && this.config.centers.length === 1) {
+                this.person.center = this.config.centers[0];
+              }
+            });
       }
    },
    methods: {
       checkErrors(e) {
          this.errors = [];
-         if (!this.person.lastName) {
+         if (this.person.lastName === "") {
             this.errors.push("Le nom ne doit pas être vide.");
          }
-         if (!this.person.firstName) {
+         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é");
          }
+         if (this.showCenters && this.person.center === null) {
+           this.errors.push("Le centre doit être renseigné");
+         }
       },
       loadData() {
          getPerson(this.id)