@things-factory/dataset 8.0.0-beta.9 → 8.0.2

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

@@ -0,0 +1,195 @@
+import '@material/web/icon/icon.js'
+import '@operato/dataset/ox-data-ooc-brief-view.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'
+
+@customElement('activity-ooc-resolve-edit')
+class OocResolveActivityEdit extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-ooc-brief-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+
+      label[action] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--spacing-large);
+      }
+
+      label[action] h2 {
+        display: flex;
+
+        color: var(--title-text-color);
+        text-transform: capitalize;
+        margin: var(--title-margin);
+        align-items: center;
+      }
+
+      md-icon {
+        color: var(--status-danger-color);
+      }
+
+      textarea {
+        border: var(--input-field-border);
+        border-radius: var(--spacing-small);
+        margin: var(--spacing-medium);
+        padding: var(--spacing-medium);
+        font: var(--input-field-font);
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-variant);
+
+        resize: none;
+        outline: none;
+        min-height: 200px;
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+  @property({ type: Object }) activityThread?: any
+
+  @state() dataOoc?: any
+
+  @query('textarea') actionTextArea!: HTMLTextAreaElement
+
+  render() {
+    const action = this.output?.action
+    const state = this.activityThread?.state
+    const editable = state == 'unassigned' || state == 'assigned' || state == 'started'
+
+    return html`
+      <div content>
+        <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
+      </div>
+
+      <!-- <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part> -->
+
+      ${editable
+        ? html`
+            <label action>
+              <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
+              <textarea
+                placeholder=${String(i18next.t('text.corrective action placeholder'))}
+                .value=${action || ''}
+                @change=${this.onChangeAction}
+              ></textarea>
+            </label>
+          `
+        : nothing}
+    `
+  }
+
+  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
+              history
+              correctiveAction
+              correctiveInstruction
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              workDate
+              workShift
+              reviewer {
+                id
+                name
+              }
+              corrector {
+                id
+                name
+              }
+              collectedAt
+              reviewedAt
+              correctedAt
+            }
+          }
+        `,
+        variables: {
+          id
+        }
+      })
+
+      const dataOoc = {
+        ...response.data.dataOoc
+      }
+
+      if (this.activityThread?.output) {
+        dataOoc.correctiveAction = this.activityThread.output.action
+        dataOoc.correctedAt = this.activityThread.updatedAt
+        dataOoc.corrector = this.activityThread.assignee
+      }
+
+      this.dataOoc = dataOoc
+    }
+  }
+}

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

@@ -0,0 +1,143 @@
+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'
+
+@customElement('activity-ooc-resolve-view')
+export class OocResolveActivityView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-ooc-brief-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        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
+  @property({ type: Object }) activityApproval?: any
+
+  @state() dataOoc?: any
+
+  render() {
+    return html`
+      <div content>
+        <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
+      </div>
+    `
+  }
+
+  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
+              history
+              correctiveAction
+              correctiveInstruction
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              workDate
+              workShift
+              reviewer {
+                id
+                name
+              }
+              corrector {
+                id
+                name
+              }
+              collectedAt
+              reviewedAt
+              correctedAt
+            }
+          }
+        `,
+        variables: {
+          id
+        }
+      })
+
+      const dataOoc = {
+        ...response.data.dataOoc
+      }
+
+      const activityThread = this.activityApproval?.activityThread
+
+      if (activityThread?.output) {
+        /* approval 에서 사용되는 경우 corrective 관련정보를 보완한다. - approval과정에서는 아직 dataOoc.correctiveAction 정보는 채워지지 않았기 때문. */
+        dataOoc.correctiveAction = activityThread.output.action
+        dataOoc.correctedAt = activityThread.updatedAt
+        dataOoc.corrector = activityThread.assignee
+      }
+
+      this.dataOoc = dataOoc
+    }
+  }
+}

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

@@ -0,0 +1,173 @@
+import '@material/web/icon/icon.js'
+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('activity-ooc-review-edit')
+class OocReviewActivityEdit extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+
+      label[instruction] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--spacing-large);
+
+        h2 {
+          display: flex;
+
+          color: var(--title-text-color);
+          text-transform: capitalize;
+          margin: var(--title-margin);
+          align-items: center;
+        }
+
+        div {
+          padding: var(--spacing-large);
+          font: var(--input-field-font);
+        }
+
+        md-icon {
+          color: var(--status-danger-color);
+        }
+
+        textarea {
+          border: var(--input-field-border);
+          border-radius: var(--spacing-small);
+          margin: var(--spacing-medium);
+          padding: var(--spacing-medium);
+          font: var(--input-field-font);
+          color: var(--md-sys-color-on-surface);
+          background: var(--md-sys-color-surface-variant);
+
+          resize: none;
+          outline: none;
+          min-height: 200px;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+  @property({ type: Object }) activityThread?: any
+
+  @state() dataOoc?: any
+
+  render() {
+    const instruction = this.output?.instruction
+    const { state } = this.activityThread || {}
+    const editable = state == 'unassigned' || state == 'assigned' || state == 'started' || state == 'submitted'
+
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
+      </div>
+
+      <label instruction>
+        <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
+        ${editable
+          ? html`
+              <textarea
+                placeholder=${String(i18next.t('text.corrective instruction placeholder'))}
+                .value=${instruction || ''}
+                @change=${this.onChangeInstruction}
+              ></textarea>
+            `
+          : html`<div>${instruction}</div>`}
+      </label>
+    `
+  }
+
+  onChangeInstruction(e: Event) {
+    this.output ||= {}
+    this.output.instruction = (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
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              workDate
+              workShift
+              collectedAt
+            }
+          }
+        `,
+        variables: {
+          id
+        }
+      })
+
+      this.dataOoc = response.data.dataOoc
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+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'
+
+@customElement('activity-ooc-review-view')
+class OocReviewActivityView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-ooc-brief-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        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() dataOoc?: any
+
+  render() {
+    return html`
+      <div content>
+        <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
+      </div>
+    `
+  }
+
+  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
+              history
+              correctiveAction
+              correctiveInstruction
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              workDate
+              workShift
+              reviewer {
+                id
+                name
+              }
+              corrector {
+                id
+                name
+              }
+              collectedAt
+              reviewedAt
+              correctedAt
+            }
+          }
+        `,
+        variables: {
+          id
+        }
+      })
+
+      this.dataOoc = response.data.dataOoc
+    }
+  }
+}

package/client/bootstrap.ts

@@ -0,0 +1,35 @@
+import './activities/activity-data-collect-edit' /* refered by the activity template (activity-data-collect) on server */
+import './activities/activity-data-collect-view' /* refered by the activity template (activity-data-collect) 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 { 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'
+
+import { OxGristEditorSignature } from '@operato/grist-editor/ox-grist-editor-signature.js'
+import { OxGristRendererSignature } from '@operato/grist-editor/ox-grist-renderer-signature.js'
+
+export default function bootstrap() {
+  registerGristEditor('data-item-spec', OxGristEditorDataItemSpec)
+  registerGristRenderer('data-item-spec', OxGristRendererJson5)
+
+  registerGristEditor('script', OxGristEditorCode)
+
+  registerGristEditor('partition-keys', OxGristEditorPartitionKeys)
+  registerGristRenderer('partition-keys', OxGristRendererPartitionKeys)
+
+  registerGristRenderer('signature', OxGristRendererSignature)
+  registerGristEditor('signature', OxGristEditorSignature)
+}