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

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)
+}

package/client/components/data-entry-form.ts

@@ -0,0 +1,109 @@
+import '@material/web/icon/icon.js'
+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 { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'
+import { DataSet } from '@operato/dataset'
+
+@customElement('data-entry-form')
+export class DataEntryForm extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-data-entry-form {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+
+      .footer span {
+        font-size: 0.8em;
+        color: var(--md-sys-color-on-surface);
+        line-height: 1.5;
+        padding: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Object }) dataSet?: DataSet & { id: string }
+
+  @state() dataSample?: { id: string; collectedAt: Date }
+
+  @query('ox-data-entry-form') entryForm!: OxDataEntryForm
+
+  render() {
+    return html`
+      <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+
+      <div class="footer">
+        <div filler></div>
+        ${!this.dataSample
+          ? html`
+              <button @click=${this.updateDataItems.bind(this)} done>
+                <md-icon>save</md-icon>${i18next.t('button.save')}
+              </button>
+            `
+          : html` <span>${i18next.t('field.collected-at')}: ${this.dataSample.collectedAt.toLocaleString()}</span> `}
+      </div>
+    `
+  }
+
+  private async updateDataItems() {
+    //@ts-ignore TODO replace with following line and confirm
+    const data = this.entryForm.buildValue()
+
+    const dataSample = {
+      dataSet: {
+        id: this.dataSet?.id
+      },
+      data
+    } as any
+
+    if (this.dataSample?.collectedAt) {
+      dataSample.collectedAt = this.dataSample.collectedAt
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($dataSample: NewDataSample!) {
+          createDataSample(dataSample: $dataSample) {
+            id
+            collectedAt
+          }
+        }
+      `,
+      variables: {
+        dataSample
+      },
+      context: {
+        hasUpload: true
+      }
+    })
+
+    if (!response.errors) {
+      const { id, collectedAt } = response.data.createDataSample
+      this.dataSample = {
+        id,
+        collectedAt: new Date(collectedAt)
+      }
+
+      document.dispatchEvent(
+        new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } })
+      )
+    }
+  }
+}

package/client/index.ts

@@ -0,0 +1 @@
+export * from './components/data-entry-form.js'