@things-factory/operato-wms 4.3.767 → 4.3.770

package/client/pages/order/release-order/b2b/b2b-order-list.js

@@ -2,6 +2,7 @@ import '@things-factory/form-ui'
 import '@things-factory/grist-ui'
 import '@things-factory/worksheet-ui'
 import '../batch-picking-popup'
+import '../packing-label-history-popup'
 import '../../../outbound/generate-worksheet-popup'
 import '../../../outbound/select-operator-popup'
 
@@ -58,6 +59,11 @@ class B2bOrderList extends localize(i18next)(PageView) {
     }
   }
 
+  constructor() {
+    super()
+    this._hasSelectionListener = false
+  }
+
   render() {
     return html`
       <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
@@ -73,6 +79,32 @@ class B2bOrderList extends localize(i18next)(PageView) {
   get context() {
     var actions = []
 
+    actions.push({
+      title: i18next.t('title.packing_label_history'),
+      action: this._openPackingLabelHistory.bind(this),
+      icon: 'history',
+      emphasis: {
+        raised: false,
+        outlined: true,
+        dense: false,
+        danger: false
+      }
+    })
+
+    if (this._shouldShowButtonForSelection()) {
+      actions.push({
+        title: i18next.t('title.print_packing_label'),
+        action: this._openPrintPackingList.bind(this),
+        icon: 'print',
+        emphasis: {
+          raised: false,
+          outlined: true,
+          dense: false,
+          danger: false
+        }
+      })
+    }
+
     if (this.isUserBelongsDomain) {
       if (this._betaSetting) {
         actions.push({
@@ -96,6 +128,7 @@ class B2bOrderList extends localize(i18next)(PageView) {
         ...CommonButtonStyles.add
       })
     }
+
     return {
       title: i18next.t('title.release_orders'),
       actions,
@@ -501,6 +534,13 @@ class B2bOrderList extends localize(i18next)(PageView) {
         }
       ]
     }
+
+    await this.updateComplete
+    if (this.dataGrist && !this._hasSelectionListener) {
+      this.dataGrist.addEventListener('select-record-change', () => this.updateContext())
+      this.dataGrist.addEventListener('select-all-change', () => this.updateContext())
+      this._hasSelectionListener = true
+    }
   }
 
   get searchForm() {
@@ -588,6 +628,10 @@ class B2bOrderList extends localize(i18next)(PageView) {
                 id
                 name
               }
+              activeWorksheet {
+                type
+                status
+              }
             }
             total
           }
@@ -812,6 +856,61 @@ class B2bOrderList extends localize(i18next)(PageView) {
     return { header: headerSetting, data: data }
   }
 
+  _shouldShowButtonForSelection() {
+    if (!this.dataGrist) return false
+
+    const selected = this.dataGrist.selected || []
+    if (selected.length === 0) return false
+
+    const allowedWorksheetTypes = ['LOADING', 'PROCESSING', 'PARTIAL_PROCESSING']
+    const allowedWorksheetStatuses = ['EXECUTING', 'PARTIAL_EXECUTING']
+    
+    return selected.every(order => {
+      // Check if activeWorksheet exists
+      if (!order.activeWorksheet) return false
+      
+      // Check if activeWorksheet.type is one of the allowed types
+      if (!allowedWorksheetTypes.includes(order.activeWorksheet.type)) return false
+      
+      // Check if activeWorksheet.status is EXECUTING or PARTIAL_EXECUTING
+      return allowedWorksheetStatuses.includes(order.activeWorksheet.status)
+    })
+  }
+
+  _openPrintPackingList() {
+    try {
+      if (!this.dataGrist || !this.dataGrist.selected || this.dataGrist.selected.length === 0) {
+        throw new Error(i18next.t('text.please_select_one_or_more_order') || 'Please select one or more orders')
+      }
+
+      const selectedOrderNames = this.dataGrist.selected.map(order => order.name).filter(Boolean)
+      if (selectedOrderNames.length === 0) {
+        throw new Error(i18next.t('text.no_valid_orders_selected') || 'No valid orders selected')
+      }
+
+      const orderNoParam = selectedOrderNames.join(',')
+      navigate(`preview_print_packing_list?orderNo=${encodeURIComponent(orderNoParam)}`)
+    } catch (e) {
+      this._showToast({ type: 'error', message: e.message || i18next.t('text.failed_to_open_print_packing_label') })
+    }
+  }
+
+  _openPackingLabelHistory() {
+    try {
+      openPopup(
+        html` <packing-label-history-popup></packing-label-history-popup> `,
+        {
+          backdrop: true,
+          size: 'large',
+          title: i18next.t('title.packing_label_history'),
+          escapable: false
+        }
+      )
+    } catch (e) {
+      this._showToast({ type: 'error', message: e.message || i18next.t('text.failed_to_open_packing_label_history') })
+    }
+  }
+
   _showToast({ type, message }) {
     document.dispatchEvent(
       new CustomEvent('notify', {

package/client/pages/order/release-order/packing-label-history-popup.js

@@ -0,0 +1,378 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+import './print-quantity-popup'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+
+import { i18next, localize } from '@things-factory/i18n-base'
+import { openPopup } from '@things-factory/layout-base'
+import { client } from '@things-factory/shell'
+import { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
+import { showToast } from '../../../util'
+
+class PackingLabelHistoryPopup extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      _searchFields: Array,
+      config: Object,
+      data: Object,
+      _packingLabelOptions: Array
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          background-color: white;
+        }
+
+        search-form {
+          overflow: visible;
+        }
+
+        .grist {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
+
+        .grist-container {
+          overflow-y: hidden;
+          display: flex;
+          flex: 1;
+        }
+
+        data-grist {
+          overflow-y: hidden;
+          flex: 1;
+        }
+
+        .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);
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+    this._packingLabelOptions = []
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  _initSearchFields() {
+    this._searchFields = [
+      {
+        label: i18next.t('field.order_no') || 'Order No.',
+        name: 'releaseGood.name',
+        type: 'text',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.packing_label_no'),
+        name: 'displayNumber',
+        type: 'select',
+        options: this._packingLabelOptions,
+        props: { searchOper: 'eq' }
+      }
+    ]
+  }
+
+  _initConfig() {
+    this.config = {
+      rows: { selectable: { multiple: true }, appendable: false },
+      list: { fields: ['releaseGood', 'refNo', 'displayNumber', 'printedAt'] },
+      pagination: { limit: 50, pages: [20, 50, 100, 200] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'reorder',
+          handlers: {
+            click: (_columns, _data, _column, record) => {}
+          }
+        },
+        {
+          type: 'object',
+          name: 'releaseGood',
+          header: i18next.t('field.order_no') || 'Release Orders',
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'string',
+          name: 'refNo',
+          header: i18next.t('field.ref_no') || 'Ref No.',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'number',
+          name: 'displayNumber',
+          header: i18next.t('field.packing_label_no') || 'Packing Label No.',
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'datetime',
+          name: 'printedAt',
+          header: i18next.t('field.printed_at') || 'Printed At',
+          sortable: true,
+          width: 160
+        },
+        {
+          type: 'object',
+          name: 'printedBy',
+          header: i18next.t('field.printed_by') || 'Printed By',
+          sortable: true,
+          width: 160
+        }
+      ]
+    }
+  }
+
+  async firstUpdated() {
+    await this._fetchPackingLabelOptions()
+    this._initSearchFields()
+    this._initConfig()
+  }
+
+  async _fetchPackingLabelOptions() {
+    try {
+      const response = await client.query({
+        query: gql`
+          query {
+            maxPackingLabelCount
+          }
+        `
+      })
+
+      if (!response.errors) {
+        const maxCount = response.data.maxPackingLabelCount || 0
+        this._packingLabelOptions = [
+          { value: '', name: '' },
+          ...Array.from({ length: maxCount }, (_, i) => ({
+            value: String(i + 1),
+            name: String(i + 1)
+          }))
+        ]
+      }
+    } catch (e) {
+      console.error('Failed to fetch packing label options:', e)
+      this._packingLabelOptions = [{ value: '', name: '' }]
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    const filters = this.searchForm.queryFilters
+    
+    const response = await client.query({
+      query: gql`
+        query printedLoadingPackagesHistory($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          printedLoadingPackagesHistory(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              displayNumber
+              releaseGood {
+                id
+                name
+                refNo
+              }
+              printedAt
+              printedBy {
+                id
+                name
+                description
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings: sorters
+      }
+    })
+
+    if (!response.errors) {
+      return {
+        total: response.data.printedLoadingPackagesHistory.total || 0,
+        records:
+          response.data.printedLoadingPackagesHistory.items.map(item => ({
+            ...item,
+            refNo: item.releaseGood?.refNo || ''
+          })) || []
+      }
+    }
+
+    return { total: 0, records: [] }
+  }
+
+  _handlePrint() {
+    try {
+      const selected = this.dataGrist.selected || []
+      if (selected.length === 0) {
+        showToast({
+          type: 'warning',
+          message: i18next.t('text.please_select_at_least_one_record') || 'Please select at least one record'
+        })
+        return
+      }
+
+      openPopup(
+        html`
+          <print-quantity-popup
+            @print="${e => {
+              const printQuantity = e.detail.printQuantity
+              
+              // Validate print quantity
+              if (!printQuantity || printQuantity <= 0) {
+                showToast({
+                  type: 'error',
+                  message: i18next.t('text.print_qty_must_be_at_least_one') || 'Print quantity must be at least 1'
+                })
+                return
+              }
+              
+              // Close popup and execute print
+              history.back()
+              this._executePrint(selected, printQuantity)
+            }}"
+          ></print-quantity-popup>
+        `,
+        {
+          backdrop: true,
+          size: 'small',
+          title: i18next.t('title.print_packing_label') || 'Print Packing Label'
+        }
+      )
+    } catch (e) {
+      showToast({ type: 'error', message: e.message || i18next.t('text.failed_to_print') })
+    }
+  }
+
+  async _executePrint(selected, printQuantity) {
+    const loadingPackageIds = selected.map(item => item.id).filter(Boolean)
+
+    if (loadingPackageIds.length === 0) {
+      showToast({ type: 'error', message: i18next.t('text.no_valid_packages_selected') || 'No valid packages selected' })
+      return
+    }
+
+    try {
+      const response = await fetch('/render_packing_label', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          loadingPackageIds,
+          printQuantity: Math.max(1, parseInt(printQuantity) || 1)
+        })
+      })
+
+      if (!response.ok) {
+        const errorText = await response.text()
+        throw new Error(errorText || `Failed to render packing label: ${response.statusText}`)
+      }
+
+      const renderedHtml = await response.text()
+      if (!renderedHtml) {
+        showToast({ type: 'error', message: i18next.t('text.failed_to_render_template') || 'Failed to render template' })
+        return
+      }
+
+      await this._printViaIframe(renderedHtml)
+      this.dataGrist.fetch()
+    } catch (error) {
+      console.error('Print error:', error)
+      showToast({ type: 'error', message: error.message || i18next.t('text.failed_to_print') || 'Failed to print' })
+    }
+  }
+
+  async _printViaIframe(htmlContent) {
+    return new Promise((resolve, reject) => {
+      const iframe = this._printIframe
+      if (!iframe) {
+        reject(new Error('Print iframe not found'))
+        return
+      }
+
+      iframe.onload = () => {
+        try {
+          iframe.contentWindow.focus()
+          iframe.contentWindow.print()
+          resolve()
+        } catch (e) {
+          reject(e)
+        }
+      }
+
+      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document
+      iframeDoc.open()
+      iframeDoc.write(htmlContent)
+      iframeDoc.close()
+    })
+  }
+
+  get _printIframe() {
+    return this.shadowRoot?.querySelector('#print-iframe')
+  }
+
+  _closePopup() {
+    history.back()
+  }
+
+  render() {
+    return html`
+      <search-form
+        id="search-form"
+        .fields=${this._searchFields}
+        @submit=${() => this.dataGrist.fetch()}
+      ></search-form>
+
+      <div class="grist-container">
+        <div class="grist">
+          <data-grist
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .config=${this.config}
+            .fetchHandler=${this.fetchHandler.bind(this)}
+          ></data-grist>
+        </div>
+      </div>
+
+      <div class="button-container">
+        <mwc-button @click=${this._closePopup}>${i18next.t('button.close')}</mwc-button>
+        <mwc-button raised @click=${this._handlePrint}>${i18next.t('button.print')}</mwc-button>
+      </div>
+
+      <iframe id="print-iframe" style="display: none;"></iframe>
+    `
+  }
+}
+
+window.customElements.define('packing-label-history-popup', PackingLabelHistoryPopup)