@operato/dataset 1.5.32 → 1.5.34

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.5.32",
+  "version": "1.5.34",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -93,13 +93,13 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/data-grist": "^1.5.32",
+    "@operato/data-grist": "^1.5.34",
     "@operato/graphql": "^1.4.76",
-    "@operato/grist-editor": "^1.5.32",
+    "@operato/grist-editor": "^1.5.34",
     "@operato/i18n": "^1.5.14",
-    "@operato/input": "^1.5.28",
+    "@operato/input": "^1.5.34",
     "@operato/popup": "^1.5.28",
-    "@operato/property-editor": "^1.5.32",
+    "@operato/property-editor": "^1.5.34",
     "@operato/shell": "^1.5.28",
     "@operato/styles": "^1.5.28",
     "@operato/utils": "^1.4.64",
@@ -137,5 +137,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "cc7c19babfdb76202f12efaff1f28317608789cf"
+  "gitHead": "d094996e18a31bc0d4610924002dbb2719aa2cb2"
 }

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

@@ -3,17 +3,24 @@ import '@operato/input/ox-input-file.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { DataSet } from './types.js'
+import { i18next } from '@operato/i18n'
+
+import { DataSet, DataSpecLimitSet } from './types.js'
+import { OxDataUseCase } from './usecase/ox-data-use-case.js'
 
 @customElement('ox-data-entry-view')
 export class OxDataEntryView extends LitElement {
   static styles = css`
     :host {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
+    }
+
+    form {
+      flex: 1;
 
-      --item-description-font: normal 0.8rem/1rem var(--theme-font);
-      --item-description-color: var(--page-description-color);
+      display: flex;
+      flex-direction: column;
     }
 
     h2 {
@@ -21,108 +28,77 @@ export class OxDataEntryView extends LitElement {
       font: var(--title-font);
       color: var(--title-text-color);
       text-transform: capitalize;
-      text-align: center;
     }
-    h3 {
+    [page-description] {
       margin: var(--page-description-margin);
+      opacity: 0.7;
       font: var(--page-description-font);
-      color: var(--page-description-color);
+      color: var(--secondary-color);
       text-transform: capitalize;
-      text-align: center;
     }
-
-    form {
-      flex: 1;
-
-      display: flex;
-      flex-direction: column;
+    [page-description] * {
+      vertical-align: middle;
+    }
+    [page-description] mwc-icon {
+      margin-top: -2px;
+      font-size: 0.9rem;
+      color: var(--page-description-color);
     }
 
-    label {
-      display: grid;
-
-      grid-template-rows: auto 1fr;
-      grid-template-columns: 1fr 5fr;
-      grid-template-areas: 'name description' 'empty inputs';
-
-      grid-gap: 9px;
-      align-items: center;
+    table {
+      border-collapse: collapse;
       margin-bottom: var(--margin-default);
     }
-
-    label:nth-child(odd) {
-      background-color: var(--main-section-background-color);
-      padding: var(--padding-default) 0;
+    th {
+      padding: var(--th-padding);
+      border-top: var(--th-border-top);
+      border-bottom: var(--td-border-bottom);
+      text-transform: var(--th-text-transform);
+      font: var(--th-font);
+      color: var(--th-color);
+      text-align: left;
     }
-
-    div[name] {
-      grid-area: name;
-      font: var(--label-font);
-      color: var(--label-color);
-      text-align: right;
+    th[item] {
+      min-width: 100px;
     }
-
-    div[description] {
-      grid-area: description;
-      opacity: 0.7;
-      font: var(--item-description-font);
-      color: var(--item-description-color);
-      text-align: left;
+    th[value] {
+      min-width: 100px;
     }
-
-    div[description] * {
-      vertical-align: middle;
+    tr {
+      background-color: var(--tr-background-color);
     }
-
-    div[description] mwc-icon {
-      margin-top: -3px;
-      font-size: 0.9rem;
+    tr:nth-child(odd) {
+      background-color: var(--tr-background-odd-color);
     }
-
-    div[elements] {
-      grid-area: inputs;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 10px;
-      padding-right: var(--padding-default);
+    tr:hover {
+      background-color: var(--tr-background-hover-color);
     }
-
-    div[elements] * {
-      flex: 1;
+    tr[ooc],
+    tr[oos] {
+      background-color: #fefbdf;
     }
-
-    div[elements] input,
-    div[elements] select {
-      border: var(--input-field-border);
-      border-radius: var(--input-field-border-radius);
-      padding: var(--input-field-padding);
-      font: var(--input-field-font);
+    td {
+      border-bottom: var(--td-border-bottom);
+      padding: var(--td-padding);
+      font: var(--td-font);
+      color: var(--td-color);
+    }
+    td[name] {
+      font-weight: bold;
+    }
+    td mwc-icon {
+      color: var(--status-danger-color);
     }
 
-    @media only screen and (max-width: 460px) {
-      label {
-        display: grid;
-
-        grid-template-rows: auto auto 1fr;
-        grid-template-columns: 1fr;
-        grid-template-areas: 'name' 'description' 'inputs';
-
-        grid-gap: 9px;
-        align-items: center;
-        margin-bottom: var(--margin-default);
-      }
-
-      div[name] {
-        text-align: left;
-      }
+    pre {
+      tab-size: 2;
     }
   `
 
   @property({ type: Object }) dataSet?: DataSet
   @property({ type: Object }) value?: { [tag: string]: any }
 
-  render() {
+  __render() {
     return html`<form>
       <h2>${this.dataSet?.name || ''}</h2>
       <h3>${this.dataSet?.description || ''}</h3>
@@ -183,4 +159,90 @@ export class OxDataEntryView extends LitElement {
       </label>`
     })
   }
