@things-factory/reference-app 5.0.0-zeta.7 → 5.0.0

package/client/pages/ocr-page.js

@@ -1,7 +1,7 @@
 import '@things-factory/form-ui'
 import '../components/camera-capturer'
 
-import { gql } from 'graphql-tag'
+import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 

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

@@ -0,0 +1,85 @@
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+
+export async function fetchOperations({ filters = [], page, limit, sortings = [] }) {
+  return await client.query({
+    query: gql`
+      query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+        operations(filters: $filters, pagination: $pagination, sortings: $sortings) {
+          items {
+            id
+            name
+            description
+            type
+            operationStdChart
+            operationStdTime
+            active
+            thumbnail
+            updatedAt
+            updater {
+              id
+              name
+              description
+            }
+          }
+          total
+        }
+      }
+    `,
+    variables: {
+      filters,
+      pagination: { page, limit },
+      sortings
+    }
+  })
+}
+
+export async function deleteOperations(ids) {
+  return await client.query({
+    query: gql`
+      mutation ($ids: [String!]!) {
+        deleteOperations(ids: $ids)
+      }
+    `,
+    variables: {
+      ids
+    }
+  })
+}
+
+export async function saveOperations(patches) {
+  return await client.query({
+    query: gql`
+      mutation ($patches: [OperationPatch!]!) {
+        updateMultipleOperation(patches: $patches) {
+          id
+        }
+      }
+    `,
+    variables: {
+      patches
+    },
+    context: {
+      hasUpload: true
+    }
+  })
+}
+
+export async function createOperation(operation) {
+  return await client.query({
+    query: gql`
+      mutation ($operation: NewOperation!) {
+        createOperation(operation: $operation) {
+          id
+        }
+      }
+    `,
+    variables: {
+      operation
+    },
+    context: {
+      hasUpload: true
+    }
+  })
+}

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

