AddPerson: add civility when creating a person

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -277,7 +277,7 @@ export default {
          }
       },
       saveFormOnTheFly({ type, data }) {
-         // console.log('saveFormOnTheFly from addPersons, type', type, ', data', data);
+         console.log('saveFormOnTheFly from addPersons, type', type, ', data', data);
          if (type === 'person') {
             makeFetch('POST', '/api/1.0/person/person.json', data)
                .then(response => {

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

@@ -87,6 +87,20 @@
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
+   <div class="form-floating mb-3">
+      <select
+         class="form-select form-select-lg"
+         id="civility"
+         v-model="civility"
+         >
+         <option selected disabled >{{ $t('person.civility.placeholder') }}</option>
+         <option v-for="c in config.civilities" :value="c.id" :key="c.id">
+            {{ c.name.fr }}
+         </option>
+      </select>
+      <label>{{ $t('person.civility.title') }}</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"
@@ -134,7 +148,7 @@
 </template>
 
 <script>
-import { getPerson, getPersonAltNames } from '../../_api/OnTheFly';
+import { getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
@@ -151,7 +165,8 @@ export default {
             altNames: []
          },
          config: {
-            altNames: []
+            altNames: [],
+            civilities: []
          },
          errors: []
       }
@@ -171,6 +186,10 @@ export default {
          set(value) { this.person.gender = value; },
          get() { return this.person.gender; }
       },
+      civility: {
+         set(value) { this.person.civility = value; },
+         get() { return this.person.civility; }
+      },
       birthDate: {
          set(value) {
             if (this.person.birthdate) {
@@ -230,6 +249,13 @@ export default {
          .then(altNames => {
             this.config.altNames = altNames;
          });
+      getCivilities()
+         .then(civilities => {
+            if ('results' in civilities) {
+               this.config.civilities = civilities.results;
+            }
+         });
+
       if (this.action !== 'create') {
          this.loadData();
       }