From c6be7955fd3eb1669e3bae5c791b424cfd4817f3 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 21 Apr 2022 13:59:45 +0200
Subject: [PATCH] remove save button datepicker parcours. set timeout

---
 .../components/StartDate.vue                  | 64 ++++++++++++++-----
 1 file changed, 48 insertions(+), 16 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
index b33447b25..c987150be 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
@@ -6,8 +6,7 @@
     <div>
         <div class="mb-3 row">
             <div class="col-sm-12 date-update">
-                <input class="form-control" type="date" id="startDate" v-model="startDate">
-                <button class="btn btn-save date-update-btn" type="submit" @click="updateStartDate"></button>
+                <input class="form-control" type="date" id="startDate" v-model="startDateInput">
             </div>
         </div>
     </div>
@@ -17,31 +16,64 @@
 
 <script>
 
-import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
-import { mapState, mapGetters } from 'vuex';
+import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import { mapState } from 'vuex';
 
 export default {
     name: 'startDate',
+    data() {
+        return {
+            lastRecordedDate: null
+        }
+    },
     methods: {
         updateStartDate(e) {
-            e.preventDefault();
-            const date = e.target.previousSibling.value;
+            this.lastRecordedDate = e.target.value;
 
-            this.$store.dispatch('updateStartDate', date)
-                // .then(this.$toast.open({type: 'success', message: this.$t('startdate.update')}))
-                .catch(({name, violations}) => {
-                    if (name === 'ValidationException' || name === 'AccessException') {
-                        violations.forEach((violation) => this.$toast.open({message: violation}));
-                    } else {
-                        this.$toast.open({message: 'An error occurred'})
-                    }
-            })
+            setTimeout(() => {
+                console.log('timeout finished')
+                const date = e.target.value
+                if (this.lastRecordedDate === date) {
+                    console.log('last recorded', this.lastRecordedDate, 'value', e.target.value)
+                    this.$store.dispatch('updateStartDate', date)
+                        .catch(({name, violations}) => {
+                            if (name === 'ValidationException' || name === 'AccessException') {
+                                violations.forEach((violation) => this.$toast.open({message: violation}));
+                            } else {
+                                this.$toast.open({message: 'An error occurred'})
+                            }
+                    })
+                }
+            }, 3000)
         },
     },
     computed: {
         ...mapState({
             startDate: state => dateToISO(ISOToDatetime(state.accompanyingCourse.openingDate.datetime))
-        })
+        }),
+        startDateInput: {
+            get() {
+                return this.startDate;
+            },
+            set(value) {
+                this.lastRecordedDate = value;
+
+                setTimeout(() => {
+                    console.log('timeout finished')
+                    if (this.lastRecordedDate === value) {
+                        console.log('last recorded', this.lastRecordedDate, 'value', value)
+                        this.$store.dispatch('updateStartDate', value)
+                            .catch(({name, violations}) => {
+                                if (name === 'ValidationException' || name === 'AccessException') {
+                                    violations.forEach((violation) => this.$toast.open({message: violation}));
+                                } else {
+                                    this.$toast.open({message: 'An error occurred'})
+                                }
+                        })
+                    }
+                }, 3000)
+            }
+        }
     }
 }