@things-factory/operato-wms 3.7.13 → 3.8.1

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

@@ -9,18 +9,20 @@ import { isMobileDevice } from '@things-factory/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
-import { CARTON, PALLET } from '../constants'
+import { CARTON, LOT } from '../constants'
 import '../inbound/select-location-popup'
 
-const INVENTORY_TYPES = { PALLET, CARTON }
+const INVENTORY_TYPES = { LOT, CARTON }
 class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       _palletId: String,
       _cartonId: String,
+      _requireNewId: Boolean,
+      _selectedInventory: Object,
       refInventoryType: String,
-      config: Object,
-      data: Object
+      _data: Object,
+      _gristConfig: Object
     }
   }
 
@@ -32,14 +34,28 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
         :host {
           display: flex;
           flex-direction: column;
-          overflow: hidden;
+          overflow: auto;
         }
 
-        data-grist {
+        .grist {
+          min-height: 180px;
+          background-color: var(--main-section-background-color);
+          display: flex;
+          flex: 1;
           overflow: auto;
+        }
+
+        data-grist {
           flex: 1;
         }
 
+        h2 {
+          padding: var(--subtitle-padding);
+          font: var(--subtitle-font);
+          color: var(--subtitle-text-color);
+          border-bottom: var(--subtitle-border-bottom);
+        }
+
         .grist h2 {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
@@ -57,6 +73,50 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
         h2 + data-grist {
           padding-top: var(--grist-title-with-grid-padding);
         }
+
+        .button-container {
+          grid-column: span 12 / auto;
+          text-align: center;
+        }
+
+        .button-container > button {
+          background-color: var(--button-background-color);
+          border: var(--button-border);
+          border-radius: var(--button-border-radius);
+          padding: var(--button-padding);
+          color: var(--button-color);
+          font: var(--button-font);
+          text-transform: var(--button-text-transform);
+        }
+
+        .input-section {
+          flex: 1;
+          display: flex;
+        }
+
+        .left-column {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .right-column {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .content-title {
+          font-size: var(--fontsize-medium) !important;
+          color: var(--title-text-color) !important;
+        }
+
+        .content {
+          font-size: 14px !important;
+          font-weight: bold !important;
+          color: var(--primary-color) !important;
+          margin-botton: 5px;
+        }
       `
     ]
   }
@@ -65,11 +125,13 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
     var actions = []
 
     if (this._palletId || this._cartonId) {
-      actions.push({
-        title: i18next.t('button.transfer'),
-        action: this._transferInventory.bind(this),
-        ...CommonButtonStyles.transfer
-      })
+      actions = [
+        ...actions,
+        {
+          title: i18next.t('button.done'),
+          action: this.done.bind(this)
+        }
+      ]
     }
 
     return {
@@ -87,22 +149,54 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
     return this.shadowRoot.querySelector('form#input-form')
   }
 
+  get qtyInput() {
+    return this.shadowRoot.querySelector('input[name=qty]')
+  }
+
   get palletInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=palletId]').shadowRoot.querySelector('input')
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=palletId]')?.shadowRoot.querySelector('input')
   }
 
   get cartonInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=cartonId]').shadowRoot.querySelector('input')
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=cartonId]')?.shadowRoot.querySelector('input')
+  }
+
+  get newLotInput() {
+    return this.shadowRoot?.querySelector('barcode-scanable-input[name=newLotId]')?.shadowRoot.querySelector('input')
   }
 
-  get fromLocationNameInput() {
-    return this.shadowRoot.querySelector('input[name=fromLocationName]')
+  get newCartonInput() {
+    return this.shadowRoot?.querySelector('barcode-scanable-input[name=newCartonId]')?.shadowRoot.querySelector('input')
   }
 
+  // get fromLocationNameInput() {
+  //   return this.shadowRoot.querySelector('input[name=fromLocationName]')
+  // }
+
   get toLocationNameInput() {
     return this.shadowRoot
       .querySelector('barcode-scanable-input[name=toLocationName]')
-      .shadowRoot.querySelector('input')
+      ?.shadowRoot.querySelector('input')
+  }
+
+  focusOnPalletInput() {
+    setTimeout(() => this.palletInput.focus(), 100)
+  }
+
+  focusOnCartonInput() {
+    setTimeout(() => this.cartonInput.focus(), 100)
+  }
+
+  focusOnToLocationInput() {
+    setTimeout(() => this.toLocationNameInput.focus(), 100)
+  }
+
+  focusOnNewLotInput() {
+    if (this.newLotInput) setTimeout(() => this.newLotInput.focus(), 100)
+  }
+
+  focusOnNewCartonInput() {
+    if (this.newCartonInput) setTimeout(() => this.newCartonInput.focus(), 100)
   }
 
   render() {
@@ -126,9 +220,8 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
             )}
           </select>
 
-          ${this.refInventoryType === INVENTORY_TYPES.PALLET.value
+          ${this.refInventoryType === INVENTORY_TYPES.LOT.value
             ? html`
-                <label>${i18next.t('label.lot_id')}</label>
                 <barcode-scanable-input
                   name="palletId"
                   custom-input
@@ -137,107 +230,206 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
                       e.preventDefault()
                       if (this.palletInput.value) {
                         this._palletId = this.palletInput.value
-                        this._fetchInventory(this.palletInput.value)
+                        this.fetchInventory(this.palletInput.value)
                       }
                     }
                   }}"
                 ></barcode-scanable-input>
               `
-            : html` <label>${i18next.t('label.carton_id')}</label>
-                <barcode-scanable-input
-                  name="cartonId"
-                  custom-input
-                  @keypress="${e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      if (this.cartonInput.value) {
-                        this._cartonId = this.cartonInput.value
-                        this._fetchInventory(this.cartonInput.value)
-                      }
+            : html` <barcode-scanable-input
+                name="cartonId"
+                custom-input
+                @keypress="${e => {
+                  if (e.keyCode === 13) {
+                    e.preventDefault()
+                    if (this.cartonInput.value) {
+                      this._cartonId = this.cartonInput.value
+                      this.fetchInventory(this.cartonInput.value)
                     }
-                  }}"
-                ></barcode-scanable-input>`}
-        </fieldset>
-      </form>
-
-      <form id="input-form" class="multi-column-form">
-        <fieldset>
-          <label>${i18next.t('label.from_location')}</label>
-          <input
-            name="fromLocationName"
-            @keypress="${e => {
-              if (e.keyCode === 13) {
-                e.preventDefault()
-                if (this.fromLocationNameInput.value) {
-                  this._transferInventory()
-                }
-              }
-            }}"
-            readonly
-          />
-
-          <label>${i18next.t('label.to_location')}</label>
-          <barcode-scanable-input
-            name="toLocationName"
-            custom-input
-            @keypress="${e => {
-              if (e.keyCode === 13) {
-                e.preventDefault()
-                if (this.toLocationNameInput.value) {
-                  this._transferInventory()
-                }
-              }
-            }}"
-          ></barcode-scanable-input>
+                  }
+                }}"
+              ></barcode-scanable-input>`}
         </fieldset>
       </form>
 
       <div class="grist">
-        <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.inventory')}</h2>
-        <data-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data}></data-grist>
+        <data-grist
+          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+          .config=${this._gristConfig}
+          .data=${this._data}
+        ></data-grist>
       </div>
-    `
-  }
 
