Implemented: UI of 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">Qrder 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,30 @@
     <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-note v-if="showInfoIcon"> 50 ATP </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>
+      <ion-button v-if="showInfoIcon" fill="clear" @click.stop="getInventoryComputationDetails">
+        <ion-icon slot="icon-only" :icon="informationCircleOutline" color="medium"></ion-icon>
+      </ion-button>
     </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 +46,8 @@ export default defineComponent({
   data () {
     return {
       goodIdentificationTypeId: process.env.VUE_APP_PRDT_IDENT_TYPE_ID,
-      isFetchingStock: false
+      isFetchingStock: false,
+      showInfoIcon: false
     }
   },
   props: {
@@ -63,6 +68,15 @@ export default defineComponent({
       this.isFetchingStock = true
       await this.store.dispatch('stock/fetchStock', { productId })
       this.isFetchingStock = false
+      this.showInfoIcon = true;
+    },
+    async getInventoryComputationDetails(){
+      const popover = await popoverController.create({
+        component: InventoryDetailsPopover,
+        // componentProps: { otherStoresInventory: this.otherStoresInventoryDetails }
+      });
+      await popover.present();
+
     },
     updateColor(stock: number) {
       return stock ? stock < 10 ? 'warning' : 'success' : 'danger';
@@ -76,6 +90,7 @@ export default defineComponent({
       getProductIdentificationValue,
       productIdentificationPref,
       cubeOutline,
+      informationCircleOutline,
       store,
       translate
     }