@things-factory/operato-wms 5.0.13 → 6.0.0-alpha.1

package/client/pages/manifest/loading-manifest-detail.js

@@ -1,3 +1,4 @@
+import '@things-factory/barcode-ui'
 import '@things-factory/grist-ui'
 import './dispatcher-verification-popup'
 
@@ -8,11 +9,11 @@ import { GhostPrint } from '@operato/ghost-print'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { openPopup } from '@things-factory/layout-base'
-import { client, navigate, PageView } from '@things-factory/shell'
+import { client, navigate, PageView, CustomAlert } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
 import { isMobileDevice } from '@things-factory/utils'
 
-import { MANIFEST_STATUS } from '../constants'
+import { MANIFEST_STATUS, ORDER_STATUS } from '../constants'
 
 class LoadingManifestDetail extends localize(i18next)(PageView) {
   static get styles() {
@@ -64,6 +65,21 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
         h2 + data-grist {
           padding-top: var(--grist-title-with-grid-padding);
         }
+
+        .add[collapsable] {
+          height: 10%;
+          margin-top: -5px;
+        }
+        .add[collapsable][collapsed] {
+          display: none;
+        }
+        h2.add-title {
+          padding-bottom: 0px;
+        }
+
+        [hidden] {
+          display: none;
+        }
       `
     ]
   }
@@ -73,10 +89,21 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
       shippingData: Object,
       shippingGristConfig: Object,
       _manifestNo: String,
-      _status: String
+      _status: String,
+      _removeOrders: Array,
+      _selectedStatus: String,
+      _addExpanded: Boolean
     }
   }
 
+  get trackingNoInput() {
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=trackingNo]')?.shadowRoot.querySelector('input')
+  }
+
+  _focusOnTrackingNoInput() {
+    setTimeout(() => this.trackingNoInput.focus(), 50)
+  }
+
   get context() {
     var actions = [
       {
@@ -91,12 +118,19 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
       }
     ]
 
-    if (this._status == MANIFEST_STATUS.OPEN.value) {
-      actions.push({
-        title: i18next.t('button.dispatch'),
-        action: this._openDispatcherVerificationPopup.bind(this),
-        ...CommonButtonStyles.load
-      })
+    if (this._status == MANIFEST_STATUS.OPEN.value || this._status == MANIFEST_STATUS.IN_QUEUE.value) {
+      actions.push(
+        {
+          title: i18next.t('button.update'),
+          action: this._updateManifestDetails.bind(this),
+          ...CommonButtonStyles.add
+        },
+        {
+          title: i18next.t('button.dispatch'),
+          action: this._openDispatcherVerificationPopup.bind(this),
+          ...CommonButtonStyles.load
+        }
+      )
     }
 
     return {
@@ -105,6 +139,10 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
     }
   }
 
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
   get manifestForm() {
     return this.shadowRoot.querySelector('form[name=manifest]')
   }
@@ -131,43 +169,128 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
             <input name="totalTrackingNo" readonly />
 
             <label>${i18next.t('label.status')}</label>
-            <input name="status" readonly />
+            <select
+              name="status"
+              ?disabled=${this._status == MANIFEST_STATUS.CLOSED.value}
+              @change="${e => {
+                this._selectedStatus = e.currentTarget.value
+              }}"
+            >
+              ${Object.keys(MANIFEST_STATUS).map(key => {
+                const status = MANIFEST_STATUS[key]
+                if (this._status == MANIFEST_STATUS.OPEN.value || this._status == MANIFEST_STATUS.IN_QUEUE.value) {
+                  if (status.name !== 'closed') {
+                    return html` <option value="${status.value}">${i18next.t(`label.${status.name}`)}</option> `
+                  }
+                } else {
+                  if (status.name == 'closed') {
+                    return html` <option value="${status.value}">${i18next.t(`label.${status.name}`)}</option> `
+                  }
+                }
+              })}
+            </select>
           </fieldset>
         </form>
       </div>
 
       <div class="container">
         <div class="grist">
-          <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.manifest_items')}</h2>
+          <h2>
+            <mwc-icon>list_alt</mwc-icon>${i18next.t('title.manifest_items')}
+            ${this._showReset ? html`<mwc-icon @click=${e => this.dataGrist.fetch()}>sync</mwc-icon>` : ''}
+          </h2>
 
           <data-grist
             .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
             .config=${this.shippingGristConfig}
             .data=${this.shippingData}
+            .fetchHandler=${this._fetchManifestDetail.bind(this)}
           ></data-grist>
+
+          ${this._status !== MANIFEST_STATUS.CLOSED.value
+            ? html`
+                <h2
+                  @click="${e => {
+                    this._addExpanded = !this._addExpanded
+                    this._focusOnTrackingNoInput()
+                  }}"
+                >
+                  <mwc-icon>list_alt</mwc-icon>${i18next.t('title.add_tracking_no')}<mwc-icon
+                    >${this._addExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
+                  >
+                </h2>
+
+                <div class="add" collapsable ?collapsed=${!this._addExpanded}>
+                  <form name="addTrackingNo" class="multi-column-form">
+                    <fieldset>
+                      <label>${i18next.t('label.scan_tracking_no')}</label>
+                      <barcode-scanable-input
+                        name="trackingNo"
+                        custom-input
+                        @keypress="${e => {
+                          if (e.keyCode === 13) {
+                            e.preventDefault()
+                            if (this.trackingNoInput.value) {
+                              this._addTrackingNo(this.trackingNoInput.value)
+                            }
+                          }
+                        }}"
+                      ></barcode-scanable-input>
+                    </fieldset>
+                  </form>
+                </div>
+              `
+            : ''}
         </div>
       </div>
     `
   }
 
