@things-factory/dataset 6.0.25 → 6.0.28

package/client/pages/data-key-set/{data-key-set-list-page.js → data-key-set-list-page.ts}

@@ -4,17 +4,26 @@ import './data-key-item-list'
 
 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,
+  GristData,
+  GristRecord
+} from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { navigate, PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { isMobileDevice } from '@operato/utils'
-import { encodeUrlParams } from '@things-factory/utils'
-
-import { getEditor, getRenderer } from '@operato/data-grist'
+import { isMobileDevice, encodeUrlParams } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
 
 const REPORT_TYPES = [
   {
@@ -29,6 +38,10 @@ const REPORT_TYPES = [
     display: 'Embed',
     value: 'embed'
   },
+  {
+    display: 'CustomElement',
+    value: 'custom-element'
+  },
   {
     display: 'Page',
     value: 'page'
@@ -46,34 +59,44 @@ const REPORT_TYPES = [
     value: 'shiny'
   }
 ]
+
+@customElement('data-key-set-list-page')
 export class DataKeySetListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      gristConfig: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
+        width: 100%;
 
-          width: 100%;
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+  ]
 
-          --grid-record-emphasized-background-color: red;
-          --grid-record-emphasized-color: yellow;
-        }
-      `
-    ]
-  }
+  @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 {
-      title: i18next.t('title.data-key-set list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-key-set list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-key-set',
       actions: [
         {
@@ -104,7 +127,7 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
           <div id="sorters">
@@ -112,7 +135,7 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sortersControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -134,10 +157,6 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -190,6 +209,8 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
                 switch (reportType) {
                   case 'generated':
                     break
+                  case 'custom-element':
+                    break
                   case 'page':
                     break
                   case 'embed':
@@ -312,7 +333,7 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -382,7 +403,7 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
     let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
-        let patchField = patch.id ? { id: patch.id } : {}
+        let patchField: any = patch.id ? { id: patch.id } : {}
         const dirtyFields = patch.__dirtyfields__
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
@@ -448,5 +469,3 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 }
-
-window.customElements.define('data-key-set-list-page', DataKeySetListPage)

package/client/pages/data-ooc/{data-ooc-list-page.js → data-ooc-list-page.ts}

@@ -3,47 +3,67 @@ import './data-ooc-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,
+  GristData,
+  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-ooc-list-page')
 export class DataOocListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      active: String,
-      gristConfig: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        overflow: hidden;
+      }
 
-          overflow: hidden;
-        }
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
 
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-      `
-    ]
-  }
+  @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 {
-      title: i18next.t('title.data-ooc list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-ooc list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-ooc',
       actions: [
         // {
@@ -71,7 +91,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
       >
         <div slot="headroom">
           <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
           <div id="sorters">
@@ -79,7 +99,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sortersControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -101,10 +121,6 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -360,7 +376,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     this.grist.fetch()
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -396,7 +412,13 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
               history
               workDate
               workShift
+              correctiveInstruction
               correctiveAction
+              reviewedAt
+              reviewer {
+                id
+                name
+              }
               correctedAt
               corrector {
                 id
@@ -427,7 +449,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
   }
 
   _exportableData() {
-    let records = []
+    let records = [] as GristRecord
     if (this.grist.selected && this.grist.selected.length > 0) {
       records = this.grist.selected
     } else {
@@ -439,7 +461,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
       .map(column => {
         return column.imex === true
           ? {
-              header: column.header.renderer(),
+              header: column.header.renderer(column),
               key: column.name,
               width: column.width,
               type: column.type
@@ -465,5 +487,3 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     return { header: headerSetting, data: data }
   }
 }
-
-window.customElements.define('data-ooc-list-page', DataOocListPage)

package/client/pages/data-ooc/data-ooc-view-page.ts

@@ -0,0 +1,115 @@
+import gql from 'graphql-tag'
+
+import { PropertyValues, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+
+import './data-ooc-view.js'
+
+@customElement('data-ooc-view-page')
+export class DataOocViewPage extends localize(i18next)(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+      }
+
+      data-ooc-view {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) dataOoc?: any
+
+  get context() {
+    return {
+      title: i18next.t('title.data-ooc list'),
+      help: 'dataset/data-ooc',
+      actions: []
+    }
+  }
+
+  render() {
+    return html` <data-ooc-view .dataOoc=${this.dataOoc}></data-ooc-view> `
+  }
+
+  updated(changes: PropertyValues<this>) {}
+
+  pageUpdated(changes: any, lifecycle: any, before: any) {
+    if (this.active) {
+      /*
+       * this page is activated
+       */
+      this.fetchOoc(lifecycle.resourceId)
+    } else {
+      /* this page is deactivated */
+    }
+  }
+
+  async fetchOoc(id: string) {
+    const response = await client.query({
+      query: gql`
+        query ($id: String!) {
+          dataOoc(id: $id) {
+            id
+            name
+            description
+            useCase
+            dataSet {
+              id
+              name
+            }
+            key01
+            key02
+            key03
+            key04
+            key05
+            partitionKeys
+            dataItems {
+              name
+              description
+              tag
+              unit
+              spec
+            }
+            data
+            rawData
+            judgment
+            ooc
+            oos
+            state
+            history
+            workDate
+            workShift
+            correctiveInstruction
+            correctiveAction
+            reviewedAt
+            reviewer {
+              id
+              name
+            }
+            correctedAt
+            corrector {
+              id
+              name
+            }
+            updater {
+              id
+              name
+            }
+            updatedAt
+            collectedAt
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.dataOoc = response.data.dataOoc
+  }
+}

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

@@ -0,0 +1,124 @@
+import '@operato/dataset/ox-data-ooc-brief-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 { DataSet } from '@operato/dataset'
+
+@customElement('data-ooc-view')
+export class DataOocView 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-ooc-brief-view {
+        flex: 1;
+        padding: var(--padding-wide);
+        overflow: auto;
+      }
+
+      label[comment] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--padding-wide);
+      }
+
+      label[comment] div {
+        display: flex;
+      }
+
+      mwc-icon {
+        color: var(--status-danger-color);
+      }
+
+      textarea {
+        border: var(--input-field-border);
+        border-radius: var(--input-border-radius);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+    `
+  ]
+
+  @property({ type: Object }) dataOoc?: any
+
+  @state() dataSet?: DataSet
+
+  @query('textarea') commentTextArea!: HTMLTextAreaElement
+  @query('ox-data-ooc-brief-view') sampleView!: HTMLTextAreaElement
+
+  render() {
+    const state = this.dataOoc?.state
+
+    return html`
+      <div content>
+        <ox-data-ooc-brief-view .dataSet=${this.dataSet} .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
+      </div>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('dataOoc')) {
+      this.fetchDataSet()
+    }
+  }
+
+  async fetchDataSet() {
+    const id = this.dataOoc?.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.dataOoc?.dataSet?.id
+        }
+      })
+
+      this.dataSet = response.data.dataSet
+    }
+  }
+}

package/client/pages/data-report/{data-report-embed-page.js → data-report-embed-page.ts}

@@ -6,41 +6,34 @@ import '@operato/data-grist'
 import '@things-factory/form-ui'
 
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView } from '@things-factory/shell'
-import { encodeUrlParams, getCookie } from '@things-factory/utils'
+import { encodeUrlParams } from '@operato/utils'
 
-class DataReportEmbedPage extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      _grnNo: String,
-      _status: String,
-      resourceId: String,
-      params: Object
-    }
-  }
+@customElement('data-report-embed-page')
+export class DataReportEmbedPage extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          padding: 0;
-        }
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
 
-        #container {
-          flex: 1;
-          padding: 0;
-          margin: 0;
-          border: 0;
-        }
-      `
-    ]
-  }
+  @query('iframe') iframe!: HTMLIFrameElement
 
   get context() {
     const filters = [
@@ -55,7 +48,7 @@ class DataReportEmbedPage extends localize(i18next)(PageView) {
       {
         title: i18next.t('button.print'),
         action: () => {
-          this.renderRoot.querySelector('iframe').contentWindow.print()
+          this.iframe.contentWindow?.print()
         },
         ...CommonButtonStyles.print
       }
@@ -76,7 +69,7 @@ class DataReportEmbedPage extends localize(i18next)(PageView) {
         }}
         ?url-params-sensitive=${this.active}
       ></ox-filters-form-base>
-      <iframe id="container" frameborder="0" style="border:0"></iframe>
+      <iframe frameborder="0" style="border:0"></iframe>
     `
   }
 
@@ -110,8 +103,6 @@ class DataReportEmbedPage extends localize(i18next)(PageView) {
 
     const encodedUrlParams = encodeUrlParams(urlParams)
 
-    this.shadowRoot.querySelector('#container').src = `/data-report/${reportType}/?${encodedUrlParams}`
+    this.iframe.src = `/data-report/${reportType}/?${encodedUrlParams}`
   }
 }
-
-window.customElements.define('data-report-embed-page', DataReportEmbedPage)