@things-factory/dataset 6.0.27 → 6.0.28

package/client/bootstrap.ts

@@ -1,4 +1,6 @@
-import './components/data-ooc-activity-view' /* refered by the activity template (activity-ooc) on server */
+import './components/data-collect-activity-view' /* refered by the activity template (activity-data-collect) on server */
+import './components/ooc-review-activity-view' /* refered by the activity template (activity-ooc-review) on server */
+import './components/ooc-resolve-activity-view' /* refered by the activity template (activity-ooc-resolve) on server */
 
 import '@operato/app/filter-renderer.js' /* register resource-object filter renderer */
 
@@ -8,7 +10,7 @@ import {
   registerEditor as registerGristEditor,
   registerRenderer as registerGristRenderer
 } from '@operato/data-grist'
-import { OxGristEditorDataItemSpec } from '@operato/dataset/grist-editor'
+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'
 
 export default function bootstrap() {

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

@@ -0,0 +1,100 @@
+import '@operato/dataset/ox-data-entry-form.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 { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'
+import { DataSet } from '@operato/dataset'
+
+@customElement('data-collect-activity-view')
+export class DataCollectActivityView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      ox-data-entry-form {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataSet?: DataSet & { id: string }
+
+  @query('ox-data-entry-form') entryForm!: OxDataEntryForm
+
+  render() {
+    return html`
+      <ox-data-entry-form
+        .dataSet=${this.dataSet}
+        .value=${this.output}
+        @change=${this._updateDataItems}
+      ></ox-data-entry-form>
+    `
+  }
+
+  async _updateDataItems() {
+    this.output = this.entryForm.value
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.output
+      })
+    )
+  }
+
+  updated(changes) {
+    if (changes.has('input')) {
+      this.fetchDataSet()
+    }
+  }
+
+  async fetchDataSet() {
+    const id = this.input.dataSetId
+
+    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.dataSet = response.data.dataSet
+    }
+  }
+}

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

@@ -0,0 +1,174 @@
+import '@operato/dataset/ox-data-sample-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'
+
+@customElement('ooc-resolve-activity-view')
+class OocResolveActivityView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--padding-wide);
+        overflow: auto;
+      }
+
+      div[instruction] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--padding-wide);
+      }
+
+      div[instruction] div {
+        display: flex;
+      }
+
+      div[instruction] div[content] {
+        display: flex;
+        min-height: 50px;
+      }
+
+      label[action] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--padding-wide);
+      }
+
+      label[action] 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 }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataOoc?: any
+
+  @query('textarea') actionTextArea!: HTMLTextAreaElement
+
+  render() {
+    const action = this.output?.action
+
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
+      </div>
+
+      <div instruction>
+        <div><mwc-icon>build_circle</mwc-icon> <span>corrective instruction</span></div>
+        <div content>${this.input?.instruction}</div>
+      </div>
+
+      <label action>
+        <div><mwc-icon>build_circle</mwc-icon> <span>corrective action</span></div>
+        <textarea
+          placeholder="시정 및 예방을 위한 조치 이행 사항을 입력해주세요."
+          .value=${action || ''}
+          @change=${this.onChangeAction}
+        ></textarea>
+      </label>
+    `
+  }
+
+  onChangeAction(e: Event) {
+    this.output ||= {}
+    this.output.action = (e.target as HTMLTextAreaElement).value
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.output
+      })
+    )
+  }
+
+  updated(changes) {
+    if (changes.has('input')) {
+      this.fetchDataOoc()
+    }
+  }
+
+  async fetchDataOoc() {
+    const id = this.input.dataOocId
+
+    if (id) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataOoc(id: $id) {
+              id
+              name
+              description
+              ooc
+              oos
+              state
+              type
+              useCase
+              data
+              judgment
+              dataItems {
+                name
+                description
+                active
+                tag
+                type
+                unit
+                options
+                quota
+                spec
+              }
+              workDate
+              workShift
+              collectedAt
+            }
+          }
+        `,
+        variables: {
+          id
+        }
+      })
+
+      this.dataOoc = response.data.dataOoc
+    }
+  }
+}

package/client/components/{data-ooc-activity-view.ts → ooc-review-activity-view.ts}