@@ -0,0 +1,432 @@
+import '@material/mwc-icon'
+import '@things-factory/import-ui'
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/data-grist/ox-sorters-control.js'
+import '@operato/data-grist/ox-record-creator.js'
+
+import { css, html } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { CommonButtonStyles, CommonGristStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { CustomAlert, PageView } from '@things-factory/shell'
+
+import { createOperation, deleteOperations, fetchOperations, saveOperations } from './operation-api'
+
+const OperationStatus = ['ASSY', 'INV', 'PACK', 'SMT', 'STD', 'TEST']
+
+class OperationMaster extends localize(i18next)(PageView) {
+  static get styles() {
+    return [
+      CommonGristStyles,
+      css`
+        :host {
+          display: flex;
+
+          width: 100%;
+
+          --grid-record-emphasized-background-color: red;
+          --grid-record-emphasized-color: yellow;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      config: Object,
+      data: Object,
+      mode: String,
+      importHandler: Object
+    }
+  }
+
+  constructor() {
+    super()
+    this.mode = isMobileDevice() ? 'CARD' : 'GRID'
+  }
+
+  render() {
+    let mode = this.mode
+
+    return html`
+      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+
+          <ox-record-creator id="add" .callback=${this.operationCreationCallback.bind(this)}>
+            <button><mwc-icon>add</mwc-icon></button>
+          </ox-record-creator>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.operation'),
+      help: 'master/operation-master',
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this._saveOperations.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: i18next.t('button.delete'),
+          action: this._deleteOperations.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ],
+      exportable: {
+        name: i18next.t('title.operation'),
+        data: this._exportableData.bind(this)
+      },
+      importable: {
+        handler: this._importableData.bind(this)
+      }
+    }
+  }
+
+  async pageInitialized() {
+    this.config = {
+      list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['type', 'operationStdChart', 'operationStdTime', 'updatedAt']
+      },
+      rows: {
+        selectable: {
+          multiple: true
+        },
+        handlers: {
+          click: 'select-row-toggle'
+        },
+        classifier: function (record, rowIndex) {}
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'dirty' },
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'id',
+          header: i18next.t('field.id'),
+          hidden: true,
+          record: { editable: false },
+          imex: { header: i18next.t('field.id'), key: 'id', width: 100, type: 'string' },
+          width: 70
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'drive_file_rename_outline',
+          handlers: {
+            click: 'record-view'
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.operation'),
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.operation'), key: 'name', width: 100, type: 'string' },
+          filter: 'search',
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: { editable: true },
+          imex: { header: i18next.t('field.description'), key: 'description', width: 100, type: 'string' },
+          filter: 'search',
+          width: 240
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          label: true,
+          record: {
+            editable: true,
+            align: 'center',
+            options: ['', ...OperationStatus]
+          },
+          sortable: true,
+          props: { searchOper: 'eq' },
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'operationStdChart',
+          header: i18next.t('field.operation_std_chart'),
+          label: true,
+          record: { editable: true },
+          imex: {
+            header: i18next.t('field.operation_std_chart'),
+            key: 'operationStdChart',
+            width: 100,
+            type: 'string'
+          },
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'operationStdTime',
+          header: i18next.t('field.operation_std_time'),
+          label: true,
+          record: { editable: true },
+          imex: { header: i18next.t('field.operation_std_time'), key: 'operationStdTime', width: 100, type: 'integer' },
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'boolean',
+          name: 'active',
+          header: i18next.t('field.active'),
+          record: { editable: true },
+          imex: { header: i18next.t('field.active'), key: 'active', width: 100, type: 'boolean' },
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          header: i18next.t('field.thumbnail'),
+          record: { editable: true },
+          width: 120
+        },
+        {
+          type: 'object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: { editable: false },
+          width: 80
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          record: { editable: false },
+          sortable: true,
+          width: 180
+        }
+      ],
+      sorters: [
+        {
+          name: 'name',
+          desc: false
+        }
+      ]
+    }
+  }
+
+  pageUpdated(changes, lifecycle, before) {
+    if (this.active) {
+      this.grist.fetch()
+    }
+  }
+
+  get grist() {
+    return this.renderRoot.querySelector('ox-grist')
+  }
+
+  _importableData(records) {
+    setTimeout(() => {
+      openPopup(
+        html`
+          <import-pop-up
+            .records=${records}
+            .config=${{
+              rows: this.config.rows,
+              columns: [...this.config.columns.filter(column => !!column.imex)]
+            }}
+            .importHandler="${this.importHandler.bind(this)}"
+          ></import-pop-up>
+        `,
+        {
+          backdrop: true,
+          size: 'large',
+          title: i18next.t('title.import')
+        }
+      )
+    }, 500)
+  }
+
+  async fetchHandler() {
+    const response = await fetchOperations(...arguments)
+
+    return {
+      total: response.data.operations.total || 0,
+      records: response.data.operations.items || []
+    }
+  }
+
+  async importHandler(patches) {
+    const response = await saveOperations(patches)
+
+    if (!response.errors) {
+      history.back()
+      this.grist.fetch()
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.data_imported_successfully')
+          }
+        })
+      )
+    }
+  }
+
+  async operationCreationCallback(operation) {
+    try {
+      const response = await createOperation(operation)
+
+      if (!response.errors) {
+        this.grist.fetch()
+        document.dispatchEvent(
+          new CustomEvent('notify', {
+            detail: {
+              message: i18next.t('text.data_created_successfully')
+            }
+          })
+        )
+      }
+
+      return true
+    } catch (ex) {
+      console.error(ex)
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            type: 'error',
+            message: i18next.t('text.error')
+          }
+        })
+      )
+      return false
+    }
+  }
+
+  async _saveOperations() {
+    let patches = this.grist.exportPatchList({ flagName: 'cuFlag' })
+    if (patches && patches.length) {
+      const response = await saveOperations(patches)
+
+      if (!response.errors) {
+        this.grist.fetch()
+        document.dispatchEvent(
+          new CustomEvent('notify', {
+            detail: {
+              message: i18next.t('text.data_updated_successfully')
+            }
+          })
+        )
+      }
+    }
+  }
+
+  async _deleteOperations() {
+    const select = this.grist.selected
+    if (!select.length) {
+      CustomAlert({
+        title: i18next.t('text.nothing_selected'),
+        text: i18next.t('text.there_is_nothing_to_delete')
+      })
+    } else {
+      CustomAlert({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.you_wont_be_able_to_revert_this'),
+        type: 'warning',
+        confirmButton: { text: i18next.t('button.delete'), color: '#22a6a7' },
+        cancelButton: { text: 'cancel', color: '#cfcfcf' },
+        callback: async result => {
+          if (result.value) {
+            const ids = this.grist.selected.map(record => record.id)
+            if (ids && ids.length > 0) {
+              const response = await deleteOperations(ids)
+
+              if (!response.errors) {
+                this.grist.fetch()
+                document.dispatchEvent(
+                  new CustomEvent('notify', {
+                    detail: {
+                      message: i18next.t('text.data_deleted_successfully')
+                    }
+                  })
+                )
+              }
+            }
+          }
+        }
+      })
+    }
+  }
+
+  get _columns() {
+    return this.config.columns
+  }
+
+  _exportableData() {
+    let records = []
+    if (this.grist.selected && this.grist.selected.length > 0) {
+      records = this.grist.selected
+    } else {
+      records = this.grist.data.records
+    }
+
+    var headerSetting = this.grist.compiledConfig.columns
+      .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+      .map(column => {
+        return column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this._columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .reduce((record, column) => {
+            record[column.imex.key] = column.imex.key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+}
+
+customElements.define('operation-master', OperationMaster)

package/client/pages/pending-job-page.js

@@ -1,7 +1,7 @@
 import '@material/mwc-linear-progress'
 import '@operato/help/ox-help-icon.js'
 
-import { gql } from 'graphql-tag'
+import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 

package/client/pages/product/product-api.js

@@ -0,0 +1,150 @@
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+
+export async function fetchProducts({ filters = [], page, limit, sortings = [] }) {
+  const response = await client.query({
+    query: gql`
+      query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+        myBizplaceProducts(filters: $filters, pagination: $pagination, sortings: $sortings) {
+          items {
+            sku
+            id
+            name
+            description
+            productRef {
+              sku
+              name
+              description
+            }
+            parentProductRef {
+              sku
+              name
+              description
+            }
+            routing {
+              id
+              name
+            }
+            refCode
+            bundleQty
+            packingType
+            type
+            thumbnail
+            inventoryAccountCode
+            cogsAccountCode
+            expirationPeriod
+            isRequiredCheckExpiry
+            weightUnit
+            nettWeight
+            grossWeight
+            density
+            lengthUnit
+            volume
+            width
+            depth
+            height
+            volumeSize
+            uom
+            uomValue
+            costPrice
+            afterTaxCostPrice
+            sellPrice
+            afterTaxSalesPrice
+            mrpPrice
+            bufferQty
+            minQty
+            maxQty
+            auxUnit1
+            auxValue1
+            auxUnit2
+            auxValue2
+            auxUnit3
+            auxValue3
+            auxUnit4
+            auxValue4
+            auxUnit5
+            auxValue5
+            brandSku
+            brand
+            subBrand
+            gtin
+            updater {
+              name
+              description
+            }
+            updatedAt
+          }
+          total
+        }
+      }
+    `,
+    variables: {
+      filters,
+      pagination: { page, limit },
+      sortings
+    }
+  })
+
+  if (!response.errors) {
+    return {
+      total: response.data.myBizplaceProducts.total || 0,
+      records:
+        response.data.myBizplaceProducts.items.map(itm => {
+          return {
+            ...itm,
+            productRef: { name: itm?.productRef ? '(' + itm.productRef.sku + ') ' + itm.productRef.name : '' }
+          }
+        }) || []
+    }
+  }
+}
+
+export async function deleteProducts(ids) {
+  return await client.query({
+    query: gql`
+      mutation ($ids: [String!]!) {
+        deleteProducts(ids: $ids)
+      }
+    `,
+    variables: {
+      ids
+    }
+  })
+}
+
+export async function saveProducts(patches) {
+  return await client.query({
+    query: gql`
+      mutation ($patches: [ProductPatch!]!) {
+        updateMultipleProduct(patches: $patches) {
+          id
+        }
+      }
+    `,
+    variables: {
+      patches
+    },
+    context: {
+      hasUpload: true
+    }
+  })
+}
+
+export async function createProduct(product) {
+  return await client.query({
+    query: gql`
+      mutation ($product: NewProduct!) {
+        createProduct(product: $product) {
+          id
+        }
+      }
+    `,
+    variables: {
+      product
+    },
+    context: {
+      hasUpload: true
+    }
+  })
+}