Implemented: popover to update the group status and add runNow support(#199)

src/components/GroupActionsPopover.vue

@@ -0,0 +1,131 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ group.groupName }}</ion-list-header>
+      <ion-item button @click="runNow">
+        <ion-icon slot="start" :icon="flashOutline" />
+        {{ translate("Run now") }}
+      </ion-item>
+      <ion-item lines="none" button v-if="group.schedule?.paused === 'N'" @click="updateGroupStatus('Y')">
+        <ion-icon slot="start" :icon="pauseOutline" />
+        {{ translate("Move to Draft") }}
+      </ion-item>
+      <ion-item lines="none" button v-else @click="updateGroupStatus('N')">
+        <ion-icon slot="start" :icon="playOutline" />
+        {{ translate("Activate") }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import {
+  alertController,
+  IonContent,
+  IonIcon,
+  IonItem,
+  IonList,
+  IonListHeader,
+  popoverController
+} from "@ionic/vue";
+import { flashOutline, pauseOutline, playOutline } from 'ionicons/icons'
+import { translate } from "@/i18n"
+import { computed, defineProps } from "vue"
+import { OrderRoutingService } from "@/services/RoutingService";
+import { hasError, showToast } from "@/utils";
+import logger from "@/logger";
+import { useStore } from "vuex";
+
+const store = useStore()
+
+const props = defineProps(["group"])
+const isOmsConnectionExist = computed(() => store.getters["util/isOmsConnectionExist"])
+
+async function updateGroupStatus(paused: string) {
+  let routingGroups = [];
+  const payload = {
+    routingGroupId: props.group.routingGroupId,
+    paused
+  }
+
+  try {
+    const resp = await OrderRoutingService.scheduleBrokering(payload)
+    if(!hasError(resp)){
+      showToast(translate("Group status updated"))
+      routingGroups = await store.dispatch("orderRouting/updateGroupStatus", { routingGroupId: props.group.routingGroupId, value: paused })
+    } else {
+      throw resp.data
+    }
+  } catch(err) {
+    showToast(translate("Failed to update group status"))
+    logger.error(err)
+  }
+
+  popoverController.dismiss({ routingGroups });
+}
+
+async function runNow() {
+  // If this is the first time then we are fetching the omsConnection status, as if the value of isOmsConnectionExist value is a boolean it means we have previously fetched the connection status
+  if(typeof isOmsConnectionExist.value !== "boolean") {
+    await store.dispatch("util/checkOmsConnectionStatus")
+  }
+
+  if(!isOmsConnectionExist.value) {
+    return;
+  }
+
+  const scheduleAlert = await alertController
+    .create({
+      header: translate("Run now"),
+      message: translate("Running this schedule now will not replace this schedule. A copy of this schedule will be created and run immediately. You may not be able to reverse this action."),
+      buttons: [
+        {
+          text: translate("Cancel"),
+          role: "cancel",
+        },
+        {
+          text: translate("Run now"),
+          handler: async () => {
+            popoverController.dismiss()
+
+            const job = props.group?.schedule || {}
+            // Checking that if we already have the job schedule before calling runNow, because if the job scheduler is not present then runNow action can't be performed
+            // If the scheduler for the job is available then we will have jobName, if not then first scheduling the job in draft status just to create a routing schedule and then calling runNow action
+            if(!job.jobName) {
+              const payload = {
+                routingGroupId: props.group.routingGroupId,
+                paused: "Y",  // passing Y as we just need to configure the scheduler and do not need to schedule it in active state
+              }
+
+              try {
+                const resp = await OrderRoutingService.scheduleBrokering(payload)
+                if(hasError(resp)) {
+                  throw resp.data
+                }
+                // Updating jobName as if the user again clicks the runNow button then in that we don't want to call the scheduleBrokering service
+                job.jobName = resp.data.jobName
+              } catch(err) {
+                logger.error(err)
+                return;
+              }
+            }
+
+            try {
+              const resp = await OrderRoutingService.runNow(props.group.routingGroupId)
+              if(!hasError(resp) && resp.data.jobRunId) {
+                showToast(translate("Service has been scheduled"))
+              } else {
+                throw resp.data
+              }
+            } catch(err) {
+              showToast(translate("Failed to schedule service"))
+              logger.error(err)
+            }
+          }
+        }
+      ]
+    });
+
+  return scheduleAlert.present();
+}
+</script> 

src/locales/en.json

@@ -2,6 +2,7 @@
   "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "Actions": "Actions",
   "Active": "Active",
+  "Activate": "Activate",
   "Add": "Add",
   "Add inventory rule": "Add inventory rule",
   "Add order filters.": "Add order filters.",
@@ -83,6 +84,7 @@
   "Low": "Low",
   "Medium": "Medium",
   "Move items to": "Move items to",
+  "Move to Draft": "Move to Draft",
   "measurement unit": "measurement unit",
   "miles": "miles",
   "New": "New",

src/store/modules/orderRouting/actions.ts

@@ -244,7 +244,7 @@
     commit(types.ORDER_ROUTING_HISTORY_UPDATED, routingHistory)
   },
 
   async deleteRoutingFilters({ dispatch }, payload) {
     let hasAllFiltersDeletedSuccessfully = true;
     try {
       // As discussed, we can't make parallel api calls, hence using for loop to make api calls
@@ -264,7 +264,7 @@
     return hasAllFiltersDeletedSuccessfully
   },
 
   async updateRouting({ dispatch }, payload) {
     let orderRoutingId = ''
     try {
       const resp = await OrderRoutingService.updateRouting(payload)
@@ -315,7 +315,7 @@
     return routingRuleId;
   },
 
   async deleteRuleConditions({ dispatch }, payload) {
     // TODO: check if we can call request in parallel for delete operation
     let hasAllConditionsDeletedSuccessfully = true;
     try {
@@ -335,7 +335,7 @@
     return hasAllConditionsDeletedSuccessfully
   },
 
   async deleteRuleActions({ dispatch }, payload) {
     // TODO: check if we can call request in parallel for delete operation
     let hasAllActionsDeletedSuccessfully = true;
     try {
@@ -398,7 +398,7 @@
     return rulesInformation[routingRuleId] ? JSON.parse(JSON.stringify(rulesInformation[routingRuleId])) : {}
   },
 
   async updateRule({ dispatch }, payload) {
     let routingRuleId = ''
     try {
       const resp = await OrderRoutingService.updateRule(payload)
@@ -419,6 +419,14 @@
 
   async clearRules({ commit }) {
     commit(types.ORDER_ROUTING_RULES_UPDATED, {})
+  },
+
+  async updateGroupStatus({ commit, state }, payload) {
+    const routingGroups = JSON.parse(JSON.stringify(state.groups))
+    const routingGroup = routingGroups.find((routingGroup: any) => routingGroup.routingGroupId === payload.routingGroupId)
+    routingGroup["schedule"]["paused"] = payload.value
+    commit(types.ORDER_ROUTING_GROUPS_UPDATED, routingGroups)
+    return routingGroups
   }
 }
 

src/views/BrokeringRuns.vue

@@ -63,6 +63,9 @@
               </ion-item>
               <ion-item lines="none">
                 {{ `Updated at ${getDateAndTime(group.lastUpdatedStamp)}` }}
+                <ion-button fill="clear" color="medium" slot="end" @click.stop="groupActionsPopover(group, $event)">
+                  <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+                </ion-button>
               </ion-item>
             </ion-card>
           </section>
@@ -82,12 +85,13 @@
 </template>
 
 <script setup lang="ts">
+import GroupActionsPopover from "@/components/GroupActionsPopover.vue";
 import emitter from "@/event-bus";
 import { translate } from "@/i18n";
 import { Group } from "@/types";
 import { getDateAndTime, showToast } from "@/utils";
-import { IonBadge, IonButton, IonButtons, IonCard, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonRadioGroup, IonRadio, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
-import { addOutline, arrowForwardOutline } from "ionicons/icons"
+import { IonBadge, IonButton, IonButtons, IonCard, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonRadioGroup, IonRadio, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter, popoverController } from "@ionic/vue";
+import { addOutline, arrowForwardOutline, ellipsisVerticalOutline } from "ionicons/icons"
 import { DateTime } from "luxon";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -170,13 +174,30 @@
 }
 
 function getScheduleFrequency(cronExp: string) {
   return Object.entries(cronExpressions).find(([description, expression]) => expression === cronExp)?.[0] || "-"
 }
 
 async function redirect(group: Group) {
   router.push(`brokering/${group.routingGroupId}/routes`)
 }
 
+async function groupActionsPopover(group: Group, ev: Event) {
+  const popover = await popoverController.create({
+    component: GroupActionsPopover,
+    showBackdrop: false,
+    event: ev,
+    componentProps: { group }
+  });
+
+  popover.onDidDismiss().then((result: any) => {
+    if(result.data?.routingGroups?.length) {
+      brokeringGroups.value = JSON.parse(JSON.stringify(result.data.routingGroups))
+    }
+  })
+
+  return popover.present()
+}
+
 </script>
 
 <style scoped>