Display Inventory Computation for Order Items (#386)

src/components/InventoryDetailsPopover.vue

@@ -0,0 +1,78 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>Inventory computation</ion-list-header>
+      <ion-item>
+        <ion-label class="ion-text-wrap">Quantity on hands</ion-label>
+        <ion-note slot="end">52</ion-note>
+      </ion-item>
+      <ion-item>
+        <ion-label class="ion-text-wrap">Safety stock</ion-label>
+        <ion-note slot="end">4</ion-note>
+      </ion-item>
+      <ion-item>
+        <ion-label class="ion-text-wrap">Order reservation</ion-label>
+        <ion-note slot="end">1</ion-note>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label class="ion-text-wrap">Online ATP</ion-label>
+        <ion-badge slot="end" color="success">52</ion-badge>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonHeader,
+  IonToolbar,
+  IonButtons,
+  IonTitle,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonBadge,
+  IonList,
+} from '@ionic/vue'
+
+import { defineComponent } from 'vue';
+import { useStore } from 'vuex'
+
+  export default defineComponent({
+    name: 'InventoryDetailsPopover',
+    component:{
+      IonHeader,
+      IonToolbar,
+      IonButtons,
+      IonTitle,
+      IonContent,
+      IonItem,
+      IonLabel,
+      IonNote,
+      IonBadge,
+      IonList,
+    },
+    props: {
+    },
+    data () {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    },
+    setup () {
+      const store = useStore();
+      return {
+      store
+    };
+
+
+    }
+  })
+</script>

src/components/ProductListItem.vue

@@ -6,26 +6,32 @@
     <ion-label class="ion-text-wrap">
       <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
       <p class="ion-text-wrap">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
+      <p>Color: color</p>
+      <p>Size: size</p>
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
     <div v-if="!isShipToStoreOrder">
-      <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal >= 0" :color="updateColor(getProductStock(item.productId).quantityOnHandTotal)">
-        {{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}
-      </ion-note>
-      <ion-spinner v-else-if="isFetchingStock" color="medium" name="crescent" />
-      <ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId)">
-        <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
+      <ion-button v-if="!isFetchingStock && !showInfoIcon" fill="clear" @click.stop="fetchProductStock(item.productId)">
+        <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
       </ion-button>
+      <div v-else-if="showInfoIcon" class="atp-info">
+        <ion-note slot="end"> 50 ATP </ion-note>
+        <ion-button fill="clear" @click.stop="getInventoryComputationDetails($event)">
+          <ion-icon :icon="informationCircleOutline" color="medium" />
+        </ion-button>
+      </div>
+      <ion-spinner v-else color="medium" name="crescent" />
     </div>
   </ion-item>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from "vue";
-import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail } from "@ionic/vue";
+import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail, popoverController } from "@ionic/vue";
 import { mapGetters, useStore } from 'vuex';
 import { getProductIdentificationValue, DxpShopifyImg, translate, useProductIdentificationStore } from '@hotwax/dxp-components'
-import { cubeOutline } from 'ionicons/icons'
+import { cubeOutline, informationCircleOutline } from 'ionicons/icons'
+import InventoryDetailsPopover from '@/components/InventoryDetailsPopover.vue'
 
 export default defineComponent({
   name: "ProductListItem",
@@ -42,7 +48,8 @@ export default defineComponent({
   data () {
     return {
       goodIdentificationTypeId: process.env.VUE_APP_PRDT_IDENT_TYPE_ID,
-      isFetchingStock: false
+      isFetchingStock: false,
+      showInfoIcon: false
     }
   },
   props: {
@@ -63,6 +70,16 @@ export default defineComponent({
       this.isFetchingStock = true
       await this.store.dispatch('stock/fetchStock', { productId })
       this.isFetchingStock = false
+      this.showInfoIcon = true;
+    },
+    async getInventoryComputationDetails(Event: any){
+      const popover = await popoverController.create({
+        component: InventoryDetailsPopover,
+        event: Event,
+        // componentProps: { otherStoresInventory: this.otherStoresInventoryDetails }
+      });
+      await popover.present();
+
     },
     updateColor(stock: number) {
       return stock ? stock < 10 ? 'warning' : 'success' : 'danger';
@@ -76,6 +93,7 @@ export default defineComponent({
       getProductIdentificationValue,
       productIdentificationPref,
       cubeOutline,
+      informationCircleOutline,
       store,
       translate
     }
@@ -87,4 +105,10 @@ export default defineComponent({
 ion-thumbnail > img {
   object-fit: contain;
 }
+
+.atp-info {
+  display: flex;
+  align-items: center; 
+  flex-direction: row; 
+}
 </style>

src/views/OtherStoresInventoryModal.vue

@@ -10,6 +10,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
+    <ion-searchbar/>
     <ion-list v-if="otherStoresInventory.length">
       <ion-item v-for="details in otherStoresInventory" :key="details.facilityName">
         <ion-label class="ion-text-wrap">{{ details.facilityName }}</ion-label>