@things-factory/operato-wms 3.7.14 → 3.8.2

package/client/pages/bulk-operation/bulk-operation.js

@@ -0,0 +1,316 @@
+import '@things-factory/biz-ui'
+import './validate-ro-popup'
+
+import { css, html } from 'lit-element'
+import XLSX from 'xlsx'
+
+import { MultiColumnFormStyles } from '@things-factory/form-ui'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { openPopup } from '@things-factory/layout-base'
+import { PageView } from '@things-factory/shell'
+
+class BulkOperation extends localize(i18next)(PageView) {
+  static get styles() {
+    return [
+      MultiColumnFormStyles,
+      css`
+        :host {
+          display: block;
+          --menu-cards-size: 300px;
+        }
+
+        ul {
+          margin: var(--margin-wide) 0;
+          padding: 0;
+          overflow: hidden;
+          list-style: none;
+        }
+
+        li {
+          display: block;
+          float: left;
+          background-color: var(--main-section-background-color);
+          border-radius: var(--border-radius);
+          border: 1px solid var(--main-section-background-color);
+          box-shadow: var(--box-shadow);
+          margin: var(--margin-narrow) var(--margin-default) var(--margin-default) 0;
+          padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-default);
+          text-align: center;
+        }
+
+        li:hover {
+          border: 1px solid var(--primary-color);
+        }
+
+        a {
+          cursor: pointer;
+          text-decoration: none;
+          color: var(--secondary-color);
+        }
+
+        mwc-icon {
+          font-size: 18px;
+          color: var(--primary-color);
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          border-radius: var(--border-radius);
+          background-color: var(--theme-white-color);
+        }
+
+        a,
+        span {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        [subtitle] {
+          padding: var(--subtitle-padding);
+          font: var(--subtitle-font);
+          color: var(--subtitle-text-color);
+          text-transform: capitalize;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        form {
+          display: block;
+          width: var(--menu-cards-size);
+        }
+
+        .multi-column-form input {
+          min-width: 85% !important;
+        }
+
+        [attachment-wrap] {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          grid-column: span 24;
+        }
+
+        [attachment-wrap] file-uploader {
+          flex: 1;
+          background-color: var(--theme-white-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);
+        }
+
+        @media screen and (max-width: 600px) {
+          ul {
+            display: grid;
+            grid-template-columns: 50% 50%;
+            grid-gap: var(--padding-narrow);
+          }
+          [field] {
+            grid-column: span 2;
+          }
+        }
+
+        @media screen and (max-width: 460px) {
+          [attachment-wrap] {
+            grid-column: span 12;
+          }
+        }
+        @media screen and (min-width: 1201px) and (max-width: 2000px) {
+          [attachment-wrap] {
+            grid-column: span 36;
+          }
+        }
+        @media screen and (min-width: 2001px) {
+          [attachment-wrap] {
+            grid-column: span 48;
+          }
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _files: Array,
+      _releaseOrders: Array,
+      _bizplaceId: String,
+      _bizplaceName: String
+    }
+  }
+
+  constructor() {
+    super()
+    // initially act as placeholder
+    this._bizplaceName = i18next.t('label.company')
+  }
+
+  firstUpdated() {}
+
+  get context() {
+    return {
+      title: i18next.t('title.bulk_operation')
+    }
+  }
+
+  get _document() {
+    return this.shadowRoot.querySelector('#upload-document')
+  }
+
+  get _dummyData() {
+    return this._releaseOrders.map(x => {
+      x.orderInventories = x.orderInventories.map(y => {
+        return {
+          ...y,
+          availableQty: Math.floor(Math.random() * 50) + 30
+        }
+      })
+      return {
+        ...x,
+        releaseDate: new Date().toISOString().split('T')
+      }
+    })
+  }
+
+  render() {
+    let subtitle = 'Release Order'
+    let attachment = {
+      path: ''
+    }
+
+    return html`
+      <ul export-form>
+        <li>
+          <div subtitle>
+            ${subtitle} &nbsp;
+            <a href="${location.origin}/attachment/${attachment.path}" download>
+              <mwc-icon>file_download</mwc-icon>
+            </a>
+          </div>
+
+          <form name="input-form" class="multi-column-form" autocomplete="off">
+            <fieldset>
+              <div attachment-wrap>
+                <input type="hidden" name="bizplaceId" value="${this._bizplaceId}" />
+                <input
+                  type="text"
+                  name="bizplaceName"
+                  value="${this._bizplaceName}"
+                  @click="${this._openBizplacesSelector.bind(this)}"
+                />
+              </div>
+              <div attachment-wrap>
+                <file-uploader
+                  name="attachments"
+                  id="upload-document"
+                  label="${i18next.t('label.select_file')}"
+                  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                  custom-input
+                ></file-uploader>
+              </div>
+            </fieldset>
+          </form>
+
+          <div class="button-container">
+            <mwc-button raised @click="${this._extractRawDataFromExcel.bind(this)}"
+              >${i18next.t('button.validate')}</mwc-button
+            >
+          </div>
+        </li>
+      </ul>
+    `
+  }
+
+  updated(changeProps) {
+    if (changeProps.has('_rawROData')) {
+      if (this._releaseOrders.length) {
+        // this._validateReleaseOrder(this._releaseOrders)
+        this._validateReleaseOrder(this._rawROData)
+      }
+    }
+  }
+
+  _getReleaseOrderTemplate() {
+    /* download excel template for Create RO */
+  }
+
+  async _extractRawDataFromExcel() {
+    if (!this._bizplaceId) {
+      this._showToast({ level: 'error', message: `${i18next.t('text.please_select_the_company')}` })
+      return
+    }
+
+    const _docs = this._document
+
+    if (_docs && _docs.files) {
+      if (_docs.files.length == 1) {
+        const file = _docs.files[0]
+        const fileReader = new FileReader()
+
+        fileReader.readAsArrayBuffer(file)
+
+        fileReader.onload = e => {
+          /* extract rawData from .xlsx file */
+          const bufferArray = e.target.result
+          const workbook = XLSX.read(bufferArray, { type: 'buffer' })
+          const firstWorksheetName = workbook.SheetNames[0]
+          const worksheet = workbook.Sheets[firstWorksheetName]
+
+          let rawData = XLSX.utils.sheet_to_json(worksheet)
+          rawData = rawData.map(raw => {
+            if (!raw.releaseDate || raw.releaseDate.constructor !== String) raw.releaseDate = ''
+            else new Date(raw.releaseDate)
+            return raw
+          })
+          /* return rawData to validate with inventory stocks */
+          this._validateReleaseOrder(rawData)
+        }
+      } else if (_docs.files.length > 1)
+        this._showToast({ level: 'error', message: i18next.t('text.you_can_only_upload_maximum_one_file') })
+      else this._showToast({ level: 'error', message: i18next.t('text.please_attach_the_file') })
+    } else this._showToast({ level: 'error', message: i18next.t('text.please_attach_the_file') })
+  }
+
+  async _validateReleaseOrder(records) {
+    /* validate excel that user uploaded */
+    openPopup(html` <validate-ro-popup .records=${records} .bizplaceId=${this._bizplaceId}></validate-ro-popup> `, {
+      backdrop: true,
+      escapable: false,
+      size: 'large',
+      title: i18next.t('title.import')
+    })
+  }
+
+  _openBizplacesSelector() {
+    openPopup(
+      html`
+        <popup-partner-bizplaces-selector
+          @selected="${e => {
+            this._bizplaceId = e.detail.id
+            this._bizplaceName = e.detail.name
+          }}"
+        ></popup-partner-bizplaces-selector>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.select_company')
+      }
+    )
+  }
+
+  _showToast({ level, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          level,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('bulk-operation', BulkOperation)