@things-factory/operato-wms 3.7.2 → 3.7.7

package/client/pages/manifest/dispatcher-verification-popup.js

@@ -0,0 +1,86 @@
+import '@things-factory/grist-ui'
+
+import { css, html, LitElement } from 'lit-element'
+
+import { SingleColumnFormStyles } from '@things-factory/form-ui'
+import { i18next, localize } from '@things-factory/i18n-base'
+
+class DispatcherVerificationPopup extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      SingleColumnFormStyles,
+      css`
+        :host {
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--main-section-background-color);
+        }
+        .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);
+        }
+      `
+    ]
+  }
+
+  get dispatchmentForm() {
+    return this.shadowRoot.querySelector('form[name=dispatchmentForm]')
+  }
+
+  render() {
+    return html`
+      <form name="dispatchmentForm" class="single-column-form">
+        <fieldset>
+          <label>${i18next.t('label.dispatcher_name')}</label>
+          <input name="dispatcherName" required />
+
+          <label>${i18next.t('label.dispatcher_identity')}</label>
+          <input name="dispatcherIdentity" required />
+        </fieldset>
+      </form>
+      <div class="button-container">
+        <mwc-button
+          @click="${this._updateManifestDispatchement.bind(this)}"
+          label="${`${i18next.t('button.confirm')}`}"
+          raised
+        ></mwc-button>
+      </div>
+    `
+  }
+
+  _updateManifestDispatchement() {
+    this._validateDispatchmentUpdate()
+    let dispatchment = this._serializeForm(this.dispatchmentForm)
+    this.dispatchEvent(
+      new CustomEvent('dispatch', {
+        detail: {
+          dispatcherName: dispatchment.dispatcherName,
+          dispatcherIdentity: dispatchment.dispatcherIdentity
+        }
+      })
+    )
+    history.back()
+  }
+
+  _serializeForm(form) {
+    let obj = {}
+    Array.from(form.querySelectorAll('input')).forEach(field => {
+      if (!field.hasAttribute('hidden') && field.value) {
+        obj[field.name] = field.type === 'checkbox' ? field.checked : field.value
+      }
+    })
+
+    return obj
+  }
+
+  _validateDispatchmentUpdate() {
+    this.dispatchmentForm.checkValidity()
+  }
+}
+
+window.customElements.define('dispatcher-verification-popup', DispatcherVerificationPopup)

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)