@things-factory/operato-wms 3.6.3 → 3.6.8

package/client/pages/inventory/inventory-adjustment.js

@@ -880,7 +880,7 @@ class InventoryAdjustment extends connect(store)(localize(i18next)(PageView)) {
   async fetchBizplaces(bizplace = []) {
     const response = await client.query({
       query: gql`
-        query bizplaces($filters: [Filter]) {
+        query bizplaces($filters: [Filter!]) {
           bizplaces(filters: $filters) {
             items {
               id

package/client/pages/inventory-check/create-cycle-count.js

@@ -1,3 +1,4 @@
+import '@things-factory/biz-ui'
 import '@things-factory/form-ui'
 import '@things-factory/grist-ui'
 import '@things-factory/import-ui'
@@ -7,16 +8,33 @@ import { css, html } from 'lit-element'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { i18next, localize } from '@things-factory/i18n-base'
+import { openPopup } from '@things-factory/layout-base'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@things-factory/utils'
+
+import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
+import { LOCATION_SORTING_RULE } from '../constants'
+
+// import { openPopup } from '@things-factory/layout-base'
+// import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
+// import { INVENTORY_STATUS, LOCATION_SORTING_RULE } from '../constants'
+// import { fetchSettingRule } from '../../../fetch-setting-value'
+
+const _ = require('lodash')
 
 class CreateCycleCount extends localize(i18next)(PageView) {
   static get properties() {
     return {
       _searchFields: Array,
       config: Object,
-      data: Object
+      data: Object,
+      _bizplaceId: String,
+      _bizplaceName: String,
+      fullRecords: Object,
+      inventoryData: Object,
+      _locationSortingRules: Object,
+      _ccStrat: String
     }
   }
 
@@ -83,117 +101,318 @@ class CreateCycleCount extends localize(i18next)(PageView) {
     ]
   }
 
-  render() {
-    return html`
-      <form id="input-form" name="cycleCount" class="multi-column-form">
-        <fieldset>
-          <legend>${i18next.t('title.cycle_count_information')}</legend>
-          <label>${i18next.t('label.execute_date')}</label>
-          <input name="executionDate" type="date" min="${this._getStdDate()}" required />
-        </fieldset>
-        <fieldset>
-          <legend>${i18next.t('title.cycle_count_configuration')}</legend>
-          <label>${i18next.t('label.no_of_random_item')}</label>
-          <input name="limit" type="number" />
-        </fieldset>
-      </form>
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
 
-      <h2>${i18next.t('label.company')}</h2>
-      <search-form id="search-form" .fields=${this._searchFields} @submit=${() => this.dataGrist.fetch()}></search-form>
-
-      <div class="grist-container">
-        <div class="grist">
-          <data-grist
-            id="userBizplaces"
-            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-            .config=${this.config}
-            .fetchHandler="${this._fetchPartners.bind(this)}"
-          ></data-grist>
-        </div>
-      </div>
-    `
+  get date() {
+    return this.shadowRoot.querySelector('input[name=executionDate]')
   }
 
-  get context() {
-    return {
-      title: i18next.t('title.create_cycle_count'),
-      actions: [
-        {
-          title: i18next.t('button.create'),
-          action: this._createCycleCount.bind(this),
-          ...CommonButtonStyles.submit
-        }
-      ],
-      help: 'operato-wms/inventory-check/create-cycle-count'
-    }
+  get limitField() {
+    return this.shadowRoot.querySelector('input[name=limit]')
   }
 
-  Updated(changes) {
-    if (this.active) {
-      this.dataGrist.fetch()
-    }
+  get cycleCountForm() {
+    return this.shadowRoot.querySelector('form[name=cycleCount]')
   }
 
-  firstUpdated() {
-    this.config = {
-      list: {
-        fields: ['name', 'description']
-      },
-      pagination: { pages: [10, 20, 50, 2500] },
+  get dataGristConfig() {
+    return {
+      pagination: { infinite: true },
       rows: {
-        selectable: {
-          multiple: false
-        },
-        appendable: false
+        selectable: { multiple: false },
+        classifier: (record, rowIndex) => {
+          return {
+            emphasized: record.isError
+          }
+        }
       },
+      list: { fields: ['inventory', 'product', 'location', 'releaseQty'] },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: false },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'close',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              try {
+                const newData = data.records.filter((_, idx) => idx !== rowIndex)
+                this.inventoryData = { ...this.inventoryData, records: newData }
+                this.dataGrist.dirtyData.records = newData
+                this._updateInventoryGrist()
+              } catch (e) {
+                this._showToast(e)
+              }
+            }
+          }
+        },
+        {
+          type: 'object',
+          name: 'inventory',
+          header: i18next.t('field.inventory_list'),
+          imex: {
+            header: i18next.t('field.inventory_list'),
+            key: 'inventory.name',
+            width: 50,
+            type: 'array',
+            arrData: []
+          },
+          record: {
+            editable: !!this._bizplaceId,
+            options: {
+              queryName: 'inventoryProductGroup',
+              basicArgs: {
+                filters: [
+                  { name: 'bizplace_id', operator: 'eq', value: this._bizplaceId },
+                  { name: 'groupType', operator: 'noteq', value: 'BUNDLE' }
+                ]
+              },
+              nameField: 'batchId',
+              descriptionField: 'productName',
+              select: [
+                { name: 'productId', hidden: true },
+                { name: 'remainUomValue', hidden: true },
+                { name: 'uom', hidden: true },
+                { name: 'batchId', header: i18next.t('field.batch_id') },
+                { name: 'batchIdRef', header: i18next.t('field.batch_no_ref') },
+                {
+                  name: 'productSKU',
+                  header: i18next.t('field.sku'),
+                  width: 150
+                },
+                {
+                  name: 'productName',
+                  header: i18next.t('field.product_info'),
+                  width: 280
+                },
+                { name: 'packingType', header: i18next.t('field.packing_type') },
+                { name: 'packingSize', header: i18next.t('field.packing_size') },
+                {
+                  name: 'remainQty',
+                  header: i18next.t('field.remain_qty'),
+                  ignoreCondition: true
+                },
+                {
+                  name: 'remainUomValueWithUom',
+                  header: i18next.t('field.remain_uom_value'),
+                  ignoreCondition: true
+                },
+                {
+                  name: 'groupType',
+                  header: i18next.t('field.group_type'),
+                  ignoreCondition: true
+                }
+              ],
+              list: {
+                fields: [
+                  'batchId',
+                  'batchIdRef',
+                  'productName',
+                  'packingType',
+                  'remainQty',
+                  'remainUomValue',
+                  'groupType'
+                ]
+              }
+            }
+          },
+          width: 250
+        },
         {
           type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          width: 300
+          name: 'productSKU',
+          header: i18next.t('field.sku'),
+          width: 100
+        },
+        {
+          type: 'object',
+          name: 'product',
+          header: i18next.t('field.product'),
+          width: 150
+        },
+        {
+          type: 'code',
+          name: 'packingType',
+          header: i18next.t('field.packing_type'),
+          record: {
+            codeName: 'PACKING_TYPES'
+          },
+          width: 150
+        },
+        {
+          type: 'number',
+          name: 'packingSize',
+          header: i18next.t('field.packing_size'),
+          width: 140
+        },
+        {
+          type: 'integer',
+          name: 'remainQty',
+          header: i18next.t('field.available_qty'),
+          width: 140
         },
         {
           type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          width: 300
+          name: 'remainUomValueWithUom',
+          header: i18next.t('field.available_uom_value'),
+          width: 140
         }
       ]
     }
-
-    this._searchFields = [
-      {
-        label: i18next.t('label.company'),
-        name: 'name',
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      }
-    ]
   }
 
-  get dataGrist() {
-    return this.shadowRoot.querySelector('data-grist')
+  get context() {
+    return {
+      title: i18next.t('title.create_cycle_count'),
+      actions: [
+        {
+          title: i18next.t('button.create'),
+          action: this._createCycleCount.bind(this),
+          ...CommonButtonStyles.submit
+        }
+      ],
+      help: 'operato-wms/inventory-check/create-cycle-count'
+    }
   }
 
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
+  render() {
+    let dynamicFields = html``
+
+    switch (this._ccStrat) {
+      case 'random':
+        dynamicFields = html`
+          <form id="input-form" name="randomStratForm" class="multi-column-form">
+            <fieldset>
+              <label>${i18next.t('label.no_of_random_item')}</label>
+              <input name="limit" type="number" />
+            </fieldset>
+          </form>
+        `
+        break
+      case 'product':
+        dynamicFields = html`
+          <div class="grist-container">
+            <div class="grist">
+              <data-grist
+                id="inventory"
+                .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+                .config=${this.inventoryGristConfig}
+                .data=${this.inventoryData}
+                @field-change="${this._gristFieldChange.bind(this)}"
+              ></data-grist>
+            </div>
+          </div>
+        `
+      default:
+        break
+    }
+
+    return html`
+      <form id="input-form" name="cycleCount" class="multi-column-form">
+        <fieldset>
+          <legend>${i18next.t('title.cycle_count_information')}</legend>
+          <label>${i18next.t('label.company')}</label>
+          <input type="hidden" name="bizplaceId" value="${this._bizplaceId}" />
+          <input
+            type="text"
+            name="bizplaceName"
+            value="${this._bizplaceName}"
+            readonly
+            @click="${this._openBizplacesSelector.bind(this)}"
+          />
+
+          <label>${i18next.t('label.execute_date')}</label>
+          <input name="executionDate" type="date" min="${this._getStdDate()}" required />
+        </fieldset>
+        <fieldset>
+          <legend>${i18next.t('title.cycle_count_configuration')}</legend>
+
+          <input
+            id="cc-by-random-product"
+            name="cc-strat"
+            type="radio"
+            value="random"
+            @change="${e => {
+              this._ccStrat = e.currentTarget.value
+              this.inventoryGristConfig = this.dataGristConfig
+            }}"
+            .checked="${this._ccStrat === 'random'}"
+            checked
+          />
+          <label for="cc-by-random-product">Random</label>
+
+          <input
+            id="cc-by-product"
+            name="cc-strat"
+            type="radio"
+            value="product"
+            @change="${e => {
+              this._ccStrat = e.currentTarget.value
+              this.inventoryGristConfig = this.dataGristConfig
+            }}"
+            .checked="${this._ccStrat === 'product'}"
+            checked
+          />
+          <label for="cc-by-product">By Product</label>
+        </fieldset>
+      </form>
+
+      ${dynamicFields}
+    `
+
+    /* <label>${i18next.t('label.no_of_random_item')}</label>
+<input name="limit" type="number" />
+    <div class="grist-container">
+<div class="grist">
+  <data-grist
+    id="inventory"
+    .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+    .config=${this.inventoryGristConfig}
+    .data=${this.inventoryData}
+    .fetchHandler="${this.fetchHandler.bind(this)}"
+    @field-change="${this._gristFieldChange.bind(this)}"
+  ></data-grist>
+</div>
+</div> */
   }
 
-  get date() {
-    return this.shadowRoot.querySelector('input[name=executionDate]')
+  pageUpdated(changes) {
+    if (this.active) {
+      this._bizplaceName = this._bizplaceId && this._bizplaceName ? this._bizplaceName : ''
+      this._clearView()
+    }
   }
 
-  get limitField() {
-    return this.shadowRoot.querySelector('input[name=limit]')
+  constructor() {
+    super()
+    this.inventoryData = { ...this.inventoryData, records: [] }
   }
 
-  get cycleCountForm() {
-    return this.shadowRoot.querySelector('form[name=cycleCount]')
+  async pageInitialized() {
+    this._ccStrat = 'random'
+    this._locationSortingRules = await fetchLocationSortingRule(LOCATION_SORTING_RULE.CREATE_RELEASE_ORDER.value)
+    this.inventoryGristConfig = this.dataGristConfig
   }
 
+  // fetchHandler({ page, limit, sorters }) {
+  //   if (this.fullRecords?.length > 0) {
+  //     this.inventoryData = {
+  //       total: this.fullRecords.length,
+  //       records: _(this.fullRecords)
+  //         .drop((page - 1) * limit)
+  //         .take(limit)
+  //         .value()
+  //     }
+  //   } else {
+  //     this.inventoryData = {
+  //       total: 0,
+  //       records: []
+  //     }
+  //   }
+  // }
+
   async _fetchPartners({ page, limit, sorters = [] }) {
     const filters = await this.searchForm.getQueryFilters()
     const pagination = { page, limit }
@@ -244,13 +463,13 @@ class CreateCycleCount extends localize(i18next)(PageView) {
       })
 
       let limit
-      if (this.limitField.value) limit = this.limitField.value
+      if (this?.limitField?.value) limit = this.limitField.value
       else limit = null
 
       const worksheetNo = await this.generateCycleCountWorksheet(
-        this.dataGrist.selected[0].id,
+        this._bizplaceId,
         this.date.value,
-        parseInt(limit)
+        limit ? parseInt(limit) : null
       )
 
       if (worksheetNo) {
@@ -270,49 +489,204 @@ class CreateCycleCount extends localize(i18next)(PageView) {
       }
     } catch (e) {
       this._showToast(e)
+
+      CustomAlert({
+        title: i18next.t('title.error'),
+        text: i18next.t('text.x_error', { state: { x: i18next.t('text.create_cycle_count_worksheet') } }),
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
     }
   }
 
   _validate() {
-    const _selectedInventory = this.dataGrist.selected
-    if (_selectedInventory && _selectedInventory.length == 0) {
-      throw new Error(i18next.t('text.there_no_selected'))
+    // const _selectedInventory = this.dataGrist.selected
+    // if (_selectedInventory && _selectedInventory.length == 0) {
+    //   throw new Error(i18next.t('text.there_no_selected'))
+    // }
+
+    if (!this._bizplaceId || this?._bizplaceId == '') {
+      throw new Error(i18next.t('text.bizplace_is_not_selected'))
     }
 
     if (!this.cycleCountForm.checkValidity()) {
       throw new Error(i18next.t('text.cycle_count_date_invalid'))
     }
 
-    if (this.limitField.value && this.limitField.value <= 0) {
-      throw new Error(i18next.t('text.invalid_no_of_random_item_value'))
+    switch (this._ccStrat) {
+      case 'random':
+        if (this.limitField.value && this.limitField.value <= 0) {
+          throw new Error(i18next.t('text.invalid_no_of_random_item_value'))
+        }
+        break
+
+      case 'product':
+        if (this?.inventoryData?.records && this?.inventoryData?.records <= 0) {
+          throw new Error(i18next.t('text.nothing_selected'))
+        }
+        break
+      default:
+        break
     }
   }
 
   async generateCycleCountWorksheet(customerId, executionDate, limit) {
-    const response = await client.query({
-      query: gql`
-        mutation {
-          generateCycleCountWorksheet(${gqlBuilder.buildArgs({
-            executionDate,
-            customerId,
-            limit
-          })}) {
+    // const response = await client.query({
+    //   query: gql`
+    //     mutation {
+    //       generateCycleCountWorksheet(${gqlBuilder.buildArgs({
+    //         executionDate,
+    //         customerId,
+    //         limit
+    //       })}) {
+    //         name
+    //       }
+    //     }
+    //   `
+    // })
+
+    let orderInventories =
+      this?.inventoryData?.records.map(itm => {
+        return {
+          batchId: itm.batchId,
+          batchIdRef: itm.batchIdRef,
+          packingSize: itm.packingSize,
+          packingType: itm.packingType,
+          productId: itm.productId
+        }
+      }) || []
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation generateCycleCountWorksheet(
+          $executionDate: String!
+          $customerId: String!
+          $orderInventories: [OrderInventoryPatch]
+          $limit: Int
+        ) {
+          generateCycleCountWorksheet(
+            executionDate: $executionDate
+            customerId: $customerId
+            orderInventories: $orderInventories
+            limit: $limit
+          ) {
             name
           }
         }
-      `
+      `,
+      variables: { executionDate, customerId, orderInventories, limit }
     })
 
     if (!response.errors) {
-      this.clearView()
+      this._clearView()
       return response.data.generateCycleCountWorksheet.name
     } else {
       return null
     }
   }
 
