@operato/dataset 8.0.0-alpha.8 → 8.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,202 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.56](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.55...v8.0.0-alpha.56) (2025-01-05)
+
+
+### :bug: Bug Fix
+
+* [dataset] muultiple tables, subgroups at first occurrence, structured and modular ([89179fc](https://github.com/hatiolab/operato/commit/89179fc43024d34fa6bff4b364ce56541cefe16b))
+
+
+
+## [8.0.0-alpha.54](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.53...v8.0.0-alpha.54) (2024-12-09)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.51...v8.0.0-alpha.52) (2024-12-03)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.50...v8.0.0-alpha.51) (2024-11-29)
+
+
+### :bug: Bug Fix
+
+* support radio type for dataset item spec ([8f6ba8f](https://github.com/hatiolab/operato/commit/8f6ba8f9929d6cfb94f2c8993a7d3dba37297954))
+
+
+
+## [8.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.49...v8.0.0-alpha.50) (2024-11-16)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.49](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.48...v8.0.0-alpha.49) (2024-11-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.47...v8.0.0-alpha.48) (2024-11-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.46](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.45...v8.0.0-alpha.46) (2024-10-23)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.45](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.44...v8.0.0-alpha.45) (2024-10-23)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.44](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.43...v8.0.0-alpha.44) (2024-10-23)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.41](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2024-10-21)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
+
+
+### :bug: Bug Fix
+
+* update dev-dependencies version ([d6fe342](https://github.com/hatiolab/operato/commit/d6fe342de738c6bad3528550a862b5a1d2573161))
+
+
+
+## [8.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.33...v8.0.0-alpha.34) (2024-10-15)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.32...v8.0.0-alpha.33) (2024-10-14)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.29...v8.0.0-alpha.30) (2024-10-11)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.28...v8.0.0-alpha.29) (2024-10-10)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.26...v8.0.0-alpha.27) (2024-10-06)
+
+
+### :bug: Bug Fix
+
+* calendar css variables ([9ea1918](https://github.com/hatiolab/operato/commit/9ea191844c72de5f920a8da85ad50209ba77cc07))
+
+
+
+## [8.0.0-alpha.26](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.25...v8.0.0-alpha.26) (2024-10-06)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.20...v8.0.0-alpha.21) (2024-10-05)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.19...v8.0.0-alpha.20) (2024-10-04)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.18...v8.0.0-alpha.19) (2024-10-04)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.9...v8.0.0-alpha.10) (2024-09-18)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [8.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.8...v8.0.0-alpha.9) (2024-09-15)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
 ## [8.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.7...v8.0.0-alpha.8) (2024-09-15)
 
 **Note:** Version bump only for package @operato/dataset

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

@@ -14,8 +14,9 @@ export declare class OxDataEntryForm extends LitElement {
     render(): TemplateResult<1>;
     private onChange;
     private buildInputs;
-    private buildInputs4Subgroup;
-    private buildInputs4NonGrouped;
+    private buildInputsForSubgroup;
+    private buildInputsForNonGrouped;
     private buildValue;
+    private extractValuesFromInputs;
     private groupDataItemsByGroup;
 }

package/dist/src/ox-data-entry-form.js

@@ -4,39 +4,50 @@ import '@operato/input/ox-input-signature.js';
 import './ox-data-entry-subgroup-form.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, queryAll } from 'lit/decorators.js';
+import { OxDataInputFactory } from './ox-data-input-factory';
 let OxDataEntryForm = class OxDataEntryForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.onChange = (e) => {
+            this.value = this.buildValue();
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        };
+    }
     render() {
         var _a, _b;
-        return html ` <form @change=${(e) => this.onChange(e)}>
-      <h2>${((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.name) || ''}</h2>
-      <h3>${((_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.description) || ''}</h3>
-      ${this.buildInputs()}
-    </form>`;
-    }
-    onChange(e) {
-        this.value = this.buildValue();
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: this.value
-        }));
+        return html `
+      <form @change=${this.onChange}>
+        <h2>${((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.name) || ''}</h2>
+        <h3>${((_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.description) || ''}</h3>
+        ${this.buildInputs()}
+      </form>
+    `;
     }
     buildInputs() {
         var _a;
         const dataItems = ((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.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) => {
-                var _a;
-                partial[key] = (_a = this.value) === null || _a === void 0 ? void 0 : _a[key];
-                return partial;
-            }, {});
-            return this.buildInputs4Subgroup(subgroup, dataItems, value);
+        const groupedItems = this.groupDataItemsByGroup(dataItems);
+        const renderedGroups = new Set();
+        return dataItems.flatMap(dataItem => {
+            if (dataItem.group) {
+                if (renderedGroups.has(dataItem.group))
+                    return [];
+                renderedGroups.add(dataItem.group);
+                return this.buildInputsForSubgroup(dataItem.group, groupedItems[dataItem.group]);
+            }
+            return this.buildInputsForNonGrouped([dataItem]);
         });
-        return [...this.buildInputs4NonGrouped(nonGroupDataItems), ...dataItemSubgroups];
     }
-    buildInputs4Subgroup(subgroup, dataItems, value) {
+    buildInputsForSubgroup(subgroup, dataItems) {
+        const subgroupValues = dataItems.reduce((values, item) => {
+            var _a;
+            values[item.tag] = (_a = this.value) === null || _a === void 0 ? void 0 : _a[item.tag];
+            return values;
+        }, {});
         return html `
       <div label>
         <div name>${subgroup}</div>
@@ -44,100 +55,52 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
           <ox-data-entry-subgroup-form
             .subgroup=${subgroup}
             .dataItems=${dataItems}
-            .value=${value}
-            @change=${(e) => this.onChange(e)}
+            .value=${subgroupValues}
+            @change=${this.onChange}
           ></ox-data-entry-subgroup-form>
         </div>
       </div>
     `;
     }
-    buildInputs4NonGrouped(dataItems) {
-        return (dataItems || []).map(dataItem => {
+    buildInputsForNonGrouped(dataItems) {
+        return dataItems.map(dataItem => {
+            var _a, _b;
             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}>
-              <option value=""></option>
-              ${(options.options || []).map(option => html `<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`)}
-            </select>`;
-                    case 'radio':
-                        return html `<div
-              @change=${(e) => {
-                            const div = e.currentTarget;
-                            const inputHidden = div.querySelector(`input[name="${tag}"]`);
-                            inputHidden.value = e.target.value;
-                        }}
-            >
-              <input type="hidden" name=${tag} />
-
-              ${(options.options || []).map(option => html `<label>
-                    <input
-                      type="radio"
-                      name=${'$' + tag + '-' + idx}
-                      .value=${option.value}
-                      ?checked=${option.value === v}
-                    />
-                    ${option.text}
-                  </label>`)}
-            </div>`;
-                    case 'boolean':
-                        return html ` <input type="checkbox" name=${tag} .checked=${v} />`;
-                    case 'number':
-                        return html ` <input type="number" name=${tag} value=${v} />`;
-                    case 'date':
-                        return html ` <input type="date" name=${tag} value=${v} />`;
-                    case 'datetime':
-                        return html ` <input type="datetime-local" name=${tag} value=${v} />`;
-                    case 'file':
-                        return html `<ox-input-file name=${tag} multiple .value=${v}></ox-input-file>`;
-                    case 'signature':
-                        return html `<ox-input-signature name=${tag} value=${v}></ox-input-signature>`;
-                    case 'string':
-                    default:
-                        return html ` <input type="text" name=${tag} value=${v} />`;
-                }
-            });
-            return html ` <div label>
-        <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description><md-icon>info</md-icon> ${description}</div>
-        <div elements>${elements}</div>
-      </div>`;
+            const value = ((_a = this.value) === null || _a === void 0 ? void 0 : _a[tag]) === undefined ? [] : (_b = this.value) === null || _b === void 0 ? void 0 : _b[tag];
+            return html `
+        <div label>
+          <div name>${name}${unit ? ` (${unit})` : ''}</div>
+          <div description><md-icon>info</md-icon> ${description}</div>
+          <div elements>
+            ${Array.from({ length: quota }, (_, idx) => OxDataInputFactory.createInputElement(type, tag, Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined, options, idx))}
+          </div>
+        </div>
+      `;
         });
     }
     buildValue() {
-        const dataItems = this.dataSet.dataItems;
-        const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group);
-        const nonGroupValue = (nonGroupDataItems || []).reduce((sum, dataItem) => {
+        const nonGroupValues = this.extractValuesFromInputs();
+        return Array.from(this.subgroups).reduce((values, subgroup) => ({ ...values, ...subgroup.buildValue() }), nonGroupValues);
+    }
+    extractValuesFromInputs() {
+        var _a;
+        return (((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems.filter(item => !item.group)) || []).reduce((values, dataItem) => {
             const { tag, type } = dataItem;
-            const editors = Array.prototype.slice.call(this.renderRoot.querySelectorAll(`[name=${tag}]`));
+            const editors = Array.from(this.renderRoot.querySelectorAll(`[name=${tag}]`));
             if (editors.length > 0) {
-                sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value));
+                values[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value));
             }
-            return sum;
+            return values;
         }, {});
-        return Array.from(this.subgroups).reduce((value, subgroup) => {
-            return {
-                ...value,
-                ...subgroup.buildValue()
-            };
-        }, nonGroupValue || {});
     }
     groupDataItemsByGroup(dataItems) {
-        const groupedDataItems = {};
-        for (const dataItem of dataItems) {
-            const { group } = dataItem;
-            if (group) {
-                if (!groupedDataItems[group]) {
-                    groupedDataItems[group] = [];
-                }
-                groupedDataItems[group].push(dataItem);
+        return dataItems.reduce((groups, item) => {
+            if (item.group) {
+                ;
+                (groups[item.group] = groups[item.group] || []).push(item);
             }
-        }
-        return groupedDataItems;
+            return groups;
+        }, {});
     }
 };
 OxDataEntryForm.styles = css `
@@ -170,19 +133,12 @@ OxDataEntryForm.styles = css `
 
     form > div[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;
       margin-bottom: var(--spacing-medium);
-
-      &:nth-child(odd) {
-        background-color: var(--md-sys-color-background);
-        padding: var(--padding-default) 0;
-      }
     }
 
     div[name] {
@@ -191,17 +147,13 @@ OxDataEntryForm.styles = css `
       color: var(--label-color, var(--md-sys-color-on-surface));
       text-align: right;
     }
+
     div[description] {
       grid-area: description;
       opacity: 0.7;
       font: var(--item-description-font);
       color: var(--item-description-color);
       text-align: left;
-
-      * {
-        vertical-align: middle;
-      }
-
       md-icon {
         font-size: 0.9rem;
       }
@@ -214,42 +166,15 @@ OxDataEntryForm.styles = css `
       flex-wrap: wrap;
       gap: 10px;
       padding-right: var(--padding-default);
-
       * {
         flex: 1;
       }
-
-      input,
-      select {
-        border: var(--input-field-border);
-        border-radius: var(--input-field-border-radius);
-        padding: var(--input-field-padding);
-        font: var(--input-field-font);
-      }
     }
 
     div[subgroup] {
       grid-column: 1 / 3;
       grid-row: 2;
     }
-
-    @media only screen and (max-width: 460px) {
-      form > div[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(--spacing-medium);
-      }
-
-      div[name] {
-        text-align: left;
-      }
-    }
   `;
 __decorate([
     property({ type: Object })

package/dist/src/ox-data-entry-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAM9D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAsH7C,MAAM;;QACJ,OAAO,IAAI,CAAA,kBAAkB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,KAAI,EAAE;YACxB,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW,KAAI,EAAE;QACnC,IAAI,CAAC,WAAW,EAAE;YACd,CAAA;IACV,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAEO,WAAW;;QACjB,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAI,EAAE,CAAA;QAC3E,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACvE,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,EAAE;YAC5G,MAAM,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;YACpD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;;gBACzC,OAAO,CAAC,GAAG,CAAC,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAG,GAAG,CAAC,CAAA;gBAChC,OAAO,OAAO,CAAA;YAChB,CAAC,EAAE,EAAS,CAAC,CAAA;YAEb,OAAO,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;QAC9D,CAAC,CAAC,CAAA;QAEF,OAAO,CAAC,GAAG,IAAI,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,CAAA;IAClF,CAAC;IAEO,oBAAoB,CAAC,QAAgB,EAAE,SAAqB,EAAE,KAA6B;QACjG,OAAO,IAAI,CAAA;;oBAEK,QAAQ;;;wBAGJ,QAAQ;yBACP,SAAS;qBACb,KAAK;sBACJ,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;KAI/C,CAAA;IACH,CAAC;IAEO,sBAAsB,CAAC,SAAqB;QAClD,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACtC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;YAEhF,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YACxC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE3C,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBACtC,MAAM,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;gBAE7E,QAAQ,IAAI,EAAE,CAAC;oBACb,KAAK,QAAQ;wBACX,OAAO,IAAI,CAAA,kBAAkB,GAAG;;gBAE5B,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,CAAC,KAAK,cAAc,MAAM,CAAC,KAAK,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,WAAW,CACtG;sBACO,CAAA;oBAEZ,KAAK,OAAO;wBACV,OAAO,IAAI,CAAA;wBACC,CAAC,CAAQ,EAAE,EAAE;4BACrB,MAAM,GAAG,GAAG,CAAC,CAAC,aAA4B,CAAA;4BAC1C,MAAM,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC,eAAe,GAAG,IAAI,CAAqB,CAAA;4BACjF,WAAW,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;wBAC1D,CAAC;;0CAE2B,GAAG;;gBAE7B,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;;6BAGO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;+BACnB,MAAM,CAAC,KAAK;iCACV,MAAM,CAAC,KAAK,KAAK,CAAC;;sBAE7B,MAAM,CAAC,IAAI;2BACN,CACZ;mBACI,CAAA;oBAET,KAAK,SAAS;wBACZ,OAAO,IAAI,CAAA,gCAAgC,GAAG,aAAa,CAAC,KAAK,CAAA;oBAEnE,KAAK,QAAQ;wBACX,OAAO,IAAI,CAAA,8BAA8B,GAAG,UAAU,CAAC,KAAK,CAAA;oBAE9D,KAAK,MAAM;wBACT,OAAO,IAAI,CAAA,4BAA4B,GAAG,UAAU,CAAC,KAAK,CAAA;oBAE5D,KAAK,UAAU;wBACb,OAAO,IAAI,CAAA,sCAAsC,GAAG,UAAU,CAAC,KAAK,CAAA;oBAEtE,KAAK,MAAM;wBACT,OAAO,IAAI,CAAA,uBAAuB,GAAG,oBAAoB,CAAC,mBAAmB,CAAA;oBAE/E,KAAK,WAAW;wBACd,OAAO,IAAI,CAAA,4BAA4B,GAAG,UAAU,CAAC,wBAAwB,CAAA;oBAE/E,KAAK,QAAQ,CAAC;oBACd;wBACE,OAAO,IAAI,CAAA,4BAA4B,GAAG,UAAU,CAAC,KAAK,CAAA;gBAC9D,CAAC;YACH,CAAC,CAAC,CAAA;YAEF,OAAO,IAAI,CAAA;oBACG,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;mDACC,WAAW;wBACtC,QAAQ;aACnB,CAAA;QACT,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,UAAU;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAQ,CAAC,SAAS,CAAA;QACzC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAEvE,MAAM,aAAa,GAAG,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,MAAM,CACpD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE;YAChB,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;YAE9B,MAAM,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CACxC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,GAAG,GAAG,CAAiC,CAC5D,CAAA;YAEvB,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvB,GAAG,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACxF,CAAC;YAED,OAAO,GAAG,CAAA;QACZ,CAAC,EACD,EAA4B,CAC7B,CAAA;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YAC3D,OAAO;gBACL,GAAG,KAAK;gBACR,GAAG,QAAQ,CAAC,UAAU,EAAE;aACzB,CAAA;QACH,CAAC,EAAE,aAAa,IAAI,EAAE,CAAC,CAAA;IACzB,CAAC;IAEO,qBAAqB,CAAC,SAAqB;QACjD,MAAM,gBAAgB,GAAoC,EAAE,CAAA;QAE5D,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;YACjC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;YAE1B,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC7B,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;gBAC9B,CAAC;gBAED,gBAAgB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YACxC,CAAC;QACH,CAAC;QAED,OAAO,gBAAgB,CAAA;IACzB,CAAC;;AAjSM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8GlB,AA9GY,CA8GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAEjB;IAAxC,QAAQ,CAAC,6BAA6B,CAAC;kDAAgD;AApH7E,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAmS3B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-signature.js'\nimport './ox-data-entry-subgroup-form.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { DataSet, DataItem, DataSample } from './types.js'\nimport { OxDataEntrySubgroupForm } from './ox-data-entry-subgroup-form.js'\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n  static styles = css`\n    :host {\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    h3 {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    form {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    form > div[label] {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--spacing-medium);\n\n      &:nth-child(odd) {\n        background-color: var(--md-sys-color-background);\n        padding: var(--padding-default) 0;\n      }\n    }\n\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color, var(--md-sys-color-on-surface));\n      text-align: right;\n    }\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n\n      * {\n        vertical-align: middle;\n      }\n\n      md-icon {\n        font-size: 0.9rem;\n      }\n    }\n\n    div[elements] {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n\n      * {\n        flex: 1;\n      }\n\n      input,\n      select {\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        padding: var(--input-field-padding);\n        font: var(--input-field-font);\n      }\n    }\n\n    div[subgroup] {\n      grid-column: 1 / 3;\n      grid-row: 2;\n    }\n\n    @media only screen and (max-width: 460px) {\n      form > div[label] {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--spacing-medium);\n      }\n\n      div[name] {\n        text-align: left;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  @queryAll('ox-data-entry-subgroup-form') subgroups!: NodeListOf<OxDataEntrySubgroupForm>\n\n  render() {\n    return html` <form @change=${(e: Event) => this.onChange(e)}>\n      <h2>${this.dataSet?.name || ''}</h2>\n      <h3>${this.dataSet?.description || ''}</h3>\n      ${this.buildInputs()}\n    </form>`\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []\n    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)\n    const dataItemSubgroups = Object.entries(this.groupDataItemsByGroup(dataItems)).map(([subgroup, dataItems]) => {\n      const tags = dataItems.map(dataItem => dataItem.tag)\n      const value = tags.reduce((partial, key) => {\n        partial[key] = this.value?.[key]\n        return partial\n      }, {} as any)\n\n      return this.buildInputs4Subgroup(subgroup, dataItems, value)\n    })\n\n    return [...this.buildInputs4NonGrouped(nonGroupDataItems), ...dataItemSubgroups]\n  }\n\n  private buildInputs4Subgroup(subgroup: string, dataItems: DataItem[], value: { [tag: string]: any }): TemplateResult {\n    return html`\n      <div label>\n        <div name>${subgroup}</div>\n        <div subgroup>\n          <ox-data-entry-subgroup-form\n            .subgroup=${subgroup}\n            .dataItems=${dataItems}\n            .value=${value}\n            @change=${(e: Event) => this.onChange(e)}\n          ></ox-data-entry-subgroup-form>\n        </div>\n      </div>\n    `\n  }\n\n  private buildInputs4NonGrouped(dataItems: DataItem[]): TemplateResult[] {\n    return (dataItems || []).map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n\n      const samples = new Array(quota).fill(0)\n      const value = this.value && this.value[tag]\n\n      const elements = samples.map((_, idx) => {\n        const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined\n\n        switch (type) {\n          case 'select':\n            return html` <select .name=${tag}>\n              <option value=\"\"></option>\n              ${(options.options || []).map(\n                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n              )}\n            </select>`\n\n          case 'radio':\n            return html`<div\n              @change=${(e: Event) => {\n                const div = e.currentTarget as HTMLElement\n                const inputHidden = div.querySelector(`input[name=\"${tag}\"]`) as HTMLInputElement\n                inputHidden.value = (e.target as HTMLInputElement).value\n              }}\n            >\n              <input type=\"hidden\" name=${tag} />\n\n              ${(options.options || []).map(\n                option =>\n                  html`<label>\n                    <input\n                      type=\"radio\"\n                      name=${'$' + tag + '-' + idx}\n                      .value=${option.value}\n                      ?checked=${option.value === v}\n                    />\n                    ${option.text}\n                  </label>`\n              )}\n            </div>`\n\n          case 'boolean':\n            return html` <input type=\"checkbox\" name=${tag} .checked=${v} />`\n\n          case 'number':\n            return html` <input type=\"number\" name=${tag} value=${v} />`\n\n          case 'date':\n            return html` <input type=\"date\" name=${tag} value=${v} />`\n\n          case 'datetime':\n            return html` <input type=\"datetime-local\" name=${tag} value=${v} />`\n\n          case 'file':\n            return html`<ox-input-file name=${tag} multiple .value=${v}></ox-input-file>`\n\n          case 'signature':\n            return html`<ox-input-signature name=${tag} value=${v}></ox-input-signature>`\n\n          case 'string':\n          default:\n            return html` <input type=\"text\" name=${tag} value=${v} />`\n        }\n      })\n\n      return html` <div label>\n        <div name>${name}${unit ? `(${unit})` : ''}</div>\n        <div description><md-icon>info</md-icon> ${description}</div>\n        <div elements>${elements}</div>\n      </div>`\n    })\n  }\n\n  private buildValue() {\n    const dataItems = this.dataSet!.dataItems\n    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)\n\n    const nonGroupValue = (nonGroupDataItems || []).reduce(\n      (sum, dataItem) => {\n        const { tag, type } = dataItem\n\n        const editors = Array.prototype.slice.call(\n          this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n        ) as HTMLInputElement[]\n\n        if (editors.length > 0) {\n          sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n        }\n\n        return sum\n      },\n      {} as { [tag: string]: any }\n    )\n\n    return Array.from(this.subgroups).reduce((value, subgroup) => {\n      return {\n        ...value,\n        ...subgroup.buildValue()\n      }\n    }, nonGroupValue || {})\n  }\n\n  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {\n    const groupedDataItems: { [group: string]: DataItem[] } = {}\n\n    for (const dataItem of dataItems) {\n      const { group } = dataItem\n\n      if (group) {\n        if (!groupedDataItems[group]) {\n          groupedDataItems[group] = []\n        }\n\n        groupedDataItems[group].push(dataItem)\n      }\n    }\n\n    return groupedDataItems\n  }\n}\n"]}
+{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-signature.js'\nimport './ox-data-entry-subgroup-form.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { DataSet, DataItem } from './types.js'\nimport { OxDataEntrySubgroupForm } from './ox-data-entry-subgroup-form.js'\nimport { OxDataInputFactory } from './ox-data-input-factory'\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n  static styles = css`\n    :host {\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    h3 {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    form {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    form > div[label] {\n      display: grid;\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--spacing-medium);\n    }\n\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color, var(--md-sys-color-on-surface));\n      text-align: right;\n    }\n\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n      md-icon {\n        font-size: 0.9rem;\n      }\n    }\n\n    div[elements] {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n      * {\n        flex: 1;\n      }\n    }\n\n    div[subgroup] {\n      grid-column: 1 / 3;\n      grid-row: 2;\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  @queryAll('ox-data-entry-subgroup-form') subgroups!: NodeListOf<OxDataEntrySubgroupForm>\n\n  render() {\n    return html`\n      <form @change=${this.onChange}>\n        <h2>${this.dataSet?.name || ''}</h2>\n        <h3>${this.dataSet?.description || ''}</h3>\n        ${this.buildInputs()}\n      </form>\n    `\n  }\n\n  private onChange = (e: Event) => {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  private buildInputs(): TemplateResult[] {\n    const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []\n    const groupedItems = this.groupDataItemsByGroup(dataItems)\n\n    const renderedGroups = new Set<string>()\n\n    return dataItems.flatMap(dataItem => {\n      if (dataItem.group) {\n        if (renderedGroups.has(dataItem.group)) return []\n\n        renderedGroups.add(dataItem.group)\n        return this.buildInputsForSubgroup(dataItem.group, groupedItems[dataItem.group])\n      }\n\n      return this.buildInputsForNonGrouped([dataItem])\n    })\n  }\n\n  private buildInputsForSubgroup(subgroup: string, dataItems: DataItem[]): TemplateResult {\n    const subgroupValues = dataItems.reduce(\n      (values, item) => {\n        values[item.tag] = this.value?.[item.tag]\n        return values\n      },\n      {} as { [tag: string]: any }\n    )\n\n    return html`\n      <div label>\n        <div name>${subgroup}</div>\n        <div subgroup>\n          <ox-data-entry-subgroup-form\n            .subgroup=${subgroup}\n            .dataItems=${dataItems}\n            .value=${subgroupValues}\n            @change=${this.onChange}\n          ></ox-data-entry-subgroup-form>\n        </div>\n      </div>\n    `\n  }\n\n  private buildInputsForNonGrouped(dataItems: DataItem[]): TemplateResult[] {\n    return dataItems.map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n      const value = this.value?.[tag] === undefined ? [] : this.value?.[tag]\n\n      return html`\n        <div label>\n          <div name>${name}${unit ? ` (${unit})` : ''}</div>\n          <div description><md-icon>info</md-icon> ${description}</div>\n          <div elements>\n            ${Array.from({ length: quota }, (_, idx) =>\n              OxDataInputFactory.createInputElement(\n                type,\n                tag,\n                Array.isArray(value) ? value[idx] : idx === 0 ? value : undefined,\n                options,\n                idx\n              )\n            )}\n          </div>\n        </div>\n      `\n    })\n  }\n\n  private buildValue(): { [tag: string]: any } {\n    const nonGroupValues = this.extractValuesFromInputs()\n    return Array.from(this.subgroups).reduce(\n      (values, subgroup) => ({ ...values, ...subgroup.buildValue() }),\n      nonGroupValues\n    )\n  }\n\n  private extractValuesFromInputs(): { [tag: string]: any } {\n    return (this.dataSet?.dataItems.filter(item => !item.group) || []).reduce(\n      (values, dataItem) => {\n        const { tag, type } = dataItem\n        const editors = Array.from(this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>)\n\n        if (editors.length > 0) {\n          values[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n        }\n\n        return values\n      },\n      {} as { [tag: string]: any }\n    )\n  }\n\n  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {\n    return dataItems.reduce(\n      (groups, item) => {\n        if (item.group) {\n          ;(groups[item.group] = groups[item.group] || []).push(item)\n        }\n        return groups\n      },\n      {} as { [group: string]: DataItem[] }\n    )\n  }\n}\n"]}

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

@@ -14,7 +14,16 @@ export declare class OxDataEntrySubgroupForm extends LitElement {
         list: {
             fields: string[];
         };
-        columns: any[];
+        columns: ({
+            type: string;
+            name: string;
+            header: string;
+            record: any;
+            width: number;
+        } | {
+            type: string;
+            gutterName: string;
+        })[];
         rows: {
             appendable: boolean;
         };
@@ -24,11 +33,24 @@ export declare class OxDataEntrySubgroupForm extends LitElement {
     };
     grist: DataGrist;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Builds the configuration for the Grist data grid.
+     * Uses OxDataInputFactory to determine column types.
+     */
     private buildGristConfiguration;
+    /**
+     * Fetches data for the Grist grid.
+     */
     fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
         total: number;
         records: any[];
     }>;
+    /**
+     * Builds the value structure for form submission.
+     */
     buildValue(): any;
+    /**
+     * Handles field change events.
+     */
     onFieldChange(e: CustomEvent): void;
 }