Improved: UI as per the suggested changes(#243)

.gitignore

@@ -30,6 +30,8 @@ npm-debug.log*
 /plugins
 /www
 
+.firebase
+
 .env
 .env.*
 !.env.example

src/components/AddInventoryFilterOptionsModal.vue

@@ -14,7 +14,15 @@
       </div>
       <ion-list v-else>
         <ion-item v-for="condition in enumerations" :key="condition.enumId">
-          <ion-checkbox :checked="isConditionOptionSelected(condition.enumCode)" @ionChange="addConditionOption(condition)">{{ condition.description || condition.enumCode }}</ion-checkbox>
+          <ion-checkbox :disabled="isConditionDisabled(condition.enumId)" :checked="isConditionOptionSelected(condition.enumCode)" @ionChange="addConditionOption(condition)">
+            <template v-if="isConditionDisabled(condition.enumId)">
+              {{ condition.description || condition.enumCode }}<br/>
+              <ion-note>{{ `Only applicable when ${dependentOptions[condition.enumId].label} is selected` }}</ion-note>
+            </template>
+            <template v-else>
+              {{ condition.description || condition.enumCode }}
+            </template>
+          </ion-checkbox>
         </ion-item>
       </ion-list>
 
@@ -28,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonList, IonPage, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonList, IonNote, IonPage, IonTitle, IonToolbar, modalController } from "@ionic/vue";
 import { useStore } from "vuex";
 import { computed, defineProps, onMounted, ref } from "vue";
 import { saveOutline } from "ionicons/icons";
@@ -57,13 +65,20 @@ const props = defineProps({
   },
   label: {
     type: String
+  },
+  filterOptions: {
+    type: Object
   }
 })
 let inventoryRuleConditions = ref({}) as any
 let enumerations = ref([]) as any
 let areFiltersUpdated = ref(false)
 
+// Added those enums here that needs to be hidden form the UI
 const hiddenOptions = ["IIP_MSMNT_SYSTEM", "IIP_SPLIT_ITEM_GROUP"]
+
+// Add entries for the enums those are dependent on another filter {enumId: { code, label }}
+const dependentOptions = {"ISP_CUST_SEQ": { code: "facilityGroupId", label: "Facility group" }} as any
 // managing this object, as we have some filters for which we need to have its associated filter, like in this case when we have PROXIMITY we also need to add MEASUREMENT_SYSTEM(this is not available on UI for selection and included in hiddenOptions)
 const associatedOptions = { IIP_PROXIMITY: { enum: "IIP_MSMNT_SYSTEM", defaultValue: "IMPERIAL" }} as any
 
@@ -132,4 +147,13 @@ function isConditionOptionSelected(code: string) {
 function closeModal(action = "close") {
   modalController.dismiss({ dismissed: true, filters: inventoryRuleConditions.value }, action)
 }
+
+function isConditionDisabled(enumId: string) {
+  if(!dependentOptions[enumId]) {
+    return false;
+  }
+
+  // Added check on code as we only have code once a filter is selected
+  return !props.filterOptions?.[dependentOptions[enumId].code]
+}
 </script>

src/components/ArchivedRuleModal.vue

@@ -0,0 +1,76 @@
+<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.routingRuleId">
+        <ion-label>{{ rule.ruleName }}</ion-label>
+        <ion-button slot="end" fill="outline" color="medium" @click="updateRules(rule, 'statusId', 'RULE_DRAFT')">{{ translate("Unarchive") }}</ion-button>
+      </ion-item>
+    </ion-list>
+    <p class="empty-state" v-if="!rules.length">
+      {{ translate("No archived rules") }}
+    </p>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import { translate } from "@/i18n";
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+import { defineProps, ref } from "vue";
+
+const props = defineProps({
+  archivedRules: {
+    required: true
+  },
+  saveRules: {
+    required: true
+  } as any
+})
+
+let rules = ref(props.archivedRules) as any
+
+// Not passing any data on modal close as we are updating the rules on every button click.
+function closeModal() {
+  modalController.dismiss();
+}
+
+async function updateRules(rule: any, fieldToUpdate: string, value: string) {
+  // remove the updated rules from the archivedRoutings
+  rules.value = rules.value.filter((inventoryRule: any) => inventoryRule.routingRuleId !== rule.routingRuleId)
+
+  /*
+  Instead of updating the same on closeModal we are updating it on every routing unarchive action, as if a user
+  unarchives multiple routings and then click backdrop then the updated data can't be sent back to the parent component.
+  Thus used this approach to update the parent data on every routing unarchive click
+
+  As we need the feature to save the routing status even when backdrop is clicked thus added above approach
+  */
+  props.saveRules([{
+    ...rule,
+    [fieldToUpdate]: value
+  }, ...rules.value])
+}
+</script>

src/locales/en.json

@@ -122,15 +122,18 @@
   "Queue": "Queue",
   "queue": "queue",
   "Rename": "Rename",
+  "Routing": "Routing",
   "Routing history": "Routing history",
   "Routing group information updated": "Routing group information updated",
+  "Routing Run": "Routing Run",
   "Rule Status": "Rule Status",
   "Rule name": "Rule name",
   "Run Now": "Run Now",
   "Run now": "Run now",
   "Run time": "Run time",
   "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.": "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.",
   "route name": "route name",
+  "rule": " rule",
   "rules": " rules",
   "run name": "run name",
   "Sales Channel": "Sales Channel",