Improved: workflow to allow user to select channel to set threshold f…

…or, while scheduling threshold job(#224).

src/locales/en.json

@@ -10,6 +10,7 @@
   "Canceling this job will cancel this occurrence and all following occurrences. This job will have to be re-enabled manually to run it again.": "Canceling this job will cancel this occurrence and all following occurrences. This job will have to be re-enabled manually to run it again.",
   "Cancel job": "Cancel job",
   "Change": "Change",
+  "Channels": "Channels",
   "Check products": "Check products",
   "Clear All": "Clear All",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",

src/services/UtilService.ts

@@ -25,8 +25,18 @@ const fetchFacilitiesByProductStore = async (payload: any): Promise <any>  => {
   });
 }
 
+
+const fetchChannels = async (payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "POST",
+    data: payload
+  })
+}
+
 export const UtilService = {
   fetchFacilitiesByProductStore,
   getServiceStatusDesc,
-  getShopifyConfig
+  getShopifyConfig,
+  fetchChannels
 }

src/store/modules/util/UtilState.ts

@@ -2,4 +2,5 @@ export default interface UtilState {
   statusDesc: any;
   shopifyConfig: any;
   facilitiesByProductStore: any;
+  channels: [];
 }

src/store/modules/util/actions.ts

@@ -81,6 +81,32 @@ const actions: ActionTree<UtilState, RootState> = {
     }
     return {};
   },
+
+  async fetchChannels({ commit }) {
+    let channels = []
+    const params = {
+      entityName: "FacilityGroup",
+      inputFields: {
+        facilityGroupTypeId: 'CHANNEL_FAC_GROUP'
+      },
+      noConditionFind: 'Y',
+      orderBy: "facilityGroupName ASC",
+      fieldList: ["facilityGroupId", "facilityGroupTypeId", "facilityGroupName", "description"],
+      viewSize: 50
+    }
+
+    try {
+      const resp = await UtilService.fetchChannels(params)
+      if (!hasError(resp)) {
+        channels = resp.data.docs
+      } else {
+        throw resp.data
+      }
+    } catch (error) {
+      logger.error(error)
+    }
+    commit(types.UTIL_CHANNELS_UPDATED, channels)
+  },
 
   async clearFacilitiesByProductStore({ commit }) {
     commit(types.UTIL_PRODUCT_STORE_FACILITY_UPDATED, {})

src/store/modules/util/getters.ts

@@ -11,6 +11,9 @@ const getters: GetterTree <UtilState, RootState> = {
   },
   getFacilityByProductStore(state) {
     return state.facilitiesByProductStore
+  },
+  getChannels(state) {
+    return state.channels;
   }
 }
 export default getters;

src/store/modules/util/index.ts

@@ -10,7 +10,8 @@ const utilModule: Module<UtilState, RootState> = {
   state: {
     statusDesc: {},
     shopifyConfig: {},
-    facilitiesByProductStore: {}
+    facilitiesByProductStore: {},
+    channels: []
   },
   getters,
   actions,

src/store/modules/util/mutation-types.ts

@@ -1,4 +1,5 @@
 export const SN_UTIL = 'util'
 export const UTIL_SERVICE_STATUS_DESC_UPDATED = SN_UTIL + '/SERVICE_STATUS_DESC_UPDATED'
 export const UTIL_SHOPIFY_CONFIG_UPDATED = SN_UTIL + '/SHOPIFY_CONFIG_UPDATED'
-export const UTIL_PRODUCT_STORE_FACILITY_UPDATED = SN_UTIL + '/PRODUCT_STORE_FACILITY_UPDATED'
+export const UTIL_PRODUCT_STORE_FACILITY_UPDATED = SN_UTIL + '/PRODUCT_STORE_FACILITY_UPDATED'
+export const UTIL_CHANNELS_UPDATED = SN_UTIL + '/CHANNELS_UPDATED'

src/store/modules/util/mutations.ts

@@ -13,6 +13,9 @@ const mutations: MutationTree <UtilState> = {
   },
   [types.UTIL_PRODUCT_STORE_FACILITY_UPDATED] (state, payload) {
     state.facilitiesByProductStore = payload
+  },
+  [types.UTIL_CHANNELS_UPDATED](state, payload) {
+    state.channels = payload
   }
 }
 export default mutations;

src/views/ScheduleThreshold.vue

