Merge pull request #415 from amansinghbais/#380

Improved: ui to show received and ordered counts of completed items (#380)
hotwax · Nov 7, 2024 · a18257e · a18257e
2 parents e95c1b3 + 595510a
commit a18257e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -67,6 +67,7 @@
   "Open": "Open",
   "ordered": "ordered",
   "Orders not found": "Orders not found",
+  "/ received": "{receivedCount} / {orderedCount} received",
   "Password": "Password",
   "Pending: item": "Pending: {itemsCount} item",
   "Pending: items": "Pending: {itemsCount} items",

diff --git a/src/views/PurchaseOrderDetail.vue b/src/views/PurchaseOrderDetail.vue
@@ -135,8 +135,8 @@
 
             <div>
               <ion-item lines="none">
-                <ion-badge color="medium" slot="end">{{ item.quantity }} {{ translate("ordered") }}</ion-badge>
-                <ion-badge color="success" class="ion-margin-start" slot="end">{{ getPOItemAccepted(item.productId) }} {{ translate("received") }}</ion-badge>
+                <ion-label slot="end">{{ translate("/ received", { receivedCount: getPOItemAccepted(item.productId), orderedCount: item.quantity }) }}</ion-label>
+                <ion-icon :icon="(getPOItemAccepted(item.productId) == item.quantity) ? checkmarkDoneCircleOutline : warningOutline" :color="(getPOItemAccepted(item.productId) == item.quantity) ? '' : 'warning'" slot="end" />
               </ion-item>
             </div>
           </div>
@@ -180,7 +180,7 @@ import {
   modalController
 } from '@ionic/vue';
 import { defineComponent, computed } from 'vue';
-import { addOutline, cameraOutline, checkmarkDone, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline } from 'ionicons/icons';
+import { addOutline, cameraOutline, checkmarkDone, checkmarkDoneCircleOutline, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline, warningOutline } from 'ionicons/icons';
 import ReceivingHistoryModal from '@/views/ReceivingHistoryModal.vue'
 import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { useStore, mapGetters } from 'vuex';
@@ -422,6 +422,7 @@ export default defineComponent({
       addOutline,
       cameraOutline,
       checkmarkDone,
+      checkmarkDoneCircleOutline,
       copyOutline,
       copyToClipboard,
       eyeOffOutline,
@@ -435,6 +436,7 @@ export default defineComponent({
       translate,
       getProductIdentificationValue,
       productIdentificationPref,
+      warningOutline
     };
   },
 });

diff --git a/src/views/ShipmentDetails.vue b/src/views/ShipmentDetails.vue
@@ -61,8 +61,8 @@
               </ion-item>
               <div v-else>
                 <ion-item lines="none">
-                  <ion-badge color="medium" slot="end">{{ item.quantityOrdered }} {{ translate("ordered") }}</ion-badge>
-                  <ion-badge color="success" class="ion-margin-start" slot="end">{{ item.quantityAccepted }} {{ translate("received") }}</ion-badge>
+                  <ion-label slot="end">{{ translate("/ received", { receivedCount: item.quantityAccepted, orderedCount: item.quantityOrdered }) }}</ion-label>
+                  <ion-icon :icon="(item.quantityReceived == item.quantityOrdered) ? checkmarkDoneCircleOutline : warningOutline" :color="(item.quantityReceived == item.quantityOrdered) ? '' : 'warning'" slot="end" />
                 </ion-item>
               </div>
             </div>
@@ -115,7 +115,7 @@ import {
   alertController,
 } from '@ionic/vue';
 import { defineComponent, computed } from 'vue';
-import { add, checkmarkDone, cameraOutline, locationOutline } from 'ionicons/icons';
+import { add, checkmarkDone, checkmarkDoneCircleOutline, cameraOutline, locationOutline, warningOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from "vuex";
 import AddProductModal from '@/views/AddProductModal.vue'
 import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
@@ -333,13 +333,15 @@ export default defineComponent({
       add,
       cameraOutline,
       checkmarkDone,
+      checkmarkDoneCircleOutline,
       hasPermission,
       locationOutline,
       store,
       router,
       translate,
       getProductIdentificationValue,
-      productIdentificationPref
+      productIdentificationPref,
+      warningOutline
     };
   },
 });