-  clearView() {
-    this.cycleCountForm.reset()
+  _clearView() {
+    // this.cycleCountForm.reset()
+    this._clearGristConditions()
+  }
+
+  _openBizplacesSelector() {
+    openPopup(
+      html`
+        <popup-partner-bizplaces-selector
+          @selected="${e => {
+            this._bizplaceId = e.detail.id
+            this._bizplaceName = e.detail.name
+            this.inventoryGristConfig = this.dataGristConfig
+            this.inventoryData = { records: [] }
+            this._clearGristConditions()
+          }}"
+        ></popup-partner-bizplaces-selector>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.select_company')
+      }
+    )
+  }
+
+  _updateInventoryGrist(e) {
+    const _selectedInv = (this.dataGrist.dirtyData.records || []).map(record => {
+      return {
+        batchId: record?.inventory?.batchId,
+        packingType: record?.inventory?.packingType,
+        productId: record?.inventory?.productId,
+        groupType: record?.inventory?.groupType
+      }
+    })
+
+    this.inventoryGristConfig = {
+      ...this.inventoryGristConfig,
+      columns: this.inventoryGristConfig.columns.map(column => {
+        if (column.name === 'inventory') {
+          column.record.options.basicArgs = {
+            ...column.record.options.basicArgs,
+            filters: [...column.record.options.basicArgs.filters.filter(filter => filter.name !== 'batch_product')]
+          }
+
+          if (_selectedInv.length) {
+            column.record.options.basicArgs.filters.push({
+              name: 'batch_product',
+              value: _selectedInv,
+              operator: 'notin'
+            })
+          }
+        }
+
+        return column
+      })
+    }
+  }
+
+  _gristFieldChange(e) {
+    var { after, before, column, record, row } = e.detail
+    if (column?.name == 'inventory') {
+      this.inventoryData = {
+        ...this.inventoryData,
+        ...this.dataGrist.dirtyData,
+        records: this.dataGrist.dirtyData.records.map((record, idx) => {
+          // const factor = this._pickingStd === PICKING_STANDARD.SELECT_BY_PRODUCT.value ? e.detail.row : e.detail.record.id
+
+          let returnObj = {
+            ...record,
+            ...record.inventory,
+            name: record.name ? record.name : idx,
+            id: idx,
+            product: {
+              id: record?.inventory?.productId,
+              name: record?.inventory?.productName
+            }
+          }
+
+          return returnObj
+        })
+      }
+    }
+    this._updateInventoryGrist()
+  }
+
+  _clearGristConditions() {
+    if (this.inventoryGristConfig?.columns?.length) {
+      this.inventoryGristConfig = {
+        ...this.inventoryGristConfig,
+        columns: this.inventoryGristConfig.columns.map(column => {
+          if (column.name === 'inventory') {
+            column.record.options.basicArgs = {
+              filters: column.record.options.basicArgs.filters.filter(
+                filter => filter.name !== 'batch_product' && filter.name !== 'id'
+              )
+            }
+          }
+
+          return column
+        })
+      }
+    }
   }
 
   _getStdDate() {