Merge pull request hotwax#259 from hotwax/256_item_count_inventory_de…

…tail_page

Improved: inventory detail page to display items count. (hotwax#256)

src/locales/en.json

@@ -91,6 +91,7 @@
   "No new file upload. Please try again": "No new file upload. Please try again",
   "No results found": "No results found",
   "No time zone found": "No time zone found",
+  "of": "of",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
   "Only select": "Only select",
@@ -115,6 +116,7 @@
   "Review": "Review",
   "Review PO details": "Review PO details",
   "Review purchase order": "Review purchase order",
+  "Reviewing uploaded file": "Reviewing uploaded file",
   "Reset": "Reset",
   "Reset inventory": "Reset inventory",
   "Reset password": "Reset password",

src/store/modules/stock/actions.ts

@@ -3,11 +3,11 @@ import store from '@/store'
 import RootState from '@/store/RootState'
 import StockState from './StockState'
 import * as types from './mutation-types'
-import emitter from "@/event-bus";
 
 const actions: ActionTree<StockState, RootState> = {
   async processUpdateStockItems ({ commit, rootGetters }, items) {
-    emitter.emit('fileProcessing');
+    this.dispatch('util/updateFileProcessingStatus', true);
+
     //Fetching only top 
     const productIds = items.slice(0, process.env['VUE_APP_VIEW_SIZE']).map((item: any) => item.identification);
 
@@ -55,7 +55,7 @@ const actions: ActionTree<StockState, RootState> = {
     const original = JSON.parse(JSON.stringify(items));
 
     commit(types.STOCK_ITEMS_UPDATED, { parsed, original, initial });
-    emitter.emit('fileProcessed');
+    this.dispatch('util/updateFileProcessingStatus', false);
   },
   updateStockItems({ commit }, stockItems){
     commit(types.STOCK_ITEMS_UPDATED, stockItems);

src/store/modules/util/UtilState.ts

@@ -1,5 +1,6 @@
 export default interface UserState {
     facilities: [],
     facilityLocationsByFacilityId: any;
-    goodIdentificationTypes: []
+    goodIdentificationTypes: [],
+    isProcessingFile: false,
 }

src/store/modules/util/actions.ts

@@ -104,7 +104,10 @@ const actions: ActionTree<UtilState, RootState> = {
       logger.error(err)
     }
     return state.facilities;
-  }
+  },
+  async updateFileProcessingStatus({ commit }, status){
+    commit(types.UTIL_FILE_PROCESSING_STATUS_UPDATED, { status });
+  },
 }
 
 

src/store/modules/util/getters.ts

@@ -11,6 +11,9 @@ const getters: GetterTree <UtilState, RootState> = {
     },
     getGoodIdentificationTypes(state) {
         return state.goodIdentificationTypes;
+    },
+    getFileProcessingStatus(state) {
+        return state.isProcessingFile;
     }
 }
 export default getters;

src/store/modules/util/index.ts

@@ -11,6 +11,7 @@ const userModule: Module<UserState, RootState> = {
       facilities: [],
       facilityLocationsByFacilityId: {},
       goodIdentificationTypes: [],
+      isProcessingFile: false
     },
     getters,
     actions,

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

@@ -2,4 +2,5 @@ export const SN_UTIL = 'util'
 export const UTIL_FACILITIES_UPDATED = SN_UTIL + '/FACILITIES_UPDATED'
 export const UTIL_FACILITY_LOCATIONS_BY_FACILITY_ID = SN_UTIL + '/FACILITY_LOCATIONS_BY_FACILITY_ID'
 export const UTIL_GOOD_IDENTIFICATION_TYPES_UPDATED = SN_UTIL + '/GOOD_IDENTIFICATION_TYPES_UPDATED'
+export const UTIL_FILE_PROCESSING_STATUS_UPDATED = SN_UTIL + '/FILE_PROCESSING_STATUS_UPDATED'
 

