@operato/dataset 1.5.56 → 1.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.5.56",
+  "version": "1.7.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -137,5 +137,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c5a8906354b25cfea9d3178df5fada02108046e8"
+  "gitHead": "c81df18d34366841dec7a36dbfa1a42252b8aa4c"
 }

package/src/ox-data-entry-form.ts

@@ -1,9 +1,11 @@
 import '@operato/input/ox-input-file.js'
+import './ox-data-entry-subgroup-form.js'
 
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { css, html, LitElement, TemplateResult } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
 
-import { DataSet } from './types.js'
+import { DataSet, DataItem, DataSample } from './types.js'
+import { OxDataEntrySubgroupForm } from './ox-data-entry-subgroup-form.js'
 
 @customElement('ox-data-entry-form')
 export class OxDataEntryForm extends LitElement {
@@ -22,6 +24,7 @@ export class OxDataEntryForm extends LitElement {
       text-transform: capitalize;
       text-align: center;
     }
+
     h3 {
       margin: var(--page-description-margin);
       font: var(--page-description-font);
@@ -36,6 +39,7 @@ export class OxDataEntryForm extends LitElement {
       display: flex;
       flex-direction: column;
     }
+
     label {
       display: grid;
 
@@ -47,6 +51,7 @@ export class OxDataEntryForm extends LitElement {
       align-items: center;
       margin-bottom: var(--margin-default);
     }
+
     label:nth-child(odd) {
       background-color: var(--main-section-background-color);
       padding: var(--padding-default) 0;
@@ -65,13 +70,16 @@ export class OxDataEntryForm extends LitElement {
       color: var(--item-description-color);
       text-align: left;
     }
+
     div[description] * {
       vertical-align: middle;
     }
+
     div[description] mwc-icon {
       margin-top: -3px;
       font-size: 0.9rem;
     }
+
     div[elements] {
       grid-area: inputs;
       display: flex;
@@ -80,9 +88,11 @@ export class OxDataEntryForm extends LitElement {
       gap: 10px;
       padding-right: var(--padding-default);
     }
+
     div[elements] * {
       flex: 1;
     }
+
     div[elements] input,
     div[elements] select {
       border: var(--input-field-border);
@@ -91,6 +101,11 @@ export class OxDataEntryForm extends LitElement {
       font: var(--input-field-font);
     }
 
+    div[subgroup] {
+      grid-column: 1 / 3;
+      grid-row: 2;
+    }
+
     @media only screen and (max-width: 460px) {
       label {
         display: grid;
@@ -113,6 +128,8 @@ export class OxDataEntryForm extends LitElement {
   @property({ type: Object }) dataSet?: DataSet
   @property({ type: Object }) value?: { [tag: string]: any }
 
+  @queryAll('ox-data-entry-subgroup-form') subgroups!: NodeListOf<OxDataEntrySubgroupForm>
+
   render() {
     return html` <form @change=${(e: Event) => this.onChange(e)}>
       <h2>${this.dataSet?.name || ''}</h2>
@@ -134,8 +151,37 @@ export class OxDataEntryForm extends LitElement {
   }
 
   private buildInputs() {
-    const dataItems = this.dataSet?.dataItems.filter(item => item.active)
+    const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []
+    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)
+    const dataItemSubgroups = Object.entries(this.groupDataItemsByGroup(dataItems)).map(([subgroup, dataItems]) => {
+      const tags = dataItems.map(dataItem => dataItem.tag)
+      const value = tags.reduce((partial, key) => {
+        partial[key] = this.value?.[key]
+        return partial
+      }, {} as any)
+
+      return this.buildInputs4Subgroup(subgroup, dataItems, value)
+    })
+
+    return [...this.buildInputs4NonGrouped(nonGroupDataItems), ...dataItemSubgroups]
+  }
 
+  private buildInputs4Subgroup(subgroup: string, dataItems: DataItem[], value: { [tag: string]: any }): TemplateResult {
+    return html`
+      <label>
+        <div name>${subgroup}</div>
+        <div subgroup>
+          <ox-data-entry-subgroup-form
+            .subgroup=${subgroup}
+            .dataItems=${dataItems}
+            .value=${value}
+          ></ox-data-entry-subgroup-form>
+        </div>
+      </label>
+    `
+  }
+
+  private buildInputs4NonGrouped(dataItems: DataItem[]): TemplateResult[] {
     return (dataItems || []).map(dataItem => {
       const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem
 
@@ -190,8 +236,9 @@ export class OxDataEntryForm extends LitElement {
 
   private buildValue() {
     const dataItems = this.dataSet!.dataItems
+    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)
 
-    return (dataItems || []).reduce((sum, dataItem) => {
+    const nonGroupValue = (nonGroupDataItems || []).reduce((sum, dataItem) => {
       const { tag, type } = dataItem
 
       const editors = Array.prototype.slice.call(
@@ -204,5 +251,30 @@ export class OxDataEntryForm extends LitElement {
 
       return sum
     }, {} as { [tag: string]: any })
+
+    return Array.from(this.subgroups).reduce((value, subgroup) => {
+      return {
+        ...value,
+        ...subgroup.buildValue()
+      }
+    }, nonGroupValue || {})
+  }
+
+  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {
+    const groupedDataItems: { [group: string]: DataItem[] } = {}
+
+    for (const dataItem of dataItems) {
+      const { group } = dataItem
+
+      if (group) {
+        if (!groupedDataItems[group]) {
+          groupedDataItems[group] = []
+        }
+
+        groupedDataItems[group].push(dataItem)
+      }
+    }
+
+    return groupedDataItems
   }
 }

package/src/ox-data-entry-subgroup-form.ts

@@ -0,0 +1,146 @@
+import '@operato/input/ox-input-file.js'
+import '@operato/data-grist/ox-grist.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state, query } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+import { DataItem } from './types.js'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+
+@customElement('ox-data-entry-subgroup-form')
+export class OxDataEntrySubgroupForm extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        min-height: 100px;
+      }
+    `
+  ]
+
+  @property({ type: String }) subgroup?: string
+  @property({ type: Array }) dataItems?: DataItem[]
+  @property({ type: Object }) value?: { [tag: string]: any }
+
+  @state() gristConfig = this.buildGristConfiguration()
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.buildGristConfiguration()}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
+      </ox-grist>
+    `
+  }
+
+  private buildGristConfiguration() {
+    const columns = (this.dataItems || []).map(dataItem => {
+      const { name, description, tag, type, options = {}, unit } = dataItem
+      const columnConfig = {
+        type,
+        name: tag,
+        header: `${name}${unit ? ` (${unit})` : ''}`,
+        record: {
+          editable: true
+        },
+        width: 200
+      } as any
+
+      switch (type) {
+        case 'select':
+          columnConfig.record.options = [
+            '',
+            ...(options.options || []).map((option: any) => {
+              if (typeof option == 'string') {
+                return option
+              }
+              const { display, text, value } = option || {}
+
+              return {
+                display: display || text,
+                value
+              }
+            })
+          ]
+          return columnConfig
+
+        case 'boolean':
+          columnConfig.record.align = 'center'
+          return columnConfig
+
+        case 'number':
+          columnConfig.record.align = 'right'
+          return columnConfig
+
+        case 'date':
+          return columnConfig
+
+        case 'datetime':
+          return columnConfig
+
+        case 'file':
+          return columnConfig
+
+        case 'string':
+          return columnConfig
+
+        default:
+          return columnConfig
+      }
+    })
+
+    return {
+      list: { fields: ['name', 'data'] },
+      columns: [{ type: 'gutter', gutterName: 'sequence' }, ...columns],
+      rows: {
+        appendable: true
+      },
+      pagination: { infinite: true }
+    }
+  }
+
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const length = Object.entries(this.value || {}).reduce((max, [tag, value]) => {
+      return Math.max(max, Array.isArray(value) ? value.length : 1)
+    }, 0)
+
+    const tags = (this.dataItems || []).map(dataItem => dataItem.tag)
+
+    const records = Array.from({ length }, (_, index) => index).map(index => {
+      return tags.reduce((partial, tag) => {
+        const v = this.value?.[tag]
+        partial[tag] = Array.isArray(v) ? v[index] : index == 0 ? v : undefined
+        return partial
+      }, {} as any)
+    })
+
+    return {
+      total: records.length || 0,
+      records: records
+    }
+  }
+
+  public buildValue() {
+    const records = this.grist._data.records || []
+    const tags = (this.dataItems || []).map(dataItem => dataItem.tag)
+    this.grist.commit()
+
+    return tags.reduce((partial, tag) => {
+      partial[tag] = Array.from({ length: records.length }, (_, index) => index).map(index => {
+        const record = records[index]
+        return record?.[tag]
+      })
+      return partial
+    }, {} as any)
+  }
+}

package/src/ox-data-sample-subgroup-view.ts

@@ -42,6 +42,7 @@ export class OxDataSampleSubgroupView extends LitElement {
 
     th.label {
       background-color: #aaa;
+      width: 120px;
     }
 
     tr {
@@ -63,6 +64,7 @@ export class OxDataSampleSubgroupView extends LitElement {
     td.label {
       background-color: #aaa;
       text-transform: var(--th-text-transform);
+      width: 120px;
     }
 
     td mwc-icon {

package/stories/ox-data-entry-form.stories.ts

@@ -29,6 +29,7 @@ const dataSet = {
       description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
       sequence: 1,
       tag: 'temp',
+      group: '측정데이타',
       type: 'number',
       quota: 1,
       active: true,
@@ -51,6 +52,7 @@ const dataSet = {
       description: '창고 습도는 30% 이하로 유지되어야 합니다.',
       sequence: 2,
       tag: 'humid',
+      group: '측정데이타',
       type: 'number',
       quota: 5,
       active: true,
@@ -73,6 +75,7 @@ const dataSet = {
       description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
       sequence: 3,
       tag: 'inspection',
+      group: '측정데이타',
       type: 'boolean',
       quota: 3,
       active: true,
@@ -92,6 +95,7 @@ const dataSet = {
       description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
       sequence: 4,
       tag: 'evaluation',
+      group: '측정데이타',
       type: 'select',
       options: {
         options: [
@@ -150,6 +154,9 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) =>
       body {
       }
     </style>
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
     <ox-data-entry-form
       .dataSet=${dataSet}