-  constructor() {
-    super()
-    this._palletId = ''
-    this._cartonId = ''
-    this.refInventoryType = INVENTORY_TYPES.PALLET.value
+      <div class="input-section">
+        <div class="left-column">
+          <div class="single-column-form">
+            <fieldset>
+              <label class="content-title">${i18next.t('label.lot_id')}</label>
+              <label class="content">${this?._selectedInventory?.palletId || '-'}</label>
+
+              <label class="content-title">${i18next.t('label.from_location')}</label>
+              <label class="content">${this?._selectedInventory?.location?.name || '-'}</label>
+
+              <label class="content-title">${i18next.t('label.product')}</label>
+              <label class="content"
+                >${this?._selectedInventory?.product
+                  ? '(' + this._selectedInventory.product.sku + ') ' + this?._selectedInventory?.product?.name
+                  : '-'}</label
+              >
+              <label class="content-title">${i18next.t('label.packing_type')}</label>
+              <label class="content">${this?._selectedInventory?.packingType || '-'}</label>
+
+              <label class="content-title">${i18next.t('label.qty')}</label>
+              <label class="content">${this?._selectedInventory?.qty || '-'}</label>
+
+              <!-- <input name="fromLocationName" readonly /> -->
+            </fieldset>
+          </div>
+        </div>
+        <div class="right-column">
+          <form id="input-form" class="single-column-form">
+            <fieldset>
+              <label class="content-title">${i18next.t('label.transfer_qty')}</label>
+              <input
+                type="number"
+                name="qty"
+                min="0"
+                @change="${e => {
+                  if (parseInt(this.qtyInput.value) < 0) {
+                    this.qtyInput.value = 0
+                  }
+                  if (this._selectedInventory) {
+                    if (this._selectedInventory.qty > parseInt(this.qtyInput.value)) {
+                      this._requireNewId = true
+                    } else {
+                      if (parseInt(this.qtyInput.value) > this._selectedInventory.qty) {
+                        this.qtyInput.value = this._selectedInventory.qty
+                      }
+                      this._requireNewId = false
+                    }
+                  }
+                }}"
+                @keypress="${e => {
+                  if (e.keyCode === 13) {
+                    e.preventDefault()
+                    if (parseInt(this.qtyInput.value) < 0) {
+                      this.qtyInput.value = 0
+                    } else if (this.qtyInput.value && this.toLocationNameInput.value === '') {
+                      this.focusOnToLocationInput()
+                    }
+                  }
+                }}"
+              />
+
+              <label class="content-title">${i18next.t('label.to_location')}</label>
+              <barcode-scanable-input
+                name="toLocationName"
+                custom-input
+                @keypress="${e => {
+                  if (e.keyCode === 13) {
+                    e.preventDefault()
+                    if (this.toLocationNameInput.value) {
+                      if (this.refInventoryType === INVENTORY_TYPES.LOT.value) {
+                        if (this._requireNewId) {
+                          this.focusOnNewLotInput()
+                        } else {
+                          this.transferInventory(e)
+                        }
+                      } else {
+                        this.focusOnNewCartonInput()
+                      }
+                      // this.transferInventory(e)
+                    }
+                  }
+                }}"
+              ></barcode-scanable-input>
+
+              ${this.refInventoryType === INVENTORY_TYPES.LOT.value
+                ? this._requireNewId
+                  ? html` <label class="content-title">${i18next.t('label.new_lot_id')}</label>
+                      <barcode-scanable-input
+                        name="newLotId"
+                        custom-input
+                        @keypress="${e => {
+                          if (e.keyCode === 13) {
+                            e.preventDefault()
+                            this.transferInventory(e)
+                          }
+                        }}"
+                      ></barcode-scanable-input>`
+                  : ``
+                : html`
+                    <label class="content-title">${i18next.t('label.carton_id')}</label>
+                    <barcode-scanable-input
+                      name="newCartonId"
+                      custom-input
+                      @keypress="${e => {
+                        if (e.keyCode === 13) {
+                          e.preventDefault()
+                          this.transferInventory(e)
+                        }
+                      }}"
+                    ></barcode-scanable-input>
+                  `}
+
+              <div class="button-container">
+                <button @click=${this.transferInventory.bind(this)}>${i18next.t('button.transfer')}</button>
+              </div>
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    `
   }
 
   pageInitialized() {
-    this.config = {
-      rows: { appendable: false },
-      pagination: { infinite: true },
+    this.refInventoryType = INVENTORY_TYPES.LOT.value
+    this._gristConfig = {
       list: {
         fields: [
-          'batchId',
-          'palletId',
-          'cartonId',
           'sku',
           'product',
+          'cartonId',
+          'palletId',
+          'location',
+          'batchId',
           'packingType',
           'packingSize',
           'qty',
           'expirationDate'
         ]
       },
+      pagination: { infinite: true },
+      rows: {
+        appendable: false,
+        handlers: {
+          click: async (columns, data, column, record, rowIndex) => {
+            try {
+              if (this.refInventoryType !== INVENTORY_TYPES.LOT.value) {
+                this._selectedInventory = record
+              }
+            } catch (ex) {
+              console.log(ex)
+            } finally {
+            }
+          }
+        }
+      },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         {
           type: 'string',
-          name: 'batchId',
+          name: 'sku',
           label: true,
-          header: i18next.t('field.batch_id'),
+          header: i18next.t('field.sku'),
           width: 150
         },
         {
-          type: 'string',
-          name: 'palletId',
+          type: 'object',
+          name: 'product',
           label: true,
-          header: i18next.t('field.lot_id'),
-          width: 150
+          header: i18next.t('field.product'),
+          width: 200
         },
         {
           type: 'string',
@@ -248,30 +440,37 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
         },
         {
           type: 'string',
-          name: 'sku',
+          name: 'palletId',
           label: true,
-          header: i18next.t('field.sku'),
+          header: i18next.t('field.lot_id'),
           width: 150
         },
         {
           type: 'object',
-          name: 'product',
+          name: 'location',
           label: true,
-          header: i18next.t('field.product'),
+          header: i18next.t('field.location'),
           width: 200
         },
+        {
+          type: 'string',
+          name: 'batchId',
+          label: true,
+          header: i18next.t('field.batch_id'),
+          width: 150
+        },
         {
           type: 'string',
           name: 'packingType',
           label: true,
-          header: i18next.t('field.packing_type'),
+          header: i18next.t('field.packing'),
           width: 150
         },
         {
           type: 'number',
           name: 'packingSize',
           label: true,
-          header: i18next.t('field.packing_size'),
+          header: i18next.t('field.size'),
           width: 80
         },
         {
@@ -290,19 +489,23 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
         }
       ]
     }
+
+    this.clearView()
   }
 
   inventoryTypeChangeHandler(currentType) {
+    this.clearView()
+
     this.refInventoryType = currentType
 
-    if (this.refInventoryType === INVENTORY_TYPES.PALLET.value) this._focusOnPalletInput()
-    else this._focusOnCartonInput()
+    if (this.refInventoryType === INVENTORY_TYPES.LOT.value) this.focusOnPalletInput()
+    else this.focusOnCartonInput()
   }
 
-  async _fetchInventory(inventoryRefId) {
+  async fetchInventory(inventoryRefId) {
     try {
       let filters = []
-      if (this.refInventoryType === INVENTORY_TYPES.PALLET.value) {
+      if (this.refInventoryType === INVENTORY_TYPES.LOT.value) {
         filters.push({
           name: 'palletId',
           operator: 'eq',
@@ -318,7 +521,7 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
 
       const response = await client.query({
         query: gql`
