@things-factory/dataset 9.0.0-beta.27 → 9.0.0-beta.29

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

@@ -0,0 +1,19 @@
+import '@operato/dataset/ox-data-entry-form.js';
+import { LitElement } from 'lit';
+import { OxDataEntryForm } from '@operato/dataset/ox-data-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 {
+    static styles: import("lit").CSSResult[];
+    input?: any;
+    output?: any;
+    dataSet?: DataSet & {
+        id: string;
+    };
+    entryForm: OxDataEntryForm;
+    render(): import("lit-html").TemplateResult<1>;
+    _updateDataItems(e: CustomEvent): Promise<void>;
+    updated(changes: any): void;
+    fetchDataSet(): Promise<void>;
+}
+export {};

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

@@ -0,0 +1,105 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/dataset/ox-data-entry-form.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js';
+let DataCollectActivityEdit = class DataCollectActivityEdit extends localize(i18next)(LitElement) {
+    render() {
+        return html `
+      <ox-data-entry-form
+        .dataSet=${this.dataSet}
+        .value=${this.output}
+        @change=${this._updateDataItems}
+      ></ox-data-entry-form>
+    `;
+    }
+    async _updateDataItems(e) {
+        e.stopPropagation();
+        this.output = this.entryForm.value;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.output
+        }));
+    }
+    updated(changes) {
+        if (changes.has('input')) {
+            this.fetchDataSet();
+        }
+    }
+    async fetchDataSet() {
+        const id = this.input.dataSetId;
+        if (id) {
+            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.dataSet = response.data.dataSet;
+        }
+    }
+};
+DataCollectActivityEdit.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-data-entry-form {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataCollectActivityEdit.prototype, "input", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataCollectActivityEdit.prototype, "output", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DataCollectActivityEdit.prototype, "dataSet", void 0);
+__decorate([
+    query('ox-data-entry-form'),
+    __metadata("design:type", OxDataEntryForm)
+], DataCollectActivityEdit.prototype, "entryForm", void 0);
+DataCollectActivityEdit = __decorate([
+    customElement('activity-data-collect-edit')
+], DataCollectActivityEdit);
+export { DataCollectActivityEdit };
+//# sourceMappingURL=activity-data-collect-edit.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,16 @@
+import '@operato/dataset/ox-data-entry-view.js';
+import { LitElement } from 'lit';
+import { DataSet } from '@operato/dataset';
+declare const DataCollectActivityView_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class DataCollectActivityView extends DataCollectActivityView_base {
+    static styles: import("lit").CSSResult[];
+    input?: any;
+    output?: any;
+    dataSet?: DataSet & {
+        id: string;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: any): void;
+    fetchDataSet(): Promise<void>;
+}
+export {};

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

@@ -0,0 +1,94 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/dataset/ox-data-entry-view.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+let DataCollectActivityView = class DataCollectActivityView extends localize(i18next)(LitElement) {
+    render() {
+        return html ` <ox-data-entry-view .dataSet=${this.dataSet} .value=${this.output}></ox-data-entry-view>`;
+    }
+    updated(changes) {
+        if (changes.has('input')) {
+            this.fetchDataSet();
+        }
+    }
+    async fetchDataSet() {
+        const id = this.input.dataSetId;
+        if (id) {
+            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.dataSet = response.data.dataSet;
+        }
+    }
+};
+DataCollectActivityView.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-data-entry-view {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataCollectActivityView.prototype, "input", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataCollectActivityView.prototype, "output", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DataCollectActivityView.prototype, "dataSet", void 0);
+DataCollectActivityView = __decorate([
+    customElement('activity-data-collect-view')
+], DataCollectActivityView);
+export { DataCollectActivityView };
+//# sourceMappingURL=activity-data-collect-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-data-collect-view.js","sourceRoot":"","sources":["../../client/activities/activity-data-collect-view.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,EAAS,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;AAI1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA+BxE,MAAM;QACJ,OAAO,IAAI,CAAA,iCAAiC,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,MAAM,wBAAwB,CAAA;IACxG,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;;AA5EM,8BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;CACF,AAvBY,CAuBZ;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;AA7BhC,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CA8EnC","sourcesContent":["import '@operato/dataset/ox-data-entry-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 { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { DataSet } from '@operato/dataset'\n\n@customElement('activity-data-collect-view')\nexport class DataCollectActivityView 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-view {\n        flex: 1;\n        padding: 10px;\n        overflow: auto;\n      }\n\n      @media print {\n        :host {\n          display: block;\n          overflow: visible;\n        }\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  render() {\n    return html` <ox-data-entry-view .dataSet=${this.dataSet} .value=${this.output}></ox-data-entry-view>`\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"]}

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

@@ -0,0 +1,18 @@
+import '@material/web/icon/icon.js';
+import '@material/web/radio/radio.js';
+import '@operato/dataset/ox-data-entry-form.js';
+import { LitElement } from 'lit';
+declare const DataReviewActivityEdit_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class DataReviewActivityEdit extends DataReviewActivityEdit_base {
+    static styles: import("lit").CSSResult[];
+    input?: any;
+    output?: any;
+    activityThread?: any;
+    dataSample?: any;
+    form: HTMLFormElement;
+    render(): import("lit-html").TemplateResult<1>;
+    onChangeInstruction(e: Event): void;
+    updated(changes: any): void;
+    fetchDataSample(): Promise<void>;
+}
+export {};

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

