@things-factory/dataset 7.0.0-alpha.3 → 7.0.0-alpha.30

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

@@ -38,13 +38,7 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
   @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>
-    `
+    return html` <ox-data-entry-form .dataSet=${this.dataSet} .value=${this.output} @change=${this._updateDataItems}></ox-data-entry-form> `
   }
 
   async _updateDataItems() {

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) {
@@ -31,46 +33,18 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
         padding: var(--padding-wide);
         overflow: auto;
       }
-
-      label[instruction] {
-        display: flex;
-        flex-direction: column;
-
-        padding: var(--padding-wide);
-      }
-
-      label[instruction] 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() 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>
     `
   }
@@ -93,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) {
@@ -32,32 +34,16 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      label[instruction] {
-        display: flex;
-        flex-direction: column;
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
 
-        padding: var(--padding-wide);
-      }
-
-      label[instruction] 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);
+        div[content] {
+          display: block;
+          overflow: visible;
+        }
       }
     `
   ]
@@ -65,12 +51,12 @@ export class DataReviewActivityView 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>
     `
   }
@@ -93,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-edit.ts

@@ -1,7 +1,8 @@
-import '@operato/dataset/ox-data-sample-view.js'
+import '@operato/dataset/ox-data-ooc-brief-view.js'
+// import '@operato/dataset/ox-data-ooc-correction-part.js'
 
 import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
@@ -28,35 +29,12 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      ox-data-sample-view {
+      ox-data-ooc-brief-view {
         flex: 1;
         padding: var(--padding-wide);
         overflow: auto;
       }
 
-      div[instruction] {
-        display: flex;
-        flex-direction: column;
-
-        padding: var(--padding-wide);
-      }
-
-      label[instruction] {
-        display: flex;
-        flex-direction: column;
-
-        padding: var(--padding-wide);
-      }
-
-      label[instruction] h2 {
-        display: flex;
-
-        color: var(--title-text-color);
-        text-transform: capitalize;
-        margin: var(--title-margin);
-        align-items: center;
-      }
-
       label[action] {
         display: flex;
         flex-direction: column;
@@ -79,25 +57,21 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
 
       textarea {
         border: var(--input-field-border);
-        border-radius: var(--input-border-radius);
-        padding: var(--input-field-padding);
+        border-radius: 10px;
+        margin: var(--margin-default);
+        padding: var(--input-padding);
         font: var(--input-field-font);
 
         resize: none;
         outline: none;
         min-height: 200px;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
     `
   ]
 
   @property({ type: Object }) input?: any
   @property({ type: Object }) output?: any
+  @property({ type: Object }) activityThread?: any
 
   @state() dataOoc?: any
 
@@ -105,25 +79,24 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
 
   render() {
     const action = this.output?.action
+    const state = this.activityThread?.state
+    const editable = state == 'assigned' || state == 'started'
 
     return html`
       <div content>
-        <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
+        <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
       </div>
 
-      <div instruction>
-        <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
-        <div content>${this.input?.instruction}</div>
-      </div>
+      <!-- <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part> -->
 
-      <label action>
-        <h2><mwc-icon>build_circle</mwc-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>
+      ${editable
+        ? html`
+            <label action>
+              <h2><mwc-icon>build_circle</mwc-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}
     `
   }
 
@@ -162,6 +135,9 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
               useCase
               data
               judgment
+              history
+              correctiveAction
+              correctiveInstruction
               dataItems {
                 name
                 description
@@ -178,7 +154,17 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
               }
               workDate
               workShift
+              reviewer {
+                id
+                name
+              }
+              corrector {
+                id
+                name
+              }
               collectedAt
+              reviewedAt
+              correctedAt
             }
           }
         `,
@@ -187,7 +173,17 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
         }
       })
 
-      this.dataOoc = response.data.dataOoc
+      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

@@ -9,7 +9,7 @@ import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
 @customElement('activity-ooc-resolve-view')
-class OocResolveActivityView extends localize(i18next)(LitElement) {
+export class OocResolveActivityView extends localize(i18next)(LitElement) {
   static styles = [
     ScrollbarStyles,
     css`
@@ -34,46 +34,23 @@ class OocResolveActivityView extends localize(i18next)(LitElement) {
         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;
-      }
-
-      div[action] {
-        display: flex;
-        flex-direction: column;
-
-        padding: var(--padding-wide);
-      }
-
-      div[action] div {
-        display: flex;
-      }
-
-      div[action] div[content] {
-        display: flex;
-        min-height: 50px;
-      }
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
 
-      mwc-icon {
-        color: var(--status-danger-color);
+        div[content] {
+          display: block;
+          overflow: visible;
+        }
       }
     `
   ]
 
   @property({ type: Object }) input?: any
   @property({ type: Object }) output?: any
+  @property({ type: Object }) activityApproval?: any
 
   @state() dataOoc?: any
 
@@ -147,7 +124,20 @@ class OocResolveActivityView extends localize(i18next)(LitElement) {
         }
       })
 
-      this.dataOoc = response.data.dataOoc
+      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

@@ -39,47 +39,50 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
         flex-direction: column;
 
         padding: var(--padding-wide);
-      }
 
-      label[instruction] h2 {
-        display: flex;
+        h2 {
+          display: flex;
 
-        color: var(--title-text-color);
-        text-transform: capitalize;
-        margin: var(--title-margin);
-        align-items: center;
-      }
+          color: var(--title-text-color);
+          text-transform: capitalize;
+          margin: var(--title-margin);
+          align-items: center;
+        }
 
-      mwc-icon {
-        color: var(--status-danger-color);
-      }
+        div {
+          padding: var(--padding-wide);
+          font: var(--input-field-font);
+        }
 
-      textarea {
-        border: var(--input-field-border);
-        border-radius: var(--input-border-radius);
-        padding: var(--input-field-padding);
-        font: var(--input-field-font);
+        mwc-icon {
+          color: var(--status-danger-color);
+        }
 
-        resize: none;
-        outline: none;
-        min-height: 200px;
-      }
+        textarea {
+          border: var(--input-field-border);
+          border-radius: 10px;
+          margin: var(--margin-default);
+          padding: var(--input-padding);
+          font: var(--input-field-font);
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
+          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 == 'assigned' || state == 'started' || state == 'submitted'
 
     return html`
       <div content>
@@ -88,11 +91,15 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
 
       <label instruction>
         <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
-        <textarea
-          placeholder=${String(i18next.t('text.corrective instruction placeholder'))}
-          .value=${instruction || ''}
-          @change=${this.onChangeInstruction}
-        ></textarea>
+        ${editable
+          ? html`
+              <textarea
+                placeholder=${String(i18next.t('text.corrective instruction placeholder'))}
+                .value=${instruction || ''}
+                @change=${this.onChangeInstruction}
+              ></textarea>
+            `
+          : html`<div>${instruction}</div>`}
       </label>
     `
   }

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

@@ -34,24 +34,16 @@ class OocReviewActivityView extends localize(i18next)(LitElement) {
         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;
-      }
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
 
-      mwc-icon {
-        color: var(--status-danger-color);
+        div[content] {
+          display: block;
+          overflow: visible;
+        }
       }
     `
   ]
@@ -62,8 +54,6 @@ class OocReviewActivityView extends localize(i18next)(LitElement) {
   @state() dataOoc?: any
 
   render() {
-    const instruction = this.output?.instruction
-
     return html`
       <div content>
         <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>