@things-factory/reference-app 5.0.0-zeta.9 → 5.0.0

package/client/bootstrap.js

@@ -141,16 +141,16 @@ export default function bootstrap() {
       }
     })
 
-    store.dispatch({
-      type: ADD_MORENDA,
-      morenda: {
-        icon: html` <mwc-icon>help</mwc-icon> `,
-        name: html` <i18n-msg msgid="text.help"></i18n-msg> `,
-        action: () => {
-          navigate('help')
-        }
-      }
-    })
+    // store.dispatch({
+    //   type: ADD_MORENDA,
+    //   morenda: {
+    //     icon: html` <mwc-icon>help</mwc-icon> `,
+    //     name: html` <i18n-msg msgid="text.help"></i18n-msg> `,
+    //     action: () => {
+    //       navigate('help')
+    //     }
+    //   }
+    // })
 
     store.dispatch({
       type: ADD_SETTING,

package/client/components/ocr-viewpart.js

@@ -2,7 +2,7 @@ import './camera-capturer'
 import '@material/mwc-button'
 import '@operato/ocr/ox-ocr-helper.js'
 
-import { gql } from 'graphql-tag'
+import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { client } from '@things-factory/shell'

package/client/editors/id-selector.js

@@ -70,7 +70,7 @@ export class IdSelector extends LitElement {
         .selectedRecords=${this.selectedRecords}
       >
         <div id="filters" slot="headroom">
-          <ox-filters-form></ox-filters-form>
+          <ox-filters-form autofocus></ox-filters-form>
         </div>
       </ox-grist>
 

package/client/menu.js

@@ -140,6 +140,16 @@ export function getMenuTemplate() {
       icon: 'settings',
       description: '데이타 수집을 위한 개념과 기능들을 소개합니다.',
       menus: [
+        {
+          name: 'Operation',
+          icon: 'schema',
+          path: 'operation_master'
+        },
+        {
+          name: 'Product',
+          icon: 'inventory',
+          path: 'product_master'
+        },
         {
           icon: 'display_settings',
           name: 'Data Set Master',
@@ -169,11 +179,6 @@ export function getMenuTemplate() {
           icon: 'newspaper',
           name: 'Data Report',
           path: 'data-report-list'
-        },
-        {
-          icon: 'newspaper',
-          name: 'Jasper Data Report',
-          path: 'jasper-report-dev-samples'
         }
       ]
     }

package/client/pages/data-entry/data-entry-form.js

@@ -0,0 +1,117 @@
+import '@operato/dataset/ox-data-entry-form.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { openPopup } from '@operato/layout'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+import './data-entry-generator-popup'
+
+class DataEntryForm extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      dataSet: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          background-color: #fff;
+        }
+
+        ox-data-entry-form {
+          flex: 1;
+          padding: 10px;
+          overflow: auto;
+        }
+
+        .button-container {
+          display: flex;
+          margin-left: auto;
+          padding: var(--padding-default);
+        }
+
+        mwc-button {
+          margin-left: var(--margin-default);
+        }
+      `
+    ]
+  }
+
+  get entryForm() {
+    return this.renderRoot.querySelector('ox-data-entry-form')
+  }
+
+  render() {
+    return html`
+      <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+      <div class="button-container">
+        ${process.env.NODE_ENV == 'development' 
+          ? html`<mwc-button raised @click=${this._generateMockupData.bind(this)}>${i18next.t('button.generate_mockup')}</mwc-button>` 
+          : html``
+        }
+        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+      </div>
+    `
+  }
+
+  async _generateMockupData() {
+    this.popup = openPopup(
+      html`
+        <data-entry-generator-popup
+          .dataSetId="${this.dataSet.id}"
+          @created="${e => {
+            this.popup && this.popup.close()
+          }}"
+        ></data-entry-generator-popup>
+      `,
+      {
+        backdrop: true,
+        escapable: false,
+        size: 'small',
+        title: `${i18next.t('title.generate_mockup')}`
+      }
+    )
+  }
+
+  async _updateDataItems() {
+    const data = this.entryForm.buildValue()
+    const dataSample = {
+      dataSet: {
+        id: this.dataSet.id
+      },
+      data
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($dataSample: NewDataSample!) {
+          createDataSample(dataSample: $dataSample) {
+            id
+            collectedAt
+          }
+        }
+      `,
+      variables: {
+        dataSample
+      }
+    })
+
+    if (!response.errors) {
+      document.dispatchEvent(
+        new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } })
+      )
+    }
+  }
+}
+
+window.customElements.define('data-entry-form', DataEntryForm)

