@operato/dataset 7.1.4 → 7.1.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "7.1.4",
+  "version": "7.1.6",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -108,15 +108,15 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/data-grist": "^7.1.4",
+    "@operato/data-grist": "^7.1.6",
     "@operato/graphql": "^7.1.1",
-    "@operato/grist-editor": "^7.1.4",
+    "@operato/grist-editor": "^7.1.6",
     "@operato/i18n": "^7.1.1",
-    "@operato/input": "^7.1.4",
-    "@operato/popup": "^7.1.1",
-    "@operato/property-editor": "^7.1.4",
-    "@operato/shell": "^7.1.1",
-    "@operato/styles": "^7.1.1",
+    "@operato/input": "^7.1.6",
+    "@operato/popup": "^7.1.6",
+    "@operato/property-editor": "^7.1.6",
+    "@operato/shell": "^7.1.6",
+    "@operato/styles": "^7.1.6",
     "@operato/utils": "^7.1.1",
     "lit": "^3.1.2"
   },
@@ -152,5 +152,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "1abfd7c0d36d4083e38f88bd83cffa92198bb520"
+  "gitHead": "6f754b46ee6e01c930e71073611de781da4e7bf5"
 }

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

@@ -172,6 +172,7 @@ export class OxDataEntryForm extends LitElement {
             .subgroup=${subgroup}
             .dataItems=${dataItems}
             .value=${value}
+            @change=${(e: Event) => this.onChange(e)}
           ></ox-data-entry-subgroup-form>
         </div>
       </div>
@@ -234,15 +235,10 @@ export class OxDataEntryForm extends LitElement {
             return html` <input type="datetime-local" name=${tag} value=${v} />`
 
           case 'file':
-            return html`<ox-input-file name=${tag}></ox-input-file>`
+            return html`<ox-input-file name=${tag} multiple .value=${v}></ox-input-file>`
 
           case 'signature':
-            return html`<ox-input-signature
-              name=${tag}
-              label="Attach Files"
-              accept="*/*"
-              multiple="true"
-            ></ox-input-signature>`
+            return html`<ox-input-signature name=${tag} value=${v}></ox-input-signature>`
 
           case 'string':
           default:

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

@@ -38,6 +38,7 @@ export class OxDataEntrySubgroupForm extends LitElement {
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.buildGristConfiguration()}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        @field-change=${this.onFieldChange.bind(this)}
       >
       </ox-grist>
     `
@@ -91,6 +92,7 @@ export class OxDataEntrySubgroupForm extends LitElement {
           return columnConfig
 
         case 'file':
+          columnConfig.record.multiple = true
           return columnConfig
 
         case 'signature':
@@ -148,4 +150,8 @@ export class OxDataEntrySubgroupForm extends LitElement {
       return partial
     }, {} as any)
   }
+
+  onFieldChange(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('change', { detail: this.grist.dirtyData }))
+  }
 }

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

@@ -0,0 +1,221 @@
+import '@material/web/icon/icon.js'
+import '@operato/input/ox-input-file.js'
+import '@operato/input/ox-input-signature.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { DataSample, DataSet, DataSpecLimitSet } from './types.js'
+import { OxDataUseCase } from './usecase/ox-data-use-case.js'
+
+@customElement('ox-data-entry-subgroup-view')
+export class OxDataEntrySubgroupView extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+
+    h3 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      font-size: 20px;
+      color: var(--title-text-color);
+      text-transform: capitalize;
+    }
+
+    table {
+      border-collapse: collapse;
+      margin-bottom: var(--spacing-medium);
+    }
+
+    th {
+      padding: var(--th-padding);
+      border-top: var(--th-border-top);
+      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));
+      border-bottom: var(--td-border-bottom);
+      text-transform: var(--th-text-transform);
+      font: var(--th-font);
+      font-weight: bold;
+      color: var(--th-color);
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    th.label,
+    td.label {
+      background-color: var(--label-cell-background-color, #f6f6f6);
+      width: 120px;
+      text-transform: var(--th-text-transform);
+    }
+
+    tr {
+      background-color: var(--tr-background-color);
+    }
+
+    tr:hover {
+      background-color: var(--tr-background-hover-color);
+    }
+
+    td {
+      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));
+      border-bottom: var(--td-border-bottom);
+      padding: var(--td-padding);
+      font: var(--td-font);
+      color: var(--td-color);
+      text-align: center;
+    }
+    tr th:first-child,
+    tr td:first-child {
+      border-left: none;
+    }
+
+    td md-icon {
+      color: var(--md-sys-color-error);
+    }
+
+    pre {
+      tab-size: 2;
+      text-align: left;
+    }
+
+    a[file] {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-small);
+    }
+
+    a[file] md-icon {
+      --md-icon-size: 16px;
+      color: var(--md-sys-color-primary);
+    }
+  `
+
+  @property({ type: Object }) dataSet?: DataSet
+  @property({ type: Object }) data?: any
+  @property({ type: String }) subgroup?: string
+
+  render() {
+    if (!this.data || !this.dataSet) {
+      return html``
+    }
+
+    const { useCase, dataItems = [] } = this.dataSet
+
+    const { data } = this
+    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
+    const subgroupDataItems = dataItems.filter(dataItem => dataItem.group == this.subgroup && !dataItem.hidden)
+    const records = subgroupDataItems.reduce((max, dataItem) => {
+      const value = data[dataItem.tag]
+      return Math.max(max, Array.isArray(value) ? value.length : 1)
+    }, 0)
+    const judgment = subgroupDataItems.reduce(
+      (judgment, dataItem) => {
+        const tag = dataItem.tag
+        judgment[tag] = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}
+        return judgment
+      },
+      {} as { [tag: string]: { ooc: boolean; oos: boolean } }
+    )
+
+    return html` <h3>${this.subgroup}</h3>
+      <table>
+        <tr>
+          <th class="label">${i18next.t('field.name')}</th>
+          ${subgroupDataItems.map(
+            dataItem => html` <th>${dataItem.name} ${dataItem.unit ? `(${dataItem.unit})` : ''}</th> `
+          )}
+        </tr>
+        <tr>
+          <td class="label">${i18next.t('field.description')}</td>
+          ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}
+        </tr>
+        ${Array.from({ length: records }, (_, index) => index).map(
+          index => html`
+            <tr>
+              <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
+              ${subgroupDataItems.map(dataItem => {
+                const { tag = '', type } = dataItem
+                const valueArray = data[tag]
+                const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined
+
+                return html` <td>${this.buildValue(type, value)}</td> `
+              })}
+            </tr>
+          `
+        )}
+        <tr>
+          <td class="label">${i18next.t('field.spec')}</td>
+          ${subgroupDataItems.map(
+            dataItem => html` <td><pre>${this.buildSpec(useCaseNames, dataItem.spec)}</pre></td> `
+          )}
+        </tr>
+        <tr>
+          <td class="label">${i18next.t('field.ooc')}</td>
+          ${subgroupDataItems.map(
+            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<md-icon>done</md-icon>` : nothing}</td> `
+          )}
+        </tr>
+        <tr>
+          <td class="label">${i18next.t('field.oos')}</td>
+          ${subgroupDataItems.map(
+            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<md-icon>done</md-icon>` : nothing}</td> `
+          )}
+        </tr>
+      </table>`
+  }
+
+  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {
+    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)
+  }
+
+  private download(file: { mimetype: string; name: string; fullpath: string }) {
+    const element = document.createElement('a')
+    element.setAttribute('href', file.fullpath)
+    element.setAttribute('download', file.name!)
+    document.body.appendChild(element)
+    element.click()
+  }
+
+  private buildValue(type: string, value: any | any[]) {
+    if (value === undefined) {
+      return ''
+    }
+    const values = value instanceof Array ? value : [value]
+
+    if (type == 'file') {
+      const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]
+
+      return files.filter(Boolean).map(
+        (file, idx) => html`
+          <a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>
+          ${files.length - 1 == idx ? html`</br>` : nothing}
+        `
+      )
+    }
+
+    if (type == 'signature') {
+      return html` <ox-input-signature .value=${value} disabled></ox-input-signature>`
+    }
+
+    const elements = values.map((v: any, idx) => {
+      switch (typeof v) {
+        case 'boolean':
+          return html` <input type="checkbox" .checked=${v} disabled />`
+          break
+
+        default:
+          if (type == 'date') {
+            return v ? new Date(v).toLocaleDateString() : ''
+          } else if (type == 'datetime') {
+            return v ? new Date(v).toLocaleString() : ''
+          }
+          return v ?? ''
+      }
+    })
+
+    return typeof values[0] === 'boolean' ? elements : elements.join(', ')
+  }
+}

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

