Merge pull request #65 from amansinghbais/facilities/#44

Improved: code for time modal in customScheduleModal (#44)
hotwax · Dec 5, 2023 · 6bd7749 · 6bd7749
2 parents 891545b + 3451c18
commit 6bd7749
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 35 deletions.
diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
@@ -27,17 +27,15 @@
         <ion-label>
           <p>{{ translate(day.charAt(0).toUpperCase() + day.slice(1)) }}</p>
         </ion-label>
-        <ion-datetime-button :datetime="day+'StartTime'">
-          <ion-label :slot="selectedTimesForWeek[day+'StartTime'] ? '' : 'time-target'">
-            <p>{{ translate("Start Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip @click="openTimeModal(day+'StartTime')">
+          {{ selectedTimesForWeek[day+'StartTime'] ? getTime(selectedTimesForWeek[day+'StartTime']) : 'Start Time' }}
+          <ion-icon v-if="selectedTimesForWeek[day+'StartTime']" :icon="closeCircle" @click="clearSelectedTime(day+'StartTime')" @click.stop />
+        </ion-chip>
         -
-        <ion-datetime-button :datetime="day+'EndTime'">
-          <ion-label :slot="selectedTimesForWeek[day+'EndTime'] ? '' : 'time-target'">
-            <p>{{ translate("End Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip @click="openTimeModal(day+'EndTime')">
+          {{ selectedTimesForWeek[day+'EndTime'] ? getTime(selectedTimesForWeek[day+'EndTime']) : 'End Time' }}
+          <ion-icon v-if="selectedTimesForWeek[day+'EndTime']" :icon="closeCircle" @click="clearSelectedTime(day+'EndTime')" @click.stop />
+        </ion-chip>
       </ion-item>
     </ion-list>
 
@@ -46,27 +44,27 @@
         <ion-label>
           <p>{{ translate("Open and close time") }}</p>
         </ion-label>
-        <ion-datetime-button datetime="DailyStartTime">
-          <ion-label :slot="selectedTimesForWeek.DailyStartTime ? '' : 'time-target'">
-            <p >{{ translate("Start Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip @click="openTimeModal('DailyStartTime')">
+          {{ selectedTimesForWeek['DailyStartTime'] ? getTime(selectedTimesForWeek['DailyStartTime']) : 'Start Time' }}
+          <ion-icon v-if="selectedTimesForWeek['DailyStartTime']" :icon="closeCircle" @click="clearSelectedTime('DailyStartTime')" @click.stop />
+        </ion-chip>
         -
-        <ion-datetime-button datetime="DailyEndTime">
-          <ion-label :slot="selectedTimesForWeek.DailyEndTime ? '' : 'time-target'">
-            <p >{{ translate("End Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip @click="openTimeModal('DailyEndTime')">
+          {{ selectedTimesForWeek['DailyEndTime'] ? getTime(selectedTimesForWeek['DailyEndTime']) : 'End Time' }}
+          <ion-icon v-if="selectedTimesForWeek['DailyEndTime']" :icon="closeCircle" @click="clearSelectedTime('DailyEndTime')" @click.stop />
+        </ion-chip>
       </ion-item>
     </ion-list>
   </ion-content>
 
-  <ion-modal class="date-time-modal" v-for="(day, index) in days"  :key="index" :keep-contents-mounted="true">
-    <ion-datetime :id="day+'StartTime'" v-model="selectedTimesForWeek[day+'StartTime']" presentation="time" show-clear-button show-default-buttons hour-cycle="h12" />
-  </ion-modal>
-
-  <ion-modal class="date-time-modal" v-for="(day, index) in days" :key="index" :keep-contents-mounted="true">
-    <ion-datetime :id="day+'EndTime'" v-model="selectedTimesForWeek[day+'EndTime']" presentation="time" show-clear-button show-default-buttons hour-cycle="h12" />
+  <ion-modal class="date-time-modal" :is-open="isTimeModalOpen" @didDismiss="() => isTimeModalOpen = false">
+    <ion-datetime
+      show-default-buttons
+      hour-cycle="h12"
+      presentation="time"
+      :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : ''"
+      @ionChange="updateTime($event)"
+    />
   </ion-modal>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -75,14 +73,14 @@
     </ion-fab-button>
   </ion-fab>
 </template>
-  
+
 <script lang="ts">
 import { 
   IonButton,
   IonButtons,
+  IonChip,
   IonContent,
   IonDatetime,
-  IonDatetimeButton,
   IonFab,
   IonFabButton,
   IonHeader,
@@ -99,7 +97,7 @@ import {
   modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { closeOutline, saveOutline } from "ionicons/icons";
+import { closeCircle, closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 import { FacilityService } from "@/services/FacilityService";
 import logger from "@/logger";
@@ -113,9 +111,9 @@ export default defineComponent({
   components: { 
     IonButton,
     IonButtons,
+    IonChip,
     IonContent,
     IonDatetime,
-    IonDatetimeButton,
     IonFab,
     IonFabButton,
     IonHeader,
@@ -135,6 +133,8 @@ export default defineComponent({
       isDailyTimingsChecked: false as boolean,
       days: ['Daily'],
       selectedTimesForWeek: {} as any,
+      selectedDayTime: '',
+      isTimeModalOpen: false
     }
   },
   props: ['facilityId'],
@@ -147,6 +147,16 @@ export default defineComponent({
     closeModal() {
       modalController.dismiss({ dismissed: true});
     },
+    clearSelectedTime(selectedDayTime: string) {
+      this.selectedTimesForWeek[selectedDayTime] = ''
+    },
+    async openTimeModal(selectedDayTime: string) {
+      this.selectedDayTime = selectedDayTime
+      this.isTimeModalOpen = true
+    },
+    updateTime(event: CustomEvent) {
+      this.selectedTimesForWeek[this.selectedDayTime] = event.detail.value
+    },
     updateDailyTimings() {
       this.isDailyTimingsChecked = !this.isDailyTimingsChecked
       this.days = this.isDailyTimingsChecked ? ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] : ['Daily']
@@ -190,7 +200,7 @@ export default defineComponent({
         }
       } else {
         this.days.map((day: string) => {
-          const startTime = this.selectedTimesForWeek[day+'StartTime']
+          const startTime = DateTime.fromISO(this.selectedTimesForWeek[day+'StartTime'], {setZone: true}).toFormat('HH:mm:ss')
           const capacity = this.getCapacity(this.selectedTimesForWeek[day+'StartTime'], this.selectedTimesForWeek[day+'EndTime'])
           if(startTime && capacity) {
             payload[day+'StartTime'] = startTime
@@ -241,12 +251,16 @@ export default defineComponent({
       }
 
       return formatedEndTime - formatedStartTime
+    },
+    getTime(time: any) {
+      return DateTime.fromISO(time, {setZone: true}).toFormat('hh:mm a')
     }
   },
   setup() {
     const store = useStore();
 
     return {
+      closeCircle,
       closeOutline,
       saveOutline,
       store,
@@ -261,6 +275,7 @@ ion-content {
   --padding-bottom: 80px;
 }
 ion-modal.date-time-modal {
+  --width: 290px;
   --height: 252px;
   --border-radius: 8px;
 }

diff --git a/src/components/OperatingHoursPopover.vue b/src/components/OperatingHoursPopover.vue
@@ -9,12 +9,12 @@
       </ion-item>
       <ion-item button @click="addCustomSchedule">
         <ion-label>
-          {{ translate("Add custom schedules") }}
+          {{ translate("Add custom schedule") }}
         </ion-label>
       </ion-item>
       <ion-item button lines="none" @click="removeCalendarFromFacility">
         <ion-label>
-          {{ translate("Remove schedules") }}
+          {{ translate("Remove schedule") }}
         </ion-label>
       </ion-item>
     </ion-list>

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -10,7 +10,7 @@
   "Address": "Address",
   "Address line 1": "Address line 1",
   "Address line 2": "Address line 2",
-  "Add custom schedules": "Add custom schedules",
+  "Add custom schedule": "Add custom schedule",
   "Add operating hours": "Add operating hours",
   "add your location ID from Shopify": "add your location ID from Shopify",
   "Add your location ID from Shopify": "Add your location ID from Shopify",
@@ -182,7 +182,7 @@
   "Regenerate": "Regenerate",
   "Remove": "Remove",
   "Remove location": "Remove location",
-  "Remove schedules": "Remove schedules",
+  "Remove schedule": "Remove schedule",
   "Removed facility mapping successfully": "Removed facility mapping successfully",
   "Removed shopify mapping successfully": "Removed shopify mapping successfully",
   "Reset": "Reset",