Implemented: support to unArchive archived rules (#386)

src/components/ArchivedRuleItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <ion-accordion-group :value="isReorderActive">
+    <ion-accordion value="false">
+      <div slot="header" @click="$event.stopImmediatePropagation()"></div>
+
+      <ion-card slot="content" v-if="archivedRules?.length">
+        <ion-item button lines="full" @click="openArchivedRuleModal()">
+          <ion-label>{{ translate("Archived") }}</ion-label>
+          <ion-badge slot="end" color="medium">{{ archivedRules.length }} {{ translate(archivedRules.length === 1 ? "rule" : "rules") }}</ion-badge>
+        </ion-item>
+      </ion-card>
+    </ion-accordion>
+  </ion-accordion-group>
+</template>
+
+<script setup lang="ts">
+import { IonAccordion, IonAccordionGroup, IonCard, IonBadge, IonItem, IonLabel, modalController } from '@ionic/vue';
+import ArchivedRuleModal from "@/components/ArchivedRuleModal.vue";
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { translate } from '@hotwax/dxp-components';
+import { RuleService } from '@/services/RuleService';
+import { showToast } from '@/utils';
+import emitter from '@/event-bus';
+
+const store = useStore();
+
+const archivedRules = computed(() => store.getters["rule/getArchivedRules"]);
+const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
+
+async function openArchivedRuleModal() {
+  const archivedRuleModal = await modalController.create({
+    component: ArchivedRuleModal,
+    componentProps: {
+      archivedRules: archivedRules.value
+    }
+  })
+
+  archivedRuleModal.onDidDismiss().then(async (result) => {
+    if(result?.data?.rulesToUnarchive?.length) {
+      emitter.emit("presentLoader")
+      const rulesToUnarchive = result.data.rulesToUnarchive
+      
+      const responses = await Promise.allSettled(rulesToUnarchive.map(async (rule: any) => {
+        rule.statusId = "ATP_RULE_ACTIVE"
+        await RuleService.updateRule(rule, rule.ruleId)
+        
+      }))
+      
+      const hasFailedResponses = responses.some((response: any) => response.status === "rejected")
+      if(hasFailedResponses) {
+        showToast(translate("Failed to unarchive some rules."))
+      }
+      await store.dispatch("rule/fetchRules", { ruleGroupId: ruleGroup.value.ruleGroupId })
+      store.dispatch('rule/fetchArchivedRules')
+      emitter.emit("dismissLoader")
+    }
+  })
+
+  archivedRuleModal.present();
+}
+</script>

src/components/ArchivedRuleModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Archived Rules") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="rule in rules" :key="rule.ruleId">
+        <ion-label>{{ rule.ruleName }}</ion-label>
+        <ion-note slot="end" v-if="rule.isArchived">{{ translate("Unarchived") }}</ion-note>
+        <ion-button slot="end" v-else fill="outline" color="medium" @click="unarchiveRule(rule)">{{ translate("Unarchive") }}</ion-button>
+      </ion-item>
+    </ion-list>
+    <p class="empty-state" v-if="!rules.length">
+      {{ translate("No archived rules") }}
+    </p>
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="!rulesToUnarchive?.length" @click="save()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+</template>
+
+<script setup lang="ts">
+import { translate } from '@hotwax/dxp-components';
+import { defineProps, onMounted, ref } from 'vue';
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { modalController } from '@ionic/vue';
+
+const props = defineProps(["archivedRules"])
+
+const rulesToUnarchive = ref([]) as any;
+const rules = ref([]) as any;
+
+onMounted(() => {
+  rules.value = JSON.parse(JSON.stringify(props.archivedRules))
+})
+
+function closeModal() {
+  modalController.dismiss();
+}
+
+function unarchiveRule(currentRule: any) {
+  rulesToUnarchive.value.push(currentRule);
+  currentRule.isArchived = true;
+}
+
+function save() {
+  modalController.dismiss({ dismissed: true, rulesToUnarchive: rulesToUnarchive.value });
+}
+</script>
+
+<style scoped>
+ion-content {
+  --padding-bottom: 80px;
+}
+</style>

src/components/RuleItem.vue

@@ -315,6 +315,7 @@ async function archiveRule() {
           try {
             await RuleService.updateRule(rule, props.rule.ruleId)
             await store.dispatch('rule/archiveRule', { rule })
+            await store.dispatch('rule/fetchArchivedRules')
             showToast(translate("Rule archived successfully."))
             alertController.dismiss()
           } catch(err: any) {

src/store/modules/rule/RuleState.ts

@@ -2,4 +2,5 @@ export default interface RuleState {
   rules: any;
   ruleGroup: any;
   isReorderActive: boolean;
+  archivedRules: any;
 }

src/store/modules/rule/actions.ts

@@ -37,17 +37,21 @@ const actions: ActionTree<RuleState, RootState> = {
 
   async fetchRules({ commit, dispatch }, payload) {
     let rules = [] as any;
+    let ruleGroupId = payload.ruleGroupId;
 
     try {
-      const ruleGroup = await dispatch('fetchRuleGroup', payload)
+      if(!ruleGroupId) {
+        const ruleGroup = await dispatch('fetchRuleGroup', payload)
+        ruleGroupId = ruleGroup.ruleGroupId
+      }
 
-      if(!ruleGroup.ruleGroupId) {
+      if(!ruleGroupId) {
         throw new Error("No rule founds")
         return;
       }
 
       const resp = await RuleService.fetchRules({ 
-        "ruleGroupId": ruleGroup.ruleGroupId,
+        ruleGroupId,
         "statusId": "ATP_RULE_ACTIVE",
         "orderByField": "sequenceNum"
       })
@@ -63,6 +67,33 @@ const actions: ActionTree<RuleState, RootState> = {
     commit(types.RULE_RULES_UPDATED, { list: rules, total: rules.length});
   },
 
+  async fetchArchivedRules({ commit }) {
+    const ruleGroup = await store.getters["rule/getRuleGroup"]
+    let archivedRules = [] as any;
+
+    try {
+      if(!ruleGroup.ruleGroupId) {
+        return;
+      }
+
+      const resp = await RuleService.fetchRules({ 
+        "ruleGroupId": ruleGroup.ruleGroupId,
+        "statusId": "ATP_RULE_ARCHIVED",
+        "orderByField": "sequenceNum",
+        "pageSize": 200
+      })
+
+      if(!hasError(resp)) {
+        archivedRules = resp.data;
+      } else {
+        throw resp.data
+      }
+    } catch(err: any) {
+      logger.error(err);
+    }
+    commit(types.RULE_ARCHIVED_RULES_UPDATED, archivedRules);
+  },
+
   updateRuleData({ commit, state }, payload) {
     const rules = JSON.parse(JSON.stringify(state.rules.list))
 

src/store/modules/rule/getters.ts

@@ -14,6 +14,9 @@ const getters: GetterTree <RuleState, RootState> = {
   },
   isReorderActive (state) {
     return state.isReorderActive
+  },
+  getArchivedRules (state) {
+    return state.archivedRules
   }
 }
 export default getters;

src/store/modules/rule/index.ts

@@ -13,7 +13,8 @@ const userModule: Module<RuleState, RootState> = {
       total: ''
     },
     ruleGroup: {},
-    isReorderActive: false
+    isReorderActive: false,
+    archivedRules: []
   },
   getters,
   actions,

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

@@ -2,4 +2,5 @@ export const SN_RULE = 'rule'
 export const RULE_RULES_UPDATED = SN_RULE + '/RULES_UPDATED'
 export const RULE_GROUP_UPDATED = SN_RULE + '/GROUP_UPDATED'
 export const RULE_REORDER_ACTIVE_UPDATED = SN_RULE + '/REORDER_ACTIVE_UPDATED'
+export const RULE_ARCHIVED_RULES_UPDATED = SN_RULE + '/ARCHIVED_RULES_UPDATED'
 export const RULE_CLEARED = SN_RULE + "/CLEARED"

src/store/modules/rule/mutations.ts

@@ -13,6 +13,9 @@ const mutations: MutationTree <RuleState> = {
   [types.RULE_REORDER_ACTIVE_UPDATED] (state, payload) {
     state.isReorderActive = payload;
   },
+  [types.RULE_ARCHIVED_RULES_UPDATED] (state, payload) {
+    state.archivedRules = payload;
+  },
   [types.RULE_CLEARED](state) {
     state.rules = {
       list: [],

src/views/SafetyStock.vue

@@ -10,6 +10,7 @@
     <ion-content>
       <main v-if="ruleGroup.ruleGroupId && rules.length">
         <ScheduleRuleItem />
+        <ArchivedRuleItem v-if="archivedRules?.length" />
 
         <section>
           <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
@@ -46,13 +47,15 @@ import { translate } from '@hotwax/dxp-components';
 import emitter from '@/event-bus';
 import { RuleService } from '@/services/RuleService';
 import { doReorder, showToast } from '@/utils';
+import ArchivedRuleItem from '@/components/ArchivedRuleItem.vue';
 
 const store = useStore();
 const router = useRouter()
 
 const rules = computed(() => store.getters["rule/getRules"]);
 const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
 const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const archivedRules = computed(() => store.getters["rule/getArchivedRules"]);
 const reorderingRules = ref([]);
 
 onIonViewDidEnter(async() => {
@@ -70,6 +73,7 @@ async function fetchRules() {
   store.dispatch("util/updateSelectedSegment", "");
   store.dispatch("rule/updateIsReorderActive", false)
   await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: 'RG_SAFETY_STOCK', pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")]);
+  await store.dispatch('rule/fetchArchivedRules')
   emitter.emit("dismissLoader");
 }
 

src/views/Shipping.vue

@@ -23,6 +23,7 @@
       <main v-if="selectedSegment !== 'SHIPPING_FACILITY'">
         <template v-if="ruleGroup.ruleGroupId && rules.length">
           <ScheduleRuleItem />
+          <ArchivedRuleItem v-if="archivedRules?.length" />
 
           <section>
             <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
@@ -79,6 +80,7 @@ import { useStore } from 'vuex';
 import emitter from '@/event-bus';
 import { RuleService } from '@/services/RuleService';
 import { doReorder, showToast } from '@/utils';
+import ArchivedRuleItem from '@/components/ArchivedRuleItem.vue';
 
 const store = useStore();
 const router = useRouter()
@@ -89,6 +91,7 @@ const isScrollable = computed(() => store.getters["util/isFacilitiesScrollable"]
 const facilities = computed(() => store.getters["util/getFacilities"]);
 const selectedSegment = computed(() => store.getters["util/getSelectedSegment"]);
 const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const archivedRules = computed(() => store.getters["rule/getArchivedRules"]);
 const reorderingRules = ref([]);
 
 const isScrollingEnabled = ref(false);
@@ -110,6 +113,7 @@ async function fetchRules() {
   store.dispatch("rule/updateIsReorderActive", false)
   if(!selectedSegment.value || (selectedSegment.value !== 'RG_SHIPPING_FACILITY' && selectedSegment.value !== 'RG_SHIPPING_CHANNEL' && selectedSegment.value !== 'SHIPPING_FACILITY')) store.dispatch("util/updateSelectedSegment", "RG_SHIPPING_FACILITY");
   await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
+  await store.dispatch('rule/fetchArchivedRules')
   if(selectedSegment.value === 'SHIPPING_FACILITY') fetchFacilities();
   emitter.emit("dismissLoader");
 }
@@ -164,6 +168,7 @@ async function updateSegment(event: any) {
     store.dispatch("rule/updateIsReorderActive", false)
     reorderingRules.value = []
     await store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 })
+    await store.dispatch('rule/fetchArchivedRules')
   }
   emitter.emit("dismissLoader");
 }

src/views/StorePickup.vue

@@ -23,6 +23,7 @@
       <main v-if="selectedSegment !== 'PICKUP_FACILITY'">
         <template v-if="ruleGroup.ruleGroupId && rules.length">
           <ScheduleRuleItem />
+          <ArchivedRuleItem v-if="archivedRules?.length" />
 
           <section>
             <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
@@ -83,6 +84,7 @@ import { useStore } from 'vuex';
 import emitter from '@/event-bus';
 import { doReorder, showToast } from '@/utils';
 import { RuleService } from '@/services/RuleService';
+import ArchivedRuleItem from '@/components/ArchivedRuleItem.vue';
 
 const store = useStore();
 const router = useRouter()
@@ -94,6 +96,7 @@ const facilities = computed(() => store.getters["util/getFacilities"]);
 const selectedSegment = computed(() => store.getters["util/getSelectedSegment"]);
 const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
 const pickupGroups = computed(() => store.getters["util/getPickupGroups"]);
+const archivedRules = computed(() => store.getters["rule/getArchivedRules"]);
 
 const reorderingRules = ref([]);
 const isScrollingEnabled = ref(false);
@@ -118,6 +121,7 @@ async function fetchRules() {
     await Promise.allSettled([fetchFacilities(), store.dispatch("util/fetchPickupGroups")]) ;
   } else {
     await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
+    await store.dispatch('rule/fetchArchivedRules')
   }
   emitter.emit("dismissLoader");
 }
@@ -172,6 +176,7 @@ async function updateSegment(event: any) {
     store.dispatch("rule/updateIsReorderActive", false)
     reorderingRules.value = []
     await store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 })
+    await store.dispatch('rule/fetchArchivedRules')
   }
   emitter.emit("dismissLoader");
 }

src/views/Threshold.vue

@@ -10,6 +10,7 @@
     <ion-content>
       <main v-if="ruleGroup.ruleGroupId && rules.length">
         <ScheduleRuleItem />
+        <ArchivedRuleItem v-if="archivedRules?.length" />
 
         <section>
           <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
@@ -39,6 +40,7 @@ import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonMenuButton, Io
 import { addOutline, balloonOutline, saveOutline } from 'ionicons/icons';
 import RuleItem from '@/components/RuleItem.vue'
 import ScheduleRuleItem from '@/components/ScheduleRuleItem.vue';
+import ArchivedRuleItem from '@/components/ArchivedRuleItem.vue';
 import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
@@ -53,6 +55,7 @@ const router = useRouter()
 const rules = computed(() => store.getters["rule/getRules"]);
 const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
 const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const archivedRules = computed(() => store.getters["rule/getArchivedRules"]);
 const reorderingRules = ref([]);
 
 onIonViewDidEnter(async() => {
@@ -70,6 +73,7 @@ async function fetchRules() {
   store.dispatch("util/updateSelectedSegment", "");
   store.dispatch("rule/updateIsReorderActive", false)
   await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: 'RG_THRESHOLD', pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")]);
+  await store.dispatch('rule/fetchArchivedRules')
   emitter.emit("dismissLoader");
 }