Improved: api logic, syntax, and disabled conditions in favbutton (#28)

hotwax · Nov 29, 2023 · c549503 · c549503
1 parent 2d75565
commit c549503
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 67 deletions.
diff --git a/src/components/AddOperatingHoursModal.vue b/src/components/AddOperatingHoursModal.vue
@@ -13,7 +13,7 @@
     <ion-accordion-group v-model="selectedCalendarId" >
       <ion-radio-group v-model="selectedCalendarId">
         <ion-accordion v-for="calendar in calendars" :key="calendar.calendarId" :value="calendar.calendarId">
-          <ion-item slot="header" color="light">
+          <ion-item slot="header">
             <ion-radio :value="calendar.calendarId" slot="start" />
             <ion-label class="ion-text-wrap">
               {{ calendar.description }}
@@ -73,7 +73,7 @@
   </ion-content>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button @click="addOperatingHours">
+    <ion-fab-button :disabled="facilityCalendar.calendarId === selectedCalendarId" @click="addOperatingHours">
       <ion-icon :icon="saveOutline" />
     </ion-fab-button>
   </ion-fab>
@@ -153,7 +153,12 @@ export default defineComponent({
     async addOperatingHours() {
       let resp;
       try {
-        resp = await this.removeCalendarFromFacility()
+        resp = await FacilityService.removeFacilityCalendar({
+          facilityId: this.facilityId,
+          calendarId: this.facilityCalendar.calendarId,
+          facilityCalendarTypeId: this.facilityCalendar.facilityCalendarTypeId,
+          fromDate: this.facilityCalendar.fromDate
+        })
 
         if(hasError(resp)) {
           throw resp.data;
@@ -165,7 +170,7 @@ export default defineComponent({
         return;
       }
 
-      if(this.selectedCalendarId && this.selectedCalendarId !== this.facilityCalendar.calendarId) {
+      if(this.selectedCalendarId) {
         try {
           resp = await FacilityService.associateCalendarToFacility({
             facilityId: this.facilityId,
@@ -188,14 +193,6 @@ export default defineComponent({
       this.store.dispatch('facility/fetchFacilityCalendar', { facilityId: this.facilityId })
       modalController.dismiss()
     },
-    async removeCalendarFromFacility() {
-      return await FacilityService.removeFacilityCalendar({
-        facilityId: this.facilityId,
-        calendarId: this.facilityCalendar.calendarId,
-        facilityCalendarTypeId: this.facilityCalendar.facilityCalendarTypeId,
-        fromDate: this.facilityCalendar.fromDate
-      })
-    },
     getOpenEndTime(startTime: any, capacity: any) {
       const openTime = DateTime.fromFormat(startTime, 'HH:mm:ss').toFormat('HH:mm a');
       const endTime = DateTime.fromMillis(DateTime.fromFormat(startTime, 'HH:mm:ss').toMillis() + capacity).toFormat('hh:mm a')

diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
@@ -17,7 +17,7 @@
     </ion-item>
     <ion-item lines="full" class="ion-margin-top">
       <ion-label>{{ translate("Daily timings") }}</ion-label>
-      <ion-toggle :isChecked="isDailyTimingsChecked" @click="updateDailyTimings" slot="end"/>
+      <ion-toggle :isChecked="isDailyTimingsChecked" @click="updateDailyTimings" slot="end" />
     </ion-item>
 
     <ion-list lines="none" v-if="isDailyTimingsChecked">
@@ -45,13 +45,13 @@
           <p>{{ translate("Open and close time") }}</p>
         </ion-label>
         <ion-datetime-button datetime="DailyStartTime">
-          <ion-label :slot="week.DailyStartTime ? '' : 'time-target'"  >
+          <ion-label :slot="week.DailyStartTime ? '' : 'time-target'">
             <p >{{ translate("Start Time") }}</p>
           </ion-label>
         </ion-datetime-button>
         -
         <ion-datetime-button datetime="DailyEndTime">
-          <ion-label :slot="week.DailyEndTime ? '' : 'time-target'"  >
+          <ion-label :slot="week.DailyEndTime ? '' : 'time-target'">
             <p >{{ translate("End Time") }}</p>
           </ion-label>
         </ion-datetime-button>
@@ -60,11 +60,11 @@
   </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="week[day+'StartTime']" presentation="time" show-default-buttons hour-cycle="h12" @ionChange="updateTime($event, day+'StartTime')" />
+    <ion-datetime :id="day+'StartTime'" v-model="week[day+'StartTime']" presentation="time" 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="week[day+'EndTime']" presentation="time" show-default-buttons hour-cycle="h12" @ionChange="updateTime($event, day+'EndTime')" />
+    <ion-datetime :id="day+'EndTime'" v-model="week[day+'EndTime']" presentation="time" show-default-buttons hour-cycle="h12" />
   </ion-modal>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -102,7 +102,7 @@ import { FacilityService } from "@/services/FacilityService";
 import logger from "@/logger";
 import { hasError } from "@hotwax/oms-api";
 import { DateTime } from "luxon";
-import { mapGetters, useStore } from "vuex";
+import { useStore } from "vuex";
 import { showToast } from "@/utils";
 
 export default defineComponent({
@@ -134,11 +134,6 @@ export default defineComponent({
     }
   },
   props: ['facilityId'],
-  computed: {
-    ...mapGetters({
-      userProfile: 'user/getUserProfile'
-    })
-  },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true});
@@ -147,11 +142,6 @@ export default defineComponent({
       this.isDailyTimingsChecked = !this.isDailyTimingsChecked
       this.days = this.isDailyTimingsChecked ? ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] : ['Daily']
     },
-    updateTime(ev: CustomEvent, day: any) {
-      if(this.week[day]) {
-        this.week.day = ev.detail.value
-      }
-    },
     async saveCustomSchedule() {
       let resp;
       let calendarId;
@@ -180,26 +170,22 @@ export default defineComponent({
         resp = await FacilityService.createFacilityCalendar({ ...payload, description: this.week.description})
         if(!hasError(resp)) {
           calendarId = resp.data.calendarId
-        } else {
-          throw resp.data
-        }
-      } catch(err) {
-        logger.error(err)
-      }
-        
-      try {
-        resp = await FacilityService.associateCalendarToFacility({
-          facilityId: this.facilityId,
-          calendarId: 10031,
-          fromDate: DateTime.now().toMillis(),
-          facilityCalendarTypeId: 'OPERATING_HOURS'
-        })
 
-        if(!hasError(resp)) {
-          showToast(translate("Successfully created and associated calendar to the facility."))
-          await this.store.dispatch('facility/fetchFacilityCalendar', { facilityId: this.facilityId })
-          await this.store.dispatch('util/fetchUtilCalendars', { facilityId: this.facilityId })
-          modalController.dismiss()
+          resp = await FacilityService.associateCalendarToFacility({
+            facilityId: this.facilityId,
+            calendarId: 10031,
+            fromDate: DateTime.now().toMillis(),
+            facilityCalendarTypeId: 'OPERATING_HOURS'
+          })
+
+          if(!hasError(resp)) {
+            showToast(translate("Successfully created and associated calendar to the facility."))
+            await this.store.dispatch('facility/fetchFacilityCalendar', { facilityId: this.facilityId })
+            await this.store.dispatch('util/fetchCalendars', { facilityId: this.facilityId })
+            modalController.dismiss()
+          } else {
+            throw resp.data
+          }
         } else {
           throw resp.data
         }

diff --git a/src/components/OperatingHoursPopover.vue b/src/components/OperatingHoursPopover.vue
@@ -37,7 +37,6 @@ import { mapGetters, useStore } from "vuex";
 import AddOperatingHoursModal from "@/components/AddOperatingHoursModal.vue";
 import CustomScheduleModal from "@/components/CustomScheduleModal.vue";
 import { FacilityService } from "@/services/FacilityService";
-import { DateTime } from "luxon";
 import { showToast } from "@/utils";
 import logger from "@/logger";
 import { hasError } from "@/adapter";
@@ -88,7 +87,6 @@ export default defineComponent({
         resp = await FacilityService.removeFacilityCalendar({
         facilityId: this.facilityId,
         calendarId: this.facilityCalendar.calendarId,
-        // thruDate: DateTime.now().toFormat('MM/dd/yyyy'),
         facilityCalendarTypeId: this.facilityCalendar.facilityCalendarTypeId,
         fromDate: this.facilityCalendar.fromDate
       })

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -153,6 +153,7 @@
   "Order fulfillment capacity": "Order fulfillment capacity",
   "orders allocated today": "{orderCount} orders allocated today",
   "orders in fulfillment queue": "{orderCount} orders in fulfillment queue",
+  "Others": "Others",
   "Parking": "Parking",
   "Party Id": "Party Id",
   "Party successfully removed from facility.": "Party successfully removed from facility.",

diff --git a/src/services/FacilityService.ts b/src/services/FacilityService.ts
@@ -373,7 +373,7 @@ const createEnumeration = async (payload: any): Promise<any> => {
   })
 }
 
-const fetchFacilityCalendars = async (payload: any): Promise<any> => {
+const fetchFacilityCalendar = async (payload: any): Promise<any> => {
   return api({
     url: "performFind",
     method: "post",
@@ -417,7 +417,7 @@ export const FacilityService = {
   deleteShopifyShopLocation,
   fetchFacilities,
   fetchFacilitiesOrderCount,
-  fetchFacilityCalendars,
+  fetchFacilityCalendar,
   fetchFacilityGroupInformation,
   fetchFacilityMappings,
   fetchFacilityOrderCounts,

diff --git a/src/services/UtilService.ts b/src/services/UtilService.ts
@@ -80,7 +80,7 @@ const fetchCalendars = async (payload: any): Promise<any> => {
   })
 }
 
-const fetchCalendarWeek = async (payload: any): Promise<any> => {
+const fetchCalendarWeekTimings = async (payload: any): Promise<any> => {
   return api({
     url: "performFind",
     method: "post",
@@ -90,7 +90,7 @@ const fetchCalendarWeek = async (payload: any): Promise<any> => {
 
 export const UtilService = {
   fetchCalendars,
-  fetchCalendarWeek,
+  fetchCalendarWeekTimings,
   fetchCountries,
   fetchExternalMappingTypes,
   fetchFacilityTypes,

diff --git a/src/store/modules/facility/actions.ts b/src/store/modules/facility/actions.ts
@@ -294,10 +294,10 @@ const actions: ActionTree<FacilityState, RootState> = {
         },
         entityName: "StoreOperatingHours",
         filterByDate: 'Y',
-        // viewSize: 1
+        viewSize: 1
       }
 
-      resp = await FacilityService.fetchFacilityCalendars(params)
+      resp = await FacilityService.fetchFacilityCalendar(params)
 
       if(!hasError(resp) && resp.data.count) {
         facilityCalendar = resp.data.docs[0]

diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
@@ -178,7 +178,7 @@ const actions: ActionTree<UtilState, RootState> = {
     commit(types.UTIL_EXTERNAL_MAPPING_TYPES_UPDATED, externalMappingTypes)
   },
 
-  async fetchUtilCalendars({ commit, dispatch }, payload) {
+  async fetchCalendars({ commit, dispatch }, payload) {
     let calendars = [] as any
     let calendarWeekTimings = [] as any
     let resp;
@@ -197,7 +197,7 @@ const actions: ActionTree<UtilState, RootState> = {
       if(!hasError(resp) && resp.data.count) {
         calendars = resp.data.docs
 
-        resp = await UtilService.fetchCalendarWeek({
+        resp = await UtilService.fetchCalendarWeekTimings({
           inputFields: {
             calendarWeekId: payload.calendarWeekId
           },
@@ -224,7 +224,6 @@ const actions: ActionTree<UtilState, RootState> = {
       logger.error('Failed to fetch facility calendars', err)
     }
 
-
     commit(types.UTIL_CALENDARS_UPDATED, calendars)
   },
 

diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
@@ -46,10 +46,10 @@
                   {{ translate("Latitude & Longitude") }}
                 </ion-card-title>
               </ion-card-header>
-              <ion-card-content>
-                {{ translate("These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.") }}
-              </ion-card-content>
               <div v-if="postalAddress?.latitude">
+                <ion-card-content>
+                  {{ translate("These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.") }}
+                </ion-card-content>
                 <ion-item lines="full">
                   <ion-label>{{ translate("Latitude") }}</ion-label>
                   <p>{{ postalAddress.latitude }}</p>
@@ -67,7 +67,6 @@
             </ion-card>
           </div>
 
-          <!-- Todo: add functionality to operating hours card below. -->
           <ion-card v-if="!facilityCalendar.calendarId">
             <ion-card-header>
               <div>
@@ -86,7 +85,7 @@
               </ion-item>
             </ion-radio-group>
             <ion-item button lines="none" v-if="calendars.length > 3"  @click="addOperatingHours">
-              <ion-label> {{ calendars.length - 3 }} {{ "Others" }}</ion-label>
+              <ion-label> {{ calendars.length - 3 }} {{ translate("Others") }}</ion-label>
               <ion-icon :icon="chevronForwardOutline" />
             </ion-item>
             <ion-item button lines="none" @click="addCustomSchedule">
@@ -495,7 +494,7 @@ export default defineComponent({
     return {
       isLoading: true, // shows whether the facility information fetching is completed or not
       segment: 'external-mappings',
-      defaultDaysToShip: '', // not assinging 0 by default as it will convey the user that the facility can ship same day(as the value is 0), but actually defaultDays are not setup on the facility
+      defaultDaysToShip: '', // not assinging 0 by default as it will convey the user that the facility can ship same day, but actually defaultDays are not setup on the facility
       primaryMember: {} as any,
       isCalendarFound: true,
       selectedCalendarId: 'DEFAULT'
@@ -520,7 +519,7 @@ export default defineComponent({
   props: ["facilityId"],
   async ionViewWillEnter() {
     await Promise.all([this.store.dispatch('facility/fetchCurrentFacility', { facilityId: this.facilityId }), this.store.dispatch('util/fetchExternalMappingTypes'), this.store.dispatch('util/fetchLocationTypes'), this.store.dispatch('util/fetchPartyRoles')])
-    await Promise.all([this.store.dispatch('facility/fetchFacilityLocations', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityParties', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityMappings', { facilityId: this.facilityId, facilityIdenTypeIds: Object.keys(this.externalMappingTypes)}), this.store.dispatch('facility/fetchShopifyFacilityMappings', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityProductStores', { facilityId: this.facilityId }), this.store.dispatch('util/fetchProductStores'), this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId }), this.store.dispatch('util/fetchUtilCalendars', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityCalendar', { facilityId: this.facilityId })])
+    await Promise.all([this.store.dispatch('facility/fetchFacilityLocations', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityParties', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityMappings', { facilityId: this.facilityId, facilityIdenTypeIds: Object.keys(this.externalMappingTypes)}), this.store.dispatch('facility/fetchShopifyFacilityMappings', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityProductStores', { facilityId: this.facilityId }), this.store.dispatch('util/fetchProductStores'), this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId }), this.store.dispatch('util/fetchCalendars', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityCalendar', { facilityId: this.facilityId })])
     this.defaultDaysToShip = this.current.defaultDaysToShip
     this.isLoading = false
     this.fetchFacilityPrimaryMember()
@@ -781,9 +780,8 @@ export default defineComponent({
       }
     },
     async revokePrimaryStatusFromStore() {
-      let resp;
       try {
-        resp = await FacilityService.updateFacilityToGroup({
+        const resp = await FacilityService.updateFacilityToGroup({
           "facilityId": this.facilityId,
           "facilityGroupId": this.primaryMember.facilityGroupId,
           "fromDate": this.primaryMember.fromDate,