@@ -0,0 +1,279 @@
+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 gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+let DataReviewActivityEdit = class DataReviewActivityEdit extends localize(i18next)(LitElement) {
+    render() {
+        const { instruction, judgment } = this.output || {};
+        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>
+
+      <form @change=${this.onChangeInstruction}>
+        ${editable
+            ? html `
+              <label>
+                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.judgment')}</span></h2>
+                <div role="radiogroup" aria-label="An example group of radio buttons">
+                  <label>
+                    <md-radio
+                      name="judgment"
+                      value="normal"
+                      ?checked=${judgment == 'normal'}
+                      aria-label=${i18next.t('label.judgment-normal')}
+                    ></md-radio>
+                    ${i18next.t('label.judgment-normal')}
+                  </label>
+                  <label>
+                    <md-radio
+                      name="judgment"
+                      value="abnormal"
+                      ?checked=${judgment == 'abnormal'}
+                      aria-label=${i18next.t('label.judgment-abnormal')}
+                    ></md-radio
+                    >${i18next.t('label.judgment-abnormal')}
+                  </label>
+                </div>
+              </label>
+
+              <label>
+                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
+                <textarea
+                  name="instruction"
+                  placeholder=${String(i18next.t('text.corrective instruction placeholder'))}
+                  .value=${instruction || ''}
+                  instruction
+                ></textarea>
+              </label>
+            `
+            : html `
+              <label>
+                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.judgment')}</span></h2>
+                <div role="radiogroup" aria-label="An example group of radio buttons">
+                  <label>
+                    <md-radio
+                      value="normal"
+                      ?checked=${judgment == 'normal'}
+                      aria-label=${i18next.t('label.judgment-normal')}
+                      disabled
+                    ></md-radio>
+                    ${i18next.t('label.judgment-normal')}
+                  </label>
+                  <label>
+                    <md-radio
+                      value="abnormal"
+                      ?checked=${judgment == 'abnormal'}
+                      aria-label=${i18next.t('label.judgment-abnormal')}
+                      disabled
+                    ></md-radio
+                    >${i18next.t('label.judgment-abnormal')}
+                  </label>
+                </div>
+              </label>
+
+              <label>
+                <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
+                <div instruction>${instruction}</div>
+              </label>
+            `}
+      </form>
+    `;
+    }
+    onChangeInstruction(e) {
+        var output = {};
+        const formData = new FormData(this.form);
+        formData.forEach((value, key) => {
+            output[key] = value;
+        });
+        this.output = output;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.output
+        }));
+    }
+    updated(changes) {
+        if (changes.has('input')) {
+            this.fetchDataSample();
+        }
+    }
+    async fetchDataSample() {
+        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 = Object.assign({}, response.data.dataSample);
+        }
+    }
+};
+DataReviewActivityEdit.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+
+      div[role='radiogroup'] {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-medium);
+
+        label {
+          display: flex;
+          flex-direction: row;
+
+          gap: var(--spacing-small);
+          align-items: center;
+        }
+      }
+
+      label {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--spacing-large);
+
+        h2 {
+          display: flex;
+
+          color: var(--title-text-color);
+          text-transform: capitalize;
+          margin: var(--title-margin);
+          align-items: center;
+        }
+
+        div {
+          padding: var(--spacing-large);
+          font: var(--input-field-font);
+          border: var(--md-sys-color-outline) solid 1px;
+          border-radius: var(--spacing-small);
+          background-color: var(--md-sys-color-surface-variant);
+        }
+
+        div[instruction] {
+          min-height: 200px;
+        }
+
+        md-icon {
+          color: var(--status-danger-color);
+        }
+
+        textarea {
+          margin: var(--spacing-medium);
+          padding: var(--spacing-medium);
+          margin: 0;
+          font: var(--input-field-font);
+          color: var(--md-sys-color-on-surface);
+          border: var(--md-sys-color-outline) solid 1px;
+          border-radius: var(--spacing-small);
+          background-color: var(--md-sys-color-surface-variant);
+
+          resize: none;
+          outline: none;
+          min-height: 200px;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataReviewActivityEdit.prototype, "input", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataReviewActivityEdit.prototype, "output", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataReviewActivityEdit.prototype, "activityThread", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DataReviewActivityEdit.prototype, "dataSample", void 0);
+__decorate([
+    query('form'),
+    __metadata("design:type", HTMLFormElement)
+], DataReviewActivityEdit.prototype, "form", void 0);
+DataReviewActivityEdit = __decorate([
+    customElement('activity-data-review-edit')
+], DataReviewActivityEdit);
+export { DataReviewActivityEdit };
+//# sourceMappingURL=activity-data-review-edit.js.map

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

@@ -0,0 +1 @@
+{"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'\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"]}

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

@@ -0,0 +1,14 @@
+import '@operato/dataset/ox-data-entry-form.js';
+import { LitElement } from 'lit';
+declare const DataReviewActivityView_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class DataReviewActivityView extends DataReviewActivityView_base {
+    static styles: import("lit").CSSResult[];
+    input?: any;
+    output?: any;
+    dataSample?: any;
+    render(): import("lit-html").TemplateResult<1>;
+    onChangeInstruction(e: Event): void;
+    updated(changes: any): void;
+    fetchDataAssign(): Promise<void>;
+}
+export {};