@things-factory/operato-wms 4.3.769 → 4.3.770

package/client/pages/outbound/loading-v2/loading-execution-base.js

@@ -121,14 +121,20 @@ const FIND_LOADABLE_RELEASE_GOOD_BY_BIN = gql`
           batchId
           packingType
           refWorksheetId
+          packedQty
+          releaseQty
           product {
             id
             sku
             name
+            isInventoryDecimal
           }
           productDetail {
             id
           }
+          orderProduct {
+            id
+          }
         }
       }
     }
@@ -182,14 +188,20 @@ const LOADING_WORKSHEET_V2 = gql`
           batchId
           packingType
           refWorksheetId
+          packedQty
+          releaseQty
           product {
             id
             sku
             name
+            isInventoryDecimal
           }
           productDetail {
             id
           }
+          orderProduct {
+            id
+          }
         }
       }
     }
@@ -519,6 +531,18 @@ export class LoadingExecutionBase extends LitElement {
     }
   }
 
+  get groupPackingListButton() {
+    // Only return button when active tab is LOADING
+    if (this.state?.activeTab !== TAB_TYPES.LOADING) {
+      return null
+    }
+    return {
+      title: i18next.t('button.group_packing_list'),
+      action: async () => {},
+      ...CommonButtonStyles.inspect
+    }
+  }
+
   // Input Getters
   get productBarcodeInput() {
     return this.shadowRoot
@@ -1152,6 +1176,11 @@ export class LoadingExecutionBase extends LitElement {
         if (this._useQcSku) {
           buttons.unshift(this.orderListButton)
         }
+        // Only add button if getter returns a valid button (checks activeTab internally)
+        const groupPackingButton = this.groupPackingListButton
+        if (groupPackingButton) {
+          buttons.unshift(groupPackingButton)
+        }
         buttons.unshift(this.warehouseReturnButton)
         buttons.unshift(this.loadButton)
       }

package/client/pages/outbound/loading-v2/loading-execution.js

@@ -9,7 +9,11 @@ import { isMobileDevice } from '@things-factory/utils'
 import { LoadingExecutionBase } from './loading-execution-base'
 import '../../components/list-view/product-list-view'
 import { fetchSettingRule } from '../../../fetch-setting-value'
-import { client, gqlContext } from '@things-factory/shell'
+import { CommonButtonStyles } from '@things-factory/styles'
+import { client, CustomAlert, gqlContext } from '@things-factory/shell'
+import { openPopup } from '@things-factory/layout-base'
+import { showToast } from '../../../util'
+import './loading-package-info-popup'
 
 // Constants
 const SETTINGS = {
@@ -37,6 +41,61 @@ const VALIDATE_QC_SEALS = gql`
   }
 `
 
+const GROUP_PACKING_TAB_TYPES = {
+  SKU: 'SKU',
+  PACKING_LIST: 'Packing Label'
+}
+
+const GROUP_PACKING_TABS = [GROUP_PACKING_TAB_TYPES.SKU, GROUP_PACKING_TAB_TYPES.PACKING_LIST]
+
+const CREATE_GROUP_LOADING_PACKAGES = gql`
+  mutation createGroupLoadingPackages($releaseGoodNo: String!, $groupedItems: [GroupLoadingPackageItem!]!) {
+    createGroupLoadingPackages(releaseGoodNo: $releaseGoodNo, groupedItems: $groupedItems) {
+      id
+      name
+      status
+      loadingPackageItems {
+        id
+        name
+        releaseQty
+        orderProduct {
+          id
+        }
+      }
+    }
+  }
+`
+
+const GET_LOADING_PACKAGES = gql`
+  query loadingPackagesByReleaseGoodNo($releaseGoodNo: String!) {
+    loadingPackagesByReleaseGoodNo(releaseGoodNo: $releaseGoodNo) {
+      id
+      name
+      status
+      createdAt
+      loadingPackageItems {
+        id
+        name
+        packedQty
+        orderProduct {
+          id
+          name
+          packingType
+          product {
+            id
+            name
+            sku
+          }
+        }
+        productDetail {
+          id
+          packingType
+        }
+      }
+    }
+  }
+`
+
 // List View Configurations
 const QC_LIST_CONFIG = {
   selectable: true,
@@ -134,6 +193,65 @@ const LOADING_LIST_CONFIG = {
   }
 }
 
+const SKU_LIST_CONFIG = {
+  selectable: true,
+  columnLeft: {
+    size: 8,
+    fields: [
+      {
+        type: 'row',
+        content: [
+          {
+            header: 'SKU No.',
+            field: 'relatedOrderInv.product.sku',
+            type: 'string'
+          }
+        ]
+      },
+      {
+        type: 'row',
+        content: [
+          {
+            header: 'Product Name',
+            field: 'relatedOrderInv.product.name',
+            type: 'string',
+            style: '-webkit-line-clamp: 2;'
+          }
+        ]
+      },
+      {
+        type: 'row',
+        content: [
+          {
+            header: 'Packing Type',
+            field: 'relatedOrderInv.packingType',
+            type: 'string'
+          }
+        ]
+      }
+    ]
+  },
+  columnRight: {
+    size: 4,
+    fields: [
+      {
+        type: 'row',
+        content: [
+          {
+            header: 'Total Qty.',
+            field: 'remainingQty',
+            type: 'string'
+          }
+        ]
+      },
+      {
+        type: 'editableValueBox',
+        content: { header: 'Group Qty.', field: 'groupQty', type: 'number', placeholder: 'e.g. 10', defaultValue: '' }
+      }
+    ]
+  }
+}
+
 export class LoadingExecution extends LoadingExecutionBase {
   static get properties() {
     return {
@@ -141,7 +259,11 @@ export class LoadingExecution extends LoadingExecutionBase {
       _useQcSku: { type: Boolean },
       _currentReleaseGood: { type: Object },
       _tabCounts: { type: Object },
-      _qcBannerState: { type: Object }
+      _qcBannerState: { type: Object },
+      _isGroupPackingMode: { type: Boolean },
+      _groupPackingActiveTab: { type: String },
+      _loadingPackages: { type: Array },
+      _combinedSkuData: { type: Array }
     }
   }
 
@@ -325,6 +447,9 @@ export class LoadingExecution extends LoadingExecutionBase {
     this._useQcSku = false
     this._currentReleaseGood = null
     this._qcBannerState = { show: false, needsSealing: false, minimumSealNumber: 0 }
+    this._isGroupPackingMode = false
+    this._loadingPackages = []
+    this._combinedSkuData = []
     this._deliveryOrderConfig = {
       columnLeft: {
         size: 8,
@@ -367,6 +492,7 @@ export class LoadingExecution extends LoadingExecutionBase {
         startedAt: this.worksheet?.startedAt
       }
     }
+
     // Update banner state when QC or loading data changes
     if (changedProperties.has('qcData') || changedProperties.has('loadingData')) {
       if (this._updateQcBannerState) {
@@ -375,6 +501,66 @@ export class LoadingExecution extends LoadingExecutionBase {
     }
   }
 
+  get groupPackingListButton() {
+    return {
+      title: i18next.t('button.group_packing_label'),
+      action: async () => {
+        if (this.state?.activeTab !== TAB_TYPES.LOADING) {
+          showToast({ message: i18next.t('text.only_available_on_loading_tab'), type: 'error' })
+          return
+        }
+
+        await this._fetchLoadingPackages()
+        this._calculateAndCombineSkuData()
+        this._isGroupPackingMode = true
+        this.getButton()
+      },
+      ...CommonButtonStyles.inspect
+    }
+  }
+
+  //===== OVERWRITE PARENT CLASS, FOR GROUP PACKING MODE =====
+  getButton() {
+    if (this._isGroupPackingMode) {
+      const actions = [
+        {
+          title: i18next.t('button.back'),
+          action: () => {
+            this._isGroupPackingMode = false
+            this.getButton()
+          },
+          ...CommonButtonStyles.back
+        },
+        {
+          title: i18next.t('button.group'),
+          action: async () => {
+            await this.handleGroupPackages()
+          },
+          ...CommonButtonStyles.submit
+        }
+      ]
+
+      this.parent.configContext(actions)
+    } else {
+      super.getButton()
+    }
+  }
+
+  get backButton() {
+    const base = super.backButton
+    return {
+      ...base,
+      action: () => {
+        if (this._isGroupPackingMode) {
+          this._groupPackingActiveTab = GROUP_PACKING_TAB_TYPES.SKU
+          this._isGroupPackingMode = false
+        } else {
+          base.action()
+        }
+      }
+    }
+  }
+
   combineSameProducts(data) {
     const combinedMap = new Map()
 
@@ -453,10 +639,137 @@ export class LoadingExecution extends LoadingExecutionBase {
     return LOADING_LIST_CONFIG
   }
 
+  get skuListItemConfig() {
+    return SKU_LIST_CONFIG
+  }
+
   get deliveryOrderConfig() {
     return this._deliveryOrderConfig
   }
 
+  _calculateAndCombineSkuData() {
+    if (!this.loadingData || this.loadingData.length === 0) {
+      this._combinedSkuData = []
+      return
+    }
+
+    // Step 1: Group loadingData by orderProductId and sum their releaseQty
+    const releaseQtyByOrderProductId = new Map()
+    this.loadingData.forEach(item => {
+      const orderProductId = item.relatedOrderInv?.orderProduct?.id
+      if (orderProductId) {
+        const currentReleaseQty = parseFloat(item.relatedOrderInv?.releaseQty || item.releaseQty) || 0
+        const existing = releaseQtyByOrderProductId.get(orderProductId) || 0
+        releaseQtyByOrderProductId.set(orderProductId, existing + currentReleaseQty)
+      }
+    })
+
+    // Step 2: Group loadingPackageItems by orderProductId and sum their packedQty
+    const packedQtyByOrderProductId = new Map()
+    if (this._loadingPackages && this._loadingPackages.length > 0) {
+      this._loadingPackages.forEach(pkg => {
+        if (pkg.loadingPackageItems && pkg.loadingPackageItems.length > 0) {
+          pkg.loadingPackageItems.forEach(item => {
+            const orderProductId = item.orderProduct?.id
+            if (orderProductId) {
+              const packedQty = parseFloat(item.packedQty) || 0
+              const existing = packedQtyByOrderProductId.get(orderProductId) || 0
+              packedQtyByOrderProductId.set(orderProductId, existing + packedQty)
+            }
+          })
+        }
+      })
+    }
+
+    // Step 3: Combine items by orderProductId and create simple array
+    const combinedMap = new Map()
+    
+    this.loadingData.forEach(item => {
+      const orderProductId = item.relatedOrderInv?.orderProduct?.id
+      if (!orderProductId) return
+
+      if (!combinedMap.has(orderProductId)) {
+        const totalReleaseQty = releaseQtyByOrderProductId.get(orderProductId) || 0
+        const totalPackedQty = packedQtyByOrderProductId.get(orderProductId) || 0
+        const remainingQty = Math.max(0, totalReleaseQty - totalPackedQty)
+
+        // Create simple object with only needed fields
+        combinedMap.set(orderProductId, {
+          id: item.id, // Keep first item's id for selection
+          orderProductId: orderProductId,
+          remainingQty: remainingQty.toString(),
+          packedQty: totalPackedQty,
+          sku: item.relatedOrderInv?.product?.sku || '',
+          productName: item.relatedOrderInv?.product?.name || '',
+          packingType: item.relatedOrderInv?.packingType || '',
+          isInventoryDecimal: item.relatedOrderInv?.product?.isInventoryDecimal || false,
+          groupQty: null, // Reset to null (empty field, will use full availableQty)
+          relatedOrderInv: {
+            ...item.relatedOrderInv,
+            orderProduct: {
+              id: orderProductId
+            }
+          }
+        })
+      }
+    })
+
+    // Step 4: Filter out items with remainingQty === 0
+    this._combinedSkuData = Array.from(combinedMap.values()).filter(item => {
+      const remainingQty = parseFloat(item.remainingQty || 0)
+      return remainingQty > 0
+    })
+  }
+
+  get filteredSkuData() {
+    return this._combinedSkuData || []
+  }
+
+  get packingListConfig() {
+    return {
+      selectable: false,
+      columnLeft: {
+        size: 8,
+        fields: [
+          {
+            type: 'row',
+            content: [
+              {
+                header: 'Packing Label No.',
+                field: 'displayNumber',
+                type: 'number',
+                style: 'font-weight: bold;'
+              }
+            ]
+          }
+        ]
+      },
+      columnRight: {
+        size: 4,
+        fields: [
+          {
+            type: 'actionBox',
+            content: [
+              {
+                header: 'View Info',
+                btnClass: 'btn-common',
+                callback: rowData => {
+                  const originalPackage = this._loadingPackages.find(pkg => pkg.id === rowData.id)
+                  if (originalPackage) {
+                    this.openLoadingPackageInfoPopup(originalPackage)
+                  } else {
+                    console.error('Loading package not found:', rowData.id)
+                    showToast({ message: i18next.t('text.error_occurred') || 'Error loading package details', type: 'error' })
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+
   /**
    * Determines if the "Go to LOADED" banner should be shown.
    * Banner appears when:
@@ -557,7 +870,271 @@ export class LoadingExecution extends LoadingExecutionBase {
     return this._qcBannerState?.show || false
   }
 
+  async openGroupPackingTab(e, tabName) {
+    if (this.state?.activeTab !== TAB_TYPES.LOADING) {
+      showToast({ message: i18next.t('text.only_available_on_loading_tab'), type: 'error' })
+      return
+    }
+
+    this._groupPackingActiveTab = tabName
+    await this.updateComplete
+    
+    await this._fetchLoadingPackages()
+    if (tabName === GROUP_PACKING_TAB_TYPES.SKU) {
+      this._calculateAndCombineSkuData()
+    }
+  }
+
+  async _fetchLoadingPackages() {
+    const releaseGoodNo = this._currentReleaseGood?.releaseGood?.name || this.worksheet?.releaseGood?.name
+    if (!releaseGoodNo) {
+      console.warn('No release good number available to fetch loading packages')
+      this._loadingPackages = []
+      return
+    }
+
+    try {
+      const response = await client.query({
+        query: GET_LOADING_PACKAGES,
+        variables: { releaseGoodNo },
+      })
+
+      if (response.errors) {
+        throw new Error(response.errors[0]?.message || i18next.t('text.error_occurred'))
+      }
+
+      const packages = response.data.loadingPackagesByReleaseGoodNo || []
+      this._loadingPackages = packages.map((pkg, index) => ({
+        ...pkg,
+        displayNumber: index + 1
+      }))
+      this.requestUpdate()
+    } catch (error) {
+      console.error('Error fetching loading packages:', error)
+      showToast({ message: error.message || i18next.t('text.error_occurred'), type: 'error' })
+      this._loadingPackages = []
+    }
+  }
+
+
+  async openLoadingPackageInfoPopup(loadingPackage) {
+    if (!loadingPackage || !loadingPackage.loadingPackageItems || loadingPackage.loadingPackageItems.length === 0) {
+      showToast({ message: i18next.t('text.no_items_found') || 'No items found in this package', type: 'info' })
+      return
+    }
+
+    const items = loadingPackage.loadingPackageItems.map(item => ({
+      id: item.id,
+      sku: item.orderProduct?.product?.sku || '',
+      productName: item.orderProduct?.product?.name || item.orderProduct?.name || '',
+      packingType: item.productDetail?.packingType || item.orderProduct?.packingType || '',
+      qty: item.packedQty
+    }))
+
+    await openPopup(
+      html`
+        <loading-package-info-popup
+          ._data=${items}
+          ._packageName=${loadingPackage.name}
+          ._packageNumber=${loadingPackage.displayNumber}
+          ._packageId=${loadingPackage.id}
+          @undo=${async e => {
+            await this._fetchLoadingPackages()
+            this._calculateAndCombineSkuData()
+            this.requestUpdate()
+          }}
+        ></loading-package-info-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: `${i18next.t('text.packing_list_info') || 'Packing List Info'}: ${loadingPackage.name}`
+      }
+    )
+  }
+
+  async handleGroupPackages() {
+    try {
+      const skuListView = this.shadowRoot.querySelector('#sku')
+      if (!skuListView) {
+        showToast({ message: i18next.t('text.sku_list_view_not_found') }) 
+        return
+      }
+
+      const selectedItemIds = skuListView.selectedItems || []
+      if (selectedItemIds.length === 0) {
+        showToast({ message: i18next.t('text.no_sku_selected') })
+        return
+      }
+
+      const viewData = skuListView.data || []
+      const selectedItems = viewData.filter(item => selectedItemIds.includes(item.id))
+
+      if (selectedItems.length === 0) {
+        showToast({ message: i18next.t('text.selected_items_not_found') })
+        return
+      }
+      
+      const groupedItems = selectedItems.map(item => {
+        const availableQty = parseFloat(item.remainingQty) || 0
+        // Check direct property first (from combined SKU data), then fallback to nested path
+        const isInventoryDecimal = item.isInventoryDecimal === true || item.relatedOrderInv?.product?.isInventoryDecimal === true
+        const productSku = item.sku || item.relatedOrderInv?.product?.sku || 'Unknown'
+
+        let groupQty
+
+        if (item.groupQty == null) {
+          groupQty = availableQty
+        } else {
+          const enteredQty = parseFloat(item.groupQty)
+
+          if (isNaN(enteredQty)) {
+            throw new Error(i18next.t('text.invalid_quantity_input') || 'Invalid quantity input')
+          } else if (enteredQty === 0) {
+            throw new Error(i18next.t('text.group_quantity_cannot_be_zero') || 'Group quantity cannot be zero')
+          } else if (enteredQty < 0) {
+            throw new Error(i18next.t('text.group_quantity_cannot_be_negative') || 'Group quantity cannot be negative')
+          } else {
+            groupQty = enteredQty
+          }
+        }
+
+        // Validate decimal values - only allow decimals if isInventoryDecimal is true
+        if (!isInventoryDecimal && !Number.isInteger(groupQty)) {
+          throw new Error(
+            i18next.t('text.decimal_not_allowed_for_product', { sku: productSku }) ||
+              `Decimal quantity is not allowed for product ${productSku}`
+          )
+        }
+
+        // Validate groupQty doesn't exceed available quantity
+        if (groupQty > availableQty) {
+          throw new Error(i18next.t('text.group_quantity_exceeds_total'))
+        }
+
+        return {
+          orderProductId: item.orderProductId,
+          groupQty: groupQty
+        }
+      })
+
+      const releaseGoodNo = this._currentReleaseGood?.releaseGood?.name
+      if (!releaseGoodNo) {
+        showToast({ message: i18next.t('text.release_good_number_not_found') })
+        return
+      }
+
+      const response = await client.mutate({
+        mutation: CREATE_GROUP_LOADING_PACKAGES,
+        variables: {
+          releaseGoodNo: releaseGoodNo,
+          groupedItems: groupedItems
+        },
+        context: gqlContext()
+      })
+
+      if (response.errors) {
+        throw new Error(response.errors[0]?.message || i18next.t('text.failed_to_create_group_loading_packages'))
+      }
+
+      const loadingPackage = response.data.createGroupLoadingPackages
+      showToast({
+        message: i18next.t('text.new_packing_label_created'),
+        type: 'success'
+      })
+
+      if (this._isGroupPackingMode) {
+        await this._fetchLoadingPackages()
+        await this.updateComplete
+        if (this._groupPackingActiveTab === GROUP_PACKING_TAB_TYPES.SKU) {
+          this._calculateAndCombineSkuData()
+          await this.updateComplete
+          const skuListView = this.shadowRoot.querySelector('#sku')
+          if (skuListView) {
+            skuListView.selectedItems = []
+          }
+        }
+      }
+      
+      this.getButton()
+    } catch (error) {
+      console.error('Error creating group loading packages:', error)
+      showToast({ message: error.message || i18next.t('text.failed_to_create_group_loading_packages'), type: 'error' })
+    }
+  }
+
   render() {
+    if (this._isGroupPackingMode) {
+      if (!this._groupPackingActiveTab) this._groupPackingActiveTab = GROUP_PACKING_TAB_TYPES.SKU
+
+      return html`
+        <button
+          class="order-info text-center"
+          ?disabled=${!Boolean(this._currentReleaseGood?.releaseGood?.name)}
+          @click=${e => {
+            if (this._currentReleaseGood?.releaseGood?.name) {
+              this.showOrderInfo()
+            }
+          }}
+        >
+          <label class="text-14 font-bold order-no"
+            >${i18next.t('label.order_no')}: ${this._currentReleaseGood?.releaseGood?.name || this.worksheet?.binLocationName || ''}</label
+          >
+          <mwc-icon style="color:#007E7F;">info</mwc-icon>
+        </button>
+
+        <div class="tabs">
+          ${GROUP_PACKING_TABS.map(
+            tab => html`
+              <button
+                class="font-bold tab-button ${this._groupPackingActiveTab === tab ? 'active' : ''}"
+                @click=${async e => {
+                  await this.openGroupPackingTab(e, tab)
+                }}
+              >
+                ${tab === GROUP_PACKING_TAB_TYPES.SKU ? i18next.t('label.sku') : i18next.t('label.packing_label')}
+              </button>
+            `
+          )}
+        </div>
+
+        ${this._groupPackingActiveTab === GROUP_PACKING_TAB_TYPES.SKU
+          ? html`
+              <div class="tab-info text-center">
+                <label class="text-14 font-bold">${i18next.t('label.total_sku')}: ${this.filteredSkuData.length}</label>
+              </div>
+            `
+          : ''}
+        
+        ${this._groupPackingActiveTab === GROUP_PACKING_TAB_TYPES.PACKING_LIST
+          ? html`
+              <div class="tab-info text-center">
+                <label class="text-14 font-bold">${i18next.t('label.total_packing_label')}: ${(this._loadingPackages || []).length}</label>
+              </div>
+            `
+          : ''}
+
+        <div class="tab-content ${this._groupPackingActiveTab === GROUP_PACKING_TAB_TYPES.SKU ? 'active' : ''}">
+          <product-list-view
+            id="sku"
+            .config=${this.skuListItemConfig}
+            .data=${this.filteredSkuData}
+          ></product-list-view>
+        </div>
+
+        <div class="tab-content ${this._groupPackingActiveTab === GROUP_PACKING_TAB_TYPES.PACKING_LIST ? 'active' : ''}">
+          ${this._loadingPackages && this._loadingPackages.length > 0
+            ? html`
+                <product-list-view
+                  .config=${this.packingListConfig}
+                  .data=${this._loadingPackages}
+                ></product-list-view>
+              `
+            : ''}
+        </div>
+      `
+    }
+
     if (!this.state) {
       this.resetView()
     }