@@ -20,7 +20,13 @@
               <ion-icon :icon="optionsOutline" slot="start" />
               <ion-label>{{ threshold }} {{ $t('threshold') }}</ion-label>
             </ion-item>
-
+            <ion-item-divider color="light">
+              <ion-label>{{ $t('Channels') }}</ion-label>
+            </ion-item-divider>
+            <ion-item v-for="channel in channels" :key="channel.facilityGroupId">
+              <ion-label>{{ channel?.facilityGroupName }}</ion-label>
+              <ion-toggle :checked="isChannelChecked(channel.facilityGroupId)" :disabled="isChannelDisabled(channel.facilityGroupId)" slot="end" @ionChange="updateChannels($event, channel.facilityGroupId)"/>
+            </ion-item>
             <ion-item>
               <ion-label color="medium">{{ $t("Name") }}</ion-label>
               <ion-input :placeholder="$t('rule name')" v-model="jobName"/>
@@ -115,6 +121,7 @@ import {
   IonIcon,
   IonInput,
   IonItem,
+  IonItemDivider,
   IonLabel,
   IonList,
   IonListHeader,
@@ -123,6 +130,7 @@ import {
   IonReorder,
   IonReorderGroup,
   IonTitle,
+  IonToggle,
   IonToolbar
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
@@ -153,6 +161,7 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
+    IonItemDivider,
     IonLabel,
     IonList,
     IonListHeader,
@@ -161,6 +170,7 @@ export default defineComponent({
     IonReorder,
     IonReorderGroup,
     IonTitle,
+    IonToggle,
     IonToolbar
   },
   data() {
@@ -175,13 +185,15 @@ export default defineComponent({
       failedJobs: [] as any,
       successJobs: [] as any,
       job: {} as any,
-      isOpen: false
+      isOpen: false,
+      selectedChannels: [] as any
     }
   },
   computed: {
     ...mapGetters({
       currentEComStore: 'user/getCurrentEComStore',
       shopifyConfig: 'util/getShopifyConfig',
+      channels: 'util/getChannels',
       facilitiesByProductStore: 'util/getFacilityByProductStore',
       query: 'product/getQuery',
       temporalExpr: 'job/getTemporalExpr',
@@ -399,7 +411,9 @@ export default defineComponent({
         const resp = await this.store.dispatch('util/fetchFacilitiesByProductStore', {
           inputFields: {
             productStoreId,
-            facilityTypeId: 'CONFIGURATION'
+            facilityTypeId: 'CONFIGURATION',
+            facilityGroupId: this.selectedChannels,
+            facilityGroupId_op: 'in'
           },
           entityName: 'ProductStoreFacilityDetail',
           fieldList: ['facilityId', 'productStoreId'],
@@ -559,6 +573,23 @@ export default defineComponent({
       }
 
       emitter.emit('dismissLoader');
+    },
+    updateChannels(event: CustomEvent, facilityGroupId: string) {
+      if (event.detail.checked && this.selectedChannels?.some((channel: any) => channel === facilityGroupId)) {
+        return;
+      }
+
+      if (this.selectedChannels?.some((channel:any) => channel === facilityGroupId)) {
+        this.selectedChannels.splice(this.selectedChannels?.indexOf(facilityGroupId), 1);
+      } else {
+        this.selectedChannels.push(facilityGroupId);
+      }
+    },
+    isChannelChecked(facilityGroupId: string) {
+      return this.selectedChannels?.some((channel: any) => channel === facilityGroupId)
+    },
+    isChannelDisabled(facilityGroupId: string) {
+      return this.selectedChannels?.length == 1 && this.selectedChannels?.some((channel: any) => channel === facilityGroupId)
     }
   },
   async ionViewWillEnter() {
@@ -597,6 +628,10 @@ export default defineComponent({
     // maintaining the initial order of jobs to take the diff from the updated seq after reordering
     this.initialJobsOrder = JSON.parse(JSON.stringify(this.jobsForReorder))
     this.updatedJobsOrder = [ newJob ]
+    
+    //fetch channels and preselect all
+    await this.store.dispatch('util/fetchChannels')
+    this.selectedChannels = this.channels.map((channel: any) => channel.facilityGroupId)
   },
   ionViewDidLeave() {
     // TODO: remove this initialization from the hook and update the code accordingly