src/store/modules/util/mutations.ts

@@ -13,6 +13,9 @@ const mutations: MutationTree <UtilState> = {
     },
     [types.UTIL_GOOD_IDENTIFICATION_TYPES_UPDATED](state, payload) {
         state.goodIdentificationTypes = payload
-    }
+    },
+    [types.UTIL_FILE_PROCESSING_STATUS_UPDATED] (state, payload) {
+        state.isProcessingFile = payload.status;
+      }
 }
 export default mutations;

src/views/InventoryReview.vue

@@ -3,6 +3,9 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button slot="start" default-href="/inventory" />
+        <ion-title v-if="!stockItems.initial || stockItems.initial.length === 0">{{stockItems.parsed.length}} {{ $t('items') }}</ion-title>
+        <ion-title v-else>{{ stockItems.initial.length }} {{ $t('of') }} {{ stockItems.parsed.length }} {{ $t('items') }}</ion-title>
+
         <ion-buttons slot="end">
           <ion-button @click="revertAll">
             <ion-icon slot="icon-only" :icon="arrowUndoOutline" />
@@ -101,8 +104,7 @@ import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router';
 import { showToast } from '@/utils';
 import { translate } from "@/i18n";
-import emitter from "@/event-bus";
-import { IonCard, IonCardContent, IonPage, IonHeader, IonToolbar, IonBackButton, IonContent, IonItem, IonThumbnail, IonLabel, IonChip, IonIcon, IonButton, IonButtons, popoverController, IonFab, IonFabButton, modalController, alertController, IonNote } from '@ionic/vue'
+import { IonCard, IonCardContent, IonPage, IonHeader, IonToolbar, IonBackButton, IonContent, IonItem, IonThumbnail, IonLabel, IonChip, IonIcon, IonButton, IonButtons, popoverController, IonFab, IonFabButton, modalController, alertController, IonNote, IonSpinner, IonTitle } from '@ionic/vue'
 import { businessOutline, calculatorOutline, chevronForwardOutline, ellipsisVerticalOutline, locationOutline, shirtOutline, checkboxOutline, cloudUploadOutline, arrowUndoOutline, warningOutline } from 'ionicons/icons'
 
 export default defineComponent({
@@ -125,11 +127,14 @@ export default defineComponent({
     IonButtons,
     IonFab,
     IonFabButton,
-    IonNote
+    IonNote,
+    IonSpinner,
+    IonTitle
   },
   computed: {
     ...mapGetters({
       stockItems: 'stock/getStockItems',
+      isProcessingFile: 'util/getFileProcessingStatus',
       getProduct: 'product/getProduct',
       instanceUrl: 'user/getInstanceUrl',
       facilities: 'util/getFacilities',
@@ -143,21 +148,12 @@ export default defineComponent({
       isParentProductUpdated: false,
       isCsvUploadedSuccessfully: false,
       facilityLocations: {},
-      isProcessingFile: true,
       viewSize: process.env['VUE_APP_VIEW_SIZE']
     }
   },
   ionViewDidEnter(){
     this.store.dispatch('util/fetchFacilities');
   },
-  async mounted() {
-    emitter.on('fileProcessing', this.fileProcessing);
-    emitter.on('fileProcessed', this.fileProcessed);
-  },
-  unmounted() {
-    emitter.off('fileProcessing', this.fileProcessing);
-    emitter.off('fileProcessed', this.fileProcessed);
-  },
   async beforeRouteLeave(to) {
     if(to.path === '/login') return;
     let canLeave = false;
@@ -188,12 +184,6 @@ export default defineComponent({
   },
   
   methods: {
-    async fileProcessing() {
-      this.isProcessingFile = true;
-    },
-    async fileProcessed() {
-      this.isProcessingFile = false;
-    },
     getFacilityName(facilityId: any, externalFacilityId: any) {
       if (facilityId) {
         const facility = this.facilities.find((facility: any) => facilityId === facility.facilityId );