@things-factory/operato-wms 3.7.6 → 3.7.10

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

@@ -3,6 +3,7 @@ import '@things-factory/grist-ui'
 import './outbound-reusable-pallet'
 import './picking-replacement-popup'
 import './show-my-worksheet-list-popup'
+import './serial-number-popup'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
@@ -34,6 +35,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       orderNo: String,
       _productName: String,
       _productSku: String,
+      _isRequireSerialNumberScanning: Boolean,
       // _selectedTaskStatus: String,
       _reusablePalletList: Object,
       _hasBinPicking: Boolean,
@@ -106,7 +108,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           padding-top: var(--grist-title-with-grid-padding);
         }
 
-        div.reusable_pallet {
+        div.full_width {
           grid-column: span 12 / auto;
           display: inline-flex;
           align-items: center;
@@ -161,6 +163,10 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     return this.shadowRoot.querySelector('barcode-scanable-input[name=taskNo]')?.shadowRoot.querySelector('input')
   }
 
+  get binLocationInput() {
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=binLocation]')?.shadowRoot.querySelector('input')
+  }
+
   get palletInput() {
     return this.shadowRoot.querySelector('barcode-scanable-input[name=palletId]')?.shadowRoot.querySelector('input')
   }
@@ -179,8 +185,8 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       ?.shadowRoot.querySelector('input')
   }
 
-  get binLocationInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=binLocation]')?.shadowRoot.querySelector('input')
+  get serialInput() {
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=serialNumber]')?.shadowRoot.querySelector('input')
   }
 
   get newLocationInput() {
@@ -216,11 +222,15 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   }
 
   _focusOnLotNoInput() {
-    setTimeout(() => this.palletInput.focus(), 50)
+    if (this.palletInput) {
+      setTimeout(() => this.palletInput.focus(), 50)
+    }
   }
 
   _focusOnCartonNoInput() {
-    setTimeout(() => this.cartonInput.focus(), 50)
+    if (this.cartonInput) {
+      setTimeout(() => this.cartonInput.focus(), 50)
+    }
   }
 
   _focusOnProductBarcodeInput() {
@@ -229,8 +239,16 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
+  _focusOnSerialInput() {
+    if (this.serialInput) {
+      setTimeout(() => this.serialInput.focus(), 50)
+    }
+  }
+
   _focusOnReleaseQtyInput() {
-    setTimeout(() => this.releaseQtyInput.focus(), 50)
+    if (this.releaseQtyInput) {
+      setTimeout(() => this.releaseQtyInput.focus(), 50)
+    }
   }
 
   get context() {
@@ -295,6 +313,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     this._hasBinPicking = false
     this._isCartonLabel = false
     this._enableProductScanning = false
+    this._isRequireSerialNumberScanning = false
     this._incompleteLocationName = false
 
     /* A flag to indicate either PICKING process is executing */
@@ -334,7 +353,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                 e.preventDefault()
                 this._currentBinLocation = null
                 if (this.releaseGoodNoInput.value) {
-                  this.fetchAll(this.releaseGoodNoInput.value)
+                  this.releaseGoodNo = this.releaseGoodNoInput.value
+                  await this.fetchAll(this.releaseGoodNo)
+                  this.completeHandler()
                 }
               }
             }}"
@@ -406,11 +427,11 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               <input name="releaseProgress" readonly />
             </fieldset>
 
