@things-factory/dataset 8.0.0-beta.9 → 8.0.2

package/client/pages/data-summary/data-summary-search-page.ts

@@ -0,0 +1,426 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
+import './data-summary-view.js'
+import moment from '@operato/moment-timezone-es'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import {
+  getEditor,
+  getRenderer,
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  SortersControl,
+  GristRecord
+} from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { PageView, store } from '@operato/shell'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
+import { DataItem } from '@operato/dataset'
+
+enum DataSetSummaryPeriodType {
+  Hour = 'hour',
+  WorkShift = 'work-shift',
+  WorkDate = 'work-date',
+  Day = 'day'
+}
+
+@customElement('data-summary-search-page')
+export class DataSummarySearchPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .header {
+        grid-template-areas: 'filters actions';
+      }
+    `
+  ]
+
+  @state() dataSetId?: string
+
+  @state() dataSet: any
+  @state() dataKeySet: any
+  @state() dataItems?: DataItem[]
+
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+
+  get context() {
+    return {
+      title: i18next.t('title.data-summary search'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'dataset/data-summary-search',
+      actions: [],
+      exportable: {
+        name: i18next.t('title.data-summary search'),
+        data: this._exportableData.bind(this)
+      },
+      toolbar: false
+    }
+  }
+
+  render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
+    return html`
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataSetId = lifecycle.resourceId
+      return
+    }
+  }
+
+  async updated(changes) {
+    if (changes.has('dataSetId')) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataSet(id: $id) {
+              id
+              summaryPeriod
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              dataKeySet {
+                id
+                name
+                description
+                dataKeyItems {
+                  name
+                  description
+                  dataKey
+                  tKey
+                }
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataSetId
+        }
+      })
+
+      this.dataSet = response.data.dataSet
+      this.dataKeySet = this.dataSet?.dataKeySet || {}
+      this.dataItems = this.dataSet?.dataItems || []
+
+      this.refreshGristConfig()
+
+      this.grist.fetch()
+    }
+  }
+
+  getKeyColumns() {
+    return (
+      this.dataKeySet?.dataKeyItems.map((item, index) => {
+        return {
+          type: 'string',
+          name: `key0${index + 1}`,
+          header: i18next.t(item.tKey),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          filter: 'i_like',
+          width: 120,
+          imex: true
+        }
+      }) || []
+    )
+  }
+
+  getDataColumns() {
+    return (
+      this.dataItems
+        ?.filter(dataItem => dataItem.active && dataItem.stat)
+        .map((item, index) => {
+          return {
+            type: 'number',
+            name: `data0${index + 1}`,
+            header: i18next.t(item.name),
+            record: {
+              editable: false
+            },
+            width: 120,
+            imex: true
+          }
+        }) || []
+    )
+  }
+
+  refreshGristConfig() {
+    const yesterday = moment().subtract(1, 'day').format('YYYY-MM-DD')
+    const today = moment().format('YYYY-MM-DD')
+
+    this.gristConfig = {
+      list: { fields: ['dataSet', 'data', 'updater', 'updatedAt'] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'assignment',
+          title: i18next.t('title.open data summary view'),
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              openPopup(
+                html`
+                  <data-summary-view data-summary-id=${record.id} style="background-color: white;"></data-summary-view>
+                `,
+                {
+                  backdrop: true,
+                  size: 'large',
+                  title: i18next.t('title.data-summary view')
+                }
+              )
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'date',
+          header: i18next.t('field.date'),
+          sortable: true,
+          filter: {
+            type: 'date',
+            operator: 'between',
+            value: [yesterday, today]
+          },
+          width: 80,
+          imex: true
+        },
+        (this.dataSet.summaryPeriod == DataSetSummaryPeriodType.Hour ||
+          this.dataSet.summaryPeriod == DataSetSummaryPeriodType.WorkShift) && {
+          type: 'string',
+          name: 'period',
+          header: i18next.t('field.time-period'),
+          sortable: true,
+          width: 60,
+          imex: true
+        },
+        ...this.getKeyColumns(),
+        ...this.getDataColumns(),
+        {
+          type: 'json5',
+          name: 'data',
+          header: i18next.t('field.data'),
+          record: {
+            editable: false
+          },
+          hidden: true,
+          imex: true
+        },
+        {
+          type: 'number',
+          name: 'count',
+          header: i18next.t('field.count'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'number',
+          name: 'countOoc',
+          header: i18next.t('field.count-ooc'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'number',
+          name: 'countOos',
+          header: i18next.t('field.count-oos'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          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
+        }
+      ].filter(Boolean),
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'date',
+          desc: true
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    if (!this.dataSetId) {
+      return { records: [], total: 0 }
+    }
+
+    const response = await client.query({
+      query: gql`
+        query ($dataSetId: String!, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          dataSummariesByDataSet(
+            dataSetId: $dataSetId
+            filters: $filters
+            pagination: $pagination
+            sortings: $sortings
+          ) {
+            items {
+              id
+              name
+              description
+              date
+              period
+              key01
+              key02
+              key03
+              key04
+              key05
+              data01
+              data02
+              data03
+              data04
+              data05
+              summary
+              count
+              countOoc
+              countOos
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        dataSetId: this.dataSetId,
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.dataSummariesByDataSet.total || 0,
+      records: response.data.dataSummariesByDataSet.items || []
+    }
+  }
+
+  _exportableData() {
+    let records = [] as GristRecord[]
+    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(column),
+              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 }
+  }
+}

package/client/pages/data-summary/data-summary-view.ts

@@ -0,0 +1,133 @@
+import '@operato/dataset/ox-data-summary-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { DataItem } from '@operato/dataset'
+
+type DataSummary = {
+  name: string
+  description: string
+  dataItems?: DataItem[]
+  date?: string
+  period?: string
+  key01?: string
+  key02?: string
+  key03?: string
+  key04?: string
+  key05?: string
+  count?: number
+  countOoc?: number
+  countOos?: number
+  summary?: { [key: string]: any }
+}
+
+@customElement('data-summary-view')
+class DataSummaryView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-summary-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+    `
+  ]
+
+  @property({
+    type: String,
+    attribute: 'data-summary-id'
+  })
+  dataSummaryId?: string
+
+  @state() dataSummary?: DataSummary
+
+  render() {
+    return html`
+      <div content>
+        ${this.dataSummary
+          ? html`<ox-data-summary-view .dataSummary=${this.dataSummary}></ox-data-summary-view>`
+          : html``}
+      </div>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('dataSummaryId')) {
+      this.fetchDataSummary()
+    }
+  }
+
+  async fetchDataSummary() {
+    const id = this.dataSummaryId
+
+    const response = await client.query({
+      query: gql`
+        query ($id: String!) {
+          dataSummary(id: $id) {
+            id
+            name
+            description
+            dataSet {
+              id
+            }
+            dataItems {
+              name
+              description
+              active
+              hidden
+              tag
+              group
+              type
+              unit
+              options
+              quota
+              spec
+              stat
+            }
+            date
+            period
+            key01
+            key02
+            key03
+            key04
+            key05
+            summary
+            count
+            countOoc
+            countOos
+            updater {
+              id
+              name
+            }
+            updatedAt
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.dataSummary = response.data.dataSummary
+  }
+}

package/client/route.ts

@@ -0,0 +1,91 @@
+export default function route(page) {
+  switch (page) {
+    case 'data-set-list':
+      import('./pages/data-set/data-set-list-page.js')
+      return page
+
+    case 'data-sensor-list':
+      import('./pages/data-sensor/data-sensor-list-page.js')
+      return page
+
+    case 'data-sample':
+      import('./pages/data-sample/data-sample-page.js')
+      return page
+
+    case 'data-samples':
+      import('./pages/data-sample/data-samples-page.js')
+      return page
+
+    case 'data-sample-list':
+      import('./pages/data-sample/data-sample-list-page.js')
+      return page
+
+    case 'data-sample-search':
+      import('./pages/data-sample/data-sample-search-page.js')
+      return page
+
+    case 'data-summary-list':
+      import('./pages/data-summary/data-summary-list-page.js')
+      return page
+
+    case 'data-summary-search':
+      import('./pages/data-summary/data-summary-search-page.js')
+      return page
+
+    case 'data-summary-period':
+      import('./pages/data-summary/data-summary-period-page.js')
+      return page
+
+    case 'data-report-samples':
+      import('./pages/data-report/data-report-samples-page.js')
+      return page
+
+    case 'data-ooc':
+      import('./pages/data-ooc/data-ooc-page.js')
+      return page
+
+    case 'data-oocs':
+      import('./pages/data-ooc/data-oocs-page.js')
+      return page
+
+    case 'data-ooc-list':
+      import('./pages/data-ooc/data-ooc-list-page.js')
+      return page
+
+    case 'data-entry-list':
+      import('./pages/data-entry/data-entry-list-page.js')
+      return page
+
+    case 'data-report-list':
+      import('./pages/data-report/data-report-list-page.js')
+      return page
+
+    case 'data-archive-list':
+      import('./pages/data-archive/data-archive-list-page.js')
+      return page
+
+    // case 'jasper-report-samples':
+    //   import('./pages/data-report/jasper-report-samples-page.js')
+    //   return page
+
+    // case 'jasper-report-samples-crosstab':
+    //   import('./pages/data-report/jasper-report-samples-crosstab-page.js')
+    //   return page
+
+    // case 'jasper-report-oocs':
+    //   import('./pages/data-report/jasper-report-oocs-page.js')
+    //   return page
+
+    // case 'data-report-embed':
+    //   import('./pages/data-report/data-report-embed-page')
+    //   return page
+
+    case 'data-key-set-list':
+      import('./pages/data-key-set/data-key-set-list-page.js')
+      return page
+
+    case 'data-summary-list':
+      import('./pages/data-summary/data-summary-list-page')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}