@things-factory/operato-wms 3.7.2 → 3.7.7

package/client/pages/outbound/serial-number-popup.js

@@ -0,0 +1,280 @@
+import '@things-factory/barcode-ui'
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+
+import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client } from '@things-factory/shell'
+import { isMobileDevice } from '@things-factory/utils'
+
+class SerialNumberPopup extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      MultiColumnFormStyles,
+      SingleColumnFormStyles,
+      css`
+        :host {
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--main-section-background-color);
+        }
+        .grist {
+          background-color: var(--main-section-background-color);
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
+        data-grist {
+          overflow-y: hidden;
+          flex: 1;
+        }
+        .button-container {
+          padding: 10px 0 12px 0;
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+        }
+
+        @media (max-width: 460px) {
+          .single-column-form {
+            max-width: 100%;
+          }
+          .mobile-full-width {
+            grid-column: span 12 / auto;
+          }
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      orderInventory: Object,
+      config: Object,
+      data: Object,
+      _currentSerialNumber: String
+    }
+  }
+
+  get selectedSerialInput() {
+    return this.shadowRoot.querySelector('input[name=selectedSerialNumber]')
+  }
+
+  get serialInput() {
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=serialNumber]').shadowRoot.querySelector('input')
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  constructor() {
+    super()
+    this.clearView()
+  }
+
+  render() {
+    return html`
+      <form class="multi-column-form">
+        <fieldset>
+          <legend>${i18next.t('title.serial_number_list')}</legend>
+        </fieldset>
+      </form>
+
+      <div class="grist">
+        <data-grist
+          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+          .config=${this.config}
+          .data="${this.data}"
+        ></data-grist>
+      </div>
+
+      <form id="input-form" class="single-column-form">
+        <input
+          name="selectedSerialNumber"
+          placeholder="-- Selected Serial Number --"
+          disabled
+          readonly
+          class="mobile-full-width"
+          value="${this._currentSerialNumber}"
+        />
+        <barcode-scanable-input name="serialNumber" class="mobile-full-width" custom-input></barcode-scanable-input>
+
+        <mwc-button
+          name="setSerialNumber"
+          class="mobile-full-width"
+          raised
+          @click=${this.updateSerialNumber.bind(this)}
+          label="${i18next.t('button.update')}"
+        ></mwc-button>
+      </form>
+
+      <div class="button-container">
+        <mwc-button
+          danger
+          @click=${() => {
+            history.back()
+          }}
+          raised
+          label="${i18next.t('button.back')}"
+        ></mwc-button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    this.clearView()
+
+    this.config = {
+      rows: {
+        appendable: false,
+        classifier: (record, rowIndex) => {
+          return {
+            emphasized: record.completed == true
+          }
+        },
+        handlers: {
+          click: async (columns, data, column, record, rowIndex) => {
+            try {
+              this.dataGrist.showSpinner()
+              this._currentSerialNumber = record.serialNumber
+              // this.selectedSerialInput.value = record.serialNumber
+            } catch (ex) {
+              console.log(ex)
+            } finally {
+              this.dataGrist.hideSpinner()
+            }
+          }
+        }
+      },
+      pagination: { infinite: true },
+      list: {
+        fields: ['serialNumber']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'string',
+          name: 'serialNumber',
+          header: i18next.t('field.serial_number'),
+          width: 140
+        }
+      ]
+    }
+    await this.fetchOrderInventory()
+    console.log()
+
+    // await this.getPalletInfo(this.replacePalletId)
+  }
+
+  // async pageUpdated(changes, lifecycle) {
+  //   if (this.active) {
+  //     await this.fetchOrderInventory()
+  //     console.log()
+  //   }
+  // }
+
+  clearView() {
+    this.targetInventory = null
+    this.data = { records: [] }
+    this._currentSerialNumber = ''
+    if (this.serialNumber) this.serialInput.value = ''
+  }
+
+  async fetchOrderInventory() {
+    try {
+      this.dataGrist.showSpinner()
+      if (this?.orderInventory?.id) {
+        const response = await client.query({
+          query: gql`
+            query orderInventory($id: String!) {
+              orderInventory(id: $id) {
+                id
+                name
+                serialNumber
+              }
+            }
+          `,
+          variables: { id: this.orderInventory.id }
+        })
+
+        if (!response.errors) {
+          this.orderInventory = response.data.orderInventory
+          this.data = {
+            records: (JSON.parse(response.data.orderInventory.serialNumber) || []).map(x => {
+              return { serialNumber: x }
+            })
+          }
+        }
+      }
+    } catch (error) {
+      throw error
+    } finally {
+      this.dataGrist.hideSpinner()
+    }
+  }
+
+  async updateSerialNumber() {
+    try {
+      this.validate()
+
+      let orderInventory = this.orderInventory
+      let serialNumber = JSON.parse(orderInventory.serialNumber)
+      let index = serialNumber.indexOf(this.selectedSerialInput.value)
+
+      if (index >= 0) {
+        serialNumber.splice(index, 1, this.serialInput.value)
+        orderInventory.serialNumber = JSON.stringify(serialNumber)
+
+        const response = await client.mutate({
+          mutation: gql`
+            mutation updateOrderInventorySerialNumber($orderInventory: OrderInventoryPatch!) {
+              updateOrderInventorySerialNumber(orderInventory: $orderInventory) {
+                id
+                name
+                serialNumber
+              }
+            }
+          `,
+          variables: {
+            orderInventory
+          }
+        })
+
+        if (!response.errors) {
+          this._currentSerialNumber = ''
+          this.serialInput.value = ''
+
+          this.fetchOrderInventory()
+        }
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  validate() {
+    // validate for previous picking execution (multiple picking scanning)
+    if (this.selectedSerialInput.value == '') throw new Error(i18next.t('text.no_serial_number_selected'))
+
+    if (this.serialInput.value == '') throw new Error(i18next.t('text.please_key_in_new_serial_number'))
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('serial-number-popup', SerialNumberPopup)

package/client/pages/outbound/worksheet-picking.js

@@ -337,6 +337,7 @@ class WorksheetPicking extends localize(i18next)(PageView) {
                 uom: record.uom,
                 releaseQty: record.releaseQty,
                 releaseUomValue: record.releaseUomValue,
+                availableQty: record.availableQty,
                 completed: record.completed
               }
 
@@ -595,6 +596,14 @@ class WorksheetPicking extends localize(i18next)(PageView) {
   }
 
   async fetchOrderInventories() {
+    // ** duplicated
+    // const cartonIdColumnConfig = {
+    //   type: 'string',
+    //   name: 'cartonId',
+    //   header: i18next.t('field.carton_id'),
+    //   width: 120
+    // }
+
     if (!this._worksheetNo) return
     const response = await client.query({
       query: gql`
@@ -678,6 +687,8 @@ class WorksheetPicking extends localize(i18next)(PageView) {
                 releaseUomValue
                 status
                 inventory {
+                  qty
+                  lockedQty
                   product {
                     name
                     description
@@ -725,7 +736,9 @@ class WorksheetPicking extends localize(i18next)(PageView) {
         refNo2: worksheet.releaseGood.refNo2,
         refNo3: worksheet.releaseGood.refNo3,
         ownCollection: worksheet.releaseGood.ownTransport,
-        releaseDate: worksheet.releaseGood.releaseDate
+        releaseDate: worksheet.releaseGood.releaseDate,
+        containerNo: worksheet.containerNo,
+        containerLeavingDate: worksheet.containerLeavingDate
       })
 
       if (this._worksheetStatus !== WORKSHEET_STATUS.DEACTIVATED.value) this.fetchWorksheetDetails()
@@ -738,6 +751,7 @@ class WorksheetPicking extends localize(i18next)(PageView) {
           } else {
             ordInv.productSku = ordInv.product.sku
             ordInv.releaseUomValueWithUom = ordInv.releaseUomValue.toFixed(2) + ' ' + ordInv.inventory.uom
+            ordInv.availableQty = ordInv.inventory.qty - ordInv.inventory.lockedQty + ordInv.releaseQty
             result.completedOrderInvs.push(ordInv)
           }
 
@@ -782,8 +796,17 @@ class WorksheetPicking extends localize(i18next)(PageView) {
             Object.assign({ description: item.description }, item, item?.inventory, item?.inventory?.location)
           )
         }
+      } else {
+        this.worksheetDetailData = { records: [] }
       }
 
+      // this code segment is already called inside _updateGristConfig().
+      // if (this.worksheetDetailData.records.some(e => e.cartonId)) {
+      //   const palletIdColumnIdx = this.preWsdGristConfig.columns.map(c => c.name).indexOf('palletId')
+      //   this.preWsdGristConfig.columns.splice(palletIdColumnIdx, 1, cartonIdColumnConfig)
+      // }
+
+      this._updateGristConfig()
       this.updateContext()
     }
   }
@@ -1092,7 +1115,10 @@ class WorksheetPicking extends localize(i18next)(PageView) {
       width: 120
     }
 
-    if (this.worksheetDetailData.records.some(e => e.cartonId)) {
+    if (
+      this.worksheetDetailData.records.some(e => e.cartonId) &&
+      !this.preWsdGristConfig.columns.find(column => column.name === 'cartonId')
+    ) {
       const palletIdColumnIdx = this.preWsdGristConfig.columns.map(c => c.name).indexOf('palletId')
       this.preWsdGristConfig.columns.splice(palletIdColumnIdx, 1, cartonIdColumnConfig)
     }