@things-factory/dataset 5.0.2 → 5.0.5

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

@@ -217,6 +217,61 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           width: 120,
           imex: true
         },
+        {
+          type: 'string',
+          name: 'key01',
+          header: i18next.t('field.key-01'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key02',
+          header: i18next.t('field.key-02'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key03',
+          header: i18next.t('field.key-03'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key04',
+          header: i18next.t('field.key-04'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key05',
+          header: i18next.t('field.key-05'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
         {
           type: 'json5',
           name: 'partitionKeys',
@@ -321,6 +376,11 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
                 id
                 name
               }
+              key01
+              key02
+              key03
+              key04
+              key05
               partitionKeys
               dataItems {
                 name

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

@@ -112,7 +112,9 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               openPopup(
-                html` <data-sample-view .dataSample=${record} style="background-color: white;"></data-sample-view> `,
+                html`
+                  <data-sample-view data-sample-id=${record.id} style="background-color: white;"></data-sample-view>
+                `,
                 {
                   backdrop: true,
                   size: 'large',
@@ -148,9 +150,53 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
           imex: true
         },
         {
-          type: 'resource-object',
-          name: 'dataSet',
-          header: i18next.t('field.data-set'),
+          type: 'string',
+          name: 'key01',
+          header: i18next.t('field.key-01'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key02',
+          header: i18next.t('field.key-02'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key03',
+          header: i18next.t('field.key-03'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key04',
+          header: i18next.t('field.key-04'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'key05',
+          header: i18next.t('field.key-05'),
           record: {
             editable: false
           },
@@ -284,19 +330,12 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
               name
               description
               useCase
-              dataSet {
-                id
-                name
-                description
-              }
+              key01
+              key02
+              key03
+              key04
+              key05
               partitionKeys
-              dataItems {
-                name
-                description
-                tag
-                unit
-                spec
-              }
               data
               rawData
               ooc

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

@@ -0,0 +1,402 @@
+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 DataSampleSearchPage extends connect(store)(localize(i18next)(PageView)) {
+  static get properties() {
+    return {
+      dataKeySetId: String,
+      dataKeySet: Object,
+      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 search'),
+      help: 'dataset/data-sample-search',
+      actions: [],
+      exportable: {
+        name: i18next.t('title.data-sample 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></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')
+  }
+
+  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() {
+    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',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              openPopup(
+                html`
+                  <data-sample-view data-sample-id=${record.id} 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
+        },
+        ...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
+          },
+          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: 'collectedAt',
+          desc: true
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+    if (!this.dataKeySetId) {
+      return { records: [], total: 0 }
+    }
+
+    const response = await client.query({
+      query: gql`
+        query ($dataKeySetId: String!, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: dataSamplesByDataKeySet(
+            dataKeySetId: $dataKeySetId
+            filters: $filters
+            pagination: $pagination
+            sortings: $sortings
+          ) {
+            items {
+              id
+              name
+              description
+              useCase
+              key01
+              key02
+              key03
+              key04
+              key05
+              data
+              ooc
+              oos
+              judgment
+              workDate
+              workShift
+              updater {
+                id
+                name
+              }
+              updatedAt
+              collectedAt
+            }
+            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 = []
+    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-search-page', DataSampleSearchPage)

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

@@ -10,7 +10,10 @@ import { ScrollbarStyles } from '@operato/styles'
 class DataSampleView extends localize(i18next)(LitElement) {
   static get properties() {
     return {
-      dataSet: Object,
+      dataSampleId: {
+        type: String,
+        attribute: 'data-sample-id'
+      },
       dataSample: Object
     }
   }
@@ -42,57 +45,69 @@ class DataSampleView extends localize(i18next)(LitElement) {
     ]
   }
 
-  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>
+        ${this.dataSample ? html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>` : html``}
       </div>
     `
   }
 
   updated(changes) {
-    if (changes.has('dataSample')) {
-      this.fetchDataSet()
+    if (changes.has('dataSampleId')) {
+      this.fetchDataSample()
     }
   }
 
-  async fetchDataSet() {
-    const id = this.dataSample?.dataSet?.id
+  async fetchDataSample() {
+    const id = this.dataSampleId
 
-    if (id) {
-      const response = await client.query({
-        query: gql`
-          query ($id: String!) {
-            dataSet(id: $id) {
+    const response = await client.query({
+      query: gql`
+        query ($id: String!) {
+          dataSample(id: $id) {
+            id
+            name
+            description
+            useCase
+            key01
+            key02
+            key03
+            key04
+            key05
+            data
+            ooc
+            oos
+            dataSet {
               id
               name
               description
-              useCase
-              dataItems {
-                name
-                description
-                active
-                tag
-                type
-                unit
-                options
-                quota
-                spec
-              }
             }
+            dataItems {
+              name
+              description
+              tag
+              unit
+              spec
+            }
+            judgment
+            workDate
+            workShift
+            updater {
+              id
+              name
+            }
+            updatedAt
+            collectedAt
           }
-        `,
-        variables: {
-          id: this.dataSample.dataSet.id
         }
-      })
+      `,
+      variables: {
+        id
+      }
+    })
 
-      this.dataSet = response.data.dataSet
-    }
+    this.dataSample = response.data.dataSample
   }
 }