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

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

@@ -0,0 +1,236 @@
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
+import '@operato/dataset/ox-data-ooc-brief-view.js'
+import '@things-factory/worklist/dist-client/components/activity-thread-timeline.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'
+import { GhostPrint } from '@operato/ghost-print'
+
+@customElement('data-ooc-view')
+export class DataOocView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        background-color: var(--md-sys-color-surface);
+
+        overflow: auto;
+      }
+
+      ox-data-ooc-brief-view {
+        padding: var(--spacing-large);
+      }
+
+      activity-thread-timeline {
+        margin: var(--spacing-medium);
+      }
+
+      md-fab {
+        position: fixed;
+        bottom: 15px;
+        right: 16px;
+        text-decoration: auto;
+        opacity: 0.5;
+      }
+
+      @media print {
+        md-fab {
+          display: none;
+        }
+      }
+    `
+  ]
+
+  @property({
+    type: String,
+    attribute: 'data-ooc-id'
+  })
+  dataOocId?: string
+
+  @state() dataOoc?: any
+
+  private printHandler = this.handlePrint.bind(this)
+
+  render() {
+    if (!this.dataOoc) {
+      return nothing
+    }
+
+    const reviewActivityThread = this.dataOoc?.reviewActivityInstance?.activityThreads?.[0]
+    const resolveActivityThread = this.dataOoc?.resolveActivityInstance?.activityThreads?.[0]
+
+    return html`
+      <ox-data-ooc-brief-view .dataOoc=${this.dataOoc}></ox-data-ooc-brief-view>
+      ${reviewActivityThread
+        ? html`
+            <activity-thread-timeline
+              subtitle=${String(i18next.t('label.ooc review timeline'))}
+              .activityThread=${reviewActivityThread}
+              short-form
+            ></activity-thread-timeline>
+          `
+        : nothing}
+      ${resolveActivityThread
+        ? html`
+            <activity-thread-timeline
+              subtitle=${String(i18next.t('label.ooc resolve timeline'))}
+              .activityThread=${resolveActivityThread}
+              short-form
+            ></activity-thread-timeline>
+          `
+        : nothing}
+
+      <md-fab
+        title="print"
+        @click=${() =>
+          GhostPrint.print({
+            src: `./data-ooc/${this.dataOoc.id}`
+          })}
+      >
+        <md-icon slot="icon">print</md-icon>
+      </md-fab>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('dataOocId')) {
+      this.fetchDataOoc()
+    }
+  }
+
+  async fetchDataOoc() {
+    const id = this.dataOocId
+
+    const response = await client.query({
+      query: gql`
+        query ($id: String!) {
+          dataOoc(id: $id) {
+            id
+            name
+            description
+            useCase
+            dataSet {
+              id
+              name
+            }
+            key01
+            key02
+            key03
+            key04
+            key05
+            partitionKeys
+            dataItems {
+              name
+              description
+              active
+              hidden
+              tag
+              group
+              type
+              unit
+              options
+              quota
+              spec
+              stat
+            }
+            data
+            rawData
+            judgment
+            ooc
+            oos
+            state
+            history
+            workDate
+            workShift
+            correctiveInstruction
+            correctiveAction
+            reviewedAt
+            reviewer {
+              id
+              name
+            }
+            correctedAt
+            corrector {
+              id
+              name
+            }
+            updater {
+              id
+              name
+            }
+            updatedAt
+            collectedAt
+            reviewActivityInstance {
+              ...ActivityInstanceFragment
+            }
+            resolveActivityInstance {
+              ...ActivityInstanceFragment
+            }
+          }
+        }
+
+        fragment ActivityInstanceFragment on ActivityInstance {
+          activityThreads {
+            assignee {
+              name
+            }
+            output
+            activityApprovals {
+              judgment
+              approver {
+                name
+              }
+              comment
+              createdAt
+              updatedAt
+              terminatedAt
+            }
+            activityThreadHistories {
+              transaction
+              reason
+              updater {
+                name
+              }
+              updatedAt
+              state
+              output
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.dataOoc = response.data.dataOoc
+  }
+
+  handlePrint(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+      event.preventDefault()
+
+      GhostPrint.print({
+        src: `./data-ooc/${this.dataOoc.id}`
+      })
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    window.addEventListener('keydown', this.printHandler)
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    window.removeEventListener('keydown', this.printHandler)
+  }
+}

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

@@ -0,0 +1,200 @@
+import '@operato/dataset/ox-data-ooc-brief-view.js'
+import '@things-factory/worklist/dist-client/components/activity-thread-timeline.js'
+
+import gql from 'graphql-tag'
+import { PropertyValues, html, css, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+
+/**
+ * 이 페이지는 여러개의 Data OOC를 한번에 프린트하기 위한 용도로 사용되는 페이지이다.
+ */
+@customElement('data-oocs-page')
+export class DataOocsPage extends localize(i18next)(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        overflow: auto;
+      }
+
+      activity-thread-timeline {
+        margin: var(--spacing-medium);
+      }
+
+      .end {
+        page-break-after: always;
+        break-after: always;
+      }
+    `
+  ]
+
+  @state() dataOocs?: any[]
+
+  get context() {
+    return {
+      title: i18next.t('title.data-ooc view')
+    }
+  }
+
+  render() {
+    return this.dataOocs?.map(dataOoc => {
+      const reviewActivityThread = dataOoc?.reviewActivityInstance?.activityThreads?.[0]
+      const resolveActivityThread = dataOoc?.resolveActivityInstance?.activityThreads?.[0]
+
+      return html`
+        <ox-data-ooc-brief-view .dataOoc=${dataOoc}></ox-data-ooc-brief-view>
+        ${reviewActivityThread
+          ? html`
+              <activity-thread-timeline
+                subtitle=${String(i18next.t('label.ooc review timeline'))}
+                .activityThread=${reviewActivityThread}
+                short-form
+              ></activity-thread-timeline>
+            `
+          : nothing}
+        ${resolveActivityThread
+          ? html`
+              <activity-thread-timeline
+                subtitle=${String(i18next.t('label.ooc resolve timeline'))}
+                .activityThread=${resolveActivityThread}
+                short-form
+              ></activity-thread-timeline>
+            `
+          : nothing}
+        <div class="end"></div>
+      `
+    })
+  }
+
+  pageUpdated(changes: any, lifecycle: any, before: any) {
+    if (this.active) {
+      /*
+       * this page is activated
+       */
+      const { ids = '' } = lifecycle.params
+
+      this.fetchOocs(ids.split('|').map(id => id.trim()))
+    } else {
+      /* this page is deactivated */
+    }
+  }
+
+  async fetchOocs(ids: string[]) {
+    const filters = [
+      {
+        name: 'id',
+        operator: 'in',
+        value: ids
+      }
+    ]
+
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!]) {
+          dataOocs(filters: $filters) {
+            items {
+              id
+              name
+              description
+              useCase
+              dataSet {
+                id
+                name
+              }
+              key01
+              key02
+              key03
+              key04
+              key05
+              partitionKeys
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              data
+              rawData
+              judgment
+              ooc
+              oos
+              state
+              history
+              workDate
+              workShift
+              correctiveInstruction
+              correctiveAction
+              reviewedAt
+              reviewer {
+                id
+                name
+              }
+              correctedAt
+              corrector {
+                id
+                name
+              }
+              updater {
+                id
+                name
+              }
+              updatedAt
+              collectedAt
+              reviewActivityInstance {
+                ...ActivityInstanceFragment
+              }
+              resolveActivityInstance {
+                ...ActivityInstanceFragment
+              }
+            }
+          }
+        }
+
+        fragment ActivityInstanceFragment on ActivityInstance {
+          activityThreads {
+            assignee {
+              name
+            }
+            output
+            activityApprovals {
+              judgment
+              approver {
+                name
+              }
+              comment
+              createdAt
+              updatedAt
+              terminatedAt
+            }
+            activityThreadHistories {
+              transaction
+              reason
+              updater {
+                name
+              }
+              updatedAt
+              state
+              output
+            }
+          }
+        }
+      `,
+      variables: {
+        filters
+      }
+    })
+
+    this.dataOocs = response.data.dataOocs.items
+  }
+}

package/client/pages/data-report/data-report-embed-page.ts

@@ -0,0 +1,108 @@
+/**
+ * report page from 'data-set-list-page'
+ * datasetId is required
+ */
+import '@operato/data-grist'
+import '@things-factory/form-ui'
+
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { encodeUrlParams } from '@operato/utils'
+
+@customElement('data-report-embed-page')
+export class DataReportEmbedPage extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
+
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
+
+  @query('iframe') iframe!: HTMLIFrameElement
+
+  get context() {
+    const filters = [
+      {
+        name: 'workDateRange',
+        type: 'date',
+        label: 'date',
+        operator: 'between'
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.iframe.contentWindow?.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'data-report-embed',
+      actions,
+      filters
+    }
+  }
+  render() {
+    return html`
+      <ox-filters-form-base
+        .filters=${this.context.filters}
+        @filters-change=${e => {
+          console.log('filters changed', e.detail)
+          this.reportTemplate(e.detail.filters)
+        }}
+        ?url-params-sensitive=${this.active}
+      ></ox-filters-form-base>
+      <iframe frameborder="0" style="border:0"></iframe>
+    `
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async reportTemplate(filters) {
+    // convert filters array to object
+    const params = filters.reduce((acc, curr) => ((acc[curr.name] = curr.value), acc), {})
+    Object.assign(params, this.lifecycle.params)
+
+    const { id, workDateRange, workShift, reportType, reportView } = params
+
+    /** ignoring date conditions  */
+    if (!workDateRange[0] || !workDateRange[1] || workDateRange[0] > workDateRange[1]) {
+      return
+    }
+
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'samples',
+      dataSetId: id,
+      startDate: workDateRange[0],
+      endDate: workDateRange[1],
+      workShift,
+      reportView
+    }
+
+    const encodedUrlParams = encodeUrlParams(urlParams)
+
+    this.iframe.src = `/data-report/${reportType}/?${encodedUrlParams}`
+  }
+}