Implemented: Made download rejected orders button functional (#715).

hotwax · Sep 26, 2024 · 18c7c5a · 18c7c5a
1 parent c2ca07c
commit 18c7c5a
Show file tree

Hide file tree

Showing 4 changed files with 566 additions and 548 deletions.
diff --git a/src/components/RejectedOrdersFilters.vue b/src/components/RejectedOrdersFilters.vue
@@ -1,30 +1,50 @@
 <template>
-    <ion-menu side="end" type="overlay">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>{{ translate("Filters") }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
+  <ion-menu side="end" type="overlay">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ translate("Filters") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-select :label="translate('Duration')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionPeriodId" @ionChange="applyFilter($event['detail'].value, 'duration')">
+            <ion-select-option v-for="rejectionPeriod in rejectionPeriods" :key="rejectionPeriod.id" :value="rejectionPeriod.id">{{ rejectionPeriod.description }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-select :label="translate('Reason')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionReasons" :multiple="true" @ionChange="applyFilter($event['detail'].value, 'reason')">
+            <ion-select-option v-for="rejectionReason in rejectReasons" :key="rejectionReason.enumId" :value="rejectionReason.enumId">{{ rejectionReason.description ? rejectionReason.description : rejectionReason.enumId }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+</template>
 
-      <ion-content>
-        <ion-list>
-          <ion-item>
-            <ion-select :label="translate('Duration')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionPeriodId" @ionChange="applyFilter($event['detail'].value, 'duration')">
-              <ion-select-option v-for="rejectionPeriod in rejectionPeriods" :key="rejectionPeriod.id" :value="rejectionPeriod.id">{{ rejectionPeriod.description }}</ion-select-option>
-            </ion-select>
-          </ion-item>
-          <ion-item>
-            <ion-select :label="translate('Reason')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionReasons" :multiple="true" @ionChange="applyFilter($event['detail'].value, 'reason')">
-              <ion-select-option v-for="rejectionReason in rejectReasons" :key="rejectionReason.enumId" :value="rejectionReason.enumId">{{ rejectionReason.description ? rejectionReason.description : rejectionReason.enumId }}</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-menu>
-  </template>
-
-  <script lang="ts">
-  import {
+<script lang="ts">
+import {
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonMenu,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { albumsOutline, banOutline, barChartOutline, calendarNumberOutline, checkmarkDoneOutline, closeOutline, filterOutline, iceCreamOutline, libraryOutline, pulseOutline, settings, shirtOutline, ticketOutline } from "ionicons/icons";
+import { mapGetters, useStore } from 'vuex'
+import { hasError } from '@/adapter';
+import logger from '@/logger';
+import { translate } from '@hotwax/dxp-components';
+
+export default defineComponent({
+  name: "TransferOrderFilters",
+  components: {
     IonContent,
     IonHeader,
     IonItem,
@@ -34,85 +54,65 @@
     IonSelectOption,
     IonTitle,
     IonToolbar
-  } from "@ionic/vue";
-  import { defineComponent } from "vue";
-  import { albumsOutline, banOutline, barChartOutline, calendarNumberOutline, checkmarkDoneOutline, closeOutline, filterOutline, iceCreamOutline, libraryOutline, pulseOutline, settings, shirtOutline, ticketOutline } from "ionicons/icons";
-  import { mapGetters, useStore } from 'vuex'
-  import { hasError } from '@/adapter';
-  import logger from '@/logger';
-  import { translate } from '@hotwax/dxp-components';
-  
-  export default defineComponent({
-    name: "TransferOrderFilters",
-    components: {
-      IonContent,
-      IonHeader,
-      IonItem,
-      IonList,
-      IonMenu,
-      IonSelect,
-      IonSelectOption,
-      IonTitle,
-      IonToolbar
-    },
-    props: ["queryString"],
-    data () {
-      return {
-        shipmentMethods: [] as Array<any>,
-        statuses: [] as Array<any>,
-        rejectionPeriods: [] as Array<any>
+  },
+  props: ["queryString"],
+  data () {
+    return {
+      shipmentMethods: [] as Array<any>,
+      statuses: [] as Array<any>,
+      rejectionPeriods: [] as Array<any>
+    }
+  },
+  computed: {
+    ...mapGetters({
+      rejectReasons: 'util/getRejectReasons',
+      rejectedOrders: 'rejection/getRejectedOrders',
+    })
+  },
+  async mounted() {
+    this.store.dispatch('util/fetchRejectReasons')
+    this.rejectionPeriods = [{"id": "LAST_TWENTY_FOUR_HOURS", "description": "Last 24 hours"}, {"id": "LAST_SEVEN_DAYS", "description": "Last 7 days"}]
+  },
+  unmounted() {
+    this.store.dispatch('rejection/clearRejectedOrdersFilters');
+  },
+  methods: {
+    async applyFilter(value: any, type: string) {
+      const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
+      rejectedOrdersQuery.viewIndex = 0;
+      if (type === "duration") {
+        rejectedOrdersQuery.rejectionPeriodId = value
+      } else if (type === "reason") {
+        rejectedOrdersQuery.rejectionReasons = value
       }
-    },
-    computed: {
-      ...mapGetters({
-        rejectReasons: 'util/getRejectReasons',
-        rejectedOrders: 'rejection/getRejectedOrders',
-      })
-    },
-    async mounted() {
-      this.store.dispatch('util/fetchRejectReasons')
-      this.rejectionPeriods = [{"id": "LAST_TWENTY_FOUR_HOURS", "description": "Last 24 hours"}, {"id": "LAST_SEVEN_DAYS", "description": "Last 7 days"}]
-    },
-    unmounted() {
-      this.store.dispatch('rejection/clearRejectedOrdersFilters');
-    },
-    methods: {
-      async applyFilter(value: any, type: string) {
-        const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
-        rejectedOrdersQuery.viewIndex = 0;
-        if (type === "duration") {
-          rejectedOrdersQuery.rejectionPeriodId = value
-        } else if (type === "reason") {
-          rejectedOrdersQuery.rejectionReasons = value
-        }
-        
-        await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
-        await this.store.dispatch('rejection/fetchRejectedOrders');
-        if (type === "duration") {
-          await this.store.dispatch('rejection/fetchRejectionStats')
-        }
-      },
-    },
-    setup() {
-      const store = useStore();
       
-      return {
-        albumsOutline,
-        banOutline,
-        barChartOutline,
-        calendarNumberOutline,
-        checkmarkDoneOutline,
-        closeOutline,
-        filterOutline,
-        iceCreamOutline,
-        libraryOutline,
-        pulseOutline,
-        settings,
-        shirtOutline,
-        store,
-        ticketOutline,
-        translate
-      };
+      await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
+      await this.store.dispatch('rejection/fetchRejectedOrders');
+      if (type === "duration") {
+        await this.store.dispatch('rejection/fetchRejectionStats')
+      }
     },
-  });
-  </script>
+  },
+  setup() {
+    const store = useStore();
+    
+    return {
+      albumsOutline,
+      banOutline,
+      barChartOutline,
+      calendarNumberOutline,
+      checkmarkDoneOutline,
+      closeOutline,
+      filterOutline,
+      iceCreamOutline,
+      libraryOutline,
+      pulseOutline,
+      settings,
+      shirtOutline,
+      store,
+      ticketOutline,
+      translate
+    };
+  },
+});
+</script>
diff --git a/src/components/UsedReasonsModal.vue b/src/components/UsedReasonsModal.vue
@@ -1,86 +1,86 @@
 <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("Used reasons") }}</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list v-if="usedReasons.length">
-        <ion-item v-for="(reason, index) in usedReasons" :key="reason.enumId" :lines="usedReasons.length -1 === index ? 'none' : 'inset'">
-          <ion-label>
-            {{ reason.description }}
-            <p>{{ reason.enumTypeId }}</p>
-          </ion-label>
-          <ion-note slot="end"> {{ reason.count }}</ion-note>
-        </ion-item>
-      </ion-list>
-      <div class="empty-state" v-else>
-        <p>{{ translate("No reasons found.") }}</p>
-      </div>
-    </ion-content>
-  </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("Used reasons") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list v-if="usedReasons.length">
+      <ion-item v-for="(reason, index) in usedReasons" :key="reason.enumId" :lines="usedReasons.length -1 === index ? 'none' : 'inset'">
+        <ion-label>
+          {{ reason.description }}
+          <p>{{ reason.enumTypeId }}</p>
+        </ion-label>
+        <ion-note slot="end"> {{ reason.count }}</ion-note>
+      </ion-item>
+    </ion-list>
+    <div class="empty-state" v-else>
+      <p>{{ translate("No reasons found.") }}</p>
+    </div>
+  </ion-content>
+</template>
+
+<script>
+import { 
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonTitle,
+  IonToolbar,
+  modalController } from "@ionic/vue";
+import { computed, defineComponent } from "vue";
+import { mapGetters } from 'vuex';
+import { closeOutline, pricetag } from "ionicons/icons";
+import { getProductIdentificationValue, translate, useProductIdentificationStore } from '@hotwax/dxp-components';
   
-  <script>
-  import { 
-    IonButtons,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonNote,
-    IonTitle,
-    IonToolbar,
-    modalController } from "@ionic/vue";
-  import { computed, defineComponent } from "vue";
-  import { mapGetters } from 'vuex';
-  import { closeOutline, pricetag } from "ionicons/icons";
-  import { getProductIdentificationValue, translate, useProductIdentificationStore } from '@hotwax/dxp-components';
-    
-  
-  export default defineComponent({
-    name: "RejectedItemsModal",
-    components: { 
-        IonButtons,
-        IonButton,
-        IonContent,
-        IonHeader,
-        IonIcon,
-        IonItem,
-        IonLabel,
-        IonNote,
-        IonTitle,
-        IonToolbar
-    },
-    computed: {
-      ...mapGetters({
-        usedReasons: 'rejection/getUsedReasons',
-      })
-    },
-    methods: {
-      closeModal() {
-        modalController.dismiss({ dismissed: true });
-      },
-    },
-    setup() {
-      const productIdentificationStore = useProductIdentificationStore();
-      let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
-  
-      return {
-        closeOutline,
-        pricetag,
-        productIdentificationPref,
-        productIdentificationStore,
-        getProductIdentificationValue,
-        translate
-      };
+
+export default defineComponent({
+  name: "RejectedItemsModal",
+  components: { 
+      IonButtons,
+      IonButton,
+      IonContent,
+      IonHeader,
+      IonIcon,
+      IonItem,
+      IonLabel,
+      IonNote,
+      IonTitle,
+      IonToolbar
+  },
+  computed: {
+    ...mapGetters({
+      usedReasons: 'rejection/getUsedReasons',
+    })
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
     },
-  });
-  </script>
+  },
+  setup() {
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
+    return {
+      closeOutline,
+      pricetag,
+      productIdentificationPref,
+      productIdentificationStore,
+      getProductIdentificationValue,
+      translate
+    };
+  },
+});
+</script>