package/client/pages/data-entry/data-entry-generator-popup.js

@@ -0,0 +1,110 @@
+import { SingleColumnFormStyles } from '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client } from '@things-factory/shell'
+import { gqlBuilder } from '@things-factory/utils'
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+import { notify } from '@things-factory/layout-base'
+
+class DataEntryGeneratorPopup extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      dataSetId: String,
+      numSamples: Number
+    }
+  }
+
+  static get styles() {
+    return [
+      SingleColumnFormStyles,
+      css`
+        :host {
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--main-section-background-color);
+        }
+        .button-container {
+          padding: var(--button-container-padding);
+          margin: var(--button-container-margin);
+          text-align: var(--button-container-align);
+          background-color: var(--button-container-background);
+          height: var(--button-container-height);
+        }
+      `
+    ]
+  }
+
+  render() {
+    return html`
+      <form id="input-form" name="generation" class="single-column-form" @submit=${e => this.onSubmit(e)}>
+        <fieldset>
+          <label>${i18next.t('label.num_samples')}</label>
+          <input type="number" .value=${this.numSamples} min="1" name="num_samples" required/>
+        </fieldset>
+      </form>
+
+      <div class="button-container">
+        <mwc-button raised @click="${this.generateMockupData}" label="${i18next.t('button.submit')}"></mwc-button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    
+  }
+
+  async onSubmit(e) {
+    e.preventDefault()
+    this.generateMockupData()
+  }
+
+
+  serializeFormData() {
+    let obj = {}
+    
+    Array.from(this.shadowRoot.querySelectorAll('form#input-form input')).forEach(field => {
+      if (!field.hasAttribute('hidden') && field.value) {
+        obj[field.name] = field.type === 'checkbox' ? field.checked : field.value
+      }
+    })
+
+    return obj
+  }
+
+  async generateMockupData() {
+    const params = this.serializeFormData()
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($params: DataSampleMockupInfo!) {
+          generateMockupData(params: $params) 
+        }
+      `,
+      variables: {
+        params: {
+          dataSetId: this.dataSetId,
+          numSamples: parseInt(params['num_samples'])
+        }
+      }
+    })
+
+    if (!response.errors) {
+      this.dispatchEvent(new CustomEvent('created', {}))
+
+      document.dispatchEvent(
+        new CustomEvent('notify', { detail: { message: i18next.t('text.mockup data created successfully') } })
+      )
+
+    }
+  }
+
+  constructor() {
+    super()
+    this.numSamples = 1
+  }
+}
+
+window.customElements.define('data-entry-generator-popup', DataEntryGeneratorPopup)

package/client/pages/data-set/data-item-list.js

