Implemented: support to unArchive archived rules (#386)

src/components/ArchivedRuleItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <ion-accordion-group :value="isReorderActive">
+    <ion-accordion value="false">
+      <div slot="header" @click="$event.stopImmediatePropagation()"></div>
+
+      <ion-card slot="content">
+        <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 !== "fulfilled")
+      if(hasFailedResponses) {
+        showToast(translate("Failed to unarchive some rules."))
+      }
+      await store.dispatch("rule/fetchRules", { ruleGroupId: ruleGroup.value.ruleGroupId })
+      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 { IonButton, IonButtons, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonTitle, IonToolbar, modalController } from '@ionic/vue';
+import { translate } from '@hotwax/dxp-components';
+import { defineProps, onMounted, ref } from 'vue';
+import { closeOutline, saveOutline } from "ionicons/icons";
+
+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

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

src/locales/en.json

@@ -9,6 +9,8 @@
   "Any page made on this page will be lost. You will not be able to reverse this action.": "Any page made on this page will be lost. You will not be able to reverse this action.",
   "App": "App",
   "Apply": "Apply",
+  "Archived": "Archived",
+  "Archived Rules": "Archived Rules",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Are you sure you want to save these changes?": "Are you sure you want to save these changes?",
   "Authenticating": "Authenticating",
@@ -80,6 +82,7 @@
   "Failed to update threshold facility.": "Failed to update threshold facility.",
   "Failed to update sequence for some rules.": "Failed to update sequence for some rules.",
   "Failed to fetch rule information.": "Failed to fetch rule information.",
+  "Failed to unarchive some rules.": "Failed to unarchive some rules.",
   "Failed to update rules order.": "Failed to update rules order.",
   "Failed to update facility": "Failed to update facility",
   "Failed to update some jobs": "Failed to update some jobs",
@@ -134,6 +137,7 @@
   "New threshold rule": "New threshold rule",
   "New safety stock rule": "New safety stock rule",
   "No": "No",
+  "No archived rules": "No archived rules",
   "No available history for rule.": "No available history for {name} rule.",
   "No available history for this job.": "No available history for this job.",
   "No Capacity": "No Capacity",
@@ -196,6 +200,8 @@
   "reset": "reset",
   "retail facilities": "{count} retail facilities",
   "retry": "retry",
+  "rule": "rule",
+  "rules": "rules",
   "Rule Configuration": "Rule Configuration",
   "Rule created successfully.": "Rule created successfully.",
   "Rule group disabled successfully.": "Rule group disabled successfully.",
@@ -282,6 +288,8 @@
   "UI Components": "UI Components",
   "Unable to schedule service.": "Unable to schedule service.",
   "Unable to update threshold rule.": "Unable to update threshold rule.",
+  "Unarchive": "Unarchive",
+  "Unarchived": "Unarchived",
   "Update": "Update",
   "Edit shipping rule": "Edit shipping rule",
   "Edit store pickup rule": "Edit store pickup rule",

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,32 +37,41 @@ const actions: ActionTree<RuleState, RootState> = {
 
   async fetchRules({ commit, dispatch }, payload) {
     let rules = [] as any;
+    let archivedRules = [] 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,
-        "statusId": "ATP_RULE_ACTIVE",
+        ruleGroupId,
+        "statusId": ["ATP_RULE_ACTIVE", "ATP_RULE_ARCHIVED"],
+        "statusId_op": "in",
         "orderByField": "sequenceNum"
       })
 
       if(!hasError(resp)) {
-        rules = resp.data;
+        rules = resp.data.filter((rule: any) => rule.statusId === "ATP_RULE_ACTIVE")
+        archivedRules = resp.data.filter((rule: any) => rule.statusId === "ATP_RULE_ARCHIVED")
       } else {
         throw resp.data
       }
     } catch(err: any) {
       logger.error(err);
     }
+
     commit(types.RULE_RULES_UPDATED, { list: rules, total: rules.length});
+    commit(types.RULE_ARCHIVED_RULES_UPDATED, archivedRules);
   },
-  
+
   updateRuleData({ commit, state }, payload) {
     const rules = JSON.parse(JSON.stringify(state.rules.list))
 
@@ -82,16 +91,6 @@ const actions: ActionTree<RuleState, RootState> = {
     commit(types.RULE_RULES_UPDATED, { list: payload.rules, total: payload.rules.length});
   },
 
-  archiveRule({ commit, state }, { rule }) {
-    const rules = JSON.parse(JSON.stringify(state.rules.list))
-
-    const index = rules.findIndex((currRule: any) => currRule.ruleId === rule.ruleId);
-    if (index !== -1) {
-      rules.splice(index, 1);
-    }
-    commit(types.RULE_RULES_UPDATED, { list: rules, total: state.rules.total - 1 });
-  },
-
   async clearRuleState({ commit }) {
     commit(types.RULE_CLEARED)
   },

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

@@ -8,10 +8,11 @@
     </ion-header>
 
     <ion-content>
-      <main v-if="ruleGroup.ruleGroupId && rules.length">
-        <ScheduleRuleItem />
+      <main v-if="ruleGroup.ruleGroupId && (rules.length || archivedRules.length)">
+        <ScheduleRuleItem v-if="rules.length" />
+        <ArchivedRuleItem v-if="archivedRules?.length" />
 
-        <section>
+        <section v-if="rules.length">
           <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
             <RuleItem v-for="(rule, ruleIndex) in (isReorderActive ? reorderingRules : rules)" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
           </ion-reorder-group>
@@ -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() => {

src/views/Shipping.vue

@@ -21,10 +21,11 @@
 
     <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <main v-if="selectedSegment !== 'SHIPPING_FACILITY'">
-        <template v-if="ruleGroup.ruleGroupId && rules.length">
-          <ScheduleRuleItem />
+        <template v-if="ruleGroup.ruleGroupId && (rules.length || archivedRules.length)">
+          <ScheduleRuleItem v-if="rules.length" />
+          <ArchivedRuleItem v-if="archivedRules?.length" />
 
-          <section>
+          <section v-if="rules.length">
             <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
               <RuleItem v-for="(rule, ruleIndex) in (isReorderActive ? reorderingRules : rules)" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
             </ion-reorder-group>
@@ -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);

src/views/StorePickup.vue

@@ -21,10 +21,11 @@
 
     <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <main v-if="selectedSegment !== 'PICKUP_FACILITY'">
-        <template v-if="ruleGroup.ruleGroupId && rules.length">
-          <ScheduleRuleItem />
+        <template v-if="ruleGroup.ruleGroupId && (rules.length || archivedRules.length)">
+          <ScheduleRuleItem v-if="rules.length" />
+          <ArchivedRuleItem v-if="archivedRules?.length" />
 
-          <section>
+          <section v-if="rules.length">
             <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
               <RuleItem v-for="(rule, ruleIndex) in (isReorderActive ? reorderingRules : rules)" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
             </ion-reorder-group>
@@ -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);