-            ${this.releaseGoodNo
+            ${this.releaseGoodNo || ''
               ? html`
                   <fieldset>
                     <legend>${i18next.t('title.reusable_pallet')}</legend>
-                    <div class="reusable_pallet" @click="${this.openPalletOutbound.bind(this)}">
+                    <div class="full_width" @click="${this.openPalletOutbound.bind(this)}">
                       <mwc-icon>apps</mwc-icon>Plastic Pallets
                     </div>
                   </fieldset>
@@ -426,9 +447,12 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                           <barcode-scanable-input
                             name="binLocation"
                             custom-input
-                            @change=${e => {
-                              this._currentBinLocation = e.detail.value
-                            }}
+                            @keypress="${e => {
+                              if (e.keyCode === 13) {
+                                e.preventDefault()
+                                this._currentBinLocation = this.binLocationInput.value
+                              }
+                            }}"
                           ></barcode-scanable-input>
                         `
                       : ''}
@@ -447,10 +471,18 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                           <barcode-scanable-input name="productBarcode" custom-input></barcode-scanable-input>
                         `
                       : html`
-                          <label>${i18next.t('label.picked_qty')}</label>
-                          <input type="number" min="1" name="confirmedQty" />
+                          ${this._isRequireSerialNumberScanning
+                            ? ''
+                            : html`
+                                <label>${i18next.t('label.picked_qty')}</label>
+                                <input type="number" min="1" name="confirmedQty" />
+                              `}
                         `}
-                    ${this.isWholePicking || this._crossDocking || this._isCartonLabel || this._enableProductScanning
+                    ${this.isWholePicking ||
+                    this._crossDocking ||
+                    this._isCartonLabel ||
+                    this._enableProductScanning ||
+                    this._isRequireSerialNumberScanning
                       ? ''
                       : html`
                           ${this._incompleteLocationName
@@ -476,9 +508,26 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                             )}
                           </select>
                         `}
+                    ${this._isRequireSerialNumberScanning
+                      ? html`
+                          <label>${i18next.t('label.serial_number')}</label>
+                          <barcode-scanable-input name="serialNumber" custom-input></barcode-scanable-input>
+                        `
+                      : ``}
                   </fieldset>
                 `
               : ''}
+            ${this._selectedOrderInventory && this._isRequireSerialNumberScanning
+              ? html`
+                  <fieldset>
+                    <fieldset>
+                      <div class="full_width" @click="${this.openSerialNumberPopup.bind(this)}">
+                        <mwc-icon>list</mwc-icon>${i18next.t('label.serial_number_list')}
+                      </div>
+                    </fieldset>
+                  </fieldset>
+                `
+              : ``}
           </form>
         </div>
       </div>
@@ -502,6 +551,11 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     this.config = {
       rows: {
         appendable: false,
+        classifier: (record, rowIndex) => {
+          return {
+            emphasized: record.completed == true
+          }
+        },
         handlers: {
           click: async (columns, data, column, record, rowIndex) => {
             try {
@@ -509,11 +563,12 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               if (data.records.length && record) {
                 this.inputForm.reset()
                 this._isReplacement = false
-                if (this._isCartonLabel) {
-                  if (this.cartonInput) this.cartonInput.value = ''
-                } else {
-                  if (this.palletInput) this.palletInput.value = ''
-                }
+
+                if (this.binLocationInput) this.binLocationInput.value = ''
+                if (this.productBarcodeInput) this.productBarcodeInput.value = ''
+                if (this.cartonInput) this.cartonInput.value = ''
+                if (this.palletInput) this.palletInput.value = ''
+                if (this.serialInput) this.serialInput.value = ''
 
                 this._selectedOrderInventory = record
                 await this.fetchInventories(this.releaseGoodNo)
@@ -524,13 +579,14 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                   updatedRecords.status = 'PICKING'
                 }
 
-                this._isCartonLabel = updatedRecords.hasCartonLabel
-                this._productName = updatedRecords.product?.name
-                  ? `${updatedRecords.product.sku + ' - ' + updatedRecords.product.name} ${
-                      updatedRecords.product?.description ? `(${updatedRecords.product.description})` : ''
-                    }`
-                  : ''
-                this.isWholePicking = updatedRecords.releaseQty === updatedRecords.qty
+                // this._isCartonLabel = updatedRecords.hasCartonLabel
+                // this._productName = updatedRecords.product?.name
+                //   ? `${updatedRecords.product.sku + ' - ' + updatedRecords.product.name} ${
+                //       updatedRecords.product?.description ? `(${updatedRecords.product.description})` : ''
+                //     }`
+                //   : ''
+                // this._isRequireSerialNumberScanning = updatedRecords?.product?.isRequireSerialNumberScanning
+                // this.isWholePicking = updatedRecords.releaseQty === updatedRecords.qty
               }
             } catch (ex) {
               console.log(ex)
@@ -635,6 +691,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                     sku
                     name
                     description
+                    isRequireSerialNumberScanning
                   }
                   qty
                   releaseQty
@@ -654,6 +711,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                     description
                   }
                   relatedOrderInv {
+                    id
                     batchId
                     batchIdRef
                     packingType
@@ -665,6 +723,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                       sku
                       name
                       description
+                      isRequireSerialNumberScanning
                     }
                   }
                 }
@@ -684,10 +743,10 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           this.fillUpForm(this.infoForm, { ...worksheetInfo, _crossDocking: this._crossDocking })
           this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
 
-          this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
-
           if (this._selectedOrderInventory) {
             const record = this.data.records.find(record => record.name === this._selectedOrderInventory.name)
+            this.updateSelectedItemProp(record)
+            await this.updateComplete
             this.fillUpForm(this.inputForm, {
               ...record,
               binLocation: record?.binLocation ? record.binLocation : ''
@@ -696,7 +755,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
             if (record.pickedQty == record.releaseQty) {
               if (this.cartonInput) this.cartonInput.value = ''
               if (this.palletInput) this.palletInput.value = ''
-              this.isWholePicking = true
+              // this.isWholePicking = true
             } else {
               // pre-set bin location from last scan if none was set
               if (
@@ -708,10 +767,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               }
               this.focusOnInput()
             }
-
-            this._selectedOrderInventory = record
           }
-          this.completeHandler()
+
+          this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
         }
         break
 
@@ -734,6 +792,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                     name
                     description
                     sku
+                    isRequireSerialNumberScanning
                   }
                   qty
                   releaseQty
@@ -771,6 +830,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           if (!response.data?.batchPickingWorksheet) return
 
           const { worksheetInfo, worksheetDetailInfos } = response.data.batchPickingWorksheet
+          await this.updateComplete
           this.fillUpForm(this.infoForm, { ...worksheetInfo })
           this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
 
@@ -780,22 +840,25 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
             const record = this.data.records.find(
               record => record.product.sku === this._selectedOrderInventory.product.sku
             )
+
+            this.updateSelectedItemProp(record)
+
             if (record.pickedQty == record.releaseQty) {
               if (this._isCartonLabel) {
                 this.cartonInput.value = ''
                 this._focusOnCartonNoInput()
               }
-              this._selectedOrderInventory = null
               this.inputForm.reset()
             } else {
               this._focusOnProductBarcodeInput()
               this.fillUpForm(this.inputForm, record)
             }
           }
-          this.completeHandler()
         }
         break
     }
+
+    this.updateContext()
   }
 
   formatWorksheetDetailInfos(wsdInfos) {
@@ -869,6 +932,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     this.infoForm.reset()
     this.inputForm.reset()
     this._productName = ''
+    this._isRequireSerialNumberScanning = false
     this.releaseGoodNo = null
     this.taskNo = null
     this._crossDocking = false
@@ -907,7 +971,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         await this.validatePicking()
 
         let response = {}
-        this._isExecuting = true
         if (this.crossDocking) {
           response = await this.pickCrossDocking()
         } else if (this._enableProductScanning || this._isCartonLabel) {
@@ -922,16 +985,19 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         }
 
         if (!response.errors) {
-          if (this._enableProductScanning) this.productBarcodeInput.value = ''
+          if (this._isRequireSerialNumberScanning) this.serialInput.value = ''
+          else if (this._enableProductScanning && !this._isRequireSerialNumberScanning)
+            this.productBarcodeInput.value = ''
           else this.releaseQtyInput.value = ''
 
-          if (!this._isCartonLabel) {
+          if (!this._isCartonLabel && !this._isRequireSerialNumberScanning) {
             this.palletInput.value = ''
             // this._selectedTaskStatus = null
             this._selectedOrderInventory = null
           }
 
-          if (!this.isWholePicking && !this._crossDocking && !this._isCartonLabel) this.locationInput.value = ''
+          if (!this.isWholePicking && !this._crossDocking && !this._isCartonLabel && this.locationInput)
+            this.locationInput.value = ''
           if (this.refPickingType === PICKING_TYPES.PICKING.value) {
             this.fetchInventories(this.releaseGoodNo)
           } else {
@@ -940,7 +1006,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         }
 
         this.isReplacement = false
-        this._isExecuting = false
       } catch (e) {
         this._showToast(e)
       } finally {
@@ -979,7 +1044,34 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     )
   }
 
-  async pickCrossDocking() {
+  openSerialNumberPopup() {
+    openPopup(
+      html`
+        <serial-number-popup
+          .orderInventory="${this?._selectedOrderInventory?.relatedOrderInv}"
+          @completed="${() => {
+            // if (this.refPickingType === PICKING_TYPES.PICKING.value) {
+            //   this.fetchInventories(this.releaseGoodNoInput.value)
+            //   this.fetchPalletsHandler(this.releaseGoodNoInput.value)
+            // } else {
+            //   this.fetchInventories(this.taskNoInput.value)
+            //   this.fetchPalletsHandler(this.taskNoInput.value)
+            // }
+            // // this._selectedTaskStatus = null
+            // this._selectedOrderInventory = null
+            // this._isReplacement = false
+          }}"
+        ></serial-number-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.serial_number_list')
+      }
+    )
+  }
+
+  async pick_crossDocking() {
     return await client.mutate({
       mutation: gql`
         mutation crossDockPicking(
@@ -1006,7 +1098,8 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async pickCommonPicking() {
-    const locationName = this.isWholePicking ? this._selectedOrderInventory.location.name : this.locationInput.value
+    const locationName =
+      this.isWholePicking || !this.locationInput ? this._selectedOrderInventory.location.name : this.locationInput.value
     // 1. Check whether location is changed
     if (this._selectedOrderInventory.location.name !== locationName) {
       this.locationNameSplit = this.locationInput.value.split('-')
@@ -1046,6 +1139,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               $locationName: String!
               $releaseQty: Int!
               $binLocation: String
+              $serialNumber: String
             ) {
               picking(
                 worksheetDetailName: $worksheetDetailName
@@ -1054,6 +1148,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                 locationName: $locationName
                 releaseQty: $releaseQty
                 binLocation: $binLocation
+                serialNumber: $serialNumber
               )
             }
           `,
@@ -1062,8 +1157,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
             worksheetType: this.refPickingType,
             palletId: this.palletInput.value.trim(),
             locationName,
-            releaseQty: parseInt(this.releaseQtyInput.value),
-            binLocation: this._hasBinPicking ? this.binLocationInput.value : null
+            releaseQty: this._isRequireSerialNumberScanning ? 1 : parseInt(this.releaseQtyInput.value),
+            binLocation: this._hasBinPicking ? this.binLocationInput.value : null,
+            serialNumber: this._isRequireSerialNumberScanning ? this.serialInput.value : null
           }
         })
 
@@ -1111,6 +1207,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               $productBarcode: String!
               $cartonId: String!
               $binLocation: String
+              $serialNumber: String
             ) {
               scanProductPicking(
                 worksheetDetailName: $worksheetDetailName
@@ -1118,6 +1215,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                 productBarcode: $productBarcode
                 cartonId: $cartonId
                 binLocation: $binLocation
+                serialNumber: $serialNumber
               )
             }
           `,
@@ -1126,6 +1224,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
             worksheetType: this.refPickingType,
             productBarcode: this.productBarcodeInput.value.trim(),
             cartonId: this.cartonInput.value.trim(),
+            serialNumber: this._isRequireSerialNumberScanning ? this.serialInput.value : null,
             binLocation: this._hasBinPicking ? this.binLocationInput.value : null
           }
         })
@@ -1201,23 +1300,27 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
 
       // Release qty existing
       if (!this._isReplacement) {
-        if (!parseInt(this.releaseQtyInput?.value)) {
-          this._focusOnReleaseQtyInput()
-          throw new Error(i18next.t('text.release_qty_is_empty'))
-        }
+        if (!this._isRequireSerialNumberScanning) {
+          if (!parseInt(this.releaseQtyInput?.value)) {
+            this._focusOnReleaseQtyInput()
+            throw new Error(i18next.t('text.release_qty_is_empty'))
+          }
 
-        if (!this.releaseQtyInput.checkValidity()) throw new Error(i18next.t('text.release_qty_invalid'))
+          if (!this.releaseQtyInput.checkValidity()) throw new Error(i18next.t('text.release_qty_invalid'))
 
-        // typed qty should be matched with release qty.
-        if (parseInt(this.releaseQtyInput.value) !== this._selectedOrderInventory.releaseQty) {
-          this._focusOnReleaseQtyInput()
-          throw new Error(i18next.t('text.wrong_release_qty'))
+          // typed qty should be matched with release qty.
+          if (parseInt(this.releaseQtyInput.value) !== this._selectedOrderInventory.releaseQty) {
+            this._focusOnReleaseQtyInput()
+            throw new Error(i18next.t('text.wrong_release_qty'))
+          }
         }
 
         // location id existing
-        if (!this.isWholePicking && !this.locationInput.value) {
-          this._focusOnLocationNameInput()
-          throw new Error(i18next.t('text.location_id_is_empty'))
+        if (!this.isWholePicking && this.locationInput) {
+          if (!this.locationInput.value) {
+            this._focusOnLocationNameInput()
+            throw new Error(i18next.t('text.location_id_is_empty'))
+          }
         }
       }
     } else {
@@ -1250,6 +1353,13 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       }
     }
 
+    if (this._isRequireSerialNumberScanning) {
+      if (!this.serialInput?.value) {
+        this._focusOnSerialInput()
+        throw new Error(i18next.t('text.empty_serial_number'))
+      }
+    }
+
     if (this._crossDocking) {
       // typed qty should be smaller than release qty.
       if (parseInt(this.releaseQtyInput.value) > this._selectedOrderInventory.releaseQty) {
@@ -1519,8 +1629,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           }
         }
         this.fillUpForm(this.infoForm, { ...worksheetInfo, _crossDocking: this._crossDocking })
-
-        this.completeHandler()
       }
     } catch (e) {
       this._showToast(e)
@@ -1543,8 +1651,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   // Prioritized input focus
   focusOnInput() {
     if (this.scannable) {
-      let focused = false
-
       // set bin location value if already has value else focus on bin input if bin picking setting is active
       if (this._currentBinLocation) {
         this.binLocationInput.value = this._currentBinLocation
@@ -1552,31 +1658,59 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
 
       if (this._hasBinPicking && this.binLocationInput && this.binLocationInput.value == '') {
         this._focusOnBinLocationInput()
-        focused = true
+        return true
       } else {
         if (this._isCartonLabel) {
           if (!this._enableProductScanning) this.cartonInput.value = ''
 
           if (this.cartonInput.value == '') {
             this._focusOnCartonNoInput()
-            focused = true
+            return true
           }
         } else {
-          if (!this._enableProductScanning) this.palletInput.value = ''
+          if (!this._enableProductScanning && !this._isRequireSerialNumberScanning) this.palletInput.value = ''
 
           if (this.palletInput.value == '') {
             this._focusOnLotNoInput()
-            focused = true
+            return true
           }
         }
       }
 
-      if (this._enableProductScanning && !focused) {
+      if (this._enableProductScanning && !this._isRequireSerialNumberScanning) {
         this.productBarcodeInput.value = ''
         this._focusOnProductBarcodeInput()
-        focused = true
+        return true
       }
+
+      if (this._isRequireSerialNumberScanning) {
+        this.serialInput.value = ''
+        this._focusOnSerialInput()
+        return true
+      }
+
+      return true
+    }
+  }
+
+  updateSelectedItemProp(selectedRecords) {
+    if (selectedRecords.releaseQty === selectedRecords.qty) {
+      this.isWholePicking = true
+      this._selectedOrderInventory = selectedRecords
+    } else {
+      this.isWholePicking = false
+      this._selectedOrderInventory = selectedRecords
     }
+
+    this._isCartonLabel = selectedRecords.hasCartonLabel
+    this._productName = selectedRecords.product?.name
+      ? `${selectedRecords.product.sku + ' - ' + selectedRecords.product.name} ${
+          selectedRecords.product?.description ? `(${selectedRecords.product.description})` : ''
+        }`
+      : ''
+    this._isRequireSerialNumberScanning = selectedRecords?.product?.isRequireSerialNumberScanning
+
+    // this.isWholePicking = selectedRecords.releaseQty === selectedRecords.qty
   }
 
   _showToast({ type, message }) {