@things-factory/dataset 8.0.0-beta.8 → 8.0.0

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,133 @@
+import '@operato/dataset/ox-data-entry-form.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { client } from '@operato/graphql'
+
+@customElement('activity-data-review-edit')
+export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
+  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;
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataSample?: any
+
+  render() {
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>
+      </div>
+    `
+  }
+
+  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
+      }
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+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;
+      }
+
+      @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() {
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>
+      </div>
+    `
+  }
+
+  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
+      }
+    }
+  }
+}

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

@@ -0,0 +1,195 @@
+import '@material/web/icon/icon.js'
+import '@operato/dataset/ox-data-ooc-brief-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement, nothing } 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'
+
+@customElement('activity-ooc-resolve-edit')
+class OocResolveActivityEdit 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-ooc-brief-view {
+        flex: 1;
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+
+      label[action] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--spacing-large);
+      }
+
+      label[action] h2 {
+        display: flex;
+
+        color: var(--title-text-color);
+        text-transform: capitalize;
+        margin: var(--title-margin);
+        align-items: center;
+      }
+
+      md-icon {
+        color: var(--status-danger-color);
+      }
+
+      textarea {
+        border: var(--input-field-border);
+        border-radius: var(--spacing-small);
+        margin: var(--spacing-medium);
+        padding: var(--spacing-medium);
+        font: var(--input-field-font);
+        color: var(--md-sys-color-on-surface);
+        background: 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() dataOoc?: any
+
+  @query('textarea') actionTextArea!: HTMLTextAreaElement
+
+  render() {
+    const action = this.output?.action
+    const state = this.activityThread?.state
+    const editable = state == 'unassigned' || state == 'assigned' || state == 'started'
+
+    return html`
+      <div content>
+        <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
+      </div>
+
+      <!-- <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part> -->
+
+      ${editable
+        ? html`
+            <label action>
+              <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
+              <textarea
+                placeholder=${String(i18next.t('text.corrective action placeholder'))}
+                .value=${action || ''}
+                @change=${this.onChangeAction}
+              ></textarea>
+            </label>
+          `
+        : nothing}
+    `
+  }
+
+  onChangeAction(e: Event) {
+    this.output ||= {}
+    this.output.action = (e.target as HTMLTextAreaElement).value
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.output
+      })
+    )
+  }
+
+  updated(changes) {
+    if (changes.has('input')) {
+      this.fetchDataOoc()
+    }
+  }
+
+  async fetchDataOoc() {
+    const id = this.input.dataOocId
+
+    if (id) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataOoc(id: $id) {
+              id
+              name
+              description
+              ooc
+              oos
+              state
+              type
+              useCase
+              data
+              judgment
+              history
+              correctiveAction
+              correctiveInstruction
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              workDate
+              workShift
+              reviewer {
+                id
+                name
+              }
+              corrector {
+                id
+                name
+              }
+              collectedAt
+              reviewedAt
+              correctedAt
+            }
+          }
+        `,
+        variables: {
+          id
+        }
+      })
+
+      const dataOoc = {
+        ...response.data.dataOoc
+      }
+
+      if (this.activityThread?.output) {
+        dataOoc.correctiveAction = this.activityThread.output.action
+        dataOoc.correctedAt = this.activityThread.updatedAt
+        dataOoc.corrector = this.activityThread.assignee
+      }
+
+      this.dataOoc = dataOoc
+    }
+  }
+}