+
+  render() {
+    const { name, description, useCase, dataItems = [] } = this.dataSet!
+
+    const data = this.value || {}
+    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
+
+    return html` <h2>${name}</h2>
+      <p page-description><mwc-icon>info_outline</mwc-icon> ${description}<br /></p>
+
+      <form>
+        <table>
+          <tr>
+            <th item>${i18next.t('field.item')}</th>
+            <th>${i18next.t('field.description')}</th>
+            <th>${i18next.t('field.stat-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`<mwc-icon>done</mwc-icon>` : ''}</td>
+                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
+              </tr>
+            `
+          })}
+        </table>
+      </form>`
+  }
+
+  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.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)
+    }
+
+    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 new Date(v).toLocaleDateString()
+          } else if (type == 'datetime') {
+            return new Date(v).toLocaleString()
+          }
+          return v ?? ''
+      }
+    })
+
+    return typeof values[0] === 'boolean' ? elements : elements.join(', ')
+  }
 }

package/src/ox-data-ooc-brief-view.ts

@@ -105,7 +105,6 @@ export class OxDataOocBriefView extends LitElement {
     }
   `
 
-  @property({ type: Object }) dataSet?: DataSet
   @property({ type: Object }) dataOoc?: DataOoc
 
   render() {

package/src/usecase/ox-data-use-case.ts

@@ -92,6 +92,51 @@ export abstract class OxDataUseCase {
     return { ooc, oos }
   }
 
+  public static evaluateTag(dataSet: DataSet, dataItems: DataItem[], data: any, tag: string): EvaluationResult {
+    var ooc = false
+    var oos = false
+
+    if (!dataSet.useCase) {
+      return { ooc, oos }
+    }
+
+    const useCaseNames = dataSet.useCase.split(',').map(useCaseName => useCaseName.trim())
+    const useCases = useCaseNames.map(useCaseName => OxDataUseCase.getUseCase(useCaseName)).filter(useCase => !!useCase)
+
+    const dataItem = dataItems.find(i => i.tag == tag && i.active)
+
+    if (!dataItem) {
+      return { ooc, oos } // TODO what if in case no value ?
+    }
+
+    let values: any | any[] = data[tag]
+    if (typeof values === 'undefined') {
+      return { ooc, oos } // TODO what if in case no value ?
+    }
+
+    if (!(values instanceof Array)) {
+      values = [values]
+    }
+
+    for (let j = 0; j < useCases.length; j++) {
+      const useCase = useCases[j]
+
+      const specs = dataItem.spec?.[dataSet.useCase]
+      if (!specs) {
+        continue
+      }
+
+      const result = useCase!.evaluate(specs, values)
+
+      if (result) {
+        ooc ||= result.ooc
+        oos ||= result.oos
+      }
+    }
+
+    return { ooc, oos }
+  }
+
   public static evaluateItem(spec: DataSpecLimitSet, values: any | any[]): EvaluationResult | undefined {
     var ooc = false
     var oos = false