person: add altnames in the person creation modal

src/Bundle/ChillPersonBundle/Controller/PersonApiController.php

@@ -91,7 +91,10 @@ class PersonApiController extends ApiController
     {
 
         //TODO get alt_name config from chill person
-        $configAltNames = ["key" => "jeune_fille", "labels" => ["fr" => "Nom de naisssance" ]]; //TODO fake data
+        $configAltNames = [
+            ["key" => "jeune_fille", "labels" => ["fr" => "Nom de naissance" ]],
+            ["key" => "surnom", "labels" => ["fr" => "Surnom" ]]
+        ]; //TODO fake data
 
         return $this->json($configAltNames, Response::HTTP_OK, [], ['groups' => ['read']]);
     }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js

@@ -10,6 +10,13 @@ const getPerson = (id) => {
       });
 };
 
+const getPersonAltNames = () =>
+   fetch('/api/1.0/person/config/alt_names.json').then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });;
+
+
 /*
 * POST a new person
 */
@@ -48,6 +55,7 @@ const patchPerson = (id, body) => {
 
 export {
    getPerson,
+   getPersonAltNames,
    postPerson,
    patchPerson
 };

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

@@ -43,6 +43,11 @@
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
+   <div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
+      <input class="form-control form-control-lg" :id="a.key" v-model="altNames[i]" />
+      <label :for="a.key">{{ a.labels.fr }}</label>
+   </div>
+
    <div class="input-group mb-3">
       <span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
       <input type="date"
@@ -75,7 +80,7 @@
 </template>
 
 <script>
-import { getPerson } from '../../_api/OnTheFly';
+import { getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
@@ -88,7 +93,11 @@ export default {
    data() {
       return {
          person: {
-            type: 'person'
+            type: 'person',
+            altNames: []
+         },
+         config: {
+            altNames: []
          }
       }
    },
@@ -101,6 +110,17 @@ export default {
          set(value) { this.person.lastName = value; },
          get() { return this.person.lastName; }
       },
+      altNames: {
+         set(value) { this.person.altNames.push(
+            {
+               key: 'jeune_fille',
+               label: {
+                  fr: value
+               }
+            });
+         },
+         get() { return this.person.altNames; }
+      },
       gender: {
          set(value) { this.person.gender = value; },
          get() { return this.person.gender; }
@@ -150,6 +170,10 @@ export default {
       }
    },
    mounted() {
+      getPersonAltNames()
+         .then(altNames => {
+            this.config.altNames = altNames;
+         });
       if (this.action !== 'create') {
          this.loadData();
       }