@things-factory/dataset 5.0.0-alpha.5 → 5.0.0-alpha.50

package/client/pages/data-ooc/data-ooc-list-page.js

@@ -0,0 +1,483 @@
+import '@operato/data-grist'
+import './data-ooc-view.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { PageView, store } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+export class DataOocListPage extends connect(store)(localize(i18next)(PageView)) {
+  static get properties() {
+    return {
+      active: String,
+      gristConfig: Object,
+      mode: String
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      CommonGristStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.data-ooc list'),
+      help: 'dataset/data-ooc',
+      actions: [
+        // {
+        //   title: i18next.t('button.save'),
+        //   action: this._updateDataOoc.bind(this),
+        //   ...CommonButtonStyles.save
+        // }
+      ],
+      exportable: {
+        name: i18next.t('title.data-ooc list'),
+        data: this._exportableData.bind(this)
+      }
+    }
+  }
+
+  render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
+    return html`
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
+      >
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  get grist() {
+    return this.renderRoot.querySelector('ox-grist')
+  }
+
+  async pageInitialized(lifecycle) {
+    this.gristConfig = {
+      list: {
+        fields: ['dataSet', 'data', 'spec', 'correctiveAction', 'corrector', 'correctedAt', 'collectedAt', 'creator']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'assignment_turned_in',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              const popup = openPopup(
+                html` <data-ooc-view .dataOoc=${record} style="background-color: white;"></data-ooc-view> `,
+                {
+                  backdrop: true,
+                  size: 'large',
+                  title: i18next.t('title.data-ooc view')
+                }
+              )
+              popup.onclosed = () => {
+                this.grist.fetch()
+              }
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          label: true,
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          label: true,
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          width: 150,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'history',
+          hidden: true,
+          imex: true
+        },
+        {
+          type: 'checkbox',
+          name: 'ooc',
+          header: i18next.t('field.ooc'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'checkbox',
+          name: 'oos',
+          header: i18next.t('field.oos'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'select',
+          name: 'state',
+          label: true,
+          header: i18next.t('field.state'),
+          record: {
+            editable: false,
+            options: ['', 'CREATED', 'REVIEWED', 'CORRECTED']
+          },
+          width: 100,
+          filter: true,
+          imex: true
+        },
+        {
+          type: 'textarea',
+          name: 'correctiveAction',
+          label: true,
+          header: i18next.t('field.corrective-action'),
+          record: {
+            editable: true
+          },
+          width: 150,
+          imex: true
+        },
+        {
+          type: 'resource-object',
+          name: 'dataSet',
+          header: i18next.t('field.data-set'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'json5',
+          name: 'partitionKeys',
+          header: i18next.t('field.partition-keys'),
+          record: {
+            editable: false
+          },
+          width: 200,
+          imex: true
+        },
+        {
+          type: 'json5',
+          name: 'data',
+          header: i18next.t('field.data'),
+          record: {
+            editable: false
+          },
+          width: 200,
+          imex: true
+        },
+        {
+          type: 'json5',
+          name: 'spec',
+          header: i18next.t('field.spec'),
+          record: {
+            editable: false
+          },
+          width: 200
+        },
+        {
+          type: 'text',
+          name: 'rawData',
+          header: i18next.t('field.raw-data'),
+          record: {
+            editable: false
+          },
+          width: 200,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'workDate',
+          header: i18next.t('field.work-date'),
+          sortable: true,
+          width: 80,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'workShift',
+          header: i18next.t('field.work-shift'),
+          sortable: true,
+          width: 40,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'collectedAt',
+          header: i18next.t('field.collected-at'),
+          sortable: true,
+          width: 180,
+          imex: true
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          sortable: true,
+          width: 180,
+          imex: true
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'updatedAt',
+          desc: true
+        }
+      ]
+    }
+
+    await this.updateComplete
+
+    this.grist.fetch()
+  }
+
+  // async pageUpdated(changes, lifecycle) {
+  //   if (this.active) {
+  //     // update with url params value
+  //     this._updateSearchConfig(lifecycle)
+  //     await this.updateComplete
+
+  //     this.grist.fetch()
+  //   }
+  // }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: dataOocs(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              dataSet {
+                id
+                name
+              }
+              dataSample {
+                id
+                name
+              }
+              partitionKeys
+              data
+              rawData
+              state
+              spec
+              ooc
+              oos
+              history
+              workDate
+              workShift
+              correctiveAction
+              correctedAt
+              corrector {
+                id
+                name
+              }
+              updater {
+                id
+                name
+              }
+              updatedAt
+              collectedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  // async _updateDataOoc() {
+  //   let patches = this.grist.dirtyRecords
+  //   if (patches && patches.length) {
+  //     patches = patches.map(patch => {
+  //       let patchField = patch.id ? { id: patch.id } : {}
+  //       const dirtyFields = patch.__dirtyfields__
+  //       for (let key in dirtyFields) {
+  //         patchField[key] = dirtyFields[key].after
+  //       }
+  //       this._setDefaultFieldsValue(patchField)
+  //       patchField.cuFlag = patch.__dirty__
+
+  //       return patchField
+  //     })
+
+  //     const response = await client.mutate({
+  //       mutation: gql`
+  //         mutation ($patches: [DataOocPatch!]!) {
+  //           updateMultipleDataOoc(patches: $patches) {
+  //             name
+  //           }
+  //         }
+  //       `,
+  //       variables: {
+  //         patches
+  //       }
+  //     })
+
+  //     if (!response.errors) this.grist.fetch()
+  //   }
+  // }
+
+  // async _deleteDataOoc() {
+  //   if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+  //     const ids = this.grist.selected.map(record => record.id)
+  //     if (ids && ids.length > 0) {
+  //       const response = await client.mutate({
+  //         mutation: gql`
+  //           mutation ($ids: [String!]!) {
+  //             deleteDataOocs(ids: $ids)
+  //           }
+  //         `,
+  //         variables: {
+  //           ids
+  //         }
+  //       })
+
+  //       if (!response.errors) {
+  //         this.grist.fetch()
+  //         notify({
+  //           message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+  //         })
+  //       }
+  //     }
+  //   }
+  // }
+
+  _exportableData() {
+    let records = []
+    if (this.grist.selected && this.grist.selected.length > 0) {
+      records = this.grist.selected
+    } else {
+      records = this.grist.data.records
+    }
+
+    var headerSetting = this.grist.compiledConfig.columns
+      .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+      .map(column => {
+        return column.imex === true
+          ? {
+              header: column.header.renderer(),
+              key: column.name,
+              width: column.width,
+              type: column.type
+            }
+          : column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this.gristConfig.columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .reduce((record, column) => {
+            const key = column.imex === true ? column.name : column.imex.key
+            record[key] = key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+}
+
+window.customElements.define('data-ooc-list-page', DataOocListPage)

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

@@ -0,0 +1,183 @@
+import '@operato/dataset/ox-data-ooc-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+class DataOocView extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          background-color: #fff;
+        }
+
+        div[content] {
+          flex: 1;
+
+          display: flex;
+          overflow: auto;
+        }
+
+        ox-data-ooc-view {
+          flex: 1;
+          padding: var(--padding-wide);
+          overflow: auto;
+        }
+
+        label[comment] {
+          display: flex;
+          flex-direction: column;
+
+          padding: var(--padding-wide);
+        }
+
+        label[comment] div {
+          display: flex;
+        }
+
+        mwc-icon {
+          color: var(--status-danger-color);
+        }
+
+        textarea {
+          border: var(--input-field-border);
+          border-radius: var(--input-border-radius);
+          padding: var(--input-field-padding);
+          font: var(--input-field-font);
+        }
+
+        .button-container {
+          display: flex;
+          margin-left: auto;
+          padding: var(--padding-default);
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      dataSet: Object,
+      dataOoc: Object
+    }
+  }
+
+  get sampleView() {
+    return this.renderRoot.querySelector('ox-data-ooc-view')
+  }
+
+  render() {
+    const state = this.dataOoc.state
+
+    return html`
+      <div content>
+        <ox-data-ooc-view .dataSet=${this.dataSet} .dataOoc=${this.dataOoc}></ox-data-ooc-view>
+      </div>
+
+      ${state === 'CREATED' || state === 'REVIEWED'
+        ? html`
+            <label comment>
+              <div><mwc-icon>build_circle</mwc-icon> <span>correction activity</span></div>
+              <textarea placeholder="조치 내용을 입력해주세요."></textarea>
+            </label>
+          `
+        : html``}
+
+      <div class="button-container">
+        ${state === 'CREATED'
+          ? html`<mwc-button raised @click=${() => this._processOoc('REVIEWED')}
+              >${i18next.t('button.reviewed')}</mwc-button
+            >`
+          : state === 'REVIEWED'
+          ? html`<mwc-button raised @click=${() => this._processOoc('CORRECTED')}
+              >${i18next.t('button.corrected')}</mwc-button
+            >`
+          : html``}
+      </div>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('dataOoc')) {
+      this.fetchDataSet()
+    }
+  }
+
+  async fetchDataSet() {
+    const id = this.dataOoc?.dataSet?.id
+
+    if (id) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataSet(id: $id) {
+              id
+              name
+              description
+              useCase
+              dataItems {
+                id
+                name
+                description
+                active
+                unit
+                tag
+                type
+                spec
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataOoc.dataSet.id
+        }
+      })
+
+      this.dataSet = response.data.dataSet
+    }
+  }
+
+  async _processOoc(state) {
+    const commentTextArea = this.renderRoot.querySelector('textarea')
+    const comment = commentTextArea && commentTextArea.value
+    if (!comment || !comment.trim()) {
+      commentTextArea.focus()
+      return
+    }
+
+    const patch = {
+      state,
+      correctiveAction: comment
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $patch: DataOocPatch!) {
+          updateDataOoc(id: $id, patch: $patch) {
+            id
+          }
+        }
+      `,
+      variables: {
+        id: this.dataOoc.id,
+        patch
+      }
+    })
+
+    if (!response.errors) {
+      document.dispatchEvent(
+        new CustomEvent('notify', { detail: { message: i18next.t('text.data ooc updated successfully') } })
+      )
+    }
+  }
+}
+
+window.customElements.define('data-ooc-view', DataOocView)