@things-factory/operato-wms 3.7.2 → 3.7.7

package/client/pages/report/product-label-report.js

@@ -0,0 +1,401 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, PageView, store } from '@things-factory/shell'
+
+class ProductLabelReport extends connect(store)(localize(i18next)(PageView)) {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      data-report {
+        flex: 1;
+      }
+    `
+  }
+
+  static get properties() {
+    return {
+      _searchFields: Object,
+      _config: Object,
+      _partners: Object,
+      data: Object
+    }
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.product_label_report'),
+      printable: {
+        accept: ['preview'],
+        content: this
+      },
+      exportable: {
+        name: i18next.t('title.date_product_label', {
+          state: {
+            text: (() => {
+              let date = new Date()
+              return date.getFullYear().toString() + (date.getMonth() + 1).toString() + date.getDate().toString()
+            })()
+          }
+        }),
+        data: this._exportableData.bind(this)
+      },
+      help: 'operato-wms/report/inventory-report'
+    }
+  }
+
+  get report() {
+    return this.shadowRoot.querySelector('data-report')
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get _bizplaceSelector() {
+    return this.searchForm.shadowRoot.querySelector('select[name=bizplace]')
+  }
+
+  get _fromDateInput() {
+    return this.searchForm.shadowRoot.querySelector('input[name=fromDate]')
+  }
+
+  get _toDateInput() {
+    return this.searchForm.shadowRoot.querySelector('input[name=toDate]')
+  }
+
+  render() {
+    return html`
+      <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.report.fetch()}></search-form>
+
+      <data-report .config=${this._config} .fetchHandler=${this.fetchHandler.bind(this)}></data-report>
+    `
+  }
+
+  get searchFields() {
+    return [
+      {
+        label: i18next.t('field.company'),
+        name: 'bizplace',
+        type: 'select',
+        options: [
+          { value: '' },
+          ...this._partners
+            .map(partner => {
+              return {
+                name: `${partner.name} ${partner.description ? `(${partner.description})` : ''}`,
+                value: partner.id
+              }
+            })
+            .sort(this._compareValues('name', 'asc'))
+        ],
+        props: { searchOper: 'eq' }
+      },
+      {
+        label: i18next.t('field.from_date'),
+        name: 'fromDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq',
+          max: new Date().toISOString().split('T')[0]
+        },
+        value: (() => {
+          let date = new Date()
+          date.setMonth(date.getMonth() - 1)
+          return date.toISOString().split('T')[0]
+        })(),
+        handlers: { change: this._modifyDateRange.bind(this) }
+      },
+      {
+        label: i18next.t('field.to_date'),
+        name: 'toDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq',
+          min: (() => {
+            let date = new Date()
+            date.setMonth(date.getMonth() - 1)
+            return date.toISOString().split('T')[0]
+          })(),
+          max: new Date().toISOString().split('T')[0]
+        },
+        value: new Date().toISOString().split('T')[0]
+      },
+      {
+        label: i18next.t('field.product_type'),
+        name: 'type',
+        type: 'string',
+        props: { searchOper: 'in' }
+      }
+    ]
+  }
+
+  get reportConfig() {
+    return {
+      rows: {
+        selectable: false,
+        groups: [{ column: 'type', title: 'Sub Total' }],
+        totals: ['count']
+      },
+      columns: [
+        {
+          type: 'string',
+          name: 'type',
+          header: i18next.t('field.type'),
+          imex: { header: i18next.t('field.type'), key: 'type', width: 25, type: 'string' },
+          width: 400
+        },
+        {
+          type: 'string',
+          name: 'date',
+          header: i18next.t('field.date'),
+          sortable: true,
+          imex: { header: i18next.t('field.date'), key: 'createdAt', width: 25, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'number',
+          name: 'count',
+          header: i18next.t('field.count'),
+          record: { align: 'center' },
+          sortable: true,
+          imex: { header: i18next.t('field.count'), key: 'count', width: 25, type: 'string' },
+          width: 120
+        }
+      ]
+    }
+  }
+
+  async pageInitialized() {
+    this._products = []
+    this._partners = [...(await this._fetchPartners())]
+
+    this._searchFields = this.searchFields
+    this._config = this.reportConfig
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.report.fetch()
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    // return {
+    //   total: 0,
+    //   records: [
+    //     { productType: 'DRUM', count: 16, createdAt: '2021/10/13' },
+    //     { productType: 'WOOD', count: 50, createdAt: '2021/10/18' },
+    //     { productType: 'WOOD', count: 6, createdAt: '2021/10/11' },
+    //     { productType: 'WOOD', count: 21, createdAt: '2021/10/15' },
+    //     { productType: 'GSC', count: 30, createdAt: '2021/10/20' },
+    //     { productType: 'GSC', count: 3, createdAt: '2021/10/11' },
+    //     { productType: 'WOOD', count: 8, createdAt: '2021/10/12' },
+    //     { productType: 'FG', count: 4, createdAt: '2021/10/18' },
+    //     { productType: 'GSC', count: 2, createdAt: '2021/10/14' },
+    //     { productType: 'GSC', count: 213, createdAt: '2021/10/12' },
+    //     { productType: 'WOOD', count: 3, createdAt: '2021/10/20' },
+    //     { productType: 'GSC', count: 51, createdAt: '2021/10/16' },
+    //     { productType: 'PKG', count: 1, createdAt: '2021/10/18' },
+    //     { productType: 'GSC', count: 27, createdAt: '2021/10/15' },
+    //     { productType: 'GSC', count: 174, createdAt: '2021/10/18' }
+    //   ]
+    // }
+    try {
+      this._validate()
+
+      var tzoffset = new Date().getTimezoneOffset() * 60
+      const response = await client.query({
+        query: gql`
+          query productLabelReport($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+            productLabelReport(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
+                type
+                date
+                count
+                bizplace {
+                  id
+                  name
+                }
+              }
+              total
+            }
+          }
+        `,
+        variables: {
+          filters: [...this.searchForm.queryFilters, { name: 'tzoffset', operator: 'custom', value: tzoffset }],
+          pagination: { page, limit },
+          sortings: sorters
+        }
+      })
+
+      return {
+        total: response.data.productLabelReport.total,
+        records: response.data.productLabelReport.items
+      }
+
+      // @farishelmi any usage for this? If no please remove.
+      // return {
+      //   total: 0,
+      //   records:
+      //     response.data.inventoryHistoryReport.map(item => {
+      //       let date = new Date(parseInt(item.createdAt))
+      //       return flattenObject({
+      //         ...item,
+      //         createdAt:
+      //           date.getDate().toString() + '/' + (date.getMonth() + 1).toString() + '/' + date.getFullYear().toString()
+      //       })
+      //     }) || []
+      // }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  async _fetchPartners() {
+    const filters = []
+    const response = await client.query({
+      query: gql`
+        query partnersBizplaces($filters: [Filter!]) {
+          partnersBizplaces(filters: $filters) {
+            items {
+              id
+              name
+              description
+            }
+          }
+        }
+      `,
+      variables: { filters }
+    })
+
+    if (!response.errors) {
+      return response.data.partnersBizplaces.items
+    }
+  }
+
+  _validate() {
+    if (!this.searchForm.shadowRoot.querySelector('form').checkValidity())
+      throw new Error(i18next.t('text.invalid_form_value'))
+    if (!this._bizplaceSelector.value) throw new Error(i18next.t('text.no_company_selected'))
+    if (!this._fromDateInput.value) throw new Error(i18next.t('text.from_date_is_empty'))
+    if (!this._toDateInput.value) throw new Error(i18next.t('text.to_date_is_empty'))
+  }
+
+  _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
+  }
+
+  _compareValues(key, order = 'asc') {
+    return function innerSort(a, b) {
+      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+        return 0
+      }
+
+      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key]
+      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key]
+
+      let comparison = 0
+      if (varA > varB) {
+        comparison = 1
+      } else if (varA < varB) {
+        comparison = -1
+      }
+      return order === 'desc' ? comparison * -1 : comparison
+    }
+  }
+
+  // @farishelmi any usage for this function? If no please remove.
+  async _bizplaceChange(e) {
+    /* let bizplace = [{ name: 'bizplace', operator: 'eq', value: e.currentTarget.value }]
+    if (e.currentTarget.value == '') {
+      this.searchFields
+      this._searchFields.filter(x => x.name == 'product')[0].options = [{ name: 'All', value: '' }]
+      this._searchFields = [...this._searchFields]
+    } else {
+      const response = await client.query({
+        query: gql`
+            query {
+              productsByBizplace(${gqlBuilder.buildArgs({
+                filters: [...bizplace]
+              })}) {
+                items {
+                  id
+                  name
+                }
+              }
+            }
+          `
+      })
+
+      if (!response.errors) {
+        this.searchFields
+        this._searchFields.filter(x => x.name == 'product')[0].options = [
+          { name: 'All', value: '' },
+          ...response.data.productsByBizplace.items.map(item => {
+            return {
+              name: item.name,
+              value: item.id
+            }
+          })
+        ]
+        this._searchFields = [...this._searchFields]
+      }
+    } */
+  }
+
+  _exportableData() {
+    try {
+      const report = this.report
+      var headerSetting = [
+        ...report._config.columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .map(column => {
+            return column.imex
+          })
+      ]
+
+      return {
+        header: headerSetting,
+        data: report.data.records,
+        groups: report._config.rows.groups,
+        totals: report._config.rows.totals
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('product-label-report', ProductLabelReport)

package/client/pages/support/inventory-comparison.js

@@ -0,0 +1,296 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { getPartnerCodeByName } from '@things-factory/code-base'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, PageView, store } from '@things-factory/shell'
+import { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
+class InventoryComparison extends connect(store)(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 {
+      _config: Object,
+      _searchFields: Object,
+      _partners: Object,
+      _gristData: Object,
+      _nonTally: Boolean,
+      data: Object
+    }
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get _bizplaceSelector() {
+    return this.searchForm.shadowRoot.querySelector('select[name=bizplace]')
+  }
+
+  get _toDateInput() {
+    return this.searchForm.shadowRoot.querySelector('input[name=toDate]')
+  }
+
+  get searchFields() {
+    return [
+      {
+        label: i18next.t('field.company'),
+        name: 'bizplace',
+        type: 'select',
+        options: [
+          { value: '' },
+          ...this._partners
+            .map(partner => {
+              return {
+                name: `${partner.name} ${partner.description ? `(${partner.description})` : ''}`,
+                value: partner.id
+              }
+            })
+            .sort(this._compareValues('name', 'asc'))
+        ],
+        props: { searchOper: 'eq' }
+      },
+      {
+        label: i18next.t('field.date'),
+        name: 'toDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq',
+          min: (() => {
+            let date = new Date()
+            date.setMonth(date.getMonth() - 1)
+            return date.toISOString().split('T')[0]
+          })(),
+          max: new Date().toISOString().split('T')[0]
+        },
+        value: new Date().toISOString().split('T')[0]
+      },
+      {
+        label: i18next.t('field.product_info'),
+        name: 'product',
+        type: 'string',
+        props: { searchOper: 'in' }
+      },
+      {
+        label: i18next.t('field.non_tally'),
+        name: 'nonTally',
+        type: 'checkbox',
+        value: this._nonTally,
+        props: { searchOper: 'eq' }
+      }
+    ]
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.inventory_comparison_list')
+    }
+  }
+
+  async pageInitialized() {
+    this._partners = [...(await this._fetchPartners())]
+    this._searchFields = this.searchFields
+    this._gristData = { total: 0, records: [] }
+    this._config = {
+      list: {
+        fields: ['productSku', 'productName', 'batchId', 'packingType', 'closingQty', 'remainQty']
+      },
+      pagination: { limit: 50, pages: [50, 100, 200, 500, 1000] },
+      rows: {
+        selectable: false,
+        insertable: false,
+        appendable: false
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'string',
+          name: 'productSku',
+          header: i18next.t('field.sku'),
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'productName',
+          header: i18next.t('field.product'),
+          width: 400
+        },
+        {
+          type: 'string',
+          name: 'batchId',
+          header: i18next.t('field.batch_id'),
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'packingType',
+          header: i18next.t('field.packing_type'),
+          width: 150
+        },
+        {
+          type: 'number',
+          name: 'closingQty',
+          header: i18next.t('field.summary_report_quantity'),
+          width: 200
+        },
+        {
+          type: 'number',
+          name: 'remainQty',
+          header: i18next.t('field.onhand_inventory_quantity'),
+          width: 200
+        }
+      ]
+    }
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataGrist.fetch()
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    try {
+      let filter = this.searchForm.queryFilters.map(filter => {
+        switch (filter.name) {
+          case 'toDate':
+            let toDt = new Date(filter.value)
+            toDt.setHours(23, 59, 59)
+            filter.value = toDt.toISOString()
+            break
+          default:
+            break
+        }
+        return filter
+      })
+
+      const response = await client.query({
+        query: gql`
+          query inventoryComparisonList($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+            inventoryComparisonList(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
+                productSku
+                productName
+                packingType
+                closingQty
+                remainQty
+                batchId
+              }
+              total
+            }
+          }
+        `,
+        variables: { filters: filter, pagination: { page, limit }, sortings: sorters }
+      })
+
+      if (!response.errors) {
+        return {
+          total: response.data?.inventoryComparisonList?.total || 0,
+          records: response.data?.inventoryComparisonList?.items || []
+        }
+      }
+    } catch (error) {
+      throw error
+    }
+  }
+
+  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>
+    `
+  }
+
+  async _companyChanged(e) {
+    this._productType = !this._bizplaceSelector.value
+      ? []
+      : await getPartnerCodeByName(
+          'PRODUCT_TYPES',
+          this._partners.find(p => p.id == this._bizplaceSelector.value)?.company?.domainId || ''
+        )
+
+    this._searchFields = [...this.searchFields]
+  }
+
+  _compareValues(key, order = 'asc') {
+    return function innerSort(a, b) {
+      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+        return 0
+      }
+
+      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key]
+      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key]
+
+      let comparison = 0
+      if (varA > varB) {
+        comparison = 1
+      } else if (varA < varB) {
+        comparison = -1
+      }
+      return order === 'desc' ? comparison * -1 : comparison
+    }
+  }
+
+  async _fetchPartners() {
+    const filters = []
+    const response = await client.query({
+      query: gql`
+        query partnersBizplaces($filters: [Filter!]) {
+          partnersBizplaces(filters: $filters) {
+            items {
+              id
+              name
+              description
+              company {
+                id
+                domainId
+              }
+            }
+          }
+        }
+      `,
+      variables: { filters }
+    })
+
+    if (!response.errors) {
+      return response.data.partnersBizplaces.items
+    }
+  }
+}
+
+window.customElements.define('inventory-comparison', InventoryComparison)