@things-factory/operato-wms 3.7.6 → 3.7.10

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/vas/reverse-kitting/execute-reverse-kitting.js

@@ -72,9 +72,6 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
         ? html`<form class="multi-column-form" id="info-form">
               <fieldset>
                 <legend>${`${i18next.t('title.order_no')}: ${this._orderNo}`}</legend>
-
-                <!-- <label>${i18next.t('label.company')}</label>
-            <input name="bizplaceName" readonly /> -->
               </fieldset>
             </form>
 
@@ -109,8 +106,11 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
 
   get completable() {
     let completable = false
-    if (this.orderData.records.length > 0) {
-      completable = this.orderData.records.every(item => item.completed)
+    const orderDataWithIssues = this.orderData.records.filter(orderReverseKitting => !orderReverseKitting.completed)
+    if (!orderDataWithIssues?.length) {
+      completable = this.orderData.records.every(record => record.completed)
+    } else {
+      completable = orderDataWithIssues.every(record => record.issue)
     }
 
     return completable
@@ -131,7 +131,7 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
   pageInitialized() {
     this.orderGristConfig = {
       pagination: { infinite: true },
-      list: { fields: ['completed', 'batchId', 'palletId', 'product', 'qty'] },
+      list: { fields: ['completed', 'batchId', 'palletId', 'product', 'qty', 'issue'] },
       rows: {
         appendable: false,
         handlers: {
@@ -179,6 +179,13 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
           header: i18next.t('field.uom_value'),
           label: true,
           width: 60
+        },
+        {
+          type: 'string',
+          name: 'issue',
+          header: i18next.t('field.issue'),
+          label: true,
+          width: 200
         }
       ]
     }
@@ -236,6 +243,7 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
               otherTarget
               operationGuide
               status
+              issue
               description
               remark
             }
@@ -336,7 +344,6 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
 
   _clearView() {
     this.orderData = { records: [] }
-    this.inputForm.reset()
     this._selectedParentInventory = null
     this.updateContext()
   }
@@ -346,11 +353,24 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
   }
 
   _openPopupCombinationSets(record) {
-    openPopup(html` <popup-combination-sets .orderNo="${this._orderNo}" .data="${record}"></popup-combination-sets> `, {
-      backdrop: true,
-      size: 'large',
-      title: record.palletId
-    })
+    openPopup(
+      html`
+        <popup-combination-sets
+          .orderNo="${this._orderNo}"
+          .data="${record}"
+          @order-reverse-kitting-data="${e => {
+            this.fetchReverseKittingOrder(this._orderNo)
+          }}"
+        ></popup-combination-sets>
+      `,
+      {
+        backdrop: true,
+        escapable: false,
+        closable: false,
+        size: 'large',
+        title: record.palletId
+      }
+    )
   }
 
   _showToast({ type, message }) {

package/client/pages/vas/reverse-kitting/popup-combination-sets.js

@@ -1,10 +1,13 @@
 import '../../vas/reverse-kitting/popup-reverse-kitting-template'
+import '../../components/popup-note'
 
+import gql from 'graphql-tag'
 import { css, html, LitElement } 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 } from '@things-factory/shell'
 import { isMobileDevice } from '@things-factory/utils'
 
 class PopupCombinationSets extends localize(i18next)(LitElement) {
@@ -53,12 +56,15 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
           font-size: var(--grist-title-icon-size);
           color: var(--grist-title-icon-color);
         }
+        .grist {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
         .button-container {
-          padding: var(--button-container-padding);
-          margin: var(--button-container-margin);
-          text-align: var(--button-container-align);
-          background-color: var(--button-container-background);
-          height: var(--button-container-height);
+          padding: 10px 0 12px 0;
+          text-align: center;
         }
       `
     ]