+  constructor() {
+    super()
+    this._removeOrders = []
+    this._addExpanded = false
+  }
+
   pageInitialized() {
     this.shippingGristConfig = {
       list: { fields: ['refNo', 'trackingNo', 'dispatchmentStatus'] },
       pagination: { infinite: true },
+      rows: {
+        appendable: false
+      },
       columns: [
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'close',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              try {
+                if (this._status && this._status == MANIFEST_STATUS.CLOSED.value) return
+                const newData = data.records.filter((_, idx) => idx !== rowIndex)
+                this.shippingData = { ...this.shippingData, records: newData }
+                this._removeOrders.push(record.refNo)
+                this._showReset = true
+              } catch (e) {}
+            }
+          }
+        },
         { type: 'gutter', gutterName: 'sequence' },
         {
           type: 'string',
-          name: 'refNo',
+          name: 'trackingNo',
           label: true,
-          header: i18next.t('field.order_no'),
+          header: i18next.t('field.tracking_no'),
+          sortable: true,
           width: 200
         },
         {
           type: 'string',
-          name: 'trackingNo',
+          name: 'refNo',
           label: true,
-          header: i18next.t('field.tracking_no'),
+          header: i18next.t('field.order_no'),
+          sortable: true,
           width: 200
         },
         {
@@ -175,6 +298,7 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
           name: 'attentionTo',
           label: true,
           header: i18next.t('field.delivery_to'),
+          sortable: true,
           width: 150
         },
         {
@@ -182,6 +306,7 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
           name: 'phone',
           label: true,
           header: i18next.t('field.phone'),
+          sortable: true,
           width: 150
         },
         {
@@ -189,27 +314,23 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
           name: 'deliveryAddress',
           label: true,
           header: i18next.t('field.delivery_address'),
+          sortable: true,
           width: 250
         },
         {
           type: 'string',
-          name: 'postalCode',
+          name: 'orderStatus',
           label: true,
-          header: i18next.t('field.postal_code'),
-          width: 120
-        },
-        {
-          type: 'string',
-          name: 'city',
-          label: true,
-          header: i18next.t('field.city'),
-          width: 120
+          header: i18next.t('field.order_status'),
+          sortable: true,
+          width: 150
         },
         {
           type: 'string',
-          name: 'dispatchmentStatus',
+          name: 'orderRemark',
           label: true,
-          header: i18next.t('field.status'),
+          header: i18next.t('field.order_remark'),
+          sortable: true,
           width: 150
         }
       ]
@@ -219,18 +340,18 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
   async pageUpdated(changes, lifecycle, before) {
     if (this.active) {
       this._manifestNo = changes.resourceId || this._manifestNo || ''
-      await this._fetchManifestDetail()
+      await this.dataGrist.fetch()
       this.updateContext()
     }
   }
 
