Merge branch 'master' into notification/completion

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

@@ -21,14 +21,19 @@
 
 <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')" />
+      <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')" />
       <label for="firstname">{{ $t('person.firstname') }}</label>
    </div>
 
-   <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
-      <label for="lastname">{{ $t('person.lastname') }}</label>
+   <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" />
+      <label :for="a.key">{{ a.labels.fr }}</label>
    </div>
 
    <!--  TODO fix placeholder if undefined
@@ -71,11 +76,20 @@
          aria-describedby="mobilenumber" />
    </div>
 
+   <div class="input-group mb-3">
+      <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')"
+         aria-describedby="email" />
+   </div>
+
 </div>
 </template>
 
 <script>
-import { getPerson } from '../../_api/OnTheFly';
+import { getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
@@ -88,13 +102,19 @@ export default {
    data() {
       return {
          person: {
-            type: 'person'
-         }
+            type: 'person',
+            altNames: []
+         },
+         config: {
+            altNames: []
+         },
       }
    },
    computed: {
       firstName: {
-         set(value) { this.person.firstName = value; },
+         set(value) {
+            this.person.firstName = value;
+         },
          get() { return this.person.firstName; }
       },
       lastName: {
@@ -125,6 +145,10 @@ export default {
          set(value) { this.person.mobilenumber = value; },
          get() { return this.person.mobilenumber; }
       },
+      email: {
+         set(value) { this.person.email = value; },
+         get() { return this.person.email; }
+      },
       genderClass() {
          switch (this.person.gender) {
             case 'woman':
@@ -150,6 +174,10 @@ export default {
       }
    },
    mounted() {
+      getPersonAltNames()
+         .then(altNames => {
+            this.config.altNames = altNames;
+         });
       if (this.action !== 'create') {
          this.loadData();
       }
@@ -162,7 +190,16 @@ export default {
                console.log('get person', this.person);
                resolve();
          }));
-      }
+      },
+      onAltNameInput(event) {
+         const key = event.target.id;
+         const label = event.target.value;
+         let updateAltNames = this.person.altNames.filter((a) => a.key !== key);
+         updateAltNames.push(
+            {'key': key, 'label': label}
+         )
+         this.person.altNames = updateAltNames;
+      },
    }
 }
 </script>