@things-factory/dataset 8.0.13 → 8.0.20

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

@@ -1,4 +1,5 @@
 import '@operato/dataset/ox-data-entry-form.js'
+import '@operato/dataset/ox-checklist-entry-form.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -8,6 +9,8 @@ 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 { OxChecklistEntryForm } from '@operato/dataset/ox-checklist-entry-form.js'
+
 import { DataSet } from '@operato/dataset'
 
 @customElement('activity-data-collect-edit')
@@ -33,23 +36,84 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
   @property({ type: Object }) input?: any
   @property({ type: Object }) output?: any
 
-  @state() dataSet?: DataSet & { id: string }
+  @state() dataSet?: DataSet & { id: string; entryType?: string; entryView?: string }
+
+  @query('ox-data-entry-form') dataEntryForm?: OxDataEntryForm
+  @query('ox-checklist-entry-form') checklistEntryForm?: OxChecklistEntryForm
+
+  get entryForm() {
+    const entryType = this.dataSet?.entryType
+    const entryView = this.dataSet?.entryView
 
-  @query('ox-data-entry-form') entryForm!: OxDataEntryForm
+    switch (entryType) {
+      case 'generated':
+        if (!entryView || entryView === 'DEFAULT') {
+          return this.dataEntryForm
+        } else if (entryView === 'CHECKLIST') {
+          return this.checklistEntryForm
+        }
+        break
+      case 'board':
+        break
+      case 'page':
+        break
+      default:
+        return this.dataEntryForm
+        break
+    }
+  }
 
   render() {
     return html`
-      <ox-data-entry-form
+      <div class="container">
+        <!-- <ox-data-entry-form
         .dataSet=${this.dataSet}
         .value=${this.output}
         @change=${this._updateDataItems}
-      ></ox-data-entry-form>
+      ></ox-data-entry-form> -->
+        ${this.showEntryView()}
+      </div>
     `
   }
 
