@things-factory/dataset 7.0.0-alpha.0 → 7.0.0-alpha.18

package/client/bootstrap.ts

@@ -1,19 +1,15 @@
 import './activities/activity-data-collect-edit' /* refered by the activity template (activity-data-collect) on server */
-import './activities/activity-ooc-review-edit' /* refered by the activity template (activity-ooc-review) on server */
-import './activities/activity-ooc-resolve-edit' /* refered by the activity template (activity-ooc-resolve) on server */
 import './activities/activity-data-collect-view' /* refered by the activity template (activity-data-collect) on server */
-import './activities/activity-ooc-review-view' /* refered by the activity template (activity-ooc-review) on server */
-import './activities/activity-ooc-resolve-view' /* refered by the activity template (activity-ooc-resolve) on server */
 import './activities/activity-data-review-edit' /* refered by the activity template (activity-data-review) on server */
 import './activities/activity-data-review-view' /* refered by the activity template (activity-data-review) on server */
+import './activities/activity-ooc-review-edit' /* refered by the activity template (activity-ooc-review) on server */
+import './activities/activity-ooc-review-view' /* refered by the activity template (activity-ooc-review) on server */
+import './activities/activity-ooc-resolve-edit' /* refered by the activity template (activity-ooc-resolve) on server */
+import './activities/activity-ooc-resolve-view' /* refered by the activity template (activity-ooc-resolve) on server */
 import '@operato/app/filter-renderer.js' /* register resource-object filter renderer */
 
 import { OxGristEditorCode } from '@operato/app/grist-editor/ox-grist-editor-code.js'
