Merge pull request #8 from disha1202/#22c8vgh

Implemented: logic to edit data #22c8vgh

changelogs/unreleased/-22c8vf8.yml

@@ -0,0 +1,6 @@
+---
+title: Implemented logic to render data on order detail page
+ticket_id: "#22c8vf8"
+merge_request: 5
+author: Disha Talreja
+type: added

changelogs/unreleased/-22c8vgh.yml

@@ -0,0 +1,6 @@
+---
+title: Implemented logic to render and edit data on purchase order detail page
+ticket_id: "#22c8vgh"
+merge_request: 8
+author: Disha Talreja
+type: added

src/locales/en.json

@@ -1,8 +1,13 @@
 {
+  "all items": "all items",
+  "Apply": "Apply",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Arrival date": "Arrival date",
+  "Backorder": "Backorder",
   "Blank": "Blank",
+  "Buffer days": "Buffer days",
   "Cancel": "Cancel",
+  "Catalog": "Catalog",
   "Change": "Change",
   "Change time zone": "Change time zone",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
@@ -14,14 +19,19 @@
   "Logout": "Logout",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
+  "Order buffer": "Order buffer",
   "Order ID": "Order ID",
+  "Ordered": "Ordered",
   "Ordered quantity": "Ordered quantity",
   "Password":  "Password",
+  "PO External Order ID": "PO External Order ID",
+  "Preorder": "Preorder",
   "Purchase order": "Purchase order",
   "Purchase orders": "Purchase orders",
   "Ready to create an app?": "Ready to create an app?",
   "REVIEW": "REVIEW",
   "Search time zones": "Search time zones",
+  "Select": "Select",
   "Select time zone": "Select time zone",
   "Select the column index for the following information in the uploaded CSV.": "Select the column index for the following information in the uploaded CSV.",
   "Something went wrong": "Something went wrong",

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import PurchaseOrder from '@/views/PurchaseOrder.vue'
+import OrderDetail from '@/views/OrderDetail.vue'
 import Login from '@/views/Login.vue'
 import Settings from "@/views/Settings.vue"
 import store from '@/store'
@@ -28,10 +29,16 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/purchase-order',
-    name: 'Purchase Order',
+    name: 'PurchaseOrder',
     component: PurchaseOrder,
     beforeEnter: authGuard
   },
