Implemented: popover to update the group status and add runNow support(…

…hotwax#199)

src/components/GroupActionsPopover.vue

@@ -0,0 +1,62 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ group.groupName }}</ion-list-header>
+      <ion-item button>
+        <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 {
+  IonContent,
+  IonIcon,
+  IonItem,
+  IonList,
+  IonListHeader,
+  popoverController
+} from "@ionic/vue";
+import { flashOutline, pauseOutline, playOutline } from 'ionicons/icons'
+import { translate } from "@/i18n"
+import { defineProps } from "vue"
+import { OrderRoutingService } from "@/services/RoutingService";
+import { hasError, showToast } from "@/utils";
+import logger from "@/logger";
+import store from "@/store";
+
+const props = defineProps(["group"])
+
+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 });
+}
+</script> 

src/store/modules/orderRouting/actions.ts

@@ -398,6 +398,14 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
 
   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";
@@ -177,6 +181,23 @@ 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>