@things-factory/dataset 5.0.0-alpha.9 → 5.0.0-zeta.1

package/client/pages/data-report/jasper-report-samples-page.js

@@ -0,0 +1,122 @@
+import '@operato/data-grist'
+import '@operato/form'
+
+import { css, html } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@things-factory/shell'
+
+class JasperReportSamplesPage extends localize(i18next)(PageView) {
+  static get properties() {
+    return {
+      _grnNo: String,
+      _status: String,
+      resourceId: String,
+      params: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          padding: 0;
+        }
+
+        #container {
+          flex: 1;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    const filters = [
+      {
+        name: 'workDateRange',
+        type: 'date',
+        label: 'date',
+        operator: 'between'
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.renderRoot.querySelector('iframe').contentWindow.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'jasper-report',
+      actions,
+      filters
+    }
+  }
+
+  render() {
+    return html`
+      <ox-filters-form-base
+        .filters=${this.context.filters}
+        @filters-change=${e => {
+          console.log('filters changed', e.detail)
+          this._reportTemplate(e.detail.filters)
+        }}
+        ?url-params-sensitive=${this.active}
+      ></ox-filters-form-base>
+      <iframe id="container"></iframe>
+    `
+  }
+
+  get searchForm() {
+    return this.renderRoot.querySelector('ox-filters-form-base')
+  }
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async _reportTemplate(filters) {
+    const params = filters.reduce((acc, curr) => ((acc[curr.name] = curr.value), acc), {})
+    Object.assign(params, this.lifecycle.params)
+
+    const { workDateRange, workShift, template } = params
+
+    /** ignoring date conditions  */
+    if (!workDateRange[0] || !workDateRange[1] || workDateRange[0] > workDateRange[1]) {
+      return
+    }
+
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'samples',
+      dataSetId: this.lifecycle.resourceId,
+      fromWorkDate: workDateRange[0],
+      toWorkDate: workDateRange[1],
+      workShift,
+      template,
+      templateType: 'normal'
+    }
+
+    const encodedUrlParams = Object.keys(urlParams)
+      .filter(key => {
+        // ignore empty
+        return !!urlParams[key]
+      })
+      .map(key => `${key}=${encodeURIComponent(urlParams[key])}`)
+      .join('&')
+
+    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+  }
+}
+
+window.customElements.define('jasper-report-samples-page', JasperReportSamplesPage)

package/client/pages/data-sample/data-sample-list-page.js

@@ -0,0 +1,372 @@
+import '@operato/data-grist'
+import './data-sample-view.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { PageView, store } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+export class DataSampleListPage extends connect(store)(localize(i18next)(PageView)) {
+  static get properties() {
+    return {
+      active: String,
+      gristConfig: Object,
+      mode: String
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      CommonGristStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.data-sample list'),
+      help: 'dataset/data-sample',
+      actions: [],
+      exportable: {
+        name: i18next.t('title.data-sample list'),
+        data: this._exportableData.bind(this)
+      }
+    }
+  }
+
+  render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
+    return html`
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
+      >
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></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 = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  get grist() {
+    return this.renderRoot.querySelector('ox-grist')
+  }
+
+  async pageInitialized(lifecycle) {
+    this.gristConfig = {
+      list: { fields: ['dataSet', 'data', 'spec', 'updater', 'updatedAt'] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'assignment',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              openPopup(
+                html` <data-sample-view .dataSample=${record} style="background-color: white;"></data-sample-view> `,
+                {
+                  backdrop: true,
+                  size: 'large',
+                  title: i18next.t('title.data-sample view')
+                }
+              )
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          label: true,
+          header: i18next.t('field.name'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          label: true,
+          header: i18next.t('field.description'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          width: 150,
+          imex: true
+        },
+        {
+          type: 'resource-object',
+          name: 'dataSet',
+          header: i18next.t('field.data-set'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'json5',
+          name: 'partitionKeys',
+          header: i18next.t('field.partition-keys'),
+          record: {
+            editable: false
+          },
+          width: 200,
+          imex: true
+        },
+        {
+          type: 'checkbox',
+          name: 'ooc',
+          header: i18next.t('field.ooc'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'checkbox',
+          name: 'oos',
+          header: i18next.t('field.oos'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'json5',
+          name: 'data',
+          header: i18next.t('field.data'),
+          record: {
+            editable: false
+          },
+          width: 200,
+          imex: true
+        },
+        {
+          type: 'json5',
+          name: 'spec',
+          header: i18next.t('field.spec'),
+          record: {
+            editable: false
+          },
+          width: 200
+        },
+        {
+          type: 'text',
+          name: 'rawData',
+          header: i18next.t('field.raw-data'),
+          record: {
+            editable: false
+          },
+          width: 200,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'workDate',
+          header: i18next.t('field.work-date'),
+          sortable: true,
+          width: 80,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'workShift',
+          header: i18next.t('field.work-shift'),
+          sortable: true,
+          width: 40,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'collectedAt',
+          header: i18next.t('field.collected-at'),
+          sortable: true,
+          width: 180,
+          imex: true
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          sortable: true,
+          width: 180,
+          imex: true
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: true
+        },
+        classifier: function (record, rowIndex) {
+          var emphasized
+          if (record['oos']) {
+            emphasized = ['red']
+          } else if (record['ooc']) {
+            emphasized = 'orange'
+          }
+
+          return {
+            emphasized
+          }
+        }
+      },
+      sorters: [
+        {
+          name: 'updatedAt',
+          desc: true
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: dataSamples(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              dataSet {
+                id
+                name
+                description
+              }
+              partitionKeys
+              data
+              rawData
+              spec
+              ooc
+              oos
+              workDate
+              workShift
+              updater {
+                id
+                name
+              }
+              updatedAt
+              collectedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  _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 === true
+          ? {
+              header: column.header.renderer(),
+              key: column.name,
+              width: column.width,
+              type: column.type
+            }
+          : column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this.gristConfig.columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .reduce((record, column) => {
+            const key = column.imex === true ? column.name : column.imex.key
+            record[key] = key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+}
+
+window.customElements.define('data-sample-list-page', DataSampleListPage)

package/client/pages/data-sample/data-sample-view.js

@@ -0,0 +1,98 @@
+import '@operato/dataset/ox-data-sample-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+class DataSampleView extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      dataSet: Object,
+      dataSample: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          background-color: #fff;
+        }
+
+        div[content] {
+          flex: 1;
+
+          display: flex;
+          overflow: auto;
+        }
+
+        ox-data-sample-view {
+          flex: 1;
+          padding: var(--padding-wide);
+          overflow: auto;
+        }
+      `
+    ]
+  }
+
+  get sampleView() {
+    return this.renderRoot.querySelector('ox-data-sample-view')
+  }
+
+  render() {
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSet=${this.dataSet} .dataSample=${this.dataSample}></ox-data-sample-view>
+      </div>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('dataSample')) {
+      this.fetchDataSet()
+    }
+  }
+
+  async fetchDataSet() {
+    const id = this.dataSample?.dataSet?.id
+
+    if (id) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataSet(id: $id) {
+              id
+              name
+              description
+              useCase
+              dataItems {
+                id
+                name
+                description
+                active
+                unit
+                tag
+                type
+                spec
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataSample.dataSet.id
+        }
+      })
+
+      this.dataSet = response.data.dataSet
+    }
+  }
+}
+
+window.customElements.define('data-sample-view', DataSampleView)