@things-factory/dataset 7.0.0-alpha.6 → 7.0.0-alpha.7

package/client/activities/activity-data-collect-view.ts

@@ -26,6 +26,13 @@ export class DataCollectActivityView extends localize(i18next)(LitElement) {
         padding: 10px;
         overflow: auto;
       }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+      }
     `
   ]
 

package/client/activities/activity-data-review-edit.ts

@@ -1,10 +1,12 @@
 import '@operato/dataset/ox-data-entry-form.js'
 
+import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
+import { client } from '@operato/graphql'
 
 @customElement('activity-data-review-edit')
 export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
@@ -37,12 +39,12 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
   @property({ type: Object }) input?: any
   @property({ type: Object }) output?: any
 
-  @state() dataReview?: any
+  @state() dataSample?: any
 
   render() {
     return html`
       <div content>
-        <ox-data-sample-view .dataSample=${this.dataReview}></ox-data-sample-view>
+        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>
       </div>
     `
   }
@@ -65,7 +67,67 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
   }
 
   async fetchDataAssign() {
-    const dataSample = this.input?.dataSample
-    this.dataReview = dataSample
+    const { dataSampleId, dataSample } = this.input || {}
+
+    if (dataSample) {
+      /* only for backwards compatibility - should be deleted later */
+      this.dataSample = dataSample
+    } else if (dataSampleId) {
+      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
+              }
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              judgment
+              workDate
+              workShift
+              updater {
+                id
+                name
+              }
+              updatedAt
+              collectedAt
+            }
+          }
+        `,
+        variables: {
+          id: dataSampleId
+        }
+      })
+
+      this.dataSample = {
+        ...response.data.dataSample
+      }
+    }
   }
 }

package/client/activities/activity-data-review-view.ts

@@ -1,10 +1,12 @@
 import '@operato/dataset/ox-data-entry-form.js'
 
+import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
+import { client } from '@operato/graphql'
 
 @customElement('activity-data-review-view')
 export class DataReviewActivityView extends localize(i18next)(LitElement) {
@@ -31,18 +33,30 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
         padding: var(--padding-wide);
         overflow: auto;
       }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+
+        div[content] {
+          display: block;
+          overflow: visible;
+        }
+      }
     `
   ]
 
   @property({ type: Object }) input?: any
   @property({ type: Object }) output?: any
 
-  @state() dataReview?: any
+  @state() dataSample?: any
 
   render() {
     return html`
       <div content>
-        <ox-data-sample-view .dataSample=${this.dataReview}></ox-data-sample-view>
+        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>
       </div>
     `
   }
@@ -65,7 +79,67 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
   }
 
   async fetchDataAssign() {
-    const dataSample = this.input?.dataSample
-    this.dataReview = dataSample
+    const { dataSampleId, dataSample } = this.input || {}
+
+    if (dataSample) {
+      /* only for backwards compatibility - should be deleted later */
+      this.dataSample = dataSample
+    } else if (dataSampleId) {
+      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
+              }
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              judgment
+              workDate
+              workShift
+              updater {
+                id
+                name
+              }
+              updatedAt
+              collectedAt
+            }
+          }
+        `,
+        variables: {
+          id: dataSampleId
+        }
+      })
+
+      this.dataSample = {
+        ...response.data.dataSample
+      }
+    }
   }
 }

package/client/activities/activity-ooc-resolve-view.ts

@@ -33,6 +33,18 @@ export class OocResolveActivityView extends localize(i18next)(LitElement) {
         padding: var(--padding-wide);
         overflow: auto;
       }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+
+        div[content] {
+          display: block;
+          overflow: visible;
+        }
+      }
     `
   ]
 

package/client/activities/activity-ooc-review-view.ts

@@ -33,6 +33,18 @@ class OocReviewActivityView extends localize(i18next)(LitElement) {
         padding: var(--padding-wide);
         overflow: auto;
       }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+
+        div[content] {
+          display: block;
+          overflow: visible;
+        }
+      }
     `
   ]
 

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

@@ -47,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 {
@@ -136,7 +138,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           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> `, {
+              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')
@@ -154,7 +156,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,
@@ -167,7 +169,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,
@@ -210,13 +212,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,
@@ -233,7 +247,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
           },
@@ -244,7 +261,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
           },
@@ -255,7 +275,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
           },
@@ -266,7 +289,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
           },
@@ -277,7 +303,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
           },

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

@@ -19,6 +19,13 @@ export class DataOocViewPage extends localize(i18next)(PageView) {
       data-ooc-view {
         flex: 1;
       }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+      }
     `
   ]
 
@@ -107,6 +114,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,9 +1,12 @@
 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'
@@ -14,21 +17,23 @@ export class DataOocView extends localize(i18next)(LitElement) {
     ScrollbarStyles,
     css`
       :host {
-        display: flex;
-        flex-direction: column;
+        display: block;
         position: relative;
-
         background-color: #fff;
+
+        overflow: auto;
       }
 
       ox-data-ooc-brief-view {
-        flex: 1;
         padding: var(--padding-wide);
-        overflow: auto;
+      }
+
+      activity-thread-timeline {
+        margin: var(--margin-default);
       }
 
       mwc-fab {
-        position: absolute;
+        position: fixed;
         bottom: 15px;
         right: 16px;
         text-decoration: auto;
@@ -36,15 +41,6 @@ export class DataOocView extends localize(i18next)(LitElement) {
       }
 
       @media print {
-        :host {
-          display: block;
-        }
-
-        ox-data-ooc-brief-view {
-          flex: unset;
-          overflow: visible;
-        }
-
         mwc-fab {
           display: none;
         }
@@ -52,15 +48,44 @@ export class DataOocView extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) dataOoc?: any
+  @property({
+    type: String,
+    attribute: 'data-ooc-id'
+  })
+  dataOocId?: string
 
-  @query('ox-data-ooc-brief-view') sampleView!: HTMLTextAreaElement
+  @state() dataOoc?: any
 
   private printHandler = this.handlePrint.bind(this)
 
   render() {
+    if (!this.dataOoc) {
+      return nothing
+    }
+
+    const reviewActivityThread = this.dataOoc?.reviewActivityInstance?.activityThreads?.[0]
+    const resolveActivityThread = this.dataOoc?.resolveActivityInstance?.activityThreads?.[0]
+
     return html`
       <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"
@@ -74,6 +99,120 @@ export class DataOocView extends localize(i18next)(LitElement) {
     `
   }
 
+  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()