-import {
-  OxGristRendererJson5,
-  registerEditor as registerGristEditor,
-  registerRenderer as registerGristRenderer
-} from '@operato/data-grist'
+import { OxGristRendererJson5, registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'
 import { OxGristEditorDataItemSpec } from '@operato/dataset/grist-editor/ox-grist-editor-data-item-spec.js'
 import { OxGristEditorPartitionKeys } from '@operato/grist-editor/ox-grist-editor-partition-keys.js'
 import { OxGristRendererPartitionKeys } from '@operato/grist-editor/ox-grist-renderer-partition-keys.js'

package/client/pages/data-entry/data-entry-list-page.ts

@@ -46,23 +46,12 @@ const showEntryView = async (columns, data, column, record, rowIndex) => {
       const board = {
         id: entryView
       }
-      openPopup(
-        html`
-          <ox-board-viewer
-            style="background-color: white;"
-            .board=${board}
-            .provider=${provider}
-            hide-fullscreen
-            hide-navigation
-          ></ox-board-viewer>
-        `,
-        {
-          closable: true,
-          backdrop: true,
-          size: 'large',
-          title
-        }
-      )
+      openPopup(html` <ox-board-viewer style="background-color: white;" .board=${board} .provider=${provider} hide-fullscreen hide-navigation></ox-board-viewer> `, {
+        closable: true,
+        backdrop: true,
+        size: 'large',
+        title
+      })
 
       // navigate(`board-viewer/${entryView}?interactive=true&title=${title}`)
       break
@@ -129,12 +118,7 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
     const mode = 'CARD'
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
           <div class="title">
             <mwc-icon>summarize</mwc-icon>
@@ -300,6 +284,7 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
       ],
       rows: {
         appendable: false,
+        editable: false,
         selectable: {
           multiple: false
         },

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

@@ -1,6 +1,7 @@
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/input/ox-input-select-buttons.js'
+
 import './data-ooc-view.js'
 
 import gql from 'graphql-tag'
@@ -8,6 +9,8 @@ import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
+import { GhostPrint } from '@operato/ghost-print'
+
 function getOocStatus() {
   return [
     {
@@ -44,6 +47,8 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         flex-direction: column;
 
         overflow: hidden;
+
+        --grid-header-padding: 2px 0 2px 9px;
       }
 
       ox-grist {
@@ -74,6 +79,13 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         }
       },
       help: 'dataset/data-ooc',
+      actions: [
+        {
+          title: i18next.t('button.print'),
+          action: this.printOocs.bind(this),
+          icon: 'print'
+        }
+      ],
       exportable: {
         name: i18next.t('title.data-ooc list'),
         data: this._exportableData.bind(this)
@@ -123,22 +135,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           gutterName: 'button',
           fixed: true,
           icon: 'assignment_turned_in',
-          title: i18next.t('title.view detail ooc data'),
-          handlers: {
-            click: (columns, data, column, record, rowIndex) => {
-              const popup = openPopup(
-                html` <data-ooc-view .dataOoc=${record} style="background-color: white;"></data-ooc-view> `,
-                {
-                  backdrop: true,
-                  size: 'large',
-                  title: i18next.t('title.data-ooc view')
-                }
-              )
-              popup.onclosed = () => {
-                this.grist.fetch()
-              }
-            }
-          }
+          title: i18next.t('title.view detail ooc data')
         },
         {
           type: 'string',
@@ -147,7 +144,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           label: true,
           header: i18next.t('field.name'),
           record: {
-            editable: true
+            editable: false
           },
           filter: 'search',
           sortable: true,
@@ -160,7 +157,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           label: true,
           header: i18next.t('field.description'),
           record: {
-            editable: true
+            editable: false
           },
           filter: 'search',
           width: 150,
@@ -203,13 +200,25 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           filter: true,
           imex: true
         },
+        {
+          type: 'textarea',
+          name: 'correctiveInstruction',
+          label: true,
+          header: i18next.t('field.corrective-instruction'),
+          record: {
+            editable: false,
+            language: 'text'
+          },
+          width: 150,
+          imex: true
+        },
         {
           type: 'textarea',
           name: 'correctiveAction',
           label: true,
           header: i18next.t('field.corrective-action'),
           record: {
-            editable: true,
+            editable: false,
             language: 'text'
           },
           width: 150,
@@ -226,7 +235,10 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         {
           type: 'string',
           name: 'key01',
-          header: i18next.t('field.key-01'),
+          header: {
+            renderer: i18next.t('field.key-01'),
+            group: i18next.t('field.key')
+          },
           record: {
             editable: false
           },
@@ -237,7 +249,10 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         {
           type: 'string',
           name: 'key02',
-          header: i18next.t('field.key-02'),
+          header: {
+            renderer: i18next.t('field.key-02'),
+            group: i18next.t('field.key')
+          },
           record: {
             editable: false
           },
@@ -248,7 +263,10 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         {
           type: 'string',
           name: 'key03',
-          header: i18next.t('field.key-03'),
+          header: {
+            renderer: i18next.t('field.key-03'),
+            group: i18next.t('field.key')
+          },
           record: {
             editable: false
           },
@@ -259,7 +277,10 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         {
           type: 'string',
           name: 'key04',
-          header: i18next.t('field.key-04'),
+          header: {
+            renderer: i18next.t('field.key-04'),
+            group: i18next.t('field.key')
+          },
           record: {
             editable: false
           },
@@ -270,7 +291,10 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         {
           type: 'string',
           name: 'key05',
-          header: i18next.t('field.key-05'),
+          header: {
+            renderer: i18next.t('field.key-05'),
+            group: i18next.t('field.key')
+          },
           record: {
             editable: false
           },
@@ -353,6 +377,18 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         appendable: false,
         selectable: {
           multiple: true
+        },
+        handlers: {
+          click: (columns, data, column, record, rowIndex) => {
+            const popup = openPopup(html` <data-ooc-view data-ooc-id=${record.id} style="background-color: white;"></data-ooc-view> `, {
+              backdrop: true,
+              size: 'large',
+              title: i18next.t('title.data-ooc view')
+            })
+            popup.onclosed = () => {
+              this.grist.fetch()
+            }
+          }
         }
       },
       sorters: [
@@ -479,9 +515,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           .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)
+            record[key] = key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }
@@ -489,4 +523,14 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
 
     return { header: headerSetting, data: data }
   }
+
+  printOocs() {
+    const selected = this.grist.selected
+    const ids = selected.map(record => record.id).join('|')
+
+    GhostPrint.print({
+      src: `./data-oocs?ids=${ids}`
+      // pending: 200 * selected.length
+    })
+  }
 }

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

@@ -8,7 +8,7 @@ import { client } from '@operato/graphql'
 
 import './data-ooc-view.js'
 
-@customElement('data-ooc-view-page')
+@customElement('data-ooc-page')
 export class DataOocViewPage extends localize(i18next)(PageView) {
   static styles = [
     css`
@@ -19,6 +19,13 @@ export class DataOocViewPage extends localize(i18next)(PageView) {
       data-ooc-view {
         flex: 1;
       }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+      }
     `
   ]
 
@@ -72,6 +79,7 @@ export class DataOocViewPage extends localize(i18next)(PageView) {
               name
               description
               active
+              hidden
               tag
               group
               type
@@ -79,6 +87,7 @@ export class DataOocViewPage extends localize(i18next)(PageView) {
               options
               quota
               spec
+              stat
             }
             data
             rawData
@@ -107,6 +116,41 @@ export class DataOocViewPage extends localize(i18next)(PageView) {
             }
             updatedAt
             collectedAt
+            reviewActivityInstance {
+              ...ActivityInstanceFragment
+            }
+            resolveActivityInstance {
+              ...ActivityInstanceFragment
+            }
+          }
+        }
+
+        fragment ActivityInstanceFragment on ActivityInstance {
+          activityThreads {
+            assignee {
+              name
+            }
+            output
+            activityApprovals {
+              judgment
+              approver {
+                name
+              }
+              comment
+              createdAt
+              updatedAt
+              terminatedAt
+            }
+            activityThreadHistories {
+              transaction
+              reason
+              updater {
+                name
+              }
+              updatedAt
+              state
+              output
+            }
           }
         }
       `,

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

@@ -1,10 +1,15 @@
 import '@operato/dataset/ox-data-ooc-brief-view.js'
+import '@material/mwc-fab'
+import '@things-factory/worklist/dist-client/components/activity-thread-timeline.js'
 
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import gql from 'graphql-tag'
+import { css, html, LitElement, nothing } 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 { GhostPrint } from '@operato/ghost-print'
 
 @customElement('data-ooc-view')
 export class DataOocView extends localize(i18next)(LitElement) {
@@ -12,67 +17,219 @@ export class DataOocView extends localize(i18next)(LitElement) {
     ScrollbarStyles,
     css`
       :host {
-        display: flex;
-        flex-direction: column;
-
+        display: block;
+        position: relative;
         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);
+      activity-thread-timeline {
+        margin: var(--margin-default);
       }
 
-      label[comment] div {
-        display: flex;
+      mwc-fab {
+        position: fixed;
+        bottom: 15px;
+        right: 16px;
+        text-decoration: auto;
+        opacity: 0.5;
       }
 
-      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);
+      @media print {
+        mwc-fab {
+          display: none;
+        }
       }
     `
   ]
 
-  @property({ type: Object }) dataOoc?: any
+  @property({
+    type: String,
+    attribute: 'data-ooc-id'
+  })
+  dataOocId?: string
 
-  @query('textarea') commentTextArea!: HTMLTextAreaElement
-  @query('ox-data-ooc-brief-view') sampleView!: HTMLTextAreaElement
+  @state() dataOoc?: any
+
+  private printHandler = this.handlePrint.bind(this)
 
   render() {
-    const state = this.dataOoc?.state
+    if (!this.dataOoc) {
+      return nothing
+    }
+
+    const reviewActivityThread = this.dataOoc?.reviewActivityInstance?.activityThreads?.[0]
+    const resolveActivityThread = this.dataOoc?.resolveActivityInstance?.activityThreads?.[0]
 
     return html`
-      <div content>
-        <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
-      </div>
+      <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
+      ${reviewActivityThread
+        ? html`
+            <activity-thread-timeline
+              subtitle=${String(i18next.t('label.ooc review timeline'))}
+              .activityThread=${reviewActivityThread}
+              short-form
+            ></activity-thread-timeline>
+          `
+        : nothing}
+      ${resolveActivityThread
+        ? html`
+            <activity-thread-timeline
+              subtitle=${String(i18next.t('label.ooc resolve timeline'))}
+              .activityThread=${resolveActivityThread}
+              short-form
+            ></activity-thread-timeline>
+          `
+        : nothing}
+
+      <mwc-fab
+        icon="print"
+        title="print"
+        @click=${() =>
+          GhostPrint.print({
+            src: `./data-ooc/${this.dataOoc.id}`
+          })}
+        >print</mwc-fab
+      >
     `
   }
+
+  updated(changes) {
+    if (changes.has('dataOocId')) {
+      this.fetchDataOoc()
+    }
+  }
+
+  async fetchDataOoc() {
+    const id = this.dataOocId
+
+    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
+              active
+              hidden
+              tag
+              group
+              type
+              unit
+              options
+              quota
+              spec
+              stat
+            }
+            data
+            rawData
+            judgment
+            ooc
+            oos
+            state
+            history
+            workDate
+            workShift
+            correctiveInstruction
+            correctiveAction
+            reviewedAt
+            reviewer {
+              id
+              name
+            }
+            correctedAt
+            corrector {
+              id
+              name
+            }
+            updater {
+              id
+              name
+            }
+            updatedAt
+            collectedAt
+            reviewActivityInstance {
+              ...ActivityInstanceFragment
+            }
+            resolveActivityInstance {
+              ...ActivityInstanceFragment
+            }
+          }
+        }
+
+        fragment ActivityInstanceFragment on ActivityInstance {
+          activityThreads {
+            assignee {
+              name
+            }
+            output
+            activityApprovals {
+              judgment
+              approver {
+                name
+              }
+              comment
+              createdAt
+              updatedAt
+              terminatedAt
+            }
+            activityThreadHistories {
+              transaction
+              reason
+              updater {
+                name
+              }
+              updatedAt
+              state
+              output
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.dataOoc = response.data.dataOoc
+  }
+
+  handlePrint(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+      event.preventDefault()
+
+      GhostPrint.print({
+        src: `./data-ooc/${this.dataOoc.id}`
+      })
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    window.addEventListener('keydown', this.printHandler)
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    window.removeEventListener('keydown', this.printHandler)
+  }
 }