From 8affeb08d9e8d7364fea3eed3b83170336ee6264 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 3 Dec 2021 12:10:02 +0100
Subject: [PATCH] person: add altnames in the onthefly component

---
 .../vuejs/_components/OnTheFly/Person.vue     | 37 ++++++-------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
index bae535b1a..c5f21a514 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -31,9 +31,8 @@
       <label for="firstname">{{ $t('person.firstname') }}</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" @change="enterAltName(value, a)" /> -->
-       <input class="form-control form-control-lg" :id="a.key" v-model="person.altNames[i]" />
+   <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>
 
@@ -109,16 +108,12 @@ export default {
          config: {
             altNames: []
          },
-         dataAltNames: []
       }
    },
    computed: {
       firstName: {
          set(value) {
-            console.log(value)
-            console.log(this.dataAltNames)
             this.person.firstName = value;
-            //this.person.altNames = ['CACA'];
          },
          get() { return this.person.firstName; }
       },
@@ -126,19 +121,6 @@ export default {
          set(value) { this.person.lastName = value; },
          get() { return this.person.lastName; }
       },
-      // altNames: {
-      //    set(value) { 
-      //       console.log(value)
-      //       this.person.altNames= 
-      //       {
-      //          key: value.key, //TODO!  // person.altNames is filled by some magic
-      //          label: {
-      //             fr: value
-      //          }
-      //       };
-      //    },
-      //    get() { return this.person.altNames; }
-      // },
       gender: {
          set(value) { this.person.gender = value; },
          get() { return this.person.gender; }
@@ -167,10 +149,6 @@ export default {
          set(value) { this.person.email = value; },
          get() { return this.person.email; }
       },
-      enterAltName(value, a) {
-         console.log('altname value entered', value)
-         console.log(a)
-      },
       genderClass() {
          switch (this.person.gender) {
             case 'woman':
@@ -212,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>