@things-factory/dataset 6.0.67 → 6.0.70

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

@@ -0,0 +1,417 @@
+import '@operato/data-grist'
+import './data-summary-view.js'
+
+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 { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
+
+@customElement('data-summary-search-page')
+export class DataSummarySearchPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() dataKeySetId?: string
+  @state() dataKeySet: any
+
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
+
+  get context() {
+    return {
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-summary 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)
+      }
+    }
+  }
+
+  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 autofocus without-search></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.sortersControl.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>
+    `
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataKeySetId = lifecycle.resourceId
+      return
+    }
+  }
+
+  async updated(changes) {
+    if (changes.has('dataKeySetId')) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataKeySet(id: $id) {
+              id
+              name
+              description
+              dataKeyItems {
+                name
+                description
+                dataKey
+                tKey
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataKeySetId
+        }
+      })
+
+      this.dataKeySet = response.data.dataKeySet
+      this.refreshGristConfig()
+
+      this.grist.fetch()
+    }
+  }
+
+  getDataKeyColumns() {
+    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
+        }
+      }) || []
+    )
+  }
+
+  refreshGristConfig() {
+    const today = new Date().toISOString().split('T')[0]
+
+    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: '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
+        },
+        ...this.getDataKeyColumns(),
+        {
+          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
+          },
+          hidden: true,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'workDate',
+          header: i18next.t('field.work-date'),
+          sortable: true,
+          filter: {
+            type: 'date',
+            operator: 'between',
+            value: [today, today]
+          },
+          width: 80,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'workShift',
+          header: i18next.t('field.work-shift'),
+          sortable: true,
+          width: 60,
+          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: 'workDate',
+          desc: true
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    if (!this.dataKeySetId) {
+      return { records: [], total: 0 }
+    }
+
+    const response = await client.query({
+      query: gql`
+        query ($dataKeySetId: String!, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: dataSummariesByDataKeySet(
+            dataKeySetId: $dataKeySetId
+            filters: $filters
+            pagination: $pagination
+            sortings: $sortings
+          ) {
+            items {
+              id
+              name
+              description
+              dataSet {
+                id
+              }
+              workDate
+              workShift
+              key01
+              key02
+              key03
+              key04
+              key05
+              summary
+              count
+              countOoc
+              countOos
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        dataKeySetId: this.dataKeySetId,
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.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,119 @@
+// 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[]
+  workDate?: string
+  workShift?: 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: #fff;
+      }
+
+      div[content] {
+        flex: 1;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-summary-view {
+        flex: 1;
+        padding: var(--padding-wide);
+        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
+            }
+            workDate
+            workShift
+            key01
+            key02
+            key03
+            key04
+            key05
+            data
+            count
+            countOoc
+            countOos
+            updater {
+              id
+              name
+            }
+            updatedAt
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.dataSummary = response.data.dataSummary
+  }
+}

package/client/route.ts

@@ -16,6 +16,14 @@ export default function route(page) {
       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-report-samples':
       import('./pages/data-report/data-report-samples-page.js')
       return page
@@ -59,5 +67,9 @@ export default function route(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/dist-client/pages/data-set/data-set-list-page.js

@@ -200,7 +200,7 @@ let DataSetListPage = class DataSetListPage extends connect(store)(localize(i18n
                     type: 'gutter',
                     gutterName: 'button',
                     title: i18next.t('title.data collecting schedule (un)register'),
-                    icon: record => (!record || !record.name ? '' : record.scheduleId ? 'pause' : 'play_arrow'),
+                    icon: record => (!record || record.scheduleId ? 'event_available' : ''),
                     handlers: {
                         click: (columns, data, column, record, rowIndex) => {
                             if (!record || !record.name) {