@@ -0,0 +1,277 @@
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+class DataItemList extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      dataSet: Object,
+      gristConfig: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          background-color: #fff;
+        }
+
+        ox-grist {
+          flex: 1;
+        }
+
+        .button-container {
+          display: flex;
+          margin-left: auto;
+          padding: var(--padding-default);
+        }
+
+        [danger] {
+          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+        }
+        mwc-button {
+          margin-left: var(--margin-default);
+        }
+      `
+    ]
+  }
+
+  get grist() {
+    return this.renderRoot.querySelector('ox-grist')
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+      <div class="button-container">
+        <mwc-button raised danger @click=${this._deleteDataItems.bind(this)}>${i18next.t('button.delete')}</mwc-button>
+        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    this.gristConfig = {
+      list: { fields: ['name', 'description', 'active'] },
+      columns: [
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'add',
+          handlers: {
+            click: 'record-copy'
+          }
+        },
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_upward',
+          handlers: {
+            click: 'move-up'
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_downward',
+          handlers: {
+            click: 'move-down'
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          width: 140
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'checkbox',
+          name: 'active',
+          label: true,
+          header: i18next.t('field.active'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'checkbox',
+          name: 'hidden',
+          label: true,
+          header: i18next.t('field.hidden'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'string',
+          name: 'tag',
+          header: i18next.t('field.tag'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          record: {
+            options: ['', 'number', 'text', 'select', 'boolean', 'file'],
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'parameters',
+          name: 'options',
+          header: i18next.t('field.options'),
+          record: {
+            editable: true,
+            renderer: 'json5',
+            options: async (value, column, record, row, field) => {
+              return {
+                name: record.type,
+                help: '',
+                spec:
+                  record.type === 'select'
+                    ? [
+                        {
+                          type: 'options' /* property-editor type */,
+                          name: 'options',
+                          label: 'options'
+                        }
+                      ]
+                    : [],
+                context: this.grist,
+                objectified: true
+              }
+            }
+          },
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'unit',
+          header: i18next.t('field.unit'),
+          record: {
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'number',
+          name: 'quota',
+          header: i18next.t('field.quota'),
+          record: {
+            editable: true
+          },
+          width: 60
+        },
+        {
+          type: 'data-item-spec',
+          name: 'spec',
+          header: i18next.t('field.spec'),
+          record: {
+            editable: true,
+            options: {
+              name: '',
+              help: '',
+              objectified: true /* prevent from stringifying */
+            }
+          },
+          width: 200
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      pagination: {
+        infinite: true
+      },
+      sorters: []
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sortings = [] }) {
+    const dataItems = this.dataSet.dataItems || []
+
+    return {
+      total: dataItems.length,
+      records: dataItems
+    }
+  }
+
+  async _updateDataItems() {
+    this.grist.commit()
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $patch: DataSetPatch!) {
+          updateDataSet(id: $id, patch: $patch) {
+            name
+          }
+        }
+      `,
+      variables: {
+        id: this.dataSet.id,
+        patch: {
+          dataItems: this.grist.data.records,
+          cuFlag: 'M'
+        }
+      }
+    })
+
+    if (!response.errors) {
+      await document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.info_x_successfully', {
+              x: i18next.t('button.save')
+            })
+          }
+        })
+      )
+    }
+  }
+
+  async _deleteDataItems() {
+    if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+      return
+    }
+
+    this.grist.deleteSelectedRecords(false)
+  }
+}
+
+window.customElements.define('data-item-list', DataItemList)

package/client/pages/data-set/data-set-importer.js

@@ -0,0 +1,103 @@
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+export class DataSetImporter extends LitElement {
+  static get properties() {
+    return {
+      columns: Object,
+      scenarios: Array
+    }
+  }
+
+  constructor() {
+    super()
+    this.columns = {
+      list: { fields: ['name', 'description'] },
+      pagination: { infinite: true },
+      columns: [
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          width: 200
+        },
+        {
+          type: 'checkbox',
+          name: 'active',
+          header: i18next.t('field.active'),
+          width: 60
+        }
+      ]
+    }
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          background-color: #fff;
+        }
+
+        ox-grist {
+          flex: 1;
+        }
+
+        .button-container {
+          display: flex;
+          margin-left: auto;
+          padding: var(--padding-default);
+        }
+
+        mwc-button {
+          margin-left: var(--margin-default);
+        }
+      `
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data="${{ records: this.scenarios }}"
+      ></ox-grist>
+
+      <div class="button-container">
+        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+      </div>
+    `
+  }
+
+  async save() {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation importDataSets($dataSets: [DataSetPatch!]!) {
+          importDataSets(dataSets: $dataSets)
+        }
+      `,
+      variables: { dataSets: this.dataSets }
+    })
+
+    if (response.error?.length) return
+
+    this.dispatchEvent(new CustomEvent('imported'))
+  }
+}
+
+customElements.define('data-set-importer', DataSetImporter)