+  private showEntryView() {
+    const entryType = this.dataSet?.entryType
+    const entryView = this.dataSet?.entryView
+
+    switch (entryType) {
+      case 'generated':
+        if (!entryView || entryView === 'DEFAULT') {
+          return html`<ox-data-entry-form
+            .dataSet=${this.dataSet}
+            .value=${this.output}
+            @change=${this._updateDataItems}
+          ></ox-data-entry-form>`
+        } else if (entryView === 'CHECKLIST') {
+          return html`<ox-checklist-entry-form
+            .dataSet=${this.dataSet}
+            .value=${this.output}
+            @change=${this._updateDataItems}
+          ></ox-checklist-entry-form>`
+        }
+        break
+      case 'board':
+        break
+      case 'page':
+        break
+      default:
+        return html`<ox-data-entry-form
+          .dataSet=${this.dataSet}
+          .value=${this.output}
+          @change=${this._updateDataItems}
+        ></ox-data-entry-form>`
+        break
+    }
+  }
+
   async _updateDataItems(e: CustomEvent) {
     e.stopPropagation()
 
+    //@ts-ignore TODO replace with following line and confirm
     this.output = this.entryForm.value
 
     this.dispatchEvent(
@@ -77,6 +141,8 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
               name
               description
               useCase
+              entryType
+              entryView
               dataItems {
                 name
                 description
@@ -84,6 +150,7 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

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

@@ -1,6 +1,7 @@
 import '@material/web/icon/icon.js'
 import '@material/web/radio/radio.js'
 import '@operato/dataset/ox-data-entry-form.js'
+import '@operato/dataset/ox-checklist-sample-view.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -113,9 +114,7 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
     const editable = state == 'unassigned' || state == 'assigned' || state == 'started' || state == 'submitted'
 
     return html`
-      <div content>
-        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>
-      </div>
+      <div content>${this.showDataSampleView()}</div>
 
       <form @change=${this.onChangeInstruction}>
         ${editable
@@ -188,6 +187,29 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
     `
   }
 
+  private showDataSampleView() {
+    const dataSet = this.dataSample?.dataSet
+    const monitorType = dataSet?.monitorType
+    const monitorView = dataSet?.monitorView
+
+    switch (monitorType) {
+      case 'generated':
+        if (!monitorView || monitorView === 'DEFAULT') {
+          return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
+        } else if (monitorView === 'CHECKLIST') {
+          return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
+        }
+        break
+      case 'board':
+        break
+      case 'page':
+        break
+      default:
+        return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
+        break
+    }
+  }
+
   onChangeInstruction(e: Event) {
     var output = {}
 
@@ -238,6 +260,8 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
                 id
                 name
                 description
+                monitorType
+                monitorView
               }
               dataItems {
                 name
@@ -246,6 +270,7 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

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

@@ -1,4 +1,5 @@
 import '@operato/dataset/ox-data-entry-form.js'
+import '@operato/dataset/ox-checklist-sample-view.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -103,9 +104,7 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
     const { judgment, instruction } = this.output || {}
 
     return html`
-      <div content>
-        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>
-      </div>
+      <div content>${this.showDataSampleView()}</div>
 
       <form>
         <label>
@@ -186,6 +185,8 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
                 id
                 name
                 description
+                monitorType
+                monitorView
               }
               dataItems {
                 name
@@ -194,6 +195,7 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options
@@ -223,4 +225,27 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
       }
     }
   }
+
+  private showDataSampleView() {
+    const dataSet = this.dataSample?.dataSet
+    const monitorType = dataSet?.monitorType
+    const monitorView = dataSet?.monitorView
+
+    switch (monitorType) {
+      case 'generated':
+        if (!monitorView || monitorView === 'DEFAULT') {
+          return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
+        } else if (monitorView === 'CHECKLIST') {
+          return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
+        }
+        break
+      case 'board':
+        break
+      case 'page':
+        break
+      default:
+        return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
+        break
+    }
+  }
 }

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

@@ -144,6 +144,12 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
               history
               correctiveAction
               correctiveInstruction
+              dataSet {
+                id
+                name
+                monitorType
+                monitorView
+              }
               dataItems {
                 name
                 description
@@ -151,6 +157,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

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

@@ -89,6 +89,12 @@ export class OocResolveActivityView extends localize(i18next)(LitElement) {
               history
               correctiveAction
               correctiveInstruction
+              dataSet {
+                id
+                name
+                monitorType
+                monitorView
+              }
               dataItems {
                 name
                 description
@@ -96,6 +102,7 @@ export class OocResolveActivityView extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

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

@@ -1,6 +1,6 @@
 import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-sample-view.js'
-
+import '@operato/dataset/ox-checklist-sample-view.js'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -89,7 +89,8 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
 
     return html`
       <div content>
-        <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
+        ${this.showDataSampleView()}
+        <!-- <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view> -->
       </div>
 
       <label instruction>
@@ -142,6 +143,12 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
               useCase
               data
               judgment
+              dataSet {
+                id
+                name
+                monitorType
+                monitorView
+              }
               dataItems {
                 name
                 description
@@ -149,6 +156,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options
@@ -170,4 +178,27 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
       this.dataOoc = response.data.dataOoc
     }
   }
+
+  private showDataSampleView() {
+    const dataSet = this.dataOoc?.dataSet
+    const monitorType = dataSet?.monitorType
+    const monitorView = dataSet?.monitorView
+
+    switch (monitorType) {
+      case 'generated':
+        if (!monitorView || monitorView === 'DEFAULT') {
+          return html`<ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>`
+        } else if (monitorView === 'CHECKLIST') {
+          return html`<ox-checklist-sample-view .dataSample=${this.dataOoc}></ox-checklist-sample-view>`
+        }
+        break
+      case 'board':
+        break
+      case 'page':
+        break
+      default:
+        return html`<ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>`
+        break
+    }
+  }
 }

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

@@ -88,6 +88,12 @@ class OocReviewActivityView extends localize(i18next)(LitElement) {
               history
               correctiveAction
               correctiveInstruction
+              dataSet {
+                id
+                name
+                monitorType
+                monitorView
+              }
               dataItems {
                 name
                 description
@@ -95,6 +101,7 @@ class OocReviewActivityView extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

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

@@ -1,5 +1,6 @@
 import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-entry-form.js'
+import '@operato/dataset/ox-checklist-entry-form.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -8,8 +9,9 @@ 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'
+import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'
+import { OxChecklistEntryForm } from '@operato/dataset/ox-checklist-entry-form.js'
 
 @customElement('data-entry-form')
 export class DataEntryForm extends localize(i18next)(LitElement) {
@@ -39,15 +41,38 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) dataSet?: DataSet & { id: string }
+  @property({ type: Object }) dataSet?: DataSet & { id: string; entryType?: string; entryView?: string }
 
   @state() dataSample?: { id: string; collectedAt: Date }
 
-  @query('ox-data-entry-form') entryForm!: OxDataEntryForm
+  @query('ox-data-entry-form') dataEntryForm?: OxDataEntryForm
+  @query('ox-checklist-entry-form') checklistEntryForm?: OxChecklistEntryForm
+
+  get entryForm() {
+    const entryType = this.dataSet?.entryType
+    const entryView = this.dataSet?.entryView
+
+    switch (entryType) {
+      case 'generated':
+        if (!entryView || entryView === 'DEFAULT') {
+          return this.dataEntryForm
+        } else if (entryView === 'CHECKLIST') {
+          return this.checklistEntryForm
+        }
+        break
+      case 'board':
+        break
+      case 'page':
+        break
+      default:
+        return this.dataEntryForm
+        break
+    }
+  }
 
   render() {
     return html`
-      <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+      ${this.showEntryView()}
 
       <div class="footer">
         <div filler></div>
@@ -62,6 +87,28 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
     `
   }
 
+  private showEntryView() {
+    const entryType = this.dataSet?.entryType
+    const entryView = this.dataSet?.entryView
+
+    switch (entryType) {
+      case 'generated':
+        if (!entryView || entryView === 'DEFAULT') {
+          return html`<ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>`
+        } else if (entryView === 'CHECKLIST') {
+          return html`<ox-checklist-entry-form .dataSet=${this.dataSet}></ox-checklist-entry-form>`
+        }
+        break
+      case 'board':
+        break
+      case 'page':
+        break
+      default:
+        return html`<ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>`
+        break
+    }
+  }
+
   private async updateDataItems() {
     //@ts-ignore TODO replace with following line and confirm
     const data = this.entryForm.buildValue()

package/client/pages/data-entry/checklist-entry-page.ts

@@ -0,0 +1,211 @@
+import '@material/web/icon/icon.js'
+import '@operato/context/ox-context-page-toolbar.js'
+import '@operato/board/ox-board-viewer.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { DataSample, DataSet } from '@operato/dataset'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('checklist-entry-page')
+export class ChecklistEntryPage extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+      }
+
+      div.checklist {
+        flex: 1;
+      }
+
+      .footer span {
+        font-size: 0.8em;
+        color: var(--md-sys-color-on-surface);
+        line-height: 1.5;
+        padding: 10px;
+      }
+    `
+  ]
+
+  get context() {
+    return {
+      title: i18next.t('title.checklist entry page'),
+      help: 'dataset/checklist-entry-page',
+      toolbar: false
+    }
+  }
+
+  @state() private dataSetId?: string
+  @state() private dataSet?: DataSet
+  @state() private dataSample?: DataSample | { id: string; collectedAt: Date }
+
+  render() {
+    return html`
+      <div class="checklist">
+        <table>
+          <thead>
+            <tr>
+              <th>주기</th>
+              <th>관리</th>
+              <th>점검 내용</th>
+              <th>기록</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td rowspan="3">일일 (작업전)</td>
+              <td rowspan="3">개인 위생</td>
+              <td>위생복장과 외출복장이 구분하여 보관되고 있는가?</td>
+              <td><input type="checkbox" name="check1" /></td>
+            </tr>
+            <tr>
+              <td>
+                종사자의 건강상태가 양호하고 개인장신구 등을 소지하지 않으며, 청결한 위생복장을 착용하고 작업하고
+                있는가?
+              </td>
+              <td><input type="checkbox" name="check2" /></td>
+            </tr>
+            <tr>
+              <td>위생설비(손세척기 등) 중 이상이 있는 것이 없으며, 종사자는 위생처리를 하고 입실하는가?</td>
+              <td><input type="checkbox" name="check3" /></td>
+            </tr>
+            <tr>
+              <td rowspan="2">일일 (작업전)</td>
+              <td rowspan="2">방충 방서</td>
+              <td>작업장은 밀폐가 잘 이루어지고 있으며, 방충시설(방충망 등)에는 이상이 없는가?</td>
+              <td><input type="checkbox" name="check4" /></td>
+            </tr>
+            <tr>
+              <td>파손되거나 고장 난 제조설비가 없는가?</td>
+              <td><input type="checkbox" name="check5" /></td>
+            </tr>
+            <tr>
+              <td rowspan="3">일일 (작업중)</td>
+              <td rowspan="3">공정 관리</td>
+              <td>청결구역작업과 일반구역작업이 분리되어 있으며 오염되지 않도록 관리되고 있는가?</td>
+              <td><input type="checkbox" name="check6" /></td>
+            </tr>
+            <tr>
+              <td>건조 후 냉각 공정이 적절히 관리되고 있는가? (기준: -5℃ ~ 10℃)</td>
+              <td><input type="checkbox" name="check7" /></td>
+            </tr>
+            <tr>
+              <td>완제품이 포장 상태가 양호한가?</td>
+              <td><input type="checkbox" name="check8" /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <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>
+    `
+  }
+
+  pageUpdated(changes: any, lifecycle: any, before: any) {
+    if (this.active) {
+      if (this.dataSetId !== lifecycle.resourceId) {
+        this.dataSetId = lifecycle.resourceId
+        this.fetchDataSet()
+      }
+    }
+  }
+
+  async fetchDataSet() {
+    if (this.dataSetId) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataSet(id: $id) {
+              id
+              name
+              description
+              useCase
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataSetId
+        }
+      })
+
+      this.dataSet = response.data.dataSet
+    }
+  }
+
+  private async updateDataItems() {
+    //gather user entry data from inputs
+    const data = {}
+
+    const dataSample = {
+      dataSet: {
+        id: this.dataSetId
+      },
+      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/pages/data-entry/data-entry-list-page.ts

@@ -80,7 +80,7 @@ const showEntryView = async (columns, data, column, record, rowIndex) => {
       break
 
     case 'page':
-      navigate(entryView)
+      navigate(`${entryView}/${record.id}`)
       break
 
     case 'external':
@@ -432,6 +432,7 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options