-  async _fetchManifestDetail() {
+  async _fetchManifestDetail({ page, limit, sorters = [] }) {
     if (!this._manifestNo) return
 
     const response = await client.query({
       query: gql`
-        query manifest($name: String!) {
-          manifest(name: $name) {
+        query manifest($name: String!, $sortings: [Sorting!]) {
+          manifest(name: $name, sortings: $sortings) {
             id
             name
             dispatchedAt
@@ -247,11 +368,13 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
               city
               refNo
               dispatchmentStatus
+              orderStatus
+              orderRemark
             }
           }
         }
       `,
-      variables: { name: this._manifestNo }
+      variables: { name: this._manifestNo, sortings: sorters }
     })
 
     if (!response.errors) {
@@ -259,25 +382,105 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
 
       this._status = manifest.status
       this._fillupForm(this.manifestForm, { ...manifest, totalTrackingNo: manifest.trackingNos?.length })
-      this.shippingData = { records: manifest.trackingNos }
+      this.shippingData = {
+        manifestId: manifest.id,
+        shippingProvider: manifest.shippingProvider,
+        records: manifest.trackingNos
+      }
+      this._removeOrders = []
+      this._showReset = false
       this.updateContext()
     }
   }
 
-  _openDispatcherVerificationPopup() {
-    openPopup(
-      html`
-        <dispatcher-verification-popup
-          @dispatch="${e => {
-            this._dispatchManifest(e.detail)
-          }}"
-        ></dispatcher-verification-popup>
+  async _updateManifestDetails() {
+    if ((!this._selectedStatus || this._selectedStatus == this._status) && this._removeOrders?.length == 0) {
+      return
+    }
+    const response = await client.mutate({
+      mutation: gql`
+        mutation updateManifest(
+          $manifestId: String
+          $status: String
+          $shippingProvider: String
+          $removeOrders: [String!]
+        ) {
+          updateManifest(
+            manifestId: $manifestId
+            status: $status
+            shippingProvider: $shippingProvider
+            removeOrders: $removeOrders
+          )
+        }
       `,
-      {
-        size: 'medium',
-        title: `${i18next.t('title.dispatcher_verification')}`
+      variables: {
+        manifestId: this.shippingData.manifestId,
+        status: this._selectedStatus,
+        shippingProvider: this.shippingData.shippingProvider,
+        removeOrders: this._removeOrders
       }
-    )
+    })
+    if (!response.errors) {
+      if (!response.data.updateManifest) {
+        navigate('loading_manifest_list')
+        this._showToast({ message: i18next.t('text.manifest_has_been_deleted') })
+      } else {
+        await this.dataGrist.fetch()
+        this._showToast({ message: i18next.t('text.manifest_has_been_updated') })
+      }
+    }
+  }
+
+  async _openDispatcherVerificationPopup() {
+    let answer = await this._validateOrderStatus()
+
+    if (answer) {
+      openPopup(
+        html`
+          <dispatcher-verification-popup
+            @dispatch="${e => {
+              this._dispatchManifest(e.detail)
+            }}"
+          ></dispatcher-verification-popup>
+        `,
+        {
+          size: 'small',
+          title: `${i18next.t('title.dispatcher_verification')}`
+        }
+      )
+    }
+  }
+
+  async _addTrackingNo() {
+    let answer = await this._checkReleaseOrderStatus()
+
+    if (answer) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation addTrackingNo($manifestId: String, $trackingNo: String, $shippingProvider: String) {
+            addTrackingNo(manifestId: $manifestId, trackingNo: $trackingNo, shippingProvider: $shippingProvider)
+          }
+        `,
+        variables: {
+          manifestId: this.shippingData.manifestId,
+          trackingNo: this.trackingNoInput.value.trim(),
+          shippingProvider: this.shippingData.shippingProvider
+        }
+      })
+
+      if (!response.errors) {
+        await this.dataGrist.fetch()
+        this.trackingNoInput.value = ''
+        this._focusOnTrackingNoInput()
+        this._showToast({ message: i18next.t('text.tracking_no_added_successfully') })
+      } else {
+        let errorMessage = response.errors[0].message
+        if (errorMessage.includes('amp;')) {
+          response.errors[0].message = errorMessage.replace('amp;', '')
+          this._showToast({ message: response.errors[0].message })
+        }
+      }
+    }
   }
 
   async _dispatchManifest(patch) {
@@ -294,11 +497,73 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
     })
 
     if (!response.errors) {
-      await this._fetchManifestDetail()
+      await this.dataGrist.fetch()
       this._showToast({ message: i18next.t('text.manifest_has_been_dispatched_and_closed') })
     }
   }
 