@@ -1,12 +1,14 @@
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-file.js'
 import '@operato/input/ox-input-signature.js'
+import './ox-data-entry-subgroup-view.js'
 
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 
-import { DataSet, DataSpecLimitSet } from './types.js'
+import { DataItem, DataSet, DataSpecLimitSet } from './types.js'
 import { OxDataUseCase } from './usecase/ox-data-use-case.js'
 
 @customElement('ox-data-entry-view')
@@ -15,6 +17,9 @@ export class OxDataEntryView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
+
+      --signature-min-width: 100px;
+      --signature-min-height: 60px;
     }
 
     form {
@@ -106,68 +111,6 @@ export class OxDataEntryView extends LitElement {
   @property({ type: Object }) dataSet?: DataSet
   @property({ type: Object }) value?: { [tag: string]: any }
 
-  __render() {
-    return html`<form>
-      <h2>${this.dataSet?.name || ''}</h2>
-      <h3>${this.dataSet?.description || ''}</h3>
-      ${this.buildEntryViews()}
-    </form> `
-  }
-
-  private buildEntryViews() {
-    const dataItems = this.dataSet?.dataItems.filter(item => item.active)
-
-    return (dataItems || []).map(dataItem => {
-      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem
-
-      const samples = new Array(quota).fill(0)
-      const value = this.value && this.value[tag]
-
-      const elements = samples.map((_, idx) => {
-        const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined
-
-        switch (type) {
-          case 'select':
-            return html` <select .name=${tag} disabled>
-              <option value=""></option>
-              ${(options.options || []).map(
-                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`
-              )}
-            </select>`
-            break
-
-          case 'boolean':
-            return html` <input type="checkbox" name=${tag} .checked=${v} disabled />`
-            break
-
-          case 'number':
-            return html` <input type="number" name=${tag} value=${v} disabled />`
-            break
-
-          case 'file':
-            return html`<ox-input-file
-              name=${tag}
-              label="Attach Files"
-              accept="*/*"
-              multiple="true"
-              hide-filelist
-              disabled
-            ></ox-input-file>`
-
-          case 'string':
-          default:
-            return html` <input type="text" name=${tag} value=${v} disabled />`
-        }
-      })
-
-      return html` <label .title=${description}>
-        <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description><md-icon>info</md-icon> ${description}</div>
-        <div elements>${elements}</div>
-      </label>`
-    })
-  }
-
   render() {
     if (!this.dataSet) {
       return nothing
@@ -176,45 +119,79 @@ export class OxDataEntryView extends LitElement {
     const { name, description, useCase, dataItems = [] } = this.dataSet!
 
     const data = this.value || {}
+
     const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
+    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group && !dataItem.hidden)
+    const dataItemSubgroups = this.groupDataItemsByGroup(dataItems)
 
     return html` <h2>${name}</h2>
       <p page-description><md-icon>info</md-icon> ${description}<br /></p>
 
       <form>
-        <table>
-          <tr>
-            <th item>${i18next.t('field.item')}</th>
-            <th>${i18next.t('field.description')}</th>
-            <th>${i18next.t('field.finalizing-function')}</th>
-            <th>${i18next.t('field.unit')}</th>
-            <th value>${i18next.t('field.value')}</th>
-            <th>${i18next.t('field.spec')}</th>
-            <th>${i18next.t('field.ooc')}</th>
-            <th>${i18next.t('field.oos')}</th>
-          </tr>
-          ${dataItems.map(dataItem => {
-            const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem
-            const value = data[tag]
-            const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}
-
-            return html`
-              <tr ?ooc=${ooc} ?oos=${oos}>
-                <td name>${name}</td>
-                <td>${description}</td>
-                <td>${stat}</td>
-                <td>${unit}</td>
-                <td>${this.buildValue(type, value)}</td>
-                <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>
-                <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>
-              </tr>
+        ${nonGroupDataItems.length > 0
+          ? html`
+              <table>
+                <tr>
+                  <th item>${i18next.t('field.item')}</th>
+                  <th>${i18next.t('field.description')}</th>
+                  <th>${i18next.t('field.finalizing-function')}</th>
+                  <th>${i18next.t('field.unit')}</th>
+                  <th value>${i18next.t('field.value')}</th>
+                  <th>${i18next.t('field.spec')}</th>
+                  <th>${i18next.t('field.ooc')}</th>
+                  <th>${i18next.t('field.oos')}</th>
+                </tr>
+                ${nonGroupDataItems.map(dataItem => {
+                  const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem
+                  const value = data[tag]
+                  const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}
+
+                  return html`
+                    <tr ?ooc=${ooc} ?oos=${oos}>
+                      <td name>${name}</td>
+                      <td>${description}</td>
+                      <td>${stat}</td>
+                      <td>${unit}</td>
+                      <td>${this.buildValue(type, value)}</td>
+                      <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
+                      <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>
+                      <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>
+                    </tr>
+                  `
+                })}
+              </table>
             `
-          })}
-        </table>
+          : nothing}
+        ${Object.keys(dataItemSubgroups).map(subgroup => {
+          return html`
+            <ox-data-entry-subgroup-view
+              .subgroup=${subgroup}
+              .dataSet=${this.dataSet}
+              .data=${this.value}
+            ></ox-data-entry-subgroup-view>
+          `
+        })}
       </form>`
   }
 
+  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {
+    const groupedDataItems: { [group: string]: DataItem[] } = {}
+
+    for (const dataItem of dataItems) {
+      const { group, hidden } = dataItem
+
+      if (group && !hidden) {
+        if (!groupedDataItems[group]) {
+          groupedDataItems[group] = []
+        }
+
+        groupedDataItems[group].push(dataItem)
+      }
+    }
+
+    return groupedDataItems
+  }
+
   private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {
     return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)
   }
@@ -236,7 +213,7 @@ export class OxDataEntryView extends LitElement {
     if (type == 'file') {
       const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]
 
-      return files.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)
+      return files.filter(Boolean).map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)
     }
 
     if (type == 'signature') {

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

@@ -177,7 +177,7 @@ export class OxDataSampleSubgroupView extends LitElement {
     if (type == 'file') {
       const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]
 
-      return files.map(
+      return files.filter(Boolean).map(
         (file, idx) => html`
           <a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>
           ${files.length - 1 == idx ? html`</br>` : nothing}

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

@@ -241,9 +241,9 @@ export class OxDataSampleView extends LitElement {
     if (type == 'file') {
       const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]
 
-      return files.map(
-        file => html`<a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>`
-      )
+      return files
+        .filter(Boolean)
+        .map(file => html`<a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>`)
     }
 
     if (type == 'signature') {

package/src/ox-data-summary-view.ts

@@ -170,7 +170,7 @@ export class OxDataSummaryView extends LitElement {
     if (type == 'file') {
       const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]
 
-      return files.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)
+      return files.filter(Boolean).map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)
     }
 
     if (type == 'signature') {

package/src/usecase/ccp/ox-input-ccp-limits.ts

@@ -12,7 +12,8 @@ export enum DataItemType {
   text = 'text',
   boolean = 'boolean',
   select = 'select',
-  file = 'file'
+  file = 'file',
+  signature = 'signature'
 }
 
 export type CcpLimitValue = {

package/src/usecase/qc/ox-input-qc-limits.ts

@@ -12,7 +12,8 @@ export enum DataItemType {
   text = 'text',
   boolean = 'boolean',
   select = 'select',
-  file = 'file'
+  file = 'file',
+  signature = 'signature'
 }
 
 export type QcLimitValue = {

package/src/usecase/spc/ox-input-spc-limits.ts

@@ -12,7 +12,8 @@ export enum DataItemType {
   text = 'text',
   boolean = 'boolean',
   select = 'select',
-  file = 'file'
+  file = 'file',
+  signature = 'signature'
 }
 
 export type SpcLimitValue = {

package/stories/ox-grist-editor-data-item-spec.stories.ts

@@ -191,7 +191,7 @@ class GristDemo extends LitElement {
         name: 'type',
         header: i18next.t('field.type'),
         record: {
-          options: ['', 'number', 'text', 'select', 'boolean', 'file'],
+          options: ['', 'number', 'text', 'select', 'boolean', 'file', 'signature'],
           editable: true
         },
         width: 120

package/themes/form-theme.css

@@ -39,7 +39,6 @@ body {
   --file-uploader-label-color: #fff;
   --file-uploader-li-padding: 2px 5px 0px 5px;
   --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
-  --file-uploader-li-icon-margin: 2px 0 2px 5px;
   --file-uploader-li-icon-font: normal 15px var(--md-icon-font, 'Material Symbols Outlined');
   --file-uploader-li-icon-focus-color: var(--md-sys-color-primary);
 }