@things-factory/operato-wms 3.7.6 → 3.7.7

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

@@ -0,0 +1,345 @@
+import '@things-factory/grist-ui'
+import './dispatcher-verification-popup'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit-element'
+
+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 { CommonButtonStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
+import { MANIFEST_STATUS } from '../constants'
+
+class LoadingManifestDetail extends localize(i18next)(PageView) {
+  static get styles() {
+    return [
+      MultiColumnFormStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow-x: auto;
+        }
+        .container {
+          flex: 1;
+          display: flex;
+          overflow-y: auto;
+          min-height: 50vh;
+        }
+        .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;
+        }
+        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);
+          font: var(--grist-title-font);
+          color: var(--secondary-color);
+        }
+
+        .grist h2 mwc-icon {
+          vertical-align: middle;
+          margin: var(--grist-title-icon-margin);
+          font-size: var(--grist-title-icon-size);
+          color: var(--grist-title-icon-color);
+        }
+
+        h2 + data-grist {
+          padding-top: var(--grist-title-with-grid-padding);
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      shippingData: Object,
+      shippingGristConfig: Object,
+      _manifestNo: String,
+      _status: String
+    }
+  }
+
+  get context() {
+    var actions = [
+      {
+        title: i18next.t('button.back'),
+        action: () => navigate('loading_manifest_list'),
+        ...CommonButtonStyles.back
+      },
+      {
+        title: i18next.t('button.print'),
+        action: this._printManifest.bind(this),
+        ...CommonButtonStyles.label
+      }
+    ]
+
+    if (this._status == MANIFEST_STATUS.OPEN.value) {
+      actions.push({
+        title: i18next.t('button.dispatch'),
+        action: this._openDispatcherVerificationPopup.bind(this),
+        ...CommonButtonStyles.load
+      })
+    }
+
+    return {
+      title: i18next.t('title.manifest'),
+      actions
+    }
+  }
+
+  get manifestForm() {
+    return this.shadowRoot.querySelector('form[name=manifest]')
+  }
+
+  render() {
+    return html`
+      <div class="form-container">
+        <form name="manifest" class="multi-column-form">
+          <fieldset>
+            <legend>${i18next.t('title.manifest_no')}: ${this._manifestNo}</legend>
+            <label>${i18next.t('label.shipping_provider')}</label>
+            <input name="shippingProvider" readonly />
+
+            <label>${i18next.t('label.dispatcher_name')}</label>
+            <input name="dispatcherName" readonly />
+
+            <label>${i18next.t('label.dispatcher_identity')}</label>
+            <input name="dispatcherIdentity" readonly />
+
+            <label>${i18next.t('label.dispatch_at')}</label>
+            <input name="dispatchedAt" type="datetime-local" readonly />
+
+            <label>${i18next.t('label.total_tracking_no')}</label>
+            <input name="totalTrackingNo" readonly />
+
+            <label>${i18next.t('label.status')}</label>
+            <input name="status" readonly />
+          </fieldset>
+        </form>
+      </div>
+
+      <div class="container">
+        <div class="grist">
+          <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.manifest_items')}</h2>
+
+          <data-grist
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .config=${this.shippingGristConfig}
+            .data=${this.shippingData}
+          ></data-grist>
+        </div>
+      </div>
+    `
+  }
+
+  pageInitialized() {
+    this.shippingGristConfig = {
+      list: { fields: ['refNo', 'trackingNo', 'dispatchmentStatus'] },
+      pagination: { infinite: true },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'string',
+          name: 'refNo',
+          label: true,
+          header: i18next.t('field.order_no'),
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'trackingNo',
+          label: true,
+          header: i18next.t('field.tracking_no'),
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'attentionTo',
+          label: true,
+          header: i18next.t('field.delivery_to'),
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'phone',
+          label: true,
+          header: i18next.t('field.phone'),
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'deliveryAddress',
+          label: true,
+          header: i18next.t('field.delivery_address'),
+          width: 250
+        },
+        {
+          type: 'string',
+          name: 'postalCode',
+          label: true,
+          header: i18next.t('field.postal_code'),
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'city',
+          label: true,
+          header: i18next.t('field.city'),
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'dispatchmentStatus',
+          label: true,
+          header: i18next.t('field.status'),
+          width: 150
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes, lifecycle, before) {
+    if (this.active) {
+      this._manifestNo = changes.resourceId || this._manifestNo || ''
+      await this._fetchManifestDetail()
+      this.updateContext()
+    }
+  }
+
+  async _fetchManifestDetail() {
+    if (!this._manifestNo) return
+
+    const response = await client.query({
+      query: gql`
+        query manifest($name: String!) {
+          manifest(name: $name) {
+            id
+            name
+            dispatchedAt
+            dispatcherName
+            dispatcherIdentity
+            status
+            shippingProvider
+            trackingNos {
+              trackingNo
+              deliveryAddress
+              attentionTo
+              phone
+              postalCode
+              city
+              refNo
+              dispatchmentStatus
+            }
+          }
+        }
+      `,
+      variables: { name: this._manifestNo }
+    })
+
+    if (!response.errors) {
+      const manifest = response.data.manifest
+
+      this._status = manifest.status
+      this._fillupForm(this.manifestForm, { ...manifest, totalTrackingNo: manifest.trackingNos?.length })
+      this.shippingData = { records: manifest.trackingNos }
+      this.updateContext()
+    }
+  }
+
+  _openDispatcherVerificationPopup() {
+    openPopup(
+      html`
+        <dispatcher-verification-popup
+          @dispatch="${e => {
+            this._dispatchManifest(e.detail)
+          }}"
+        ></dispatcher-verification-popup>
+      `,
+      {
+        size: 'medium',
+        title: `${i18next.t('title.dispatcher_verification')}`
+      }
+    )
+  }
+
+  async _dispatchManifest(patch) {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation dispatchManifest($name: String!, $patch: ManifestPatch!) {
+          dispatchManifest(name: $name, patch: $patch) {
+            id
+            name
+          }
+        }
+      `,
+      variables: { name: this._manifestNo, patch }
+    })
+
+    if (!response.errors) {
+      await this._fetchManifestDetail()
+      this._showToast({ message: i18next.t('text.manifest_has_been_dispatched_and_closed') })
+    }
+  }
+
+  _printManifest() {
+    GhostPrint.print({
+      src: `/view_manifest/${this._manifestNo}`,
+      pending: 1000,
+      onfinish: () => {
+        this._showToast({ message: i18next.t('text.document_has_been_generated') })
+      }
+    })
+  }
+
+  _fillupForm(form, data) {
+    for (let key in data) {
+      Array.from(form.querySelectorAll('input, textarea, select')).forEach(field => {
+        if (field.name === key && field.type === 'checkbox') {
+          field.checked = data[key]
+        } else if (field.name === key && field.type === 'datetime-local') {
+          if (data[key]) {
+            const datetime = Number(data[key])
+            const timezoneOffset = new Date(datetime).getTimezoneOffset() * 60000
+            field.value = new Date(datetime - timezoneOffset).toISOString().slice(0, -1)
+          } else {
+            field.value = data[key]
+          }
+        } else if (field.name === key) {
+          field.value = data[key]
+        }
+      })
+    }
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message,
+          option: { timer: 1000 }
+        }
+      })
+    )
+  }
+}
+
+customElements.define('loading-manifest-detail', LoadingManifestDetail)

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

@@ -0,0 +1,305 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit-element'
+
+import { getCodeByName } from '@things-factory/code-base'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, navigate, PageView } from '@things-factory/shell'
+import { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
+class LoadingManifestList extends localize(i18next)(PageView) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        search-form {
+          overflow: visible;
+        }
+
+        data-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _searchFields: Array,
+      config: Object,
+      data: Object
+    }
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.manifest_list'),
+      exportable: {
+        name: i18next.t('title.manifest_list'),
+        data: this._exportableData.bind(this)
+      }
+    }
+  }
+
+  get _fromDateInput() {
+    return this.searchForm.shadowRoot.querySelector('input[name=fromDate]')
+  }
+
+  get _toDateInput() {
+    return this.searchForm.shadowRoot.querySelector('input[name=toDate]')
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  render() {
+    return html`
+      <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
+
+      <data-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .fetchHandler="${this.fetchHandler.bind(this)}"
+      ></data-grist>
+    `
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataGrist.fetch()
+    }
+  }
+
+  async pageInitialized() {
+    const manifestStatus = await getCodeByName('MANIFEST_STATUS')
+    this._searchFields = [
+      {
+        label: i18next.t('field.manifest_no'),
+        name: 'name',
+        type: 'text',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.shipping_provider'),
+        name: 'shippingProvider',
+        type: 'text',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.from'),
+        name: 'fromDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq'
+        },
+        value: (() => {
+          let date = new Date()
+          date.setMonth(date.getMonth() - 6)
+          return date.toISOString().split('T')[0]
+        })(),
+        handlers: { change: this._modifyDateRange.bind(this) }
+      },
+      {
+        label: i18next.t('field.to'),
+        name: 'toDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq',
+          min: (() => {
+            let date = new Date()
+            date.setMonth(date.getMonth() - 6)
+            return date.toISOString().split('T')[0]
+          })()
+        },
+        value: new Date().toISOString().split('T')[0]
+      },
+      {
+        label: i18next.t('field.status'),
+        name: 'status',
+        type: 'select',
+        options: [
+          { value: '' },
+          ...manifestStatus.map(status => {
+            return {
+              name: i18next.t(`label.${status.description}`),
+              value: status.name
+            }
+          })
+        ],
+        props: { searchOper: 'eq' }
+      }
+    ]
+
+    this.config = {
+      list: {
+        fields: ['name', 'shippingProvider', 'dispatchedAt', 'status', 'createdAt', 'updatedAt', 'creator']
+      },
+      rows: { appendable: false, selectable: { multiple: true } },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'reorder',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              navigate(`loading_manifest_detail/${record.name}`)
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.manifest_no'),
+          label: true,
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'string',
+          name: 'shippingProvider',
+          header: i18next.t('field.shipping_provider'),
+          label: true,
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'datetime',
+          name: 'dispatchedAt',
+          header: i18next.t('field.dispatch_at'),
+          label: true,
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'status',
+          header: i18next.t('field.status'),
+          label: true,
+          sortable: true,
+          width: 170
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: i18next.t('field.created_at'),
+          label: true,
+          sortable: true,
+          width: 160
+        },
+        {
+          type: 'object',
+          name: 'creator',
+          header: i18next.t('field.created_by'),
+          label: true,
+          sortable: true,
+          width: 200
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [{ name: 'createdAt', desc: true }] }) {
+    const response = await client.query({
+      query: gql`
+        query manifests($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+          manifests(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              shippingProvider
+              dispatchedAt
+              status
+              createdAt
+              creator {
+                id
+                name
+                description
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: { filters: this.searchForm.queryFilters, pagination: { page, limit }, sortings: sorters }
+    })
+
+    if (!response.errors) {
+      return {
+        total: response.data.manifests.total || 0,
+        records: response.data.manifests.items || []
+      }
+    }
+  }
+
+  _modifyDateRange(e) {
+    const fromDate = e.currentTarget.value
+
+    if (this._toDateInput.value < fromDate) this._toDateInput.value = fromDate
+
+    let min = new Date(fromDate)
+    let today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    min = min.toISOString().split('T')[0]
+
+    this._toDateInput.min = min
+  }
+
+  get _columns() {
+    return this.config.columns
+  }
+
+  async _exportableData() {
+    try {
+      let data = []
+
+      var headerSetting = [
+        { header: i18next.t('field.manifest_no'), key: 'name', width: 25, type: 'string' },
+        { header: i18next.t('field.shipping_provider'), key: 'shippingProvider', width: 25, type: 'string' },
+        { header: i18next.t('field.dispatch_at'), key: 'dispatchedAt', width: 25, type: 'date' },
+        { header: i18next.t('field.status'), key: 'status', width: 25, type: 'string' },
+        { header: i18next.t('field.created_at'), key: 'createdAt', width: 30, type: 'date' },
+        { header: i18next.t('field.created_by'), key: 'createdBy', width: 25, type: 'string' }
+      ]
+
+      if (this.dataGrist.selected && this.dataGrist.selected.length > 0) {
+        data = this.dataGrist.selected.map(record => {
+          return {
+            ...record,
+            createdBy: record.creator.name
+          }
+        })
+      } else {
+        data = (await this.fetchHandler({ page: 1, limit: 9999999 })).records.map(record => {
+          return {
+            ...record,
+            createdBy: record.creator.name
+          }
+        })
+      }
+
+      return { header: headerSetting, data }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+}
+
+customElements.define('loading-manifest-list', LoadingManifestList)