From 937be1af3ac781bf74e1eab49f122fd8da55316b Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 3 Jun 2021 14:34:52 +0200
Subject: [PATCH] fix html5 birthdate field on modal form OnTheFly

---
 .../public/vuejs/_components/OnTheFly.vue     |  2 +
 .../Resources/public/vuejs/_api/OnTheFly.js   | 16 +------
 .../vuejs/_components/OnTheFly/Person.vue     | 44 +++++++------------
 3 files changed, 20 insertions(+), 42 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
index ac5362ce7..8e1e2227a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
@@ -137,8 +137,10 @@ export default {
          } else if (this.type === 'thirdparty') {
             this.$refs.castThirdparty.postData();
          } else {
+            // saveAction() ==cast=to==> child.castByType() ==cast=to==> grand-child.postData()
             this.$refs.castNew.castByType();
          }
+         this.modal.showModal = false;
       }
    }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
index 332f09e01..6adbc7028 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
@@ -11,20 +11,7 @@ const getPerson = (id) => {
 };
 
 /*
-* GET a thirdparty by id
-* TODO move in ChillThirdpartyAssets !!
-*/
-const getThirdparty = (id) => {
-   const url = `/api/1.0/thirdparty/thirdparty/${id}.json`;
-   return fetch(url)
-      .then(response => {
-         if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response');
-      });
-};
-
-/*
-* POST a person
+* POST a new person
 */
 const postPerson = (body) => {
    const url = `/api/1.0/person/person.json`;
@@ -43,6 +30,5 @@ const postPerson = (body) => {
    
 export { 
    getPerson, 
-   getThirdparty,
    postPerson 
 };
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 62fd20a2a..a3cf339e2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -53,7 +53,6 @@
    
 </div>
 <div v-else-if="action === 'edit' || action === 'create'">
-   {{ action }}
    
    <input v-model="firstName" :placeholder="$t('person.firstname')" />
    <input v-model="lastName" :placeholder="$t('person.lastname')" />
@@ -68,18 +67,12 @@
       <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
    </select>
    
-   <!--
-   <input 
-      type="text"
+   <i class="fa fa-birthday-cake"></i>
+   <input type="date"
       id="chill_personbundle_person_birthdate" 
       name="chill_personbundle_person[birthdate]" 
-      required="required"
-      class="input datepicker"
       v-model="birthDate"
-      aria-label="Use the arrow keys to pick a date"
-      />
-   <datepicker v-model="birthDate" />
-   -->
+   />
    
    <i class="fa fa-phone">
    </i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
@@ -91,9 +84,6 @@
 
 <script>
 import { getPerson, postPerson } from '../../_api/OnTheFly';
-//import Datepicker from 'vue3-datepicker';
-//import { ref } from 'vue';
-//const picked = ref(new Date())
 
 export default {
    name: "OnTheFlyPerson",
@@ -118,17 +108,18 @@ export default {
          set(value) { this.person.gender = value; },
          get() { return this.person.gender; } 
       },
-//      birthDate: {
-//         set(value) { this.person.birthdate.datetime = value; },
-//         get() { 
-//            if (this.person.birthdate) {
-//               let datetime = this.person.birthdate.datetime;
-//               return datetime.getDate() + '-' +  (datetime.getMonth() + 1) + '-' + datetime.getFullYear();
-//            } else {
-//               return ref(new Date());
-//            }
-//         } 
-//      },
+      birthDate: {
+         set(value) { 
+            if (this.person.birthdate) {
+               this.person.birthdate.datetime = value + "T00:00:00+0100"; 
+            } else {
+               this.person.birthdate = { datetime: value + "T00:00:00+0100"};
+            }
+         },
+         get() { 
+            return (this.person.birthdate) ? this.person.birthdate.datetime.split('T')[0] : ''; 
+         } 
+      },
       phonenumber: {
          set(value) { this.person.phonenumber = value; },
          get() { return this.person.phonenumber; }
@@ -168,11 +159,10 @@ export default {
    },
    methods: {
       loadData() {
-         //console.log('loading data', this.id);
          getPerson(this.id)
             .then(person => new Promise((resolve, reject) => {
                this.person = person;
-               //console.log('person', this.person);
+               console.log('get person', this.person);
                resolve();
          }));
       },
@@ -180,7 +170,7 @@ export default {
          postPerson(this.person)
             .then(person => new Promise((resolve, reject) => {
                this.person = person;
-               console.log('person', person);
+               console.log('post person', person);
                resolve();
          }));
       }