Integrate gender entity into vue components upon creation of persons

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

@@ -73,17 +73,16 @@
    <!--  TODO fix placeholder if undefined
    -->
    <div class="form-floating mb-3">
-      <select
+     <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>
-         <option value="both">{{ $t('person.gender.both') }}</option>
-      </select>
+     >
+       <option selected disabled >{{ $t('person.gender.placeholder') }}</option>
+       <option v-for="g in config.genders" :value="g.id" :key="g.id">
+         {{ g.label.fr }}
+       </option>
+     </select>
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
@@ -178,7 +177,7 @@
 </template>
 
 <script>
-import { getCentersForPersonCreation, getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
+import { getCentersForPersonCreation, getCivilities, getGenders, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
 
@@ -204,6 +203,7 @@ export default {
             altNames: [],
             civilities: [],
             centers: [],
+            genders: []
          },
          showCenters: false, // NOTE: must remains false if the form is not in create mode
          showAddressFormValue: false,
@@ -237,8 +237,8 @@ export default {
          get() { return this.person.lastName; }
       },
       gender: {
-         set(value) { this.person.gender = value; },
-         get() { return this.person.gender; }
+         set(value) { this.person.gender = {id: value, type: 'chill_main_gender'}; },
+         get() { return this.person.gender ? this.person.gender.id : null; }
       },
       civility: {
          set(value) { this.person.civility = {id: value, type: 'chill_main_civility'}; },
@@ -334,6 +334,12 @@ export default {
                this.config.civilities = civilities.results;
             }
          });
+      getGenders()
+          .then(genders => {
+            if ('results' in genders) {
+              this.config.genders = genders.results;
+            }
+          });
       if (this.action !== 'create') {
          this.loadData();
       } else {