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

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

@@ -0,0 +1,105 @@
+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'
+import { DataSet } from '@operato/dataset'
+
+@customElement('activity-data-collect-edit')
+export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
+  static 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;
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataSet?: DataSet & { id: string }
+
+  @query('ox-data-entry-form') entryForm!: OxDataEntryForm
+
+  render() {
+    return html`
+      <ox-data-entry-form
+        .dataSet=${this.dataSet}
+        .value=${this.output}
+        @change=${this._updateDataItems}
+      ></ox-data-entry-form>
+    `
+  }
+
+  async _updateDataItems(e: CustomEvent) {
+    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
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+import '@operato/dataset/ox-data-entry-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { DataSet } from '@operato/dataset'
+
+@customElement('activity-data-collect-view')
+export class DataCollectActivityView extends localize(i18next)(LitElement) {
+  static 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;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataSet?: DataSet & { id: string }
+
+  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
+    }
+  }
+}

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

@@ -0,0 +1,278 @@
+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'
+
+@customElement('activity-data-review-edit')
+export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+
+      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;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+  @property({ type: Object }) activityThread?: any
+
+  @state() dataSample?: any
+
+  @query('form') form!: HTMLFormElement
+
+  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: Event) {
+    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 = {
+        ...response.data.dataSample
+      }
+    }
+  }
+}

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

@@ -0,0 +1,226 @@
+import '@operato/dataset/ox-data-entry-form.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { client } from '@operato/graphql'
+
+@customElement('activity-data-review-view')
+export class DataReviewActivityView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+
+      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);
+        }
+      }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+
+        div[content] {
+          display: block;
+          overflow: visible;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataSample?: any
+
+  render() {
+    const { judgment, instruction } = this.output || {}
+
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>
+      </div>
+
+      <form>
+        <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')}
+                disabled
+              ></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')}
+                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: Event) {
+    this.output ||= {}
+    this.output.instruction = (e.target as HTMLTextAreaElement).value
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.output
+      })
+    )
+  }
+
+  updated(changes) {
+    if (changes.has('input')) {
+      this.fetchDataAssign()
+    }
+  }
+
+  async fetchDataAssign() {
+    const { dataSampleId, dataSample } = this.input || {}
+
+    if (dataSample) {
+      /* only for backwards compatibility - should be deleted later */
+      this.dataSample = dataSample
+    } else if (dataSampleId) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataSample(id: $id) {
+              id
+              name
+              description
+              useCase
+              key01
+              key02
+              key03
+              key04
+              key05
+              data
+              ooc
+              oos
+              dataSet {
+                id
+                name
+                description
+              }
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              judgment
+              workDate
+              workShift
+              updater {
+                id
+                name
+              }
+              updatedAt
+              collectedAt
+            }
+          }
+        `,
+        variables: {
+          id: dataSampleId
+        }
+      })
+
+      this.dataSample = {
+        ...response.data.dataSample
+      }
+    }
+  }
+}