@@ -8,8 +8,8 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
-@customElement('data-ooc-activity-view')
-class DataOocActivityView extends localize(i18next)(LitElement) {
+@customElement('ooc-review-activity-view')
+class OocReviewActivityView extends localize(i18next)(LitElement) {
   static styles = [
     ScrollbarStyles,
     css`
@@ -28,20 +28,20 @@ class DataOocActivityView extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      ox-data-ooc-view {
+      ox-data-sample-view {
         flex: 1;
         padding: var(--padding-wide);
         overflow: auto;
       }
 
-      label[comment] {
+      label[instruction] {
         display: flex;
         flex-direction: column;
 
         padding: var(--padding-wide);
       }
 
-      label[comment] div {
+      label[instruction] div {
         display: flex;
       }
 
@@ -69,30 +69,30 @@ class DataOocActivityView extends localize(i18next)(LitElement) {
 
   @state() dataOoc?: any
 
-  @query('textarea') commentTextArea!: HTMLTextAreaElement
+  @query('textarea') instructionTextArea!: HTMLTextAreaElement
 
   render() {
-    const comment = this.output?.comment
+    const instruction = this.output?.instruction
 
     return html`
       <div content>
         <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
       </div>
 
-      <label comment>
-        <div><mwc-icon>build_circle</mwc-icon> <span>correction activity</span></div>
+      <label instruction>
+        <div><mwc-icon>build_circle</mwc-icon> <span>corrective instruction</span></div>
         <textarea
-          placeholder="조치 내용을 입력해주세요."
-          .value=${comment || ''}
-          @change=${this.onChangeComment}
+          placeholder="시정 및 예방을 위한 조치 지시 사항을 입력해주세요."
+          .value=${instruction || ''}
+          @change=${this.onChangeInstruction}
         ></textarea>
       </label>
     `
   }
 
-  onChangeComment(e: Event) {
-    this.output = this.output || {}
-    this.output.comment = (e.target as HTMLTextAreaElement).value
+  onChangeInstruction(e: Event) {
+    this.output ||= {}
+    this.output.instruction = (e.target as HTMLTextAreaElement).value
 
     this.dispatchEvent(
       new CustomEvent('change', {
@@ -108,7 +108,7 @@ class DataOocActivityView extends localize(i18next)(LitElement) {
   }
 
   async fetchDataOoc() {
-    const id = this.input.dataOocId
+    const id = this.input?.dataOocId
 
     if (id) {
       const response = await client.query({

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

@@ -412,7 +412,13 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
               history
               workDate
               workShift
+              correctiveInstruction
               correctiveAction
+              reviewedAt
+              reviewer {
+                id
+                name
+              }
               correctedAt
               corrector {
                 id

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

@@ -1,4 +1,4 @@
-import '@operato/dataset/ox-data-ooc-view.js'
+import '@operato/dataset/ox-data-ooc-brief-view.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -10,7 +10,7 @@ import { ScrollbarStyles } from '@operato/styles'
 import { DataSet } from '@operato/dataset'
 
 @customElement('data-ooc-view')
-class DataOocView extends localize(i18next)(LitElement) {
+export class DataOocView extends localize(i18next)(LitElement) {
   static styles = [
     ScrollbarStyles,
     css`
@@ -28,7 +28,7 @@ class DataOocView extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      ox-data-ooc-view {
+      ox-data-ooc-brief-view {
         flex: 1;
         padding: var(--padding-wide);
         overflow: auto;
@@ -64,39 +64,19 @@ class DataOocView extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) dataSet?: DataSet
   @property({ type: Object }) dataOoc?: any
 
+  @state() dataSet?: DataSet
+
   @query('textarea') commentTextArea!: HTMLTextAreaElement
-  @query('ox-data-ooc-view') sampleView!: HTMLTextAreaElement
+  @query('ox-data-ooc-brief-view') sampleView!: HTMLTextAreaElement
 
   render() {
     const state = this.dataOoc?.state
 
     return html`
       <div content>
-        <ox-data-ooc-view .dataSet=${this.dataSet} .dataOoc=${this.dataOoc}></ox-data-ooc-view>
-      </div>
-
-      ${state === 'CREATED' || state === 'REVIEWED'
-        ? html`
-            <label comment>
-              <div><mwc-icon>build_circle</mwc-icon> <span>correction activity</span></div>
-              <textarea placeholder="조치 내용을 입력해주세요."></textarea>
-            </label>
-          `
-        : html``}
-
-      <div class="button-container">
-        ${state === 'CREATED'
-          ? html`<mwc-button raised @click=${() => this._processOoc('REVIEWED')}
-              >${i18next.t('button.reviewed')}</mwc-button
-            >`
-          : state === 'REVIEWED'
-          ? html`<mwc-button raised @click=${() => this._processOoc('CORRECTED')}
-              >${i18next.t('button.corrected')}</mwc-button
-            >`
-          : html``}
+        <ox-data-ooc-brief-view .dataSet=${this.dataSet} .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
       </div>
     `
   }
@@ -141,38 +121,4 @@ class DataOocView extends localize(i18next)(LitElement) {
       this.dataSet = response.data.dataSet
     }
   }
-
-  async _processOoc(state) {
-    const commentTextArea = this.commentTextArea
-    const comment = commentTextArea && commentTextArea.value
-    if (!comment || !comment.trim()) {
-      commentTextArea.focus()
-      return
-    }
-
-    const patch = {
-      state,
-      correctiveAction: comment
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $patch: DataOocPatch!) {
-          updateDataOoc(id: $id, patch: $patch) {
-            id
-          }
-        }
-      `,
-      variables: {
-        id: this.dataOoc?.id,
-        patch
-      }
-    })
-
-    if (!response.errors) {
-      document.dispatchEvent(
-        new CustomEvent('notify', { detail: { message: i18next.t('text.data ooc updated successfully') } })
-      )
-    }
-  }
 }