@things-factory/dataset 8.0.13 → 8.0.20

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

@@ -68,6 +68,8 @@ export class DataOocViewPage extends localize(i18next)(PageView) {
             dataSet {
               id
               name
+              monitorType
+              monitorView
             }
             key01
             key02
@@ -82,6 +84,7 @@ export class DataOocViewPage extends localize(i18next)(PageView) {
               hidden
               tag
               group
+              subgroup
               type
               unit
               options

package/client/pages/data-ooc/data-ooc-view.ts

@@ -120,6 +120,8 @@ export class DataOocView extends localize(i18next)(LitElement) {
             dataSet {
               id
               name
+              monitorType
+              monitorView
             }
             key01
             key02
@@ -134,6 +136,7 @@ export class DataOocView extends localize(i18next)(LitElement) {
               hidden
               tag
               group
+              subgroup
               type
               unit
               options

package/client/pages/data-sample/data-sample-view.ts

@@ -2,6 +2,7 @@ import '@material/web/icon/icon.js'
 import '@material/web/fab/fab.js'
 import '@operato/dataset/ox-data-sample-view.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
+import '@operato/dataset/ox-checklist-sample-view.js'
 import '@things-factory/worklist/dist-client/components/activity-thread-timeline.js'
 
 import gql from 'graphql-tag'
@@ -77,7 +78,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
 
     return html`
       ${!dataSample?.dataOoc
-        ? html` <ox-data-sample-view .dataSample=${dataSample}></ox-data-sample-view> `
+        ? html`${this.showDataSampleView()}`
         : html` <ox-data-ooc-brief-view .dataOoc=${dataSample!.dataOoc}></ox-data-ooc-brief-view>`}
       ${reviewActivityThread
         ? html`
@@ -118,6 +119,29 @@ export class DataSampleView 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
+    }
+  }
+
   async fetchDataSample() {
     const id = this.dataSampleId
 
@@ -147,6 +171,8 @@ export class DataSampleView extends localize(i18next)(LitElement) {
               id
               name
               description
+              monitorType
+              monitorView
             }
             dataItems {
               name
@@ -155,6 +181,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
               hidden
               tag
               group
+              subgroup
               type
               unit
               options
@@ -175,6 +202,8 @@ export class DataSampleView extends localize(i18next)(LitElement) {
               dataSet {
                 id
                 name
+                monitorType
+                monitorView
               }
               key01
               key02
@@ -189,6 +218,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

package/client/pages/data-set/data-item-list.ts

@@ -143,6 +143,15 @@ class DataItemList extends localize(i18next)(LitElement) {
         {
           type: 'string',
           name: 'group',
+          header: i18next.t('field.group'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'string',
+          name: 'subgroup',
           header: i18next.t('field.subgroup'),
           record: {
             editable: true

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

@@ -17,11 +17,12 @@ import { OxDataUseCase } from '@operato/dataset'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
-import { PageView, store } from '@operato/shell'
+import { PageView, store, navigate } from '@operato/shell'
 import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice, sleep } from '@operato/utils'
 
 import { p13n } from '@operato/p13n'
+import { provider } from '@things-factory/board-ui/dist-client'
 
 const MIN = 60
 const HOUR = 60 * MIN
@@ -89,6 +90,54 @@ const USECASE_OPTIONS = () => {
   })
 }
 
+export const showEntryView = async (columns, data, column, record, rowIndex) => {
+  const { name, entryType, entryView } = record
+  const title = `${name} - ${i18next.t('title.data-entry-form')}`
+
+  switch (entryType) {
+    case 'generated':
+      openPopup(html` <data-entry-form .dataSet=${record} style="background-color: white;"></data-entry-form> `, {
+        closable: true,
+        backdrop: true,
+        size: 'large',
+        title
+      })
+      break
+
+    case 'board':
+      const board = {
+        id: entryView
+      }
+      openPopup(
+        html`
+          <ox-board-viewer
+            style="background-color: white;"
+            .board=${board}
+            .provider=${provider}
+            hide-fullscreen
+            hide-navigation
+          ></ox-board-viewer>
+        `,
+        {
+          closable: true,
+          backdrop: true,
+          size: 'large',
+          title
+        }
+      )
+
+      // navigate(`board-viewer/${entryView}?interactive=true&title=${title}`)
+      break
+    case 'page':
+      navigate(`${entryView}/${record.id}`)
+      break
+
+    case 'external':
+      window.open(entryView, '_blank')
+      break
+  }
+}
+
 @customElement('data-set-list-page')
 export class DataSetListPage extends connect(store)(p13n(localize(i18next)(PageView))) {
   static styles = [
@@ -255,16 +304,7 @@ export class DataSetListPage extends connect(store)(p13n(localize(i18next)(PageV
           title: record =>
             !record ? i18next.t('button.enter-data') : !record.id ? '' : i18next.t('button.enter-data'),
           handlers: {
-            click: (columns, data, column, record, rowIndex) => {
-              openPopup(
-                html` <data-entry-form .dataSet=${record} style="background-color: white;"></data-entry-form> `,
-                {
-                  backdrop: true,
-                  size: 'large',
-                  title: i18next.t('title.data-entry-form')
-                }
-              )
-            }
+            click: showEntryView
           }
         },
         {
@@ -843,6 +883,7 @@ export class DataSetListPage extends connect(store)(p13n(localize(i18next)(PageV
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

package/client/route.ts

@@ -56,6 +56,10 @@ export default function route(page) {
       import('./pages/data-entry/data-entry-list-page.js')
       return page
 
+    case 'checklist-entry-page':
+      import('./pages/data-entry/checklist-entry-page')
+      return page
+
     case 'data-report-list':
       import('./pages/data-report/data-report-list-page.js')
       return page

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

@@ -1,6 +1,8 @@
 import '@operato/dataset/ox-data-entry-form.js';
+import '@operato/dataset/ox-checklist-entry-form.js';
 import { LitElement } from 'lit';
 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';
 declare const DataCollectActivityEdit_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class DataCollectActivityEdit extends DataCollectActivityEdit_base {
@@ -9,9 +11,14 @@ export declare class DataCollectActivityEdit extends DataCollectActivityEdit_bas
     output?: any;
     dataSet?: DataSet & {
         id: string;
+        entryType?: string;
+        entryView?: string;
     };
-    entryForm: OxDataEntryForm;
+    dataEntryForm?: OxDataEntryForm;
+    checklistEntryForm?: OxChecklistEntryForm;
+    get entryForm(): OxDataEntryForm | OxChecklistEntryForm | undefined;
     render(): import("lit-html").TemplateResult<1>;
+    private showEntryView;
     _updateDataItems(e: CustomEvent): Promise<void>;
     updated(changes: any): void;
     fetchDataSet(): Promise<void>;

package/dist-client/activities/activity-data-collect-edit.js

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 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';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -7,18 +8,79 @@ 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';
 let DataCollectActivityEdit = class DataCollectActivityEdit extends localize(i18next)(LitElement) {
+    get entryForm() {
+        var _a, _b;
+        const entryType = (_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.entryType;
+        const entryView = (_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.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
+      <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>
     `;
     }
+    showEntryView() {
+        var _a, _b;
+        const entryType = (_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.entryType;
+        const entryView = (_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.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) {
         e.stopPropagation();
+        //@ts-ignore TODO replace with following line and confirm
         this.output = this.entryForm.value;
         this.dispatchEvent(new CustomEvent('change', {
             detail: this.output
@@ -40,6 +102,8 @@ let DataCollectActivityEdit = class DataCollectActivityEdit extends localize(i18
               name
               description
               useCase
+              entryType
+              entryView
               dataItems {
                 name
                 description
@@ -47,6 +111,7 @@ let DataCollectActivityEdit = class DataCollectActivityEdit extends localize(i18
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options
@@ -97,7 +162,11 @@ __decorate([
 __decorate([
     query('ox-data-entry-form'),
     __metadata("design:type", OxDataEntryForm)
-], DataCollectActivityEdit.prototype, "entryForm", void 0);
+], DataCollectActivityEdit.prototype, "dataEntryForm", void 0);
+__decorate([
+    query('ox-checklist-entry-form'),
+    __metadata("design:type", OxChecklistEntryForm)
+], DataCollectActivityEdit.prototype, "checklistEntryForm", void 0);
 DataCollectActivityEdit = __decorate([
     customElement('activity-data-collect-edit')
 ], DataCollectActivityEdit);

package/dist-client/activities/activity-data-collect-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-data-collect-edit.js","sourceRoot":"","sources":["../../client/activities/activity-data-collect-edit.ts"],"names":[],"mappings":";AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAIjE,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA0BxE,MAAM;QACJ,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;iBACd,IAAI,CAAC,MAAM;kBACV,IAAI,CAAC,gBAAgB;;KAElC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,CAAc;QACnC,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAElC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAA;QAE/B,IAAI,EAAE,EAAE,CAAC;YACP,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;SAuBT;gBACD,SAAS,EAAE;oBACT,EAAE;iBACH;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAA;QACtC,CAAC;IACH,CAAC;;AAzFM,8BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAa;AAE/B;IAAR,KAAK,EAAE;;wDAAmC;AAEd;IAA5B,KAAK,CAAC,oBAAoB,CAAC;8BAAa,eAAe;0DAAA;AAxB7C,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CA2FnC","sourcesContent":["import '@operato/dataset/ox-data-entry-form.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'\nimport { DataSet } from '@operato/dataset'\n\n@customElement('activity-data-collect-edit')\nexport class DataCollectActivityEdit extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-data-entry-form {\n        flex: 1;\n        padding: 10px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) input?: any\n  @property({ type: Object }) output?: any\n\n  @state() dataSet?: DataSet & { id: string }\n\n  @query('ox-data-entry-form') entryForm!: OxDataEntryForm\n\n  render() {\n    return html`\n      <ox-data-entry-form\n        .dataSet=${this.dataSet}\n        .value=${this.output}\n        @change=${this._updateDataItems}\n      ></ox-data-entry-form>\n    `\n  }\n\n  async _updateDataItems(e: CustomEvent) {\n    e.stopPropagation()\n\n    this.output = this.entryForm.value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.output\n      })\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('input')) {\n      this.fetchDataSet()\n    }\n  }\n\n  async fetchDataSet() {\n    const id = this.input.dataSetId\n\n    if (id) {\n      const response = await client.query({\n        query: gql`\n          query ($id: String!) {\n            dataSet(id: $id) {\n              id\n              name\n              description\n              useCase\n              dataItems {\n                name\n                description\n                active\n                hidden\n                tag\n                group\n                type\n                unit\n                options\n                quota\n                spec\n                stat\n              }\n            }\n          }\n        `,\n        variables: {\n          id\n        }\n      })\n\n      this.dataSet = response.data.dataSet\n    }\n  }\n}\n"]}
+{"version":3,"file":"activity-data-collect-edit.js","sourceRoot":"","sources":["../../client/activities/activity-data-collect-edit.ts"],"names":[],"mappings":";AAAA,OAAO,wCAAwC,CAAA;AAC/C,OAAO,6CAA6C,CAAA;AAEpD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAA;AAK3E,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA2BxE,IAAI,SAAS;;QACX,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAA;QACzC,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAA;QAEzC,QAAQ,SAAS,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;oBAC1C,OAAO,IAAI,CAAC,aAAa,CAAA;gBAC3B,CAAC;qBAAM,IAAI,SAAS,KAAK,WAAW,EAAE,CAAC;oBACrC,OAAO,IAAI,CAAC,kBAAkB,CAAA;gBAChC,CAAC;gBACD,MAAK;YACP,KAAK,OAAO;gBACV,MAAK;YACP,KAAK,MAAM;gBACT,MAAK;YACP;gBACE,OAAO,IAAI,CAAC,aAAa,CAAA;gBACzB,MAAK;QACT,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,OAAO;iBACd,IAAI,CAAC,MAAM;kBACV,IAAI,CAAC,gBAAgB;;UAE7B,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAA;IACH,CAAC;IAEO,aAAa;;QACnB,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAA;QACzC,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAA;QAEzC,QAAQ,SAAS,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;oBAC1C,OAAO,IAAI,CAAA;uBACE,IAAI,CAAC,OAAO;qBACd,IAAI,CAAC,MAAM;sBACV,IAAI,CAAC,gBAAgB;iCACV,CAAA;gBACzB,CAAC;qBAAM,IAAI,SAAS,KAAK,WAAW,EAAE,CAAC;oBACrC,OAAO,IAAI,CAAA;uBACE,IAAI,CAAC,OAAO;qBACd,IAAI,CAAC,MAAM;sBACV,IAAI,CAAC,gBAAgB;sCACL,CAAA;gBAC9B,CAAC;gBACD,MAAK;YACP,KAAK,OAAO;gBACV,MAAK;YACP,KAAK,MAAM;gBACT,MAAK;YACP;gBACE,OAAO,IAAI,CAAA;qBACE,IAAI,CAAC,OAAO;mBACd,IAAI,CAAC,MAAM;oBACV,IAAI,CAAC,gBAAgB;+BACV,CAAA;gBACvB,MAAK;QACT,CAAC;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,CAAc;QACnC,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,yDAAyD;QACzD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAElC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAA;QAE/B,IAAI,EAAE,EAAE,CAAC;YACP,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BT;gBACD,SAAS,EAAE;oBACT,EAAE;iBACH;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAA;QACtC,CAAC;IACH,CAAC;;AAzJM,8BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAa;AAE/B;IAAR,KAAK,EAAE;;wDAA2E;AAEtD;IAA5B,KAAK,CAAC,oBAAoB,CAAC;8BAAiB,eAAe;8DAAA;AAC1B;IAAjC,KAAK,CAAC,yBAAyB,CAAC;8BAAsB,oBAAoB;mEAAA;AAzBhE,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CA2JnC","sourcesContent":["import '@operato/dataset/ox-data-entry-form.js'\nimport '@operato/dataset/ox-checklist-entry-form.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'\nimport { OxChecklistEntryForm } from '@operato/dataset/ox-checklist-entry-form.js'\n\nimport { DataSet } from '@operato/dataset'\n\n@customElement('activity-data-collect-edit')\nexport class DataCollectActivityEdit extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-data-entry-form {\n        flex: 1;\n        padding: 10px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) input?: any\n  @property({ type: Object }) output?: any\n\n  @state() dataSet?: DataSet & { id: string; entryType?: string; entryView?: string }\n\n  @query('ox-data-entry-form') dataEntryForm?: OxDataEntryForm\n  @query('ox-checklist-entry-form') checklistEntryForm?: OxChecklistEntryForm\n\n  get entryForm() {\n    const entryType = this.dataSet?.entryType\n    const entryView = this.dataSet?.entryView\n\n    switch (entryType) {\n      case 'generated':\n        if (!entryView || entryView === 'DEFAULT') {\n          return this.dataEntryForm\n        } else if (entryView === 'CHECKLIST') {\n          return this.checklistEntryForm\n        }\n        break\n      case 'board':\n        break\n      case 'page':\n        break\n      default:\n        return this.dataEntryForm\n        break\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <!-- <ox-data-entry-form\n        .dataSet=${this.dataSet}\n        .value=${this.output}\n        @change=${this._updateDataItems}\n      ></ox-data-entry-form> -->\n        ${this.showEntryView()}\n      </div>\n    `\n  }\n\n  private showEntryView() {\n    const entryType = this.dataSet?.entryType\n    const entryView = this.dataSet?.entryView\n\n    switch (entryType) {\n      case 'generated':\n        if (!entryView || entryView === 'DEFAULT') {\n          return html`<ox-data-entry-form\n            .dataSet=${this.dataSet}\n            .value=${this.output}\n            @change=${this._updateDataItems}\n          ></ox-data-entry-form>`\n        } else if (entryView === 'CHECKLIST') {\n          return html`<ox-checklist-entry-form\n            .dataSet=${this.dataSet}\n            .value=${this.output}\n            @change=${this._updateDataItems}\n          ></ox-checklist-entry-form>`\n        }\n        break\n      case 'board':\n        break\n      case 'page':\n        break\n      default:\n        return html`<ox-data-entry-form\n          .dataSet=${this.dataSet}\n          .value=${this.output}\n          @change=${this._updateDataItems}\n        ></ox-data-entry-form>`\n        break\n    }\n  }\n\n  async _updateDataItems(e: CustomEvent) {\n    e.stopPropagation()\n\n    //@ts-ignore TODO replace with following line and confirm\n    this.output = this.entryForm.value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.output\n      })\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('input')) {\n      this.fetchDataSet()\n    }\n  }\n\n  async fetchDataSet() {\n    const id = this.input.dataSetId\n\n    if (id) {\n      const response = await client.query({\n        query: gql`\n          query ($id: String!) {\n            dataSet(id: $id) {\n              id\n              name\n              description\n              useCase\n              entryType\n              entryView\n              dataItems {\n                name\n                description\n                active\n                hidden\n                tag\n                group\n                subgroup\n                type\n                unit\n                options\n                quota\n                spec\n                stat\n              }\n            }\n          }\n        `,\n        variables: {\n          id\n        }\n      })\n\n      this.dataSet = response.data.dataSet\n    }\n  }\n}\n"]}

package/dist-client/activities/activity-data-review-edit.d.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 { LitElement } from 'lit';
 declare const DataReviewActivityEdit_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class DataReviewActivityEdit extends DataReviewActivityEdit_base {
@@ -11,6 +12,7 @@ export declare class DataReviewActivityEdit extends DataReviewActivityEdit_base
     dataSample?: any;
     form: HTMLFormElement;
     render(): import("lit-html").TemplateResult<1>;
+    private showDataSampleView;
     onChangeInstruction(e: Event): void;
     updated(changes: any): void;
     fetchDataSample(): Promise<void>;

package/dist-client/activities/activity-data-review-edit.js

@@ -2,6 +2,7 @@ import { __decorate, __metadata } from "tslib";
 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';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -14,9 +15,7 @@ let DataReviewActivityEdit = class DataReviewActivityEdit extends localize(i18ne
         const { state } = this.activityThread || {};
         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
@@ -88,6 +87,29 @@ let DataReviewActivityEdit = class DataReviewActivityEdit extends localize(i18ne
       </form>
     `;
     }
+    showDataSampleView() {
+        var _a;
+        const dataSet = (_a = this.dataSample) === null || _a === void 0 ? void 0 : _a.dataSet;
+        const monitorType = dataSet === null || dataSet === void 0 ? void 0 : dataSet.monitorType;
+        const monitorView = dataSet === null || dataSet === void 0 ? void 0 : 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) {
         var output = {};
         const formData = new FormData(this.form);
@@ -131,6 +153,8 @@ let DataReviewActivityEdit = class DataReviewActivityEdit extends localize(i18ne
                 id
                 name
                 description
+                monitorType
+                monitorView
               }
               dataItems {
                 name
@@ -139,6 +163,7 @@ let DataReviewActivityEdit = class DataReviewActivityEdit extends localize(i18ne
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options

package/dist-client/activities/activity-data-review-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-data-review-edit.js","sourceRoot":"","sources":["../../client/activities/activity-data-review-edit.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAE/C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGlC,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAgGvE,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QACnD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,CAAA;QAC3C,MAAM,QAAQ,GAAG,KAAK,IAAI,YAAY,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,IAAI,SAAS,IAAI,KAAK,IAAI,WAAW,CAAA;QAE3G,OAAO,IAAI,CAAA;;2CAE4B,IAAI,CAAC,UAAU;;;sBAGpC,IAAI,CAAC,mBAAmB;UACpC,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;;iEAEiD,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;;;;;iCAM3D,QAAQ,IAAI,QAAQ;mCAClB,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;sBAE/C,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;;;;iCAMvB,QAAQ,IAAI,UAAU;mCACpB,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;uBAEhD,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;;;;iEAMM,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;;;gCAG1E,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC;2BACjE,WAAW,IAAI,EAAE;;;;aAI/B;YACH,CAAC,CAAC,IAAI,CAAA;;iEAEiD,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;;;;iCAK3D,QAAQ,IAAI,QAAQ;mCAClB,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;sBAG/C,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;;;iCAKvB,QAAQ,IAAI,UAAU;mCACpB,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;uBAGhD,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;;;;iEAMM,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;mCACvE,WAAW;;aAEjC;;KAER,CAAA;IACH,CAAC;IAED,mBAAmB,CAAC,CAAQ;QAC1B,IAAI,MAAM,GAAG,EAAE,CAAA;QAEf,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YAC9B,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QAEpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAErD,IAAI,UAAU,EAAE,CAAC;YACf,gEAAgE;YAChE,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;QAC9B,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACxB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA6CT;gBACD,SAAS,EAAE;oBACT,EAAE,EAAE,YAAY;iBACjB;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,UAAU,qBACV,QAAQ,CAAC,IAAI,CAAC,UAAU,CAC5B,CAAA;QACH,CAAC;IACH,CAAC;;AAtQM,6BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;CACF,AArFY,CAqFZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAAqB;AAEvC;IAAR,KAAK,EAAE;;0DAAiB;AAEV;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;oDAAA;AA9F1B,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAwQlC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/radio/radio.js'\nimport '@operato/dataset/ox-data-entry-form.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { client } from '@operato/graphql'\n\n@customElement('activity-data-review-edit')\nexport class DataReviewActivityEdit extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      div[content] {\n        flex: 1;\n        flex-direction: column;\n\n        display: flex;\n        overflow: auto;\n      }\n\n      ox-data-sample-view {\n        flex: 1;\n        padding: var(--spacing-large);\n        overflow: auto;\n      }\n\n      div[role='radiogroup'] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-medium);\n\n        label {\n          display: flex;\n          flex-direction: row;\n\n          gap: var(--spacing-small);\n          align-items: center;\n        }\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        padding: var(--spacing-large);\n\n        h2 {\n          display: flex;\n\n          color: var(--title-text-color);\n          text-transform: capitalize;\n          margin: var(--title-margin);\n          align-items: center;\n        }\n\n        div {\n          padding: var(--spacing-large);\n          font: var(--input-field-font);\n          border: var(--md-sys-color-outline) solid 1px;\n          border-radius: var(--spacing-small);\n          background-color: var(--md-sys-color-surface-variant);\n        }\n\n        div[instruction] {\n          min-height: 200px;\n        }\n\n        md-icon {\n          color: var(--status-danger-color);\n        }\n\n        textarea {\n          margin: var(--spacing-medium);\n          padding: var(--spacing-medium);\n          margin: 0;\n          font: var(--input-field-font);\n          color: var(--md-sys-color-on-surface);\n          border: var(--md-sys-color-outline) solid 1px;\n          border-radius: var(--spacing-small);\n          background-color: var(--md-sys-color-surface-variant);\n\n          resize: none;\n          outline: none;\n          min-height: 200px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) input?: any\n  @property({ type: Object }) output?: any\n  @property({ type: Object }) activityThread?: any\n\n  @state() dataSample?: any\n\n  @query('form') form!: HTMLFormElement\n\n  render() {\n    const { instruction, judgment } = this.output || {}\n    const { state } = this.activityThread || {}\n    const editable = state == 'unassigned' || state == 'assigned' || state == 'started' || state == 'submitted'\n\n    return html`\n      <div content>\n        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>\n      </div>\n\n      <form @change=${this.onChangeInstruction}>\n        ${editable\n          ? html`\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.judgment')}</span></h2>\n                <div role=\"radiogroup\" aria-label=\"An example group of radio buttons\">\n                  <label>\n                    <md-radio\n                      name=\"judgment\"\n                      value=\"normal\"\n                      ?checked=${judgment == 'normal'}\n                      aria-label=${i18next.t('label.judgment-normal')}\n                    ></md-radio>\n                    ${i18next.t('label.judgment-normal')}\n                  </label>\n                  <label>\n                    <md-radio\n                      name=\"judgment\"\n                      value=\"abnormal\"\n                      ?checked=${judgment == 'abnormal'}\n                      aria-label=${i18next.t('label.judgment-abnormal')}\n                    ></md-radio\n                    >${i18next.t('label.judgment-abnormal')}\n                  </label>\n                </div>\n              </label>\n\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>\n                <textarea\n                  name=\"instruction\"\n                  placeholder=${String(i18next.t('text.corrective instruction placeholder'))}\n                  .value=${instruction || ''}\n                  instruction\n                ></textarea>\n              </label>\n            `\n          : html`\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.judgment')}</span></h2>\n                <div role=\"radiogroup\" aria-label=\"An example group of radio buttons\">\n                  <label>\n                    <md-radio\n                      value=\"normal\"\n                      ?checked=${judgment == 'normal'}\n                      aria-label=${i18next.t('label.judgment-normal')}\n                      disabled\n                    ></md-radio>\n                    ${i18next.t('label.judgment-normal')}\n                  </label>\n                  <label>\n                    <md-radio\n                      value=\"abnormal\"\n                      ?checked=${judgment == 'abnormal'}\n                      aria-label=${i18next.t('label.judgment-abnormal')}\n                      disabled\n                    ></md-radio\n                    >${i18next.t('label.judgment-abnormal')}\n                  </label>\n                </div>\n              </label>\n\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>\n                <div instruction>${instruction}</div>\n              </label>\n            `}\n      </form>\n    `\n  }\n\n  onChangeInstruction(e: Event) {\n    var output = {}\n\n    const formData = new FormData(this.form)\n    formData.forEach((value, key) => {\n      output[key] = value\n    })\n\n    this.output = output\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.output\n      })\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('input')) {\n      this.fetchDataSample()\n    }\n  }\n\n  async fetchDataSample() {\n    const { dataSampleId, dataSample } = this.input || {}\n\n    if (dataSample) {\n      /* only for backwards compatibility - should be deleted later */\n      this.dataSample = dataSample\n    } else if (dataSampleId) {\n      const response = await client.query({\n        query: gql`\n          query ($id: String!) {\n            dataSample(id: $id) {\n              id\n              name\n              description\n              useCase\n              key01\n              key02\n              key03\n              key04\n              key05\n              data\n              ooc\n              oos\n              dataSet {\n                id\n                name\n                description\n              }\n              dataItems {\n                name\n                description\n                active\n                hidden\n                tag\n                group\n                type\n                unit\n                options\n                quota\n                spec\n                stat\n              }\n              judgment\n              workDate\n              workShift\n              updater {\n                id\n                name\n              }\n              updatedAt\n              collectedAt\n            }\n          }\n        `,\n        variables: {\n          id: dataSampleId\n        }\n      })\n\n      this.dataSample = {\n        ...response.data.dataSample\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"activity-data-review-edit.js","sourceRoot":"","sources":["../../client/activities/activity-data-review-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/radio/radio.js'\nimport '@operato/dataset/ox-data-entry-form.js'\nimport '@operato/dataset/ox-checklist-sample-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { client } from '@operato/graphql'\n\n@customElement('activity-data-review-edit')\nexport class DataReviewActivityEdit extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      div[content] {\n        flex: 1;\n        flex-direction: column;\n\n        display: flex;\n        overflow: auto;\n      }\n\n      ox-data-sample-view {\n        flex: 1;\n        padding: var(--spacing-large);\n        overflow: auto;\n      }\n\n      div[role='radiogroup'] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-medium);\n\n        label {\n          display: flex;\n          flex-direction: row;\n\n          gap: var(--spacing-small);\n          align-items: center;\n        }\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        padding: var(--spacing-large);\n\n        h2 {\n          display: flex;\n\n          color: var(--title-text-color);\n          text-transform: capitalize;\n          margin: var(--title-margin);\n          align-items: center;\n        }\n\n        div {\n          padding: var(--spacing-large);\n          font: var(--input-field-font);\n          border: var(--md-sys-color-outline) solid 1px;\n          border-radius: var(--spacing-small);\n          background-color: var(--md-sys-color-surface-variant);\n        }\n\n        div[instruction] {\n          min-height: 200px;\n        }\n\n        md-icon {\n          color: var(--status-danger-color);\n        }\n\n        textarea {\n          margin: var(--spacing-medium);\n          padding: var(--spacing-medium);\n          margin: 0;\n          font: var(--input-field-font);\n          color: var(--md-sys-color-on-surface);\n          border: var(--md-sys-color-outline) solid 1px;\n          border-radius: var(--spacing-small);\n          background-color: var(--md-sys-color-surface-variant);\n\n          resize: none;\n          outline: none;\n          min-height: 200px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) input?: any\n  @property({ type: Object }) output?: any\n  @property({ type: Object }) activityThread?: any\n\n  @state() dataSample?: any\n\n  @query('form') form!: HTMLFormElement\n\n  render() {\n    const { instruction, judgment } = this.output || {}\n    const { state } = this.activityThread || {}\n    const editable = state == 'unassigned' || state == 'assigned' || state == 'started' || state == 'submitted'\n\n    return html`\n      <div content>${this.showDataSampleView()}</div>\n\n      <form @change=${this.onChangeInstruction}>\n        ${editable\n          ? html`\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.judgment')}</span></h2>\n                <div role=\"radiogroup\" aria-label=\"An example group of radio buttons\">\n                  <label>\n                    <md-radio\n                      name=\"judgment\"\n                      value=\"normal\"\n                      ?checked=${judgment == 'normal'}\n                      aria-label=${i18next.t('label.judgment-normal')}\n                    ></md-radio>\n                    ${i18next.t('label.judgment-normal')}\n                  </label>\n                  <label>\n                    <md-radio\n                      name=\"judgment\"\n                      value=\"abnormal\"\n                      ?checked=${judgment == 'abnormal'}\n                      aria-label=${i18next.t('label.judgment-abnormal')}\n                    ></md-radio\n                    >${i18next.t('label.judgment-abnormal')}\n                  </label>\n                </div>\n              </label>\n\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>\n                <textarea\n                  name=\"instruction\"\n                  placeholder=${String(i18next.t('text.corrective instruction placeholder'))}\n                  .value=${instruction || ''}\n                  instruction\n                ></textarea>\n              </label>\n            `\n          : html`\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.judgment')}</span></h2>\n                <div role=\"radiogroup\" aria-label=\"An example group of radio buttons\">\n                  <label>\n                    <md-radio\n                      value=\"normal\"\n                      ?checked=${judgment == 'normal'}\n                      aria-label=${i18next.t('label.judgment-normal')}\n                      disabled\n                    ></md-radio>\n                    ${i18next.t('label.judgment-normal')}\n                  </label>\n                  <label>\n                    <md-radio\n                      value=\"abnormal\"\n                      ?checked=${judgment == 'abnormal'}\n                      aria-label=${i18next.t('label.judgment-abnormal')}\n                      disabled\n                    ></md-radio\n                    >${i18next.t('label.judgment-abnormal')}\n                  </label>\n                </div>\n              </label>\n\n              <label>\n                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>\n                <div instruction>${instruction}</div>\n              </label>\n            `}\n      </form>\n    `\n  }\n\n  private showDataSampleView() {\n    const dataSet = this.dataSample?.dataSet\n    const monitorType = dataSet?.monitorType\n    const monitorView = dataSet?.monitorView\n\n    switch (monitorType) {\n      case 'generated':\n        if (!monitorView || monitorView === 'DEFAULT') {\n          return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`\n        } else if (monitorView === 'CHECKLIST') {\n          return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`\n        }\n        break\n      case 'board':\n        break\n      case 'page':\n        break\n      default:\n        return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`\n        break\n    }\n  }\n\n  onChangeInstruction(e: Event) {\n    var output = {}\n\n    const formData = new FormData(this.form)\n    formData.forEach((value, key) => {\n      output[key] = value\n    })\n\n    this.output = output\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.output\n      })\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('input')) {\n      this.fetchDataSample()\n    }\n  }\n\n  async fetchDataSample() {\n    const { dataSampleId, dataSample } = this.input || {}\n\n    if (dataSample) {\n      /* only for backwards compatibility - should be deleted later */\n      this.dataSample = dataSample\n    } else if (dataSampleId) {\n      const response = await client.query({\n        query: gql`\n          query ($id: String!) {\n            dataSample(id: $id) {\n              id\n              name\n              description\n              useCase\n              key01\n              key02\n              key03\n              key04\n              key05\n              data\n              ooc\n              oos\n              dataSet {\n                id\n                name\n                description\n                monitorType\n                monitorView\n              }\n              dataItems {\n                name\n                description\n                active\n                hidden\n                tag\n                group\n                subgroup\n                type\n                unit\n                options\n                quota\n                spec\n                stat\n              }\n              judgment\n              workDate\n              workShift\n              updater {\n                id\n                name\n              }\n              updatedAt\n              collectedAt\n            }\n          }\n        `,\n        variables: {\n          id: dataSampleId\n        }\n      })\n\n      this.dataSample = {\n        ...response.data.dataSample\n      }\n    }\n  }\n}\n"]}

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

@@ -1,4 +1,5 @@
 import '@operato/dataset/ox-data-entry-form.js';
+import '@operato/dataset/ox-checklist-sample-view.js';
 import { LitElement } from 'lit';
 declare const DataReviewActivityView_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class DataReviewActivityView extends DataReviewActivityView_base {
@@ -10,5 +11,6 @@ export declare class DataReviewActivityView extends DataReviewActivityView_base
     onChangeInstruction(e: Event): void;
     updated(changes: any): void;
     fetchDataAssign(): Promise<void>;
+    private showDataSampleView;
 }
 export {};

package/dist-client/activities/activity-data-review-view.js

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 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';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -10,9 +11,7 @@ let DataReviewActivityView = class DataReviewActivityView extends localize(i18ne
     render() {
         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>
@@ -87,6 +86,8 @@ let DataReviewActivityView = class DataReviewActivityView extends localize(i18ne
                 id
                 name
                 description
+                monitorType
+                monitorView
               }
               dataItems {
                 name
@@ -95,6 +96,7 @@ let DataReviewActivityView = class DataReviewActivityView extends localize(i18ne
                 hidden
                 tag
                 group
+                subgroup
                 type
                 unit
                 options
@@ -121,6 +123,29 @@ let DataReviewActivityView = class DataReviewActivityView extends localize(i18ne
             this.dataSample = Object.assign({}, response.data.dataSample);
         }
     }
+    showDataSampleView() {
+        var _a;
+        const dataSet = (_a = this.dataSample) === null || _a === void 0 ? void 0 : _a.dataSet;
+        const monitorType = dataSet === null || dataSet === void 0 ? void 0 : dataSet.monitorType;
+        const monitorView = dataSet === null || dataSet === void 0 ? void 0 : 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;
+        }
+    }
 };
 DataReviewActivityView.styles = [
     ScrollbarStyles,