[WIP]Implemented: support of oms-api package in the product module and updated the code as per the updated schema(#2k0bk8x)

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@capacitor/android": "^2.4.7",
     "@capacitor/core": "^2.4.7",
+    "@hotwax/oms-api": "^1.0.1",
     "@ionic/core": "6.2.9",
     "@ionic/vue": "6.2.9",
     "@ionic/vue-router": "6.2.9",

src/App.vue

@@ -13,7 +13,8 @@ import Menu from '@/components/Menu.vue';
 import { defineComponent } from 'vue';
 import { loadingController } from '@ionic/vue';
 import emitter from "@/event-bus"
-import { mapGetters, useStore } from "vuex";
+import { mapGetters, useStore } from 'vuex';
+import { updateToken, updateInstanceUrl } from '@/adapter'
 
 export default defineComponent({
   name: 'App',
@@ -32,7 +33,9 @@ export default defineComponent({
     ...mapGetters({
       currentEComStore: 'user/getCurrentEComStore',
       productIdentifications: 'util/getProductIdentifications',
-      userProfile: 'user/getUserProfile'
+      userProfile: 'user/getUserProfile',
+      userToken: 'user/getUserToken',
+      instanceUrl: 'user/getInstanceUrl'
     })
   },
   methods: {
@@ -72,10 +75,15 @@ export default defineComponent({
     if(this.userProfile) {
       this.store.dispatch('user/getProductIdentificationPref', this.currentEComStore.productStoreId);
     }
+
+    updateToken(this.userToken)
+    updateInstanceUrl(this.instanceUrl)
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);
     emitter.off('dismissLoader', this.dismissLoader);
+    updateToken('')
+    updateInstanceUrl('')
   },
   setup() {
     const store = useStore();

src/adapter/index.ts

@@ -0,0 +1,17 @@
+import {
+  fetchProducts,
+  init,
+  isError,
+  Product,
+  updateToken,
+  updateInstanceUrl
+} from '@hotwax/oms-api'
+
+export {
+  fetchProducts,
+  init,
+  isError,
+  Product,
+  updateToken,
+  updateInstanceUrl
+}

src/main.ts

@@ -29,6 +29,7 @@ import './theme/variables.css';
 
 import i18n from './i18n'
 import store from './store'
+import { init } from '@/adapter';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -63,6 +64,7 @@ app.config.globalProperties.$filters = {
   }
 }
 
+init(store.getters['user/getUserToken'], store.getters['user/getInstanceUrl'], 3000)
 
 router.isReady().then(() => {
   app.mount('#app');

src/store/modules/product/ProductState.ts

@@ -1,7 +1,9 @@
+import { Product } from '@/adapter'
+
 export default interface ProductState {
   cached: any;
   list: {
     total: number;
-    items: any[];
+    items: Array<Product>;
   }
 }

src/store/modules/product/actions.ts

@@ -1,36 +1,38 @@
-import { ProductService } from '@/services/ProductService'
 import { ActionTree } from 'vuex'
 import RootState from '@/store/RootState'
 import ProductState from './ProductState'
 import * as types from './mutation-types'
-import { hasError, showToast } from '@/utils'
+import { showToast } from '@/utils'
 import emitter from '@/event-bus'
 import { translate } from '@/i18n'
+import { isError, fetchProducts, Product } from '@/adapter'
 
 const actions: ActionTree<ProductState, RootState> = {
   async fetchProducts ({commit, state}, { productIds }) {
     const cachedProductIds = Object.keys(state.cached)
-    const productIdFilter = productIds.reduce((filter: string, productId: any) => {
-      // If product already exist in cached products skip
-      if (cachedProductIds.includes(productId)) {
-        return filter;
-      } else {
-        if (filter !== '') filter += ' OR '
-        return filter += productId;
+    const productIdFilter= productIds.reduce((filter: Array<any>, productId: any) => {
+      // If product does not exist in cached products then add the id
+      if (!cachedProductIds.includes(productId) && productId) {
+        filter.push(productId);
       }
-    }, '');
+      return filter;
+    }, []);
 
-    if(productIdFilter === '') return;
-    const resp = await ProductService.fetchProducts({
-      "viewSize": productIds.length,
-      "filters": ['productId: (' + productIdFilter + ')']
+    // If there are no product ids to search skip the API call
+    if (productIdFilter.length <= 0) return;
+    const resp = await fetchProducts({
+      filters: { 'productId': { 'value': productIdFilter, 'op': 'OR' }},
+      viewSize: productIdFilter.length,
+      viewIndex: 0
     })
-    if (resp.status === 200 && !hasError(resp)) {
-      const products = resp.data.response.docs;
+    if (!isError(resp) && resp.total > 0) {
+      const products: Array<Product> = resp.products;
       // Handled empty response in case of failed query
-      if (resp.data) {
+      if (products) {
         commit(types.PRODUCT_ADD_TO_CACHED_MULTIPLE, { products });
       }
+    } else {
+      commit(types.PRODUCT_ADD_TO_CACHED_MULTIPLE, { products: [] });
     }
 
     if (productIds.viewIndex === 0) emitter.emit("dismissLoader");
@@ -41,15 +43,15 @@ const actions: ActionTree<ProductState, RootState> = {
     let resp;
     if (payload.viewIndex === 0) emitter.emit("presentLoader");
     try {
-      resp = await ProductService.fetchProducts({
-        "filters": ['isVirtual: false'],
+      resp = await fetchProducts({
+        "filters": { 'isVirtual': { 'value': false }},
         "viewSize": payload.viewSize,
-        "viewIndex": payload.viewIndex,
-        "keyword":  payload.queryString
+        "viewIndex": payload.viewIndex * payload.viewSize,
+        "queryString": payload.queryString
       })
-      if (resp.status === 200 && resp.data.response?.docs.length > 0 && !hasError(resp)) {
-        let products = resp.data.response.docs;
-        const total = resp.data.response.numFound;
+      if (!isError(resp)) {
+        let products: Product = resp.products;
+        const total = resp.total;
 
         if (payload.viewIndex && payload.viewIndex > 0) products = state.list.items.concat(products)
         commit(types.PRODUCT_LIST_UPDATED, { products, total });

src/store/modules/user/actions.ts

@@ -8,6 +8,7 @@ import { translate } from '@/i18n'
 import moment from 'moment';
 import emitter from '@/event-bus'
 import "moment-timezone";
+import { updateInstanceUrl, updateToken } from '@/adapter'
 
 const actions: ActionTree<UserState, RootState> = {
 
@@ -47,6 +48,7 @@ const actions: ActionTree<UserState, RootState> = {
             }
           } else {
             commit(types.USER_TOKEN_CHANGED, { newToken: resp.data.token })
+            updateToken(resp.data.token)
             await dispatch('getProfile')
             return resp.data;
           }
@@ -74,6 +76,8 @@ const actions: ActionTree<UserState, RootState> = {
   async logout ({ commit }) {
     // TODO add any other tasks if need
     commit(types.USER_END_SESSION)
+    updateToken('')
+    updateInstanceUrl('')
     this.dispatch('util/setProductIdentifications', [])
   },
 
@@ -138,6 +142,7 @@ const actions: ActionTree<UserState, RootState> = {
   // Set User Instance Url
   setUserInstanceUrl ({ commit }, payload){
     commit(types.USER_INSTANCE_URL_UPDATED, payload)
+    updateInstanceUrl(payload)
   },
 
   async getFacilityLocations( { commit }, facilityId ) {

src/utils/product/index.ts

@@ -1,19 +1,11 @@
-const getProductIdentificationValue = (productIdentifier: string, product: any) => {
+import { Product } from "@/adapter";
 
-  // handled this case as on page load initially the data is not available, so not to execute furthur code
-  // untill product are not available
-  if(!Object.keys(product).length) {
-    return;
-  }
+const getProductIdentificationValue = (productIdentifier: string, product: Product) => {
 
   let value = product[productIdentifier]
 
-  // considered that the goodIdentification will always have values in the format "productIdentifier/value" and there will be no entry like "productIdentifier/"
-  const identification = product['goodIdentifications'].find((identification: string) => identification.startsWith(productIdentifier + "/"))
-
-  if(identification) {
-    const goodIdentification = identification.split('/')
-    value = goodIdentification[1]
+  if(!value) {
+    value = product['identifications']?.find((identification: any) => identification.productIdTypeEnumId === productIdentifier)?.idValue
   }
 
   return value;

src/views/AddProductModal.vue

@@ -15,11 +15,11 @@
     <ion-list v-for="product in products" :key="product.productId">
       <ion-item lines="none">
         <ion-thumbnail slot="start">
-          <Image :src="product.mainImageUrl" />
+          <Image :src="product.images?.mainImageUrl" />
         </ion-thumbnail>
         <ion-label>
-          <h2>{{ product.productName}}</h2>
-          <p>{{ product.productId}}</p>
+          <h2>{{ product.productName }}</h2>
+          <p>{{ product.productId }}</p>
         </ion-label>
         <ion-icon v-if="isProductAvailableInShipment(product.productId)" color="success" :icon="checkmarkCircle" />
         <ion-button v-else fill="outline" @click="addtoShipment(product)">{{ $t("Add to Shipment") }}</ion-button>
@@ -96,7 +96,7 @@ export default defineComponent({
       const payload = {
         viewSize,
         viewIndex,
-        queryString: '*' + this.queryString + '*'
+        queryString: this.queryString
       }
       if (this.queryString) {
         await this.store.dispatch("product/findProduct", payload);

src/views/AddProductToPOModal.vue

@@ -15,11 +15,11 @@
     <ion-list v-for="product in products" :key="product.productId">
       <ion-item lines="none">
         <ion-thumbnail slot="start">
-          <Image :src="product.mainImageUrl" />
+          <Image :src="product.images?.mainImageUrl" />
         </ion-thumbnail>
         <ion-label>
-          <h2>{{ product.productName}}</h2>
-          <p>{{ product.productId}}</p>
+          <h2>{{ product.productName }}</h2>
+          <p>{{ product.productId }}</p>
         </ion-label>
         <ion-icon v-if="isProductAvailableInOrder(product.productId)" color="success" :icon="checkmarkCircle" />
         <ion-button v-else fill="outline" @click="addtoOrder(product)">{{ $t("Add to Purchase Order") }}</ion-button>
@@ -96,7 +96,7 @@ export default defineComponent({
       const payload = {
         viewSize,
         viewIndex,
-        queryString: '*' + this.queryString + '*'
+        queryString: this.queryString
       }
       if (this.queryString) {
         await this.store.dispatch("product/findProduct", payload);

src/views/PurchaseOrderDetail.vue

@@ -42,10 +42,10 @@
           <div class="product">
             <div class="product-info">
               <ion-item lines="none">
-                <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
-                  <Image :src="getProduct(item.productId).mainImageUrl" />
+                <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).images?.mainImageUrl, getProduct(item.productId).productName)">
+                  <Image :src="getProduct(item.productId).images?.mainImageUrl" />
                 </ion-thumbnail>
-                <ion-label class="ion-text-wrap">
+                <ion-label class="ion-text-wrap" v-if="getProduct(item.productId)">
                   <h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
                   <p>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
                 </ion-label>

src/views/ReceivingHistoryModal.vue

@@ -13,7 +13,7 @@
     <ion-list v-for="(item, index) in poHistory.items" :key="index">
       <ion-item>
         <ion-thumbnail slot="start">
-          <Image :src="getProduct(item.productId).mainImageUrl" />
+          <Image :src="getProduct(item.productId).images?.mainImageUrl" />
         </ion-thumbnail>
         <ion-label>
           {{ item.receivedByUserLoginId }}

src/views/ReturnDetails.vue

@@ -38,10 +38,10 @@
           <div class="product">
             <div class="product-info">
               <ion-item lines="none">
-                <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
-                  <Image :src="getProduct(item.productId).mainImageUrl" />
+                <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).images?.mainImageUrl, getProduct(item.productId).productName)">
+                  <Image :src="getProduct(item.productId).images?.mainImageUrl" />
                 </ion-thumbnail>
-                <ion-label class="ion-text-wrap">
+                <ion-label class="ion-text-wrap" v-if="getProduct(item.productId)">
                   <h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
                   <p>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
                 </ion-label>

src/views/ShipmentDetails.vue

@@ -31,10 +31,10 @@
           <div class="product">
             <div class="product-info">
               <ion-item lines="none">
-                <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
-                  <Image :src="getProduct(item.productId).mainImageUrl" />
+                <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).images?.mainImageUrl, getProduct(item.productId).productName)">
+                  <Image :src="getProduct(item.productId).images?.mainImageUrl" />
                 </ion-thumbnail>
-                <ion-label class="ion-text-wrap">
+                <ion-label class="ion-text-wrap" v-if="getProduct(item.productId)">
                   <h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
                   <p>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
                 </ion-label>