+  async _validateOrderStatus() {
+    let foundCancelOrder = this.shippingData.records.filter(
+      itm => itm.orderStatus == ORDER_STATUS.PENDING_CANCEL || itm.orderStatus == ORDER_STATUS.CANCELLED
+    )
+    if (foundCancelOrder?.length > 0) {
+      const answer = await CustomAlert({
+        title: i18next.t('title.do_you_wish_to_proceed'),
+        text: i18next.t('text.parcels_are_found_with_cancelled_or_pending_cancelled_status'),
+        confirmButton: { text: i18next.t('button.proceed') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+
+      if (answer) {
+        if (!answer?.value) {
+          return false
+        } else {
+          return true
+        }
+      }
+    }
+
+    return true
+  }
+
+  async _checkReleaseOrderStatus() {
+    const response = await client.query({
+      query: gql`
+        query releaseGood($trackingNo: String) {
+          releaseGood(trackingNo: $trackingNo) {
+            id
+            name
+            status
+          }
+        }
+      `,
+      variables: { trackingNo: this.trackingNoInput.value.trim() }
+    })
+
+    if (!response.error) {
+      let releaseGood = response.data.releaseGood
+
+      if (releaseGood?.status === ORDER_STATUS.CANCELLED || releaseGood?.status === ORDER_STATUS.PENDING_CANCEL) {
+        let answer = await CustomAlert({
+          type: 'warning',
+          title: i18next.t('title.order(s)_is_at_pending_cancelled_or_cancelled'),
+          text: i18next.t('text.do_you_want_to_ignore'),
+          confirmButton: { text: i18next.t('button.ignore') },
+          cancelButton: { text: i18next.t('button.cancel') }
+        })
+
+        if (!answer?.value) {
+          this._focusOnTrackingNoInput()
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return true
+      }
+    }
+  }
+
   _printManifest() {
     GhostPrint.print({
       src: `/view_manifest/${this._manifestNo}`,

package/client/pages/manifest/loading-manifest-list.js

@@ -37,7 +37,8 @@ class LoadingManifestList extends localize(i18next)(PageView) {
     return {
       _searchFields: Array,
       config: Object,
-      data: Object
+      data: Object,
+      _shippingProviderList: Array
     }
   }
 
@@ -85,6 +86,11 @@ class LoadingManifestList extends localize(i18next)(PageView) {
     }
   }
 
+  constructor() {
+    super()
+    this._shippingProviderList = []
+  }
+
   async pageInitialized() {
     const manifestStatus = await getCodeByName('MANIFEST_STATUS')
     this._searchFields = [
@@ -94,9 +100,30 @@ class LoadingManifestList extends localize(i18next)(PageView) {
         type: 'text',
         props: { searchOper: 'i_like' }
       },
+      {
+        label: i18next.t('field.order_info'),
+        name: 'orderInfo',
+        type: 'text',
+        props: { searchOper: 'eq' }
+      },
       {
         label: i18next.t('field.transporter'),
         name: 'shippingProvider',
+        type: 'select',
+        options: [
+          { value: '' },
+          ...this._shippingProviderList.map(sp => {
+            return {
+              name: sp,
+              value: sp
+            }
+          })
+        ],
+        props: { searchOper: 'eq' }
+      },
+      {
+        label: i18next.t('field.tracking_no'),
+        name: 'trackingNo',
         type: 'text',
         props: { searchOper: 'i_like' }
       },
@@ -105,11 +132,12 @@ class LoadingManifestList extends localize(i18next)(PageView) {
         name: 'fromDate',
         type: 'date',
         props: {
-          searchOper: 'eq'
+          searchOper: 'eq',
+          max: new Date().toISOString().split('T')[0]
         },
         value: (() => {
           let date = new Date()
-          date.setMonth(date.getMonth() - 6)
+          date.setMonth(date.getMonth() - 1)
           return date.toISOString().split('T')[0]
         })(),
         handlers: { change: this._modifyDateRange.bind(this) }
@@ -122,8 +150,13 @@ class LoadingManifestList extends localize(i18next)(PageView) {
           searchOper: 'eq',
           min: (() => {
             let date = new Date()
-            date.setMonth(date.getMonth() - 6)
+            date.setMonth(date.getMonth() - 1)
             return date.toISOString().split('T')[0]
+          })(),
+          max: (() => {
+            var max = new Date()
+            max.setMonth(max.getMonth())
+            return max.toISOString().split('T')[0]
           })()
         },
         value: new Date().toISOString().split('T')[0]
@@ -147,7 +180,16 @@ class LoadingManifestList extends localize(i18next)(PageView) {
 
     this.config = {
       list: {
-        fields: ['name', 'shippingProvider', 'dispatchedAt', 'status', 'createdAt', 'updatedAt', 'creator']
+        fields: [
+          'name',
+          'shippingProvider',
+          'status',
+          'totalTrackingNo',
+          'dispatchedAt',
+          'createdAt',
+          'updatedAt',
+          'creator'
+        ]
       },
       rows: { appendable: false, selectable: { multiple: true } },
       columns: [
@@ -180,20 +222,27 @@ class LoadingManifestList extends localize(i18next)(PageView) {
           width: 150
         },
         {
-          type: 'datetime',
-          name: 'dispatchedAt',
-          header: i18next.t('field.dispatch_at'),
+          type: 'string',
+          name: 'status',
+          header: i18next.t('field.status'),
           label: true,
           sortable: true,
           width: 150
         },
         {
-          type: 'string',
-          name: 'status',
-          header: i18next.t('field.status'),
+          type: 'int',
+          name: 'totalTrackingNo',
+          header: i18next.t('field.total_tracking_no'),
+          label: true,
+          width: 150
+        },
+        {
+          type: 'datetime',
+          name: 'dispatchedAt',
+          header: i18next.t('field.dispatch_at'),
           label: true,
           sortable: true,
-          width: 170
+          width: 150
         },
         {
           type: 'datetime',
@@ -226,6 +275,7 @@ class LoadingManifestList extends localize(i18next)(PageView) {
               shippingProvider
               dispatchedAt
               status
+              totalTrackingNo
               createdAt
               creator {
                 id
@@ -241,6 +291,22 @@ class LoadingManifestList extends localize(i18next)(PageView) {
     })
 
     if (!response.errors) {
+      let shippingProviders = response.data.manifests.items.map(itm => itm.shippingProvider)
+      shippingProviders = [...new Set(shippingProviders)]
+
+      if (this._shippingProviderList.length < shippingProviders.length) {
+        this._shippingProviderList = shippingProviders
+        this._searchFields.filter(x => x.name == 'shippingProvider')[0].options = [
+          { value: '' },
+          ...this._shippingProviderList.map(sp => {
+            return {
+              name: sp,
+              value: sp
+            }
+          })
+        ]
+        this._searchFields = [...this._searchFields]
+      }
       return {
         total: response.data.manifests.total || 0,
         records: response.data.manifests.items || []
@@ -250,16 +316,23 @@ class LoadingManifestList extends localize(i18next)(PageView) {
 
   _modifyDateRange(e) {
     const fromDate = e.currentTarget.value
-
+    if (fromDate == '') return
     if (this._toDateInput.value < fromDate) this._toDateInput.value = fromDate
 
     let min = new Date(fromDate)
+    let max = new Date(fromDate)
+    max.setMonth(max.getMonth() + 1)
+
     let today = new Date()
     today.setHours(0, 0, 0, 0)
 
     min = min.toISOString().split('T')[0]
+    max = max.toISOString().split('T')[0]
+
+    if (this._toDateInput.value > max) this._toDateInput.value = max
 
     this._toDateInput.min = min
+    this._toDateInput.max = max
   }
 
   get _columns() {