From 1d9cdf0f727f2257526095f3c2250d547e4bfa1d Mon Sep 17 00:00:00 2001
From: Tom Fink <thomasafink@Toms-MacBook-Air.local>
Date: Mon, 25 Nov 2024 17:58:44 +0100
Subject: [PATCH] fix(ZMS-3436): attempt fix for multi click appointment slot

---
 frontend/src/components/TheCalendar.vue | 33 ++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/TheCalendar.vue b/frontend/src/components/TheCalendar.vue
index 9abb98c..d5fe043 100644
--- a/frontend/src/components/TheCalendar.vue
+++ b/frontend/src/components/TheCalendar.vue
@@ -87,10 +87,18 @@
                 <h4 class="time-hour" tabindex="0">
                   {{ times[0].format('H') }}:00-{{ times[0].format('H') }}:59
                 </h4>
-                <div class="select-appointment" tabindex="0" v-for="timeSlot in times" :key="timeSlot.unix()"
+                <div class="select-appointment" :class="{ 'disabled': isLoading }" tabindex="0" v-for="timeSlot in times" :key="timeSlot.unix()"
                   v-on:keyup.enter="handleTimeSlotSelection(timeSlot)"
                   v-on:keyup.space="handleTimeSlotSelection(timeSlot)" @click="handleTimeSlotSelection(timeSlot)">
                   {{ timeSlot.format('H:mm') }}
+                  <v-progress-circular
+                    v-if="isLoading && selectedTimeSlot && selectedTimeSlot.unix() === timeSlot.unix()"
+                    indeterminate
+                    size="16"
+                    width="2"
+                    color="primary"
+                    class="ms-2"
+                  ></v-progress-circular>
                 </div>
               </div>
               <v-col
@@ -138,7 +146,8 @@ export default {
     selectedTimeSlot: null,
     captchaKey: 0,
     captchaSolution: null,
-    appointmentCounts: []
+    appointmentCounts: [],
+    isLoading: false
   }),
   computed: {
     captchaDetails() {
@@ -248,12 +257,17 @@ export default {
         })
     },
     handleTimeSlotSelection: function (timeSlot) {
+      if (this.isLoading) {
+        console.log("nope");
+        return;
+      } 
       this.selectedTimeSlot = timeSlot;
       this.showCaptcha = this.captchaDetails.captchaEnabled && (this.provider.scope) && (this.provider.scope.captchaActivatedRequired) && (this.provider.scope.captchaActivatedRequired === '1');
       if (this.showCaptcha) {
         this.captchaKey += 1;
         this.captchaSolution = null;
       } else {
+        this.isLoading = true;
         this.chooseAppointment(timeSlot);
       }
     },
@@ -289,9 +303,13 @@ export default {
           this.$store.commit('data/setAppointment', appointment)
           this.$emit('next')
           window.scrollTo(0, 0)
-        }, () => {
-          this.timeSlotError = this.$t('noAppointmentsAvailable')
         })
+      .catch(() => {
+        this.timeSlotError = this.$t('noAppointmentsAvailable')
+      })
+      .finally(() => {
+        this.isLoading = false
+      });
 
       if (!this.timeSlotError && oldAppointment && !this.$store.state.isRebooking) {
         this.$store.dispatch('API/cancelAppointment', oldAppointment)
@@ -346,6 +364,7 @@ export default {
     },
     handleCaptchaError(error) {
       console.error("Captcha error:", error);
+      this.isLoading = false;
       // Handle the error, possibly show a message to the user
     }
   },
@@ -425,6 +444,12 @@ export default {
   float: left;
 }
 
+.select-appointment.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .v-picker {
   margin-top: 0 !important;
 }