-          query inventories($filters: [Filter]) {
+          query inventories($filters: [Filter!]) {
             inventories(filters: $filters) {
               items {
                 id
@@ -335,6 +538,7 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
                   description
                 }
                 qty
+                lockedQty
                 location {
                   id
                   name
@@ -354,55 +558,41 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
 
       if (!response.errors) {
         if (response.data.inventories.total == 0) {
-          if (this.refInventoryType === INVENTORY_TYPES.PALLET.value) this._focusOnPalletInput()
-          else this._focusOnCartonInput()
+          if (this.refInventoryType === INVENTORY_TYPES.LOT.value) this.focusOnPalletInput()
+          else this.focusOnCartonInput()
           throw new Error(i18next.t('text.wrong_lot_id'))
         }
 
-        this.data = {
+        this._data = {
           records: response.data.inventories.items.map(record => {
             return {
               ...record,
-              sku: record.product.sku
+              sku: record.product.sku,
+              qty: record.qty - record.lockedQty > 0 ? record.qty - record.lockedQty : 0
             }
           })
         }
-        const locations = [...new Set(this.data.records.map(record => record.location.name))]
-        if (locations.length > 1) this._selectLocationPopup(this.data.records.map(record => record.location))
-        else this.fromLocationNameInput.value = locations[0]
 
-        this._focusOnToLocationInput()
+        if (this.refInventoryType === INVENTORY_TYPES.LOT.value) {
+          this._selectedInventory = this._data.records[0]
+        }
+
         this.updateContext()
       }
     } catch (e) {
-      this._clearView()
-      if (this.refInventoryType === INVENTORY_TYPES.PALLET.value) this._focusOnPalletInput()
-      else this._focusOnCartonInput()
-      this._showToast(e)
+      this.clearView()
+      if (this.refInventoryType === INVENTORY_TYPES.LOT.value) this.focusOnPalletInput()
+      else this.focusOnCartonInput()
+      this.showToast(e)
     }
   }
 
-  _selectLocationPopup(locations) {
-    openPopup(
-      html`
-        <select-location-popup
-          .locations="${locations}"
-          @location-selected="${e => {
-            this.fromLocationNameInput.value = e.detail.location.name
-          }}"
-        ></select-location-popup>
-      `,
-      {
-        backdrop: true,
-        size: 'medium',
-        title: i18next.t('title.select_location')
-      }
-    )
-  }
+  async transferInventory(e) {
+    e.stopPropagation()
+    e.preventDefault()
 
-  async _transferInventory() {
     try {
-      this._validateLocation()
+      this._validate()
 
       const result = await CustomAlert({
         title: i18next.t('title.are_you_sure'),
@@ -415,80 +605,96 @@ class TransferInventory extends connect(store)(localize(i18next)(PageView)) {
         return
       }
 
+      let variables = {
+        originPalletId: this._selectedInventory.palletId,
+        palletId: this.refInventoryType === INVENTORY_TYPES.LOT.value ? this.newLotInput?.value : null,
+        cartonId: this.refInventoryType === INVENTORY_TYPES.CARTON.value ? this.newCartonInput?.value : null,
+        fromLocationName: this._selectedInventory.location.name,
+        toLocationName: this.toLocationNameInput.value,
+        qty: parseInt(this.qtyInput.value)
+      }
+
       const response = await client.mutate({
         mutation: gql`
           mutation inventoryTransfer(
+            $originPalletId: String!
             $palletId: String
             $cartonId: String
             $fromLocationName: String!
             $toLocationName: String!
+            $qty: Float!
           ) {
             inventoryTransfer(
+              originPalletId: $originPalletId
               palletId: $palletId
               cartonId: $cartonId
               fromLocationName: $fromLocationName
               toLocationName: $toLocationName
+              qty: $qty
             )
           }
         `,
-        variables: {
-          palletId: this.refInventoryType === INVENTORY_TYPES.PALLET.value ? this.palletInput.value : null,
-          cartonId: this.refInventoryType === INVENTORY_TYPES.CARTON.value ? this.cartonInput.value : null,
-          fromLocationName: this.fromLocationNameInput.value,
-          toLocationName: this.toLocationNameInput.value
-        }
+        variables
       })
 
       if (!response.errors) {
-        this._showToast({ message: i18next.t('text.transfer_location_completed') })
-        this._clearView()
-        if (this.refInventoryType === INVENTORY_TYPES.PALLET) this._focusOnPalletInput()
-        else this._focusOnCartonInput()
+        let id = this.refInventoryType === INVENTORY_TYPES.LOT.value ? this._palletId : this._cartonId
+        this.showToast({ message: i18next.t('text.transfer_location_completed') })
+        this.clearView()
+        this.fetchInventory(id)
         this.updateContext()
       }
     } catch (e) {
-      this._showToast(e)
+      this.showToast(e)
     }
   }
 
-  _validateLocation() {
+  _validate() {
+    if (!this._selectedInventory) {
+      throw new Error(i18next.t('text.please_select_an_inventory'))
+    }
+
+    if (!this.qtyInput.value > 0) {
+      throw new Error(i18next.t('text.please_enter_transfer_qty'))
+    }
+
     if (!this.toLocationNameInput.value) {
-      this._focusOnToLocationInput()
+      this.focusOnToLocationInput()
       throw new Error(i18next.t('text.there_is_no_to_location'))
     }
 
-    if (this.fromLocationNameInput.value == this.toLocationNameInput.value) {
+    if (this._selectedInventory?.location?.name == this.toLocationNameInput.value) {
       throw new Error(i18next.t('text.from_location_is_same_as_to_location'))
     }
-  }
 
-  _focusOnPalletInput() {
-    setTimeout(() => this.palletInput.focus(), 100)
-  }
-
-  _focusOnCartonInput() {
-    setTimeout(() => this.cartonInput.focus(), 100)
-  }
-
-  _focusOnToLocationInput() {
-    setTimeout(() => this.toLocationNameInput.focus(), 100)
+    if (this.refInventoryType === INVENTORY_TYPES.CARTON.value && this?.cartonInput?.value.trim() == '') {
+      throw new Error(i18next.t('text.required_carton_id'))
+    }
   }
 
-  _clearView() {
-    this.inputForm.reset()
-    this.data = { records: [] }
-    this.toLocationNameInput.value = ''
-    if (this.refInventoryType === INVENTORY_TYPES.PALLET.value) {
+  done() {
+    this.clearView()
+    if (this.refInventoryType === INVENTORY_TYPES.LOT.value) {
       this.palletInput.value = ''
       this._palletId = ''
     } else {
       this.cartonInput.value = ''
       this.cartonId = ''
     }
+  }
+
+  clearView() {
+    this.inputForm?.reset()
+    this._selectedInventory = null
+    this._requireNewId = false
+    this._data = { records: [] }
+    if (this?.toLocationNameInput) this.toLocationNameInput.value = ''
+    if (this?.newCartonInput) this.newCartonInput.value = ''
+    if (this?.newLotInput) this.newLotInput.value = ''
     this.updateContext()
   }
 
-  _showToast({ type, message }) {
+  showToast({ type, message }) {
     document.dispatchEvent(
       new CustomEvent('notify', {
         detail: {