@things-factory/dataset 5.0.1 → 5.0.4

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

@@ -158,6 +158,61 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
           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',
@@ -284,6 +339,11 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
               name
               description
               useCase
+              key01
+              key02
+              key03
+              key04
+              key05
               dataSet {
                 id
                 name

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

@@ -0,0 +1,406 @@
+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()
+    }
+  }
+
+  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 .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
+        },
+        ...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 = [] }) {
+    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
+              dataSet {
+                id
+                name
+                description
+              }
+              dataItems {
+                name
+                description
+                tag
+                unit
+                spec
+              }
+              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

@@ -1,16 +1,13 @@
 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
     }
   }
@@ -42,58 +39,13 @@ 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>
+        <ox-data-sample-view .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 {
-                name
-                description
-                active
-                tag
-                type
-                unit
-                options
-                quota
-                spec
-              }
-            }
-          }
-        `,
-        variables: {
-          id: this.dataSample.dataSet.id
-        }
-      })
-
-      this.dataSet = response.data.dataSet
-    }
-  }
 }
 
 window.customElements.define('data-sample-view', DataSampleView)

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

@@ -337,6 +337,20 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
           filter: true,
           width: 80
         },
+        {
+          type: 'resource-object',
+          name: 'dataKeySet',
+          header: i18next.t('field.data-key-set'),
+          record: {
+            editable: true,
+            options: {
+              queryName: 'dataKeySets'
+            }
+          },
+          sortable: true,
+          filter: false,
+          width: 120
+        },
         {
           type: 'partition-keys',
           name: 'partitionKeys',
@@ -385,6 +399,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
             key: 'timezone'
           }
         },
+
         {
           type: 'resource-object',
           name: 'supervisoryRole',
@@ -396,7 +411,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
             }
           },
           sortable: true,
-          filter: 'like',
+          filter: false,
           width: 120
         },
         {
@@ -554,6 +569,10 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
               useCase
               schedule
               timezone
+              dataKeySet {
+                id
+                name
+              }
               entryRole {
                 id
                 name

package/client/route.js

@@ -12,6 +12,10 @@ export default function route(page) {
       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-ooc-list':
       import('./pages/data-ooc/data-ooc-list-page.js')
       return page
@@ -31,7 +35,7 @@ export default function route(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
@@ -39,5 +43,9 @@ export default function route(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
   }
 }