Merge pull request #552 from amansinghbais/#528-default

Improved: clearing the hard count component state on leaving the component and added empty state (#528)
hotwax · Dec 27, 2024 · 3986d6e · 3986d6e
2 parents 2ad8962 + de303c5
commit 3986d6e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -172,6 +172,8 @@
   "Nearest due": "Nearest due",
   "No cycle counts found": "No cycle counts found",
   "No data found": "No data found",
+  "No facility found.": "No facility found.",
+  "No facility group found.": "No facility group found.",
   "No items found": "No items found",
   "No new file upload. Please try again.": "No new file upload. Please try again.",
   "No products found.": "No products found.",

diff --git a/src/views/HardCount.vue b/src/views/HardCount.vue
@@ -7,7 +7,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="main-content" ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
+    <ion-content class="main-content" ref="contentRef" :scroll-events="true" @ionScroll="selectedSegment === 'individual' ? enableScrolling() : ''">
       <div class="header">
         <div class="search">
           <ion-item lines="none" class="ion-padding">
@@ -67,28 +67,38 @@
           </ion-segment>
 
           <ion-list v-if="selectedSegment === 'group'">
-            <ion-list-header>{{ translate("Select a facility group to hard count") }}</ion-list-header>
-
-            <ion-radio-group v-model="selectedFacilityGroupId">
-              <ion-item v-for="group in facilityGroups" :key="group.facilityGroupId">
-                <ion-radio :value="group.facilityGroupId">{{ group.facilityGroupName }}</ion-radio>
-              </ion-item>
-            </ion-radio-group>
+            <template v-if="facilityGroups?.length">
+              <ion-list-header>{{ translate("Select a facility group to hard count") }}</ion-list-header>
+
+              <ion-radio-group v-model="selectedFacilityGroupId">
+                <ion-item v-for="group in facilityGroups" :key="group.facilityGroupId">
+                  <ion-radio :value="group.facilityGroupId">{{ group.facilityGroupName }}</ion-radio>
+                </ion-item>
+              </ion-radio-group>
+            </template>
+            <div v-else class="empty-state">
+              <p>{{ translate("No facility group found.") }}</p>
+            </div>
           </ion-list>
           <div v-else>
             <ion-searchbar v-model="queryString" :placeholder="translate('Search facilities')" @keyup.enter="fetchFacilities()" />
 
             <ion-list>
-              <ion-list-header>{{ translate("Select facilities to hard count") }}</ion-list-header>
-
-              <ion-item v-for="facility in facilities" :key="facility.facilityId">
-                <ion-checkbox :checked="selectedFacilityIds.includes(facility.facilityId)" @ionChange="toggleFacilitySelection(facility.facilityId)">
-                  <ion-label>
-                    {{ facility.facilityName ? facility.facilityName : facility.facilityId }}
-                    <p>{{ facility.facilityId }}</p>
-                  </ion-label>
-                </ion-checkbox>
-              </ion-item>
+              <template v-if="facilities?.length">
+                <ion-list-header>{{ translate("Select facilities to hard count") }}</ion-list-header>
+
+                <ion-item v-for="facility in facilities" :key="facility.facilityId">
+                  <ion-checkbox :checked="selectedFacilityIds.includes(facility.facilityId)" @ionChange="toggleFacilitySelection(facility.facilityId)">
+                    <ion-label>
+                      {{ facility.facilityName ? facility.facilityName : facility.facilityId }}
+                      <p>{{ facility.facilityId }}</p>
+                    </ion-label>
+                  </ion-checkbox>
+                </ion-item>
+              </template>
+              <div v-else class="empty-state">
+                <p>{{ translate("No facility found.") }}</p>
+              </div>
             </ion-list>
 
             <ion-infinite-scroll
@@ -115,7 +125,7 @@
 <script setup lang="ts">
 import { translate } from "@/i18n";
 import { calendarNumberOutline, checkmarkDoneOutline, storefrontOutline } from "ionicons/icons";
-import { IonBackButton, IonButton, IonCheckbox, IonContent, IonDatetime, IonFab, IonFabButton, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonModal, IonPage, IonRadio, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonTitle, IonToggle, IonToolbar, onIonViewWillEnter} from "@ionic/vue";
+import { IonBackButton, IonButton, IonCheckbox, IonContent, IonDatetime, IonFab, IonFabButton, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonModal, IonPage, IonRadio, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonTitle, IonToggle, IonToolbar, onIonViewWillEnter, onIonViewWillLeave} from "@ionic/vue";
 import { ref, nextTick, computed, Ref } from "vue"
 import { hasError, getDateTime, getDateWithOrdinalSuffix, handleDateTimeInput, showToast } from "@/utils";
 import logger from "@/logger"
@@ -124,7 +134,7 @@ import store from "@/store";
 import router from "@/router"
 import { UtilService } from "@/services/UtilService";
 
-const countName = ref(`Hard count - ${DateTime.now().toFormat('dd-MM-yyyy hh:mm:ss')}`);
+const countName = ref("");
 const selectedSegment = ref("group");
 const dueDate = ref("") as Ref<number | string>;
 const queryString = ref("");
@@ -143,9 +153,18 @@ const infiniteScrollRef = ref("");
 const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
 
 onIonViewWillEnter(async () => {
+  countName.value = `Hard count - ${DateTime.now().toFormat('dd-MM-yyyy hh:mm:ss')}`;
   await Promise.allSettled([store.dispatch("util/fetchFacilityGroups"), fetchFacilities()]);
 })
 
+onIonViewWillLeave(() => {
+  selectedFacilityGroupId.value = "";
+  selectedFacilityIds.value = [];
+  selectedSegment.value = "group";
+  dueDate.value = "";
+  isAutoAssignEnabled.value = false;
+})
+
 async function saveCount() {
   if(selectedSegment.value === "group" && !selectedFacilityGroupId.value) {
     showToast(translate("Please select a facility group."))

diff --git a/src/views/HardCountDetail.vue b/src/views/HardCountDetail.vue
@@ -463,19 +463,27 @@ async function updateCurrentItemInList(newItem: any, scannedValue: string) {
   updatedItem = { ...updatedItem, ...newItem, isMatching: false }
   updatedItem["isMatchNotFound"] = newItem?.importItemSeqId ? false : true
 
+  let newCount = "" as any;
   if(updatedItem && updatedItem.scannedId !== updatedProduct.scannedId && updatedItem?.scannedCount) {
+    newCount = updatedItem.scannedCount
+  } else if(selectedSegment.value === "unmatched" && (inputCount.value || updatedItem.scannedCount)) {
+    newCount = Number(inputCount.value || 0) + Number(updatedItem.scannedCount || 0)
+  }
+
+  if(newCount) {
     try {
       const resp = await CountService.updateCount({
         inventoryCountImportId: cycleCount.value.inventoryCountImportId,
         importItemSeqId: updatedItem?.importItemSeqId,
         productId: updatedItem.productId,
-        quantity: updatedItem.scannedCount,
+        quantity: newCount,
         countedByUserLoginId: userProfile.value.username
       })
-
-      if(hasError(resp)) {
-        updatedItem["quantity"] = updatedItem.scannedCount
+  
+      if(!hasError(resp)) {
+        updatedItem["quantity"] = newCount
         delete updatedItem["scannedCount"];
+        inputCount.value = ""
       }
     } catch(error) {
       logger.error(error)
@@ -629,7 +637,7 @@ async function matchProduct(currentProduct: any) {
     if(result.data?.selectedProduct) {
       const product = result.data.selectedProduct
       const newItem = await addProductToCount(product.productId)
-      updateCurrentItemInList(newItem, currentProduct.scannedId);
+      await updateCurrentItemInList(newItem, currentProduct.scannedId);
     }
   })