@@ -129,11 +135,23 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
             ></data-grist>
           </div>`
         : ''}
+      ${this.data
+        ? html`<div class="button-container">
+            <mwc-button
+              raised
+              @click=${this._openIssueNote.bind(this)}
+              label="${i18next.t('button.issue')}"
+            ></mwc-button>
+            <mwc-button raised @click=${this._closePopup.bind(this)} label="${i18next.t('button.back')}"></mwc-button>
+          </div>`
+        : html`<div class="button-container">
+            <mwc-button raised @click=${this._closePopup.bind(this)} label="${i18next.t('button.back')}"></mwc-button>
+          </div>`}
     `
   }
 
   async fetchReverseKittingOrder() {
-    if (!this._orderNo) return
+    if (!this.orderNo) return
     const response = await client.query({
       query: gql`
         query executingReverseKittingOrder($name: String!) {
@@ -190,15 +208,30 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
           }
         }
       `,
-      variables: { name: this._orderNo }
+      variables: { name: this.orderNo }
     })
 
     if (!response.errors) {
       const reverseKittingOrder = response.data.executingReverseKittingOrder
       const orderReverseKittings = reverseKittingOrder.orderReverseKittings
 
-      this.data = {
-        records: orderReverseKittings.map(orderReverseKitting => {
+      // this.data = {
+      //   records: orderReverseKittings.map(orderReverseKitting => {
+      //     const inventory = orderReverseKitting.inventory
+      //     return {
+      //       ...orderReverseKitting,
+      //       batchId: inventory.batchId,
+      //       palletId: inventory.palletId,
+      //       location: inventory.location,
+      //       product: inventory.product
+      //     }
+      //   })
+      // }
+
+      const previousOrderReverseKittingName = this.data.name
+      const matchedOrderReverseKitting = orderReverseKittings
+        .filter(item => item.name === previousOrderReverseKittingName)
+        .map(orderReverseKitting => {
           const inventory = orderReverseKitting.inventory
           return {
             ...orderReverseKitting,
@@ -208,12 +241,38 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
             product: inventory.product
           }
         })
-      }
+
+      this.data = { ...matchedOrderReverseKitting[0] }
 
       this.getProductCombination()
     }
   }
 
+  async updateReverseKittingIssue(orderReverseKitting, issue) {
+    try {
+      if (!issue) return
+      const response = await client.mutate({
+        mutation: gql`
+          mutation updateOrderReverseKitting($id: String!, $patch: OrderReverseKittingPatch!) {
+            updateOrderReverseKitting(id: $id, patch: $patch) {
+              id
+              name
+            }
+          }
+        `,
+        variables: { id: orderReverseKitting.id, patch: { issue } }
+      })
+
+      if (!response.errors) {
+        this._showToast({ message: i18next.t('text.issue_updated') })
+        this.dispatchEvent(new CustomEvent('order-reverse-kitting-data', { detail: this.data }))
+        history.back()
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
   getProductCombination() {
     let operationGuide = JSON.parse(this.data.operationGuide)
     this.productCombinationSets = {
@@ -229,6 +288,25 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
     }
   }
 
+  _openIssueNote() {
+    openPopup(
+      html`
+        <popup-note
+          .title="${i18next.t('title.issue')}"
+          .value="${this.data.issue}"
+          @submit="${async e => {
+            await this.updateReverseKittingIssue(this.data, e.detail.value)
+          }}"
+        ></popup-note>
+      `,
+      {
+        backdrop: true,
+        size: 'medium',
+        title: i18next.t('title.issue')
+      }
+    )
+  }
+
   _openPopupReverseKittingTemplate(record) {
     openPopup(
       html`
@@ -242,11 +320,29 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
       `,
       {
         backdrop: true,
+        escapable: false,
+        closable: false,
         size: 'large',
         title: i18next.t('title.reverse_kitting')
       }
     )
   }
+
+  _closePopup() {
+    this.dispatchEvent(new CustomEvent('order-reverse-kitting-data', { detail: {} }))
+    history.back()
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
 }
 
 window.customElements.define('popup-combination-sets', PopupCombinationSets)