+  {
+    path: '/purchase-order-detail',
+    name: 'PurchaseOrderDetail',
+    component: OrderDetail,
+    beforeEnter: authGuard
+  },
   {
     path: '/login',
     name: 'Login',

src/store/RootState.ts

@@ -1,4 +1,5 @@
 export default interface RootState {
     user: any;
     product: any;
+    order: any;
 }

src/store/index.ts

@@ -6,6 +6,7 @@ import RootState from './RootState'
 import createPersistedState from "vuex-persistedstate";
 import userModule from './modules/user';
 import productModule from "./modules/product";
+import orderModule from "./modules/order";
 import SecureLS from "secure-ls";
 
 // We will be using secure-ls for secure localStorage data with high level of encryption and data compression.
@@ -60,7 +61,8 @@ const store = createStore<RootState>({
     plugins: [ persistState ],
     modules: { 
         'user': userModule,
-        'product': productModule
+        'product': productModule,
+        'order': orderModule
     },
 })
 

src/store/modules/order/OrderState.ts

@@ -0,0 +1,6 @@
+export default interface OrderState { 
+    list: {
+      items: any,
+      original: any
+    }
+  }

src/store/modules/order/actions.ts

@@ -0,0 +1,40 @@
+import { ActionTree } from 'vuex'
+import store from '@/store'
+import RootState from '@/store/RootState'
+import OrderState from './OrderState'
+import * as types from './mutation-types'
+import router from '@/router'
+
+
+const actions: ActionTree<OrderState, RootState> = {
+  async updatedOrderList ({commit}, items) {
+    const productIds = items.map((item: any) => {
+      return item.shopifyProductSKU
+    })
+    const viewSize = productIds.length;
+    const viewIndex = 0;
+    const payload = {
+      viewSize,
+      viewIndex,
+      productIds
+    }
+    const resp = await store.dispatch("product/fetchProducts", payload);
+    items = items.map((item: any) => {
+        const product = resp.data.response.docs.find((product: any) => {
+          return item.shopifyProductSKU == product.internalName;
+        })
+        item.parentProductId = product.groupId;
+        item.internalName = product.internalName; 
+        item.parentProductName = product.parentProductName;
+        item.imageUrl = product.mainImageUrl;
+        item.isNewProduct = false;
+        return item;
+    })
+    const original = JSON.parse(JSON.stringify(items))
+    commit(types.ORDER_LIST_UPDATED, { items, original });
+  },
+  updatedOrderListItems({ commit }, orderListItems){
+    commit(types.ORDER_LIST_ITEMS_UPDATED, orderListItems)
+  }
+}
+export default actions;

src/store/modules/order/getters.ts

@@ -0,0 +1,10 @@
+import { GetterTree } from "vuex";
+import OrderState from "./OrderState";
+import RootState from "../../RootState";
+
+const getters: GetterTree<OrderState, RootState> = {
+  getOrder(state) {
+    return state.list;
+  }
+};
+export default getters;   

src/store/modules/order/index.ts

@@ -0,0 +1,21 @@
+import getters from './getters'
+import { Module } from 'vuex'
+import actions from './actions'
+import mutations from './mutations'
+import OrderState from './OrderState'
+import RootState from '../../RootState'
+
+const orderModule: Module<OrderState, RootState> = {
+  namespaced: true,
+  state: {
+    list: {
+      items: [],
+      original: []
+    },
+  },
+  actions,
+  getters,
+  mutations  
+}
+
+export default orderModule;

src/store/modules/order/mutation-types.ts

@@ -0,0 +1,3 @@
+export const SN_ORDER = 'order'
+export const ORDER_LIST_UPDATED = SN_ORDER + '/LIST_UPDATED'
+export const ORDER_LIST_ITEMS_UPDATED = SN_ORDER + '/LIST_ITEMS_UPDATED'

src/store/modules/order/mutations.ts

@@ -0,0 +1,14 @@
+import { MutationTree } from 'vuex'
+import OrderState from './OrderState'
+import * as types from './mutation-types'
+
+const mutations: MutationTree <OrderState> = {
+  [types.ORDER_LIST_UPDATED] (state, payload) {
+    state.list.items = payload.items;
+    state.list.original = payload.original;
+  },
+  [types.ORDER_LIST_ITEMS_UPDATED] (state, payload) {
+    state.list.items = payload;
+  }
+}
+export default mutations;

src/store/modules/product/ProductState.ts

@@ -1,4 +1,5 @@
 export default interface ProductState {
+  cached: any;
   products: {
     list: any;
     total: number;

src/store/modules/product/actions.ts

@@ -10,6 +10,34 @@ import emitter from '@/event-bus'
 
 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 {
+        // checking condition that if the filter is not empty then adding 'OR' to the filter
+        if (filter !== '') filter += ' OR '
+        return filter += productId;
+      }
+    }, '');
+
+    // If there are no products skip the API call
+    if (productIdFilter === '') return;
+
+    const resp = await ProductService.fetchProducts({
+      "filters": ['internalName: (' + productIdFilter + ')']
+    })
+    if (resp.status === 200 && !hasError(resp)) {
+      const products = resp.data.response.docs;
+      // Handled empty response in case of failed query
+      if (resp.data) commit(types.PRODUCT_ADD_TO_CACHED_MULTIPLE, { products });
+    }
+    // TODO Handle specific error
+    return resp;
+  },
+
   // Find Product
   async findProduct ({ commit, state }, payload) {
 

src/store/modules/product/getters.ts

@@ -3,6 +3,10 @@ import ProductState from "./ProductState";
 import RootState from "../../RootState";
 
 const getters: GetterTree<ProductState, RootState> = {
+  getProduct: (state) => (productId: string) => {
+    // Returning empty object so that it doesn't breaks the UI
+    return state.cached[productId] ? state.cached[productId] : {};
+  },
   getSearchProducts(state) {
     return state.products.list;
   },

src/store/modules/product/index.ts

@@ -8,6 +8,7 @@ import RootState from '../../RootState'
 const productModule: Module<ProductState, RootState> = {
     namespaced: true,
     state: {
+      cached: {},
       products: {
         list: {},
         total: 0

src/store/modules/product/mutation-types.ts

@@ -1,2 +1,3 @@
 export const SN_PRODUCT = 'product'
 export const PRODUCT_SEARCH_UPDATED = SN_PRODUCT + '/SEARCH_UPDATED'
+export const PRODUCT_ADD_TO_CACHED_MULTIPLE = SN_PRODUCT + '/ADD_TO_CACHED_MULTIPLE'

src/store/modules/product/mutations.ts

@@ -6,6 +6,13 @@ const mutations: MutationTree <ProductState> = {
   [types.PRODUCT_SEARCH_UPDATED] (state, payload) {
     state.products.list = payload.products;
     state.products.total = payload.totalProductsCount;
-  }
+  },
+  [types.PRODUCT_ADD_TO_CACHED_MULTIPLE] (state, payload) {
+    if (payload.products) {
+      payload.products.forEach((product: any) => {
+        state.cached[product.internalName] = product
+      });
+    }
+  },
 }
 export default mutations;