@things-factory/integration-lmd 4.3.176 → 4.3.186

package/client/pages/integration-lmd-detail.js

@@ -0,0 +1,459 @@
+import { MultiColumnFormStyles } from '@things-factory/form-ui'
+import { client, CustomAlert, gqlContext, navigate, PageView } from '@things-factory/shell'
+import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
+import '@things-factory/grist-ui'
+import gql from 'graphql-tag'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { css, html, LitElement } from 'lit'
+import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
+import { buildDomainContext } from './integration-lmd'
+
+class IntegrationLmdDetail extends localize(i18next)(PageView) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      MultiColumnFormStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+        .form-container {
+          display: flex;
+        }
+
+        .form-container > form {
+          flex: 1;
+        }
+
+        .container {
+          flex: 1;
+          display: flex;
+          overflow: hidden;
+          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);
+        }
+
+        [hidden] {
+          display: none;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _searchFields: Array,
+      config: Object,
+      _data: Object
+    }
+  }
+
+  constructor() {
+    super()
+    this._data = { lmdSettingData: { records: [] } }
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.last_mile_delivery_platform_detail'),
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this._updateLastMileDelivery.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: i18next.t('button.back'),
+          action: this._navigateToList.bind(this),
+          ...CommonButtonStyles.back
+        }
+      ],
+      help: 'page/integration-lmd-detail'
+    }
+  }
+
+  get _lmdSettingForm() {
+    return this.shadowRoot.querySelector('form[name=integrationLmdDetails]')
+  }
+
+  get _lmdSettingGrist() {
+    return this.shadowRoot.querySelector('data-grist#lmd-setting-grist')
+  }
+
+  render() {
+    const PLATFORMS = [
+      { name: 'NONE', value: 'NONE' },
+      { name: 'eTRax', value: 'ETRAX' },
+      { name: 'GDex MY', value: 'GDEX_MY' },
+      { name: 'JnT MY', value: 'JNT_MY' },
+      { name: 'JnT SG', value: 'JNT_SG' },
+      { name: 'DHL MY', value: 'DHL_MY' },
+      { name: 'Airspeed', value: 'AIRSPEED' }
+    ]
+
+    return html`
+      <div class="form-container">
+        <form name="integrationLmdDetails" class="multi-column-form">
+          <fieldset>
+            <legend>${i18next.t('title.last_mile_delivery_platform_detail')}${this?._data?.id ? '' : ': NEW'}</legend>
+
+            <label>${i18next.t('label.name')}</label>
+            <input name="name" required .value="${this?._data?.name}" />
+
+            <label>${i18next.t('label.description')}</label>
+            <input name="description" .value="${this?._data?.description}" />
+
+            <label>${i18next.t('label.platform')}</label>
+            <select
+              name="platform"
+              @change=${e => {
+                this._data.platform = e.currentTarget.value
+              }}
+            >
+              ${Object.keys(PLATFORMS).map(
+                key =>
+                  html`
+                    <option value="${PLATFORMS[key].value}" ?selected=${this?._data?.platform === PLATFORMS[key].value}>
+                      ${PLATFORMS[key].name}
+                    </option>
+                  `
+              )}
+            </select>
+
+            <label>${i18next.t('label.client_id')}</label>
+            <input name="clientId" .value="${this?._data?.clientId}" />
+
+            <label>${i18next.t('label.secret_key')}</label>
+            <input name="secretKey" type="password" .value="${this?._data?.secretKey}" />
+
+            <label>${i18next.t('label.rank')}</label>
+            <input name="rank" required type="number" .value="${this?._data?.rank}" />
+
+            <label>${i18next.t('label.pickup_account_id')}</label>
+            <input name="pickupAccountId" .value="${this?._data?.pickupAccountId}" />
+
+            <label>${i18next.t('label.sold_to_account_id')}</label>
+            <input name="soldToAccountId" .value="${this?._data?.soldToAccountId}" />
+
+            <label>${i18next.t('label.access_token')}</label>
+            <input name="accessToken" .value="${this?._data?.accessToken}" />
+          </fieldset>
+        </form>
+      </div>
+      <div class="container">
+        <div class="grist">
+          <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.detail_settings')}</h2>
+
+          <data-grist
+            id="lmd-setting-grist"
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .data=${this._data.lmdSettingData}
+            .config=${this.config}
+          ></data-grist>
+        </div>
+      </div>
+    `
+  }
+
+  async pageInitialized() {
+    this._clearView()
+    this.config = {
+      pagination: { infinite: true },
+      rows: { appendable: true },
+      list: { fields: ['name', 'geoCountry', 'includePostalCode', 'excludePostalCode'] },
+      columns: [
+        { type: 'gutter', gutterName: 'dirty' },
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: { editable: true },
+          width: 200
+        },
+        {
+          type: 'object',
+          name: 'geoCountry',
+          record: {
+            editable: true,
+            options: {
+              queryName: 'geoCountriesWithoutParam',
+              nameField: 'name',
+              descriptionField: 'description',
+              select: [
+                { name: 'id', hidden: true },
+                { name: 'name', header: i18next.t('field.name') },
+                { name: 'description', header: i18next.t('field.description') }
+              ]
+            }
+          },
+          header: i18next.t('field.country'),
+          sortable: true,
+          width: 230
+        },
+        {
+          type: 'string',
+          name: 'includePostalCode',
+          header: i18next.t('field.include_postal_code'),
+          record: { editable: true },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'excludePostalCode',
+          header: i18next.t('field.exclude_postal_code'),
+          record: { editable: true },
+          width: 200
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    try {
+      if (this.active) {
+        this._clearView()
+        await this.updateComplete
+        this._data = { id: changes.resourceId || this?._data?.id || null }
+        await this._fetchOrder()
+      }
+      if (this?._data && !this._data?.rank) {
+        this._data.rank = 0
+      }
+      this.updateContext()
+    } catch (e) {
+      this._showToast(e)
+    } finally {
+      this.updateContext()
+    }
+  }
+
+  async _fetchOrder() {
+    if (this?._data?.id && this?._data?.id != 'new') {
+      const response = await client.query({
+        query: gql`
+          query lastMileDelivery($id: String!) {
+            lastMileDelivery(id: $id) {
+              id
+              name
+              description
+              platform
+              clientId
+              secretKey
+              status
+              rank
+              pickupAccountId
+              soldToAccountId
+              accessToken
+              countryCode
+              lastMileDeliverySettings {
+                id
+                name
+                includePostalCode
+                excludePostalCode
+                geoCountry {
+                  id
+                  name
+                  description
+                }
+              }
+            }
+          }
+        `,
+        variables: { id: this._data.id },
+        context: gqlContext()
+      })
+      if (!response.errors) {
+        this._data = {
+          ...this._data,
+          ...response.data.lastMileDelivery,
+          lmdSettingData: {
+            records: response.data?.lastMileDelivery?.lastMileDeliverySettings || [],
+            total: response.data?.lastMileDelivery?.lastMileDeliverySettings.length || 0
+          }
+        }
+      }
+      return
+    } else {
+      this._clearView()
+    }
+  }
+
+  async _updateLastMileDelivery(e) {
+    try {
+      this._validateForm()
+
+      const result = await CustomAlert({
+        title: i18next.t('title.are_you_sure'),
+        text: i18next.t('text.update_lmd_setting_data'),
+        confirmButton: { text: i18next.t('button.submit') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+
+      if (!result.value) return
+
+      let lastMileDeliveryPatch = {
+        ...this._getFormInfo()
+      }
+
+      if (this._data?.id != 'new') {
+        lastMileDeliveryPatch.id = this._data?.id
+      }
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation upsertLastMileDelivery(
+            $lastMileDeliveryPatch: LastMileDeliveryPatch!
+            $lastMileDeliverySettingPatch: [LastMileDeliverySettingPatch!]
+          ) {
+            upsertLastMileDelivery(
+              lastMileDeliveryPatch: $lastMileDeliveryPatch
+              lastMileDeliverySettingPatch: $lastMileDeliverySettingPatch
+            ) {
+              id
+              name
+            }
+          }
+        `,
+        variables: { lastMileDeliveryPatch, lastMileDeliverySettingPatch: this._getLmdSettingData() },
+        context: gqlContext()
+      })
+
+      if (!response.errors) {
+        this._showToast({ message: i18next.t('text.details_saved') })
+        this._clearView()
+        this._navigateToList()
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  _validateForm() {
+    if (!this._lmdSettingForm.checkValidity()) throw new Error(i18next.t('text.lmd_setting_form_invalid'))
+    // if (this._draftOrderData?.container && !this.containerNo.value)
+    //   throw new Error(i18next.t('text.container_no_is_empty'))
+  }
+
+  _getFormInfo() {
+    const formData = this._serializeForm(this._lmdSettingForm)
+    return formData
+  }
+
+  _getLmdSettingData() {
+    return this._lmdSettingGrist.dirtyData.records.map(record => {
+      let data = {
+        id: record.id ? record.id.toString() : null,
+        name: record.name ? record.name.toString() : null,
+        geoCountry: record.geoCountry,
+        includePostalCode: record.includePostalCode ? record.includePostalCode.toString() : null,
+        excludePostalCode: record.excludePostalCode ? record.excludePostalCode.toString() : null
+      }
+
+      return data
+    })
+  }
+
+  _onLmdSettingGristChangeHandler(e) {
+    let data = {
+      ...this._data.lmdSettingData,
+      ...this._data.lmdSettingData.dirtyData
+    }
+    let dirty = {
+      ...this._data.lmdSettingData.dirtyData
+    }
+
+    this._data.lmdSettingData = data
+  }
+
+  _clearView() {
+    this._data = {
+      ...this._data,
+      name: '',
+      description: '',
+      clientId: '',
+      secretKey: '',
+      rank: 0,
+      platform: '',
+      pickupAccountId: '',
+      soldToAccountId: '',
+      accessToken: '',
+      lmdSettingData: { records: [], total: 0 }
+    }
+  }
+
+  _navigateToList() {
+    let context = gqlContext()
+    navigate(`integration-lmd${buildDomainContext(context.headers['x-things-factory-domain'])}`)
+  }
+
+  _serializeForm(form) {
+    let obj = {}
+    Array.from(form.querySelectorAll('input, select')).forEach(field => {
+      if (!field.hasAttribute('hidden') && field.value) {
+        let value = field.value
+        if (field.type == 'number') {
+          value = parseFloat(field.value)
+        }
+
+        obj[field.name] = field.type === 'checkbox' ? field.checked : value
+      }
+    })
+
+    return obj
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('integration-lmd-detail', IntegrationLmdDetail)

package/client/pages/integration-lmd.js

@@ -5,6 +5,8 @@ import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
 import { isMobileDevice } from '@things-factory/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
+import './integration-lmd-detail'
+import { buildGqlContext } from '@things-factory/shell'
 
 class IntegrationLmd extends localize(i18next)(PageView) {
   static get styles() {
@@ -41,10 +43,15 @@ class IntegrationLmd extends localize(i18next)(PageView) {
     return {
       title: i18next.t('title.last_mile_delivery_platform'),
       actions: [
+        // {
+        //   title: i18next.t('button.save'),
+        //   action: this._updateLastMileDelivery.bind(this),
+        //   ...CommonButtonStyles.save
+        // },
         {
-          title: i18next.t('button.save'),
-          action: this._updateLastMileDelivery.bind(this),
-          ...CommonButtonStyles.save
+          title: i18next.t('button.add'),
+          action: this._navigateToCreate.bind(this),
+          ...CommonButtonStyles.add
         },
         {
           title: i18next.t('button.delete'),
@@ -70,11 +77,22 @@ class IntegrationLmd extends localize(i18next)(PageView) {
 
   async pageInitialized() {
     this.config = {
-      rows: { selectable: { multiple: true }, appendable: true },
+      rows: { selectable: { multiple: true }, appendable: false },
+      list: { fields: ['name', 'platform', 'status', 'createdAt', 'updatedAt'] },
       columns: [
-        { type: 'gutter', gutterName: 'dirty' },
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'reorder',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              let context = gqlContext()
+              navigate(`integration-lmd-detail/${record.id}${buildDomainContext(context.headers['x-things-factory-domain'])}`)
+            }
+          }
+        },
         {
           type: 'string',
           name: 'id',
@@ -84,103 +102,36 @@ class IntegrationLmd extends localize(i18next)(PageView) {
           type: 'string',
           name: 'name',
           header: i18next.t('field.name'),
-          record: { editable: true },
           sortable: true,
-          width: 180
+          width: 200
         },
         {
-          type: 'select',
+          type: 'string',
           name: 'platform',
           header: i18next.t('field.platform'),
-          record: {
-            editable: true,
-            options: ['', 'eTrax']
-          },
           sortable: true,
-          width: 180
-        },
-        {
-          type: 'string',
-          name: 'clientId',
-          header: i18next.t('field.client_id'),
-          record: { editable: true },
-          width: 180
-        },
-        {
-          type: 'select',
-          name: 'clientType',
-          header: i18next.t('field.client_type'),
-          record: {
-            editable: true,
-            options: [
-              {
-                display: '',
-                value: ''
-              },
-              {
-                display: 'Business',
-                value: 'B'
-              },
-              {
-                display: 'Individual',
-                value: 'I'
-              }
-            ]
-          },
-          width: 180
+          width: 200
         },
         {
           type: 'string',
-          name: 'clientName',
-          header: i18next.t('field.client_name'),
-          record: { editable: true },
-          sortable: false,
-          width: 180
-        },
-        {
-          type: 'select',
-          name: 'countryCode',
-          header: i18next.t('field.country_code'),
-          record: {
-            editable: true,
-            options: [
-              {
-                display: '',
-                value: ''
-              },
-              {
-                display: 'Malaysia',
-                value: 'my'
-              },
-              {
-                display: 'Singapore',
-                value: 'sg'
-              }
-            ]
-          },
+          name: 'status',
+          header: i18next.t('field.status'),
           sortable: true,
-          width: 180
-        },
-        {
-          type: 'string',
-          name: 'secretKey',
-          header: i18next.t('field.secret_key'),
-          record: { editable: true },
-          width: 100
+          width: 200
         },
         {
-          type: 'string',
-          name: 'status',
-          header: i18next.t('field.status'),
+          type: 'datetime',
+          name: 'createdAt',
+          header: i18next.t('field.created_at'),
           sortable: true,
-          width: 100
+          width: 200
         },
         {
           type: 'datetime',
           name: 'updatedAt',
           header: i18next.t('field.updated_at'),
           sortable: true,
-          width: 100
+          width: 200
         }
       ]
     }
@@ -191,7 +142,7 @@ class IntegrationLmd extends localize(i18next)(PageView) {
         name: 'name',
         type: 'text',
         field: 'name',
-        props: { searchOp: 'i_like' }
+        props: { searchOper: 'i_like' }
       }
     ]
 
@@ -216,19 +167,14 @@ class IntegrationLmd extends localize(i18next)(PageView) {
 
     const response = await client.query({
       query: gql`
-        query lastMileDeliveries($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+        query lastMileDeliveries($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
           lastMileDeliveries(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
               name
               platform
-              clientId
-              clientType
-              clientName
-              countryCode
               status
               updatedAt
-              secretKey
             }
             total
           }
@@ -274,7 +220,7 @@ class IntegrationLmd extends localize(i18next)(PageView) {
 
       const response = await client.mutate({
         mutation: gql`
-          mutation deleteLastMileDeliveries($ids: [String]!) {
+          mutation deleteLastMileDeliveries($ids: [String!]!) {
             deleteLastMileDeliveries(ids: $ids)
           }
         `,
@@ -289,32 +235,9 @@ class IntegrationLmd extends localize(i18next)(PageView) {
     }
   }
 
-  async _updateLastMileDelivery() {
-    let patches = this.dataGrist.exportPatchList({ flagName: 'cuFlag' })
-
-    if (!patches?.length) {
-      CustomAlert({
-        title: i18next.t('text.nothing_changed'),
-        text: i18next.t('text.there_is_nothing_to_save')
-      })
-    } else {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation updateMultipleLastMileDelivery($patches: [LastMileDeliveryPatch]!) {
-            updateMultipleLastMileDelivery(patches: $patches) {
-              name
-            }
-          }
-        `,
-        variables: { patches },
-        context: gqlContext()
-      })
-
-      if (!response.errors) {
-        this.dataGrist.fetch()
-        this._showToast({ message: i18next.t('text.data_updated_successfully') })
-      }
-    }
+  _navigateToCreate() {
+    let context = gqlContext()
+    navigate(`integration-lmd-detail/new${buildDomainContext(context.headers['x-things-factory-domain'])}`)
   }
 
   _showToast({ type, message }) {
@@ -330,3 +253,11 @@ class IntegrationLmd extends localize(i18next)(PageView) {
 }
 
 customElements.define('integration-lmd', IntegrationLmd)
+
+export function buildDomainContext(subdomain) {
+  let urlSearchParam = `?${buildGqlContext({
+      headers: { 'x-things-factory-domain': subdomain }
+    })}`
+
+  return urlSearchParam
+}