@things-factory/operato-wms 5.0.0-alpha.2 → 5.0.0-alpha.22

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

@@ -57,22 +57,33 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
       orderInventory: Object,
       config: Object,
       data: Object,
-      _currentSerialNumber: String
+      orderId: String,
+      orderType: String,
+      _inventoryItems: Object,
+      _selectedSerialNumber: Object
     }
   }
 
-  get selectedSerialInput() {
-    return this.shadowRoot.querySelector('input[name=selectedSerialNumber]')
-  }
-
   get serialInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=serialNumber]').shadowRoot.querySelector('input')
+    return this.shadowRoot
+      ?.querySelector('barcode-scanable-input[name=serialNumber]')
+      ?.shadowRoot.querySelector('input')
   }
 
   get dataGrist() {
     return this.shadowRoot.querySelector('data-grist')
   }
 
+  get infoForm() {
+    return this.shadowRoot.querySelector('form#info-form')
+  }
+
+  _focusOnSerialInput() {
+    if (this.serialInput) {
+      setTimeout(() => this.serialInput.focus(), 50)
+    }
+  }
+
   constructor() {
     super()
     this.clearView()
@@ -80,9 +91,18 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <form class="multi-column-form">
+      <form id="info-form" class="multi-column-form">
         <fieldset>
-          <legend>${i18next.t('title.serial_number_list')}</legend>
+          <legend>${i18next.t('title.product_sku_x', { x: this?.data?.product.sku })}</legend>
+
+          <label>${i18next.t('label.carton_id')}</label>
+          <input name="cartonId" ${this?.data.cartonId} disabled />
+
+          <label>${i18next.t('label.lot_id')}</label>
+          <input name="palletId" ${this?.data.palletId} disabled />
+
+          <label>${i18next.t('label.location')}</label>
+          <input name="locationName" ${this?.data.locationName} disabled />
         </fieldset>
       </form>
 
@@ -90,19 +110,20 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
         <data-grist
           .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
           .config=${this.config}
-          .data="${this.data}"
+          .data=${this._inventoryItems}
         ></data-grist>
       </div>
 
-      <form id="input-form" class="single-column-form">
+      <form id="input-form" class="single-column-form" @keypress="${this.updateSerialNumber.bind(this)}">
         <input
           name="selectedSerialNumber"
           placeholder="-- Selected Serial Number --"
           disabled
           readonly
           class="mobile-full-width"
-          value="${this._currentSerialNumber}"
+          value="${this._selectedSerialNumber.serialNumber}"
         />
+
         <barcode-scanable-input name="serialNumber" class="mobile-full-width" custom-input></barcode-scanable-input>
 
         <mwc-button
@@ -118,6 +139,7 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
         <mwc-button
           danger
           @click=${() => {
+            this.dispatchEvent(new CustomEvent('close-serial-number-popup', {}))
             history.back()
           }}
           raised
@@ -142,8 +164,11 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
           click: async (columns, data, column, record, rowIndex) => {
             try {
               this.dataGrist.showSpinner()
-              this._currentSerialNumber = record.serialNumber
-              // this.selectedSerialInput.value = record.serialNumber
+              if (data.records.length && record) {
+                this._selectedSerialNumber = record
+                delete this._selectedSerialNumber.__seq__
+                delete this._selectedSerialNumber.__origin__
+              }
             } catch (ex) {
               console.log(ex)
             } finally {
@@ -158,18 +183,31 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'close',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              try {
+                const newData = data.records.filter((_, idx) => idx !== rowIndex)
+                this._inventoryItems = { ...this._inventoryItems, records: newData }
+                this.undoSerialNumberPicking(record.id)
+              } catch (e) {}
+            }
+          }
+        },
         {
           type: 'string',
           name: 'serialNumber',
           header: i18next.t('field.serial_number'),
-          width: 140
+          width: 150
         }
       ]
     }
-    await this.fetchOrderInventory()
-    console.log()
-
-    // await this.getPalletInfo(this.replacePalletId)
+    if (this.data) this._fillUpForm(this.infoForm, this.data)
+    await this.fetchInventoryItems()
+    this._focusOnSerialInput()
   }
 
   // async pageUpdated(changes, lifecycle) {
@@ -180,61 +218,67 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
   // }
 
   clearView() {
-    this.targetInventory = null
-    this.data = { records: [] }
-    this._currentSerialNumber = ''
-    if (this.serialNumber) this.serialInput.value = ''
+    this._selectedSerialNumber = {}
+    if (this.serialInput) 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) {
+  async fetchInventoryItems() {
+    let filters = [
+      { name: 'orderType', operator: 'eq', value: this.orderType },
+      { name: 'orderId', operator: 'eq', value: this.orderId },
+      { name: 'productId', operator: 'eq', value: this.data.product.id },
+      { name: 'inventory_info', operator: 'i_like', value: `%${this.data.palletId}%` }
+    ]
+
+    const pagination = { page: 1, limit: 9999999 }
+    const sortings = []
+
+    const response = await client.query({
+      query: gql`
+        query inventoryItemsByInventory($filters: [Filter!]!, $pagination: Pagination, $sortings: [Sorting!]!) {
+          inventoryItemsByInventory(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              status
+              serialNumber
+              outboundOrderId
+              inventory {
+                id
+                name
+              }
+              product {
                 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 }
-            })
+            total
           }
         }
-      }
-    } catch (error) {
-      throw error
-    } finally {
-      this.dataGrist.hideSpinner()
+      `,
+      variables: { filters, pagination, sortings }
+    })
+
+    if (!response.errors) {
+      return (this._inventoryItems = {
+        records: response.data.inventoryItemsByInventory.items || []
+      })
     }
   }
 
-  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)
+  async updateSerialNumber(e) {
+    if (e.keyCode === 13 || e.type == 'click') {
+      e.preventDefault()
+      try {
+        this.validate()
 
         const response = await client.mutate({
           mutation: gql`
-            mutation updateOrderInventorySerialNumber($orderInventory: OrderInventoryPatch!) {
-              updateOrderInventorySerialNumber(orderInventory: $orderInventory) {
+            mutation replacePickedInventoryItem($selectedSerialNumber: InventoryItemPatch!, $newSerialNumber: String!) {
+              replacePickedInventoryItem(
+                selectedSerialNumber: $selectedSerialNumber
+                newSerialNumber: $newSerialNumber
+              ) {
                 id
                 name
                 serialNumber
@@ -242,16 +286,38 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
             }
           `,
           variables: {
-            orderInventory
+            selectedSerialNumber: this._selectedSerialNumber,
+            newSerialNumber: this.serialInput.value.trim()
           }
         })
 
         if (!response.errors) {
-          this._currentSerialNumber = ''
-          this.serialInput.value = ''
+          this.clearView()
+          await this.fetchInventoryItems()
+          this._focusOnSerialInput()
+        }
+      } catch (e) {
+        this._showToast(e)
+      }
+    }
+  }
 
-          this.fetchOrderInventory()
+  async undoSerialNumberPicking(id) {
+    try {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation undoSerialNumberPicking($worksheetDetailName: String!, $inventoryItemId: String!) {
+            undoSerialNumberPicking(worksheetDetailName: $worksheetDetailName, inventoryItemId: $inventoryItemId)
+          }
+        `,
+        variables: {
+          worksheetDetailName: this.data.name,
+          inventoryItemId: id
         }
+      })
+
+      if (!response.errors) {
+        this.dataGrist.fetch()
       }
     } catch (e) {
       this._showToast(e)
@@ -260,11 +326,31 @@ class SerialNumberPopup extends localize(i18next)(LitElement) {
 
   validate() {
     // validate for previous picking execution (multiple picking scanning)
-    if (this.selectedSerialInput.value == '') throw new Error(i18next.t('text.no_serial_number_selected'))
+    let foundSerialNumber = this.dataGrist.data.records.filter(itm => itm.serialNumber == this.serialInput.value.trim())
+    if (foundSerialNumber.length > 0) {
+      throw new Error(i18next.t('text.serial_number_has_been_scanned'))
+    }
+
+    if (!this._selectedSerialNumber.id) 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'))
   }
 
+  _fillUpForm(form, data) {
+    for (let key in data) {
+      Array.from(form.querySelectorAll('input')).forEach(field => {
+        if (field.name === key) {
+          if (data[key] instanceof Object) {
+            const objectData = data[key]
+            field.value = `${objectData.name} ${objectData.description ? `(${objectData.description})` : ''}`
+          } else {
+            field.value = data[key]
+          }
+        }
+      })
+    }
+  }
+
   _showToast({ type, message }) {
     document.dispatchEvent(
       new CustomEvent('notify', {