@things-factory/operato-wms 5.0.13 → 6.0.0-alpha.1

package/client/pages/inventory/inventory-by-product-detail.js

@@ -1,13 +1,15 @@
 import '@material/mwc-button/mwc-button'
 import '@things-factory/grist-ui'
+import './inventory-history-by-pallet'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+
 import { i18next, localize } from '@things-factory/i18n-base'
 import { openPopup } from '@things-factory/layout-base'
 import { client } from '@things-factory/shell'
 import { ScrollbarStyles } from '@things-factory/styles'
 import { isMobileDevice } from '@things-factory/utils'
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit-element'
-import './inventory-history-by-pallet'
 
 class InventoryByProductDetail extends localize(i18next)(LitElement) {
   static get styles() {
@@ -54,6 +56,54 @@ class InventoryByProductDetail extends localize(i18next)(LitElement) {
   }
 
   firstUpdated() {
+    this._searchFields = [
+      {
+        label: i18next.t('field.batch_id'),
+        name: 'batchId',
+        type: 'text',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.lot_id'),
+        name: 'palletId',
+        type: 'text',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.carton_id'),
+        name: 'cartonId',
+        type: 'text',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.location'),
+        name: 'location',
+        type: 'object',
+        queryName: 'locations',
+        field: 'name'
+      },
+      {
+        label: i18next.t('field.expirying_in'),
+        name: 'expiryingIn',
+        type: 'select',
+        options: [
+          { value: '' },
+          { name: i18next.t('text.3_months'), value: '3 months' },
+          { name: i18next.t('text.6_months'), value: '6 months' },
+          { name: i18next.t('text.9_months'), value: '9 months' },
+          { name: i18next.t('text.12_months'), value: '12 months' }
+        ],
+        props: { searchOper: 'eq' }
+      },
+      {
+        label: i18next.t('field.has_balance'),
+        name: 'remainOnly',
+        type: 'checkbox',
+        value: true,
+        props: { searchOper: 'eq' }
+      }
+    ]
+
     this.config = {
       list: { fields: ['palletId', 'batchId', 'orderRefNo', 'orderNo', 'zone', 'location', 'qty', 'batchIdRef'] },
       rows: { appendable: false },
@@ -68,39 +118,28 @@ class InventoryByProductDetail extends localize(i18next)(LitElement) {
         },
         {
           type: 'string',
-          name: 'palletId',
-          header: i18next.t('field.lot_id'),
-          sortable: true,
+          name: 'batchId',
+          header: i18next.t('field.batch_id'),
           width: 200
         },
         {
           type: 'string',
-          name: 'cartonId',
-          header: i18next.t('field.carton_id'),
-          sortable: true,
+          name: 'palletId',
+          header: i18next.t('field.lot_id'),
           width: 200
         },
         {
           type: 'string',
-          name: 'batchId',
-          header: i18next.t('field.batch_id'),
-          sortable: true,
+          name: 'cartonId',
+          header: i18next.t('field.carton_id'),
           width: 200
         },
         {
           type: 'string',
           name: 'packingType',
           header: i18next.t('field.packing_type'),
-          sortable: true,
           width: 200
         },
-        {
-          type: 'string',
-          name: 'zone',
-          header: i18next.t('field.zone'),
-          sortable: true,
-          width: 80
-        },
         {
           type: 'object',
           name: 'location',
@@ -108,31 +147,24 @@ class InventoryByProductDetail extends localize(i18next)(LitElement) {
           sortable: true,
           width: 200
         },
-        {
-          type: 'number',
-          name: 'qty',
-          header: i18next.t('field.qty'),
-          sortable: true,
-          width: 80
-        },
         {
           type: 'number',
           name: 'lockedQty',
           header: i18next.t('field.release_qty'),
-          sortable: false,
+          sortable: true,
           width: 160
         },
         {
           type: 'number',
-          name: 'remainingQty',
-          header: i18next.t('field.remain_qty'),
+          name: 'qty',
+          header: i18next.t('field.available_qty'),
           sortable: true,
-          width: 160
+          width: 80
         },
         {
           type: 'string',
           name: 'uomValue',
-          header: i18next.t('field.uom_value'),
+          header: i18next.t('field.available_uom_value'),
           sortable: true,
           width: 80
         },
@@ -140,52 +172,24 @@ class InventoryByProductDetail extends localize(i18next)(LitElement) {
           type: 'string',
           name: 'batchIdRef',
           header: i18next.t('field.batch_no_ref'),
+          width: 200
+        },
+        {
+          type: 'date',
+          name: 'expirationDate',
+          header: i18next.t('field.expiry_date'),
+          sortable: true,
+          width: 200
+        },
+        {
+          type: 'date',
+          name: 'manufactureDate',
+          header: i18next.t('field.manufacture_date'),
           sortable: true,
           width: 200
         }
       ]
     }
-
-    this._searchFields = [
-      {
-        label: i18next.t('field.batch_id'),
-        name: 'batchId',
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        label: i18next.t('field.lot_id'),
-        name: 'palletId',
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        label: i18next.t('field.carton_id'),
-        name: 'cartonId',
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        label: i18next.t('field.location'),
-        name: 'location',
-        type: 'object',
-        queryName: 'locations',
-        field: 'name'
-      },
-      {
-        label: i18next.t('field.zone'),
-        name: 'zone',
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        label: i18next.t('field.has_balance'),
-        name: 'remainOnly',
-        type: 'checkbox',
-        value: true,
-        props: { searchOper: 'eq' }
-      }
-    ]
   }
 
   get dataGrist() {
@@ -199,35 +203,38 @@ class InventoryByProductDetail extends localize(i18next)(LitElement) {
   async fetchHandler({ page, limit, sorters = [] }) {
     try {
       if (!this.productId) return
-      const filters = await this.searchForm.getQueryFilters()
+      let filters = await this.searchForm.getQueryFilters()
+
+      if (filters && filters.length > 2 && filters.find(filter => filter.name == 'remainOnly')) {
+        // only supports 2 filters including remainOnly (because its a boolean)
+        this._showToast({ type: 'warning', message: i18next.t('text.only_supports_search_of_single_field') })
+        return
+      } else if (!filters.find(filter => filter.name == 'remainOnly')) {
+        // when popup init, it doesnt capture the value of this field
+        // hence, we need to push a default value as follows
+        filters.push({ name: 'remainOnly', operator: 'eq', value: true })
+      }
+
       const response = await client.query({
         query: gql`
           query inventories($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
             inventories(filters: $filters, pagination: $pagination, sortings: $sortings) {
               items {
-                packingType
+                batchId
                 palletId
                 cartonId
-                batchId
-                batchIdRef
-                qty
-                uomValue
-                uom
-                remainQty
-                warehouse {
-                  name
-                  description
-                }
-                zone
+                packingType
                 location {
                   name
                   description
                 }
-                updatedAt
-                updater {
-                  name
-                  description
-                }
+                uom
+                remainQty
+                qty
+                uomValue
+                batchIdRef
+                expirationDate
+                manufactureDate
               }
               total
             }
@@ -237,7 +244,7 @@ class InventoryByProductDetail extends localize(i18next)(LitElement) {
           filters: [
             ...filters,
             { name: 'product_id', operator: 'eq', value: this.productId },
-            { name: 'status', operator: 'in', value: ['STORED', 'TERMINATED','MISSING'] }
+            { name: 'status', operator: 'in', value: ['STORED', 'TERMINATED', 'MISSING'] }
           ],
           pagination: { page, limit },
           sortings: sorters

package/client/pages/inventory/inventory-by-product.js

@@ -15,6 +15,7 @@ import { isMobileDevice } from '@things-factory/utils'
 class InventoryByProduct extends localize(i18next)(PageView) {
   static get properties() {
     return {
+      _checkedBoxes: Array,
       _searchFields: Array,
       config: Object,
       data: Object
@@ -43,6 +44,11 @@ class InventoryByProduct extends localize(i18next)(PageView) {
     ]
   }
 
+  constructor() {
+    super()
+    this._checkedBoxes = []
+  }
+
   render() {
     return html`
       <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
@@ -70,12 +76,8 @@ class InventoryByProduct extends localize(i18next)(PageView) {
     return this.shadowRoot.querySelector('search-form')
   }
 
-  get _lowStockCheckbox() {
-    return this.searchForm.shadowRoot.querySelector('input[name=lowStock]')
-  }
-
-  get _overStockCheckbox() {
-    return this.searchForm.shadowRoot.querySelector('input[name=overStock]')
+  get _availabletockCheckbox() {
+    return this.searchForm.shadowRoot.querySelector('input[name=availableStock]')
   }
 
   get dataGrist() {
@@ -84,6 +86,9 @@ class InventoryByProduct extends localize(i18next)(PageView) {
 
   pageUpdated(changes, lifecycle) {
     if (this.active) {
+      if (this._availabletockCheckbox && !this._checkedBoxes.length)
+        this._checkedBoxes = [this._availabletockCheckbox, { name: 'temp', checked: false }]
+
       this.dataGrist.fetch()
     }
   }
@@ -95,17 +100,25 @@ class InventoryByProduct extends localize(i18next)(PageView) {
         label: i18next.t('field.company'),
         name: 'bizplace',
         type: 'select',
-        options: [
-          { value: '' },
-          ...partners
-            .map(partner => {
-              return {
-                name: `${partner.name} ${partner.description ? `(${partner.description})` : ''}`,
-                value: partner.id
-              }
-            })
-            .sort(this._compareValues('name', 'asc'))
-        ],
+        options:
+          partners?.length == 1
+            ? [
+                {
+                  name: `${partners[0].name} ${partners[0].description ? `(${partners[0].description})` : ''}`,
+                  value: partners[0].id
+                }
+              ]
+            : [
+                { value: '' },
+                ...partners
+                  .map(partner => {
+                    return {
+                      name: `${partner.name} ${partner.description ? `(${partner.description})` : ''}`,
+                      value: partner.id
+                    }
+                  })
+                  .sort(this._compareValues('name', 'asc'))
+              ],
         props: { searchOper: 'eq' }
       },
       {
@@ -115,18 +128,18 @@ class InventoryByProduct extends localize(i18next)(PageView) {
         props: { searchOper: 'eq' }
       },
       {
-        label: i18next.t('field.type'),
-        name: 'type',
+        label: i18next.t('field.packing_type'),
+        name: 'packingType',
         type: 'string',
         props: { searchOper: 'eq' }
       },
-      ,
       {
-        label: i18next.t('field.available_stock_only'),
+        label: i18next.t('field.available_qty_only'),
         name: 'availableStock',
         type: 'checkbox',
         value: true,
-        props: { searchOper: 'eq' }
+        props: { searchOper: 'eq' },
+        handlers: { change: this._updateSearchInputState.bind(this, 'availableStock') }
       },
       {
         label: i18next.t('field.low_on_stock'),
@@ -143,6 +156,22 @@ class InventoryByProduct extends localize(i18next)(PageView) {
         value: false,
         props: { searchOper: 'eq' },
         handlers: { change: this._updateSearchInputState.bind(this, 'overStock') }
+      },
+      {
+        label: i18next.t('field.quarantine_stock_only'),
+        name: 'quarantineStock',
+        type: 'checkbox',
+        value: false,
+        props: { searchOper: 'eq' },
+        handlers: { change: this._updateSearchInputState.bind(this, 'quarantineStock') }
+      },
+      {
+        label: i18next.t('field.reserve_stock_only'),
+        name: 'reserveStock',
+        type: 'checkbox',
+        value: false,
+        props: { searchOper: 'eq' },
+        handlers: { change: this._updateSearchInputState.bind(this, 'reserveStock') }
       }
     ]
 
@@ -167,6 +196,7 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           header: i18next.t('field.company'),
           imex: { header: i18next.t('field.company'), key: 'bizplace', width: 50, type: 'string' },
           sortable: true,
+          label: true,
           width: 300
         },
         {
@@ -174,6 +204,7 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           name: 'sku',
           imex: { header: i18next.t('field.sku'), key: 'sku', width: 30, type: 'string' },
           header: i18next.t('field.sku'),
+          label: true,
           width: 100
         },
         {
@@ -181,6 +212,7 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           name: 'name',
           imex: { header: i18next.t('field.name'), key: 'name', width: 50, type: 'string' },
           header: i18next.t('field.name'),
+          label: true,
           width: 200
         },
         {
@@ -188,6 +220,7 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           name: 'brand',
           imex: { header: i18next.t('field.brand'), key: 'brand', width: 30, type: 'string' },
           header: i18next.t('field.brand'),
+          label: true,
           width: 100
         },
         {
@@ -195,21 +228,15 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           name: 'description',
           imex: { header: i18next.t('field.description'), key: 'description', width: 50, type: 'string' },
           header: i18next.t('field.description'),
-          width: 300
-        },
-        {
-          type: 'object',
-          name: 'productRef',
-          record: { options: { queryName: 'products' } },
-          imex: { header: i18next.t('field.product_ref'), key: 'product_ref', width: 50, type: 'string' },
-          header: i18next.t('field.product_ref'),
+          label: true,
           width: 300
         },
         {
           type: 'string',
-          name: 'type',
-          imex: { header: i18next.t('field.type'), key: 'type', width: 25, type: 'string' },
-          header: i18next.t('field.type'),
+          name: 'packingType',
+          imex: { header: i18next.t('field.packing_type'), key: 'packingType', width: 25, type: 'string' },
+          header: i18next.t('field.packing_type'),
+          label: true,
           width: 150
         },
         {
@@ -217,6 +244,7 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           name: 'minQty',
           imex: { header: i18next.t('field.min_qty'), key: 'minQty', width: 20, type: 'integer' },
           header: i18next.t('field.min_qty'),
+          label: true,
           width: 80
         },
         {
@@ -224,13 +252,52 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           name: 'maxQty',
           imex: { header: i18next.t('field.max_qty'), key: 'maxQty', width: 20, type: 'integer' },
           header: i18next.t('field.max_qty'),
+          label: true,
+          width: 80
+        },
+        {
+          type: 'integer',
+          name: 'availableQty',
+          imex: { header: i18next.t('field.available_qty'), key: 'availableQty', width: 20, type: 'integer' },
+          header: i18next.t('field.available_qty'),
+          label: true,
+          sortable: true,
+          width: 80
+        },
+        {
+          type: 'integer',
+          name: 'releaseQty',
+          imex: { header: i18next.t('field.release_qty'), key: 'releaseQty', width: 20, type: 'integer' },
+          header: i18next.t('field.release_qty'),
+          label: true,
+          sortable: true,
           width: 80
         },
         {
           type: 'integer',
-          name: 'qty',
-          imex: { header: i18next.t('field.qty'), key: 'qty', width: 20, type: 'integer' },
-          header: i18next.t('field.qty'),
+          name: 'quarantineQty',
+          imex: { header: i18next.t('field.quarantine_qty'), key: 'quarantineQty', width: 20, type: 'integer' },
+          header: i18next.t('field.quarantine_qty'),
+          label: true,
+          sortable: true,
+          width: 80
+        },
+        {
+          type: 'integer',
+          name: 'reserveQty',
+          imex: { header: i18next.t('field.reserve_qty'), key: 'reserveQty', width: 20, type: 'integer' },
+          header: i18next.t('field.reserve_qty'),
+          label: true,
+          sortable: true,
+          width: 80
+        },
+        {
+          type: 'integer',
+          name: 'warehouseQty',
+          imex: { header: i18next.t('field.warehouse_qty'), key: 'warehouseQty', width: 20, type: 'integer' },
+          header: i18next.t('field.warehouse_qty'),
+          label: true,
+          sortable: true,
           width: 80
         }
       ]
@@ -249,19 +316,19 @@ class InventoryByProduct extends localize(i18next)(PageView) {
                 brand
                 name
                 description
-                type
-                bizplace {
-                  name
-                }
-                productRef {
-                  name
-                  description
-                }
                 minQty
                 maxQty
               }
-              qty
+              bizplace {
+                name
+              }
+              packingType
               averageUnitCost
+              availableQty
+              releaseQty
+              quarantineQty
+              reserveQty
+              warehouseQty
             }
             total
           }
@@ -274,10 +341,18 @@ class InventoryByProduct extends localize(i18next)(PageView) {
       return {
         total: response.data.inventoriesByProduct.total || 0,
         records: (response.data.inventoriesByProduct.items || []).map(item => {
-          return {
-            ...item,
-            ...item.product
-          }
+          // changed to direct assign instead of spread ...item, ...item.product to improve performance
+          let record = item.product
+          record.packingType = item.packingType
+          record.averageUnitCost = item.averageUnitCost
+          record.availableQty = item.availableQty
+          record.releaseQty = item.releaseQty
+          record.quarantineQty = item.quarantineQty
+          record.reserveQty = item.reserveQty
+          record.warehouseQty = item.warehouseQty
+          record.bizplace = item.bizplace
+
+          return record
         })
       }
     }
@@ -287,16 +362,44 @@ class InventoryByProduct extends localize(i18next)(PageView) {
     return this.config.columns
   }
 
-  _updateSearchInputState(input) {
-    switch (input) {
-      case 'lowStock':
-        this._overStockCheckbox.checked = false
-        break
-      case 'overStock':
-        this._lowStockCheckbox.checked = false
-        break
-      default:
-        break
+  _updateSearchInputState(fieldName) {
+    const targetField = this.searchForm.shadowRoot.querySelector(`input[name=${fieldName}]`)
+
+    if (targetField.checked) {
+      // clear all previously checked fields
+      this._checkedBoxes[1].checked = false
+      this._checkedBoxes[0].checked = false
+
+      const tempIdx = this._checkedBoxes.findIndex(cb => cb.name == 'temp')
+
+      if (fieldName == 'lowStock' || fieldName == 'overStock') {
+        const idx = this._checkedBoxes.findIndex(cb => cb.name == (fieldName == 'lowStock' ? 'overStock' : 'lowStock'))
+        if (idx == 1) {
+          this._checkedBoxes[1] = targetField
+        } else {
+          if (tempIdx == 1) {
+            this._checkedBoxes[1] = targetField
+          } else {
+            this._checkedBoxes[0] = this._checkedBoxes[1]
+            this._checkedBoxes[1] = targetField
+          }
+        }
+      } else {
+        if (tempIdx == 1) {
+          this._checkedBoxes[1] = targetField
+        } else {
+          this._checkedBoxes[0] = this._checkedBoxes[1]
+          this._checkedBoxes[1] = targetField
+        }
+      }
+
+      // reset all fields in _checkedBoxes array to TRUE
+      this._checkedBoxes[1].checked = true
+      this._checkedBoxes[0].checked = true
+    } else {
+      // replace unchecked field with default
+      const idx = this._checkedBoxes.findIndex(cb => cb.name == fieldName)
+      if (idx >= 0) this._checkedBoxes[idx] = { name: 'temp', checked: false }
     }
   }
 
@@ -321,6 +424,7 @@ class InventoryByProduct extends localize(i18next)(PageView) {
       return response.data.partnersBizplaces.items
     }
   }
+
   _compareValues(key, order = 'asc') {
     return function innerSort(a, b) {
       if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
@@ -360,11 +464,6 @@ class InventoryByProduct extends localize(i18next)(PageView) {
         })
 
       var data = records.map(item => {
-        if (item.productRef) {
-          var refName = item.productRef.name ? item.productRef.name : ''
-          var refDesc = item.productRef.description ? ` (${item.productRef.description})` : ''
-        }
-
         return {
           ...this._columns
             .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
@@ -378,12 +477,15 @@ class InventoryByProduct extends localize(i18next)(PageView) {
           name: item.name,
           sku: item.sku,
           description: item.description,
-          type: item.type,
+          packingType: item.packingType,
           bizplace: item.bizplace.name,
-          product_ref: refName + refDesc,
-          qty: item.qty,
           minQty: item.minQty,
-          maxQty: item.maxQty
+          maxQty: item.maxQty,
+          availableQty: item.availableQty,
+          releaseQty: item.releaseQty,
+          quarantineQty: item.quarantineQty,
+          reserveQty: item.reserveQty,
+          warehouseQty: item.warehouseQty
           // averageUnitCost: item.averageUnitCost
         }
       })