@operato/dataset 7.1.5 → 7.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/ox-data-entry-form.js +3 -7
  3. package/dist/src/ox-data-entry-form.js.map +1 -1
  4. package/dist/src/ox-data-entry-subgroup-form.d.ts +1 -0
  5. package/dist/src/ox-data-entry-subgroup-form.js +5 -0
  6. package/dist/src/ox-data-entry-subgroup-form.js.map +1 -1
  7. package/dist/src/ox-data-entry-subgroup-view.d.ts +3 -2
  8. package/dist/src/ox-data-entry-subgroup-view.js +13 -4
  9. package/dist/src/ox-data-entry-subgroup-view.js.map +1 -1
  10. package/dist/src/ox-data-entry-view.d.ts +4 -3
  11. package/dist/src/ox-data-entry-view.js +61 -79
  12. package/dist/src/ox-data-entry-view.js.map +1 -1
  13. package/dist/src/ox-data-sample-subgroup-view.js +1 -1
  14. package/dist/src/ox-data-sample-subgroup-view.js.map +1 -1
  15. package/dist/src/ox-data-sample-view.js +3 -1
  16. package/dist/src/ox-data-sample-view.js.map +1 -1
  17. package/dist/src/ox-data-summary-view.js +1 -1
  18. package/dist/src/ox-data-summary-view.js.map +1 -1
  19. package/dist/src/usecase/ccp/ox-input-ccp-limits.d.ts +2 -1
  20. package/dist/src/usecase/ccp/ox-input-ccp-limits.js +1 -0
  21. package/dist/src/usecase/ccp/ox-input-ccp-limits.js.map +1 -1
  22. package/dist/src/usecase/qc/ox-input-qc-limits.d.ts +2 -1
  23. package/dist/src/usecase/qc/ox-input-qc-limits.js +1 -0
  24. package/dist/src/usecase/qc/ox-input-qc-limits.js.map +1 -1
  25. package/dist/src/usecase/spc/ox-input-spc-limits.d.ts +2 -1
  26. package/dist/src/usecase/spc/ox-input-spc-limits.js +1 -0
  27. package/dist/src/usecase/spc/ox-input-spc-limits.js.map +1 -1
  28. package/dist/stories/ox-grist-editor-data-item-spec.stories.js +1 -1
  29. package/dist/stories/ox-grist-editor-data-item-spec.stories.js.map +1 -1
  30. package/dist/tsconfig.tsbuildinfo +1 -1
  31. package/package.json +9 -9
  32. package/src/ox-data-entry-form.ts +3 -7
  33. package/src/ox-data-entry-subgroup-form.ts +6 -0
  34. package/src/ox-data-entry-subgroup-view.ts +221 -0
  35. package/src/ox-data-entry-view.ts +70 -93
  36. package/src/ox-data-sample-subgroup-view.ts +1 -1
  37. package/src/ox-data-sample-view.ts +3 -3
  38. package/src/ox-data-summary-view.ts +1 -1
  39. package/src/usecase/ccp/ox-input-ccp-limits.ts +2 -1
  40. package/src/usecase/qc/ox-input-qc-limits.ts +2 -1
  41. package/src/usecase/spc/ox-input-spc-limits.ts +2 -1
  42. package/stories/ox-grist-editor-data-item-spec.stories.ts +1 -1
  43. package/themes/form-theme.css +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [7.1.6](https://github.com/hatiolab/operato/compare/v7.1.5...v7.1.6) (2024-09-07)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * dataset components & styles ([d6836bd](https://github.com/hatiolab/operato/commit/d6836bd1c400962453dec31ab6e6055e4110900b))
12
+
13
+
14
+
6
15
  ### [7.1.5](https://github.com/hatiolab/operato/compare/v7.1.4...v7.1.5) (2024-09-06)
7
16
 
8
17
 
package/dist/src/ox-data-entry-form.js CHANGED
@@ -45,6 +45,7 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
45
45
  .subgroup=${subgroup}
46
46
  .dataItems=${dataItems}
47
47
  .value=${value}
48
+ @change=${(e) => this.onChange(e)}
48
49
  ></ox-data-entry-subgroup-form>
49
50
  </div>
50
51
  </div>
@@ -92,14 +93,9 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
92
93
  case 'datetime':
93
94
  return html ` <input type="datetime-local" name=${tag} value=${v} />`;
94
95
  case 'file':
95
- return html `<ox-input-file name=${tag} multiple></ox-input-file>`;
96
+ return html `<ox-input-file name=${tag} multiple .value=${v}></ox-input-file>`;
96
97
  case 'signature':
97
- return html `<ox-input-signature
98
- name=${tag}
99
- label="Attach Files"
100
- accept="*/*"
101
- multiple="true"
102
- ></ox-input-signature>`;
98
+ return html `<ox-input-signature name=${tag} value=${v}></ox-input-signature>`;
103
99
  case 'string':
104
100
  default:
105
101
  return html ` <input type="text" name=${tag} value=${v} />`;
package/dist/src/ox-data-entry-form.js.map CHANGED
@@ -1 +1 @@
1
- {"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, 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 ></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></ox-input-file>`\n\n case 'signature':\n return html`<ox-input-signature\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n ></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"]}
1
+ {"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, 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"]}
package/dist/src/ox-data-entry-subgroup-form.d.ts CHANGED
@@ -30,4 +30,5 @@ export declare class OxDataEntrySubgroupForm extends LitElement {
30
30
  records: any[];
31
31
  }>;
32
32
  buildValue(): any;
33
+ onFieldChange(e: CustomEvent): void;
33
34
  }
package/dist/src/ox-data-entry-subgroup-form.js CHANGED
@@ -16,6 +16,7 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
16
16
  .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
17
17
  .config=${this.buildGristConfiguration()}
18
18
  .fetchHandler=${this.fetchHandler.bind(this)}
19
+ @field-change=${this.onFieldChange.bind(this)}
19
20
  >
20
21
  </ox-grist>
21
22
  `;
@@ -61,6 +62,7 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
61
62
  case 'datetime':
62
63
  return columnConfig;
63
64
  case 'file':
65
+ columnConfig.record.multiple = true;
64
66
  return columnConfig;
65
67
  case 'signature':
66
68
  return columnConfig;
@@ -109,6 +111,9 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
109
111
  return partial;
110
112
  }, {});
111
113
  }
114
+ onFieldChange(e) {
115
+ this.dispatchEvent(new CustomEvent('change', { detail: this.grist.dirtyData }));
116
+ }
112
117
  };
113
118
  OxDataEntrySubgroupForm.styles = [
114
119
  ScrollbarStyles,
package/dist/src/ox-data-entry-subgroup-form.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-entry-subgroup-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-subgroup-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@operato/data-grist/ox-grist.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { DataItem } from './types.js'\nimport { DataGrist, FetchOption } from '@operato/data-grist'\n\n@customElement('ox-data-entry-subgroup-form')\nexport class OxDataEntrySubgroupForm extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-height: 100px;\n }\n `\n ]\n\n @property({ type: String }) subgroup?: string\n @property({ type: Array }) dataItems?: DataItem[]\n @property({ type: Object }) value?: { [tag: string]: any }\n\n @state() gristConfig = this.buildGristConfiguration()\n @query('ox-grist') grist!: DataGrist\n\n render() {\n return html`\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.buildGristConfiguration()}\n .fetchHandler=${this.fetchHandler.bind(this)}\n >\n </ox-grist>\n `\n }\n\n private buildGristConfiguration() {\n const columns = (this.dataItems || []).map(dataItem => {\n const { name, description, tag, type, options = {}, unit } = dataItem\n const columnConfig = {\n type,\n name: tag,\n header: `${name}${unit ? ` (${unit})` : ''}`,\n record: {\n editable: true\n },\n width: 200\n } as any\n\n switch (type) {\n case 'select':\n case 'radio': // 그리드안에 radio가 들어갈수 없어서 select로 변환\n columnConfig.type = 'select'\n columnConfig.record.options = [\n '',\n ...(options.options || []).map((option: any) => {\n if (typeof option == 'string') {\n return option\n }\n const { display, text, value } = option || {}\n\n return {\n display: display || text,\n value\n }\n })\n ]\n return columnConfig\n\n case 'boolean':\n columnConfig.record.align = 'center'\n return columnConfig\n\n case 'number':\n columnConfig.record.align = 'right'\n return columnConfig\n\n case 'date':\n return columnConfig\n\n case 'datetime':\n return columnConfig\n\n case 'file':\n return columnConfig\n\n case 'signature':\n return columnConfig\n\n case 'string':\n return columnConfig\n\n default:\n return columnConfig\n }\n })\n\n return {\n list: { fields: ['name', 'data'] },\n columns: [{ type: 'gutter', gutterName: 'sequence' }, ...columns],\n rows: {\n appendable: true\n },\n pagination: { infinite: true }\n }\n }\n\n async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n const length = Object.entries(this.value || {}).reduce((max, [tag, value]) => {\n return Math.max(max, Array.isArray(value) ? value.length : 1)\n }, 0)\n\n const tags = (this.dataItems || []).map(dataItem => dataItem.tag)\n\n const records = Array.from({ length }, (_, index) => index).map(index => {\n return tags.reduce((partial, tag) => {\n const v = this.value?.[tag]\n partial[tag] = Array.isArray(v) ? v[index] : index == 0 ? v : undefined\n return partial\n }, {} as any)\n })\n\n return {\n total: records.length || 0,\n records: records\n }\n }\n\n public buildValue() {\n const records = this.grist._data.records || []\n const tags = (this.dataItems || []).map(dataItem => dataItem.tag)\n this.grist.commit()\n\n return tags.reduce((partial, tag) => {\n partial[tag] = Array.from({ length: records.length }, (_, index) => index).map(index => {\n const record = records[index]\n return record?.[tag]\n })\n return partial\n }, {} as any)\n }\n}\n"]}
1
+ {"version":3,"file":"ox-data-entry-subgroup-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-subgroup-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@operato/data-grist/ox-grist.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { DataItem } from './types.js'\nimport { DataGrist, FetchOption } from '@operato/data-grist'\n\n@customElement('ox-data-entry-subgroup-form')\nexport class OxDataEntrySubgroupForm extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-height: 100px;\n }\n `\n ]\n\n @property({ type: String }) subgroup?: string\n @property({ type: Array }) dataItems?: DataItem[]\n @property({ type: Object }) value?: { [tag: string]: any }\n\n @state() gristConfig = this.buildGristConfiguration()\n @query('ox-grist') grist!: DataGrist\n\n render() {\n return html`\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.buildGristConfiguration()}\n .fetchHandler=${this.fetchHandler.bind(this)}\n @field-change=${this.onFieldChange.bind(this)}\n >\n </ox-grist>\n `\n }\n\n private buildGristConfiguration() {\n const columns = (this.dataItems || []).map(dataItem => {\n const { name, description, tag, type, options = {}, unit } = dataItem\n const columnConfig = {\n type,\n name: tag,\n header: `${name}${unit ? ` (${unit})` : ''}`,\n record: {\n editable: true\n },\n width: 200\n } as any\n\n switch (type) {\n case 'select':\n case 'radio': // 그리드안에 radio가 들어갈수 없어서 select로 변환\n columnConfig.type = 'select'\n columnConfig.record.options = [\n '',\n ...(options.options || []).map((option: any) => {\n if (typeof option == 'string') {\n return option\n }\n const { display, text, value } = option || {}\n\n return {\n display: display || text,\n value\n }\n })\n ]\n return columnConfig\n\n case 'boolean':\n columnConfig.record.align = 'center'\n return columnConfig\n\n case 'number':\n columnConfig.record.align = 'right'\n return columnConfig\n\n case 'date':\n return columnConfig\n\n case 'datetime':\n return columnConfig\n\n case 'file':\n columnConfig.record.multiple = true\n return columnConfig\n\n case 'signature':\n return columnConfig\n\n case 'string':\n return columnConfig\n\n default:\n return columnConfig\n }\n })\n\n return {\n list: { fields: ['name', 'data'] },\n columns: [{ type: 'gutter', gutterName: 'sequence' }, ...columns],\n rows: {\n appendable: true\n },\n pagination: { infinite: true }\n }\n }\n\n async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n const length = Object.entries(this.value || {}).reduce((max, [tag, value]) => {\n return Math.max(max, Array.isArray(value) ? value.length : 1)\n }, 0)\n\n const tags = (this.dataItems || []).map(dataItem => dataItem.tag)\n\n const records = Array.from({ length }, (_, index) => index).map(index => {\n return tags.reduce((partial, tag) => {\n const v = this.value?.[tag]\n partial[tag] = Array.isArray(v) ? v[index] : index == 0 ? v : undefined\n return partial\n }, {} as any)\n })\n\n return {\n total: records.length || 0,\n records: records\n }\n }\n\n public buildValue() {\n const records = this.grist._data.records || []\n const tags = (this.dataItems || []).map(dataItem => dataItem.tag)\n this.grist.commit()\n\n return tags.reduce((partial, tag) => {\n partial[tag] = Array.from({ length: records.length }, (_, index) => index).map(index => {\n const record = records[index]\n return record?.[tag]\n })\n return partial\n }, {} as any)\n }\n\n onFieldChange(e: CustomEvent) {\n this.dispatchEvent(new CustomEvent('change', { detail: this.grist.dirtyData }))\n }\n}\n"]}
package/dist/src/ox-data-entry-subgroup-view.d.ts CHANGED
@@ -2,10 +2,11 @@ import '@material/web/icon/icon.js';
2
2
  import '@operato/input/ox-input-file.js';
3
3
  import '@operato/input/ox-input-signature.js';
4
4
  import { LitElement } from 'lit';
5
- import { DataSample } from './types.js';
5
+ import { DataSet } from './types.js';
6
6
  export declare class OxDataEntrySubgroupView extends LitElement {
7
7
  static styles: import("lit").CSSResult;
8
- dataSample?: DataSample;
8
+ dataSet?: DataSet;
9
+ data?: any;
9
10
  subgroup?: string;
10
11
  render(): import("lit-html").TemplateResult<1>;
11
12
  private buildSpec;
package/dist/src/ox-data-entry-subgroup-view.js CHANGED
@@ -8,16 +8,22 @@ import { i18next } from '@operato/i18n';
8
8
  import { OxDataUseCase } from './usecase/ox-data-use-case.js';
9
9
  let OxDataEntrySubgroupView = class OxDataEntrySubgroupView extends LitElement {
10
10
  render() {
11
- if (!this.dataSample) {
11
+ if (!this.data || !this.dataSet) {
12
12
  return html ``;
13
13
  }
14
- const { useCase, data = {}, judgment, dataItems = [] } = this.dataSample;
14
+ const { useCase, dataItems = [] } = this.dataSet;
15
+ const { data } = this;
15
16
  const useCaseNames = (useCase === null || useCase === void 0 ? void 0 : useCase.split(',').filter(useCase => useCase.trim())) || [];
16
17
  const subgroupDataItems = dataItems.filter(dataItem => dataItem.group == this.subgroup && !dataItem.hidden);
17
18
  const records = subgroupDataItems.reduce((max, dataItem) => {
18
19
  const value = data[dataItem.tag];
19
20
  return Math.max(max, Array.isArray(value) ? value.length : 1);
20
21
  }, 0);
22
+ const judgment = subgroupDataItems.reduce((judgment, dataItem) => {
23
+ const tag = dataItem.tag;
24
+ judgment[tag] = OxDataUseCase.evaluateTag(this.dataSet, dataItems, data, tag) || {};
25
+ return judgment;
26
+ }, {});
21
27
  return html ` <h3>${this.subgroup}</h3>
22
28
  <table>
23
29
  <tr>
@@ -70,7 +76,7 @@ let OxDataEntrySubgroupView = class OxDataEntrySubgroupView extends LitElement {
70
76
  const values = value instanceof Array ? value : [value];
71
77
  if (type == 'file') {
72
78
  const files = values.flat();
73
- return files.map((file, idx) => html `
79
+ return files.filter(Boolean).map((file, idx) => html `
74
80
  <a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>
75
81
  ${files.length - 1 == idx ? html `</br>` : nothing}
76
82
  `);
@@ -178,7 +184,10 @@ OxDataEntrySubgroupView.styles = css `
178
184
  `;
179
185
  __decorate([
180
186
  property({ type: Object })
181
- ], OxDataEntrySubgroupView.prototype, "dataSample", void 0);
187
+ ], OxDataEntrySubgroupView.prototype, "dataSet", void 0);
188
+ __decorate([
189
+ property({ type: Object })
190
+ ], OxDataEntrySubgroupView.prototype, "data", void 0);
182
191
  __decorate([
183
192
  property({ type: String })
184
193
  ], OxDataEntrySubgroupView.prototype, "subgroup", void 0);
package/dist/src/ox-data-entry-subgroup-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-entry-subgroup-view.js","sourceRoot":"","sources":["../../src/ox-data-entry-subgroup-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-signature.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-entry-subgroup-view')\nexport class OxDataEntrySubgroupView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n }\n\n h3 {\n margin: var(--title-margin);\n font: var(--title-font);\n font-size: 20px;\n color: var(--title-text-color);\n text-transform: capitalize;\n }\n\n table {\n border-collapse: collapse;\n margin-bottom: var(--spacing-medium);\n }\n\n th {\n padding: var(--th-padding);\n border-top: var(--th-border-top);\n border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n border-bottom: var(--td-border-bottom);\n text-transform: var(--th-text-transform);\n font: var(--th-font);\n font-weight: bold;\n color: var(--th-color);\n text-align: center;\n white-space: nowrap;\n }\n\n th.label,\n td.label {\n background-color: var(--label-cell-background-color, #f6f6f6);\n width: 120px;\n text-transform: var(--th-text-transform);\n }\n\n tr {\n background-color: var(--tr-background-color);\n }\n\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n\n td {\n border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n border-bottom: var(--td-border-bottom);\n padding: var(--td-padding);\n font: var(--td-font);\n color: var(--td-color);\n text-align: center;\n }\n tr th:first-child,\n tr td:first-child {\n border-left: none;\n }\n\n td md-icon {\n color: var(--md-sys-color-error);\n }\n\n pre {\n tab-size: 2;\n text-align: left;\n }\n\n a[file] {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\n\n a[file] md-icon {\n --md-icon-size: 16px;\n color: var(--md-sys-color-primary);\n }\n `\n\n @property({ type: Object }) dataSample?: DataSample\n @property({ type: String }) subgroup?: string\n\n render() {\n if (!this.dataSample) {\n return html``\n }\n\n const { useCase, data = {}, judgment, dataItems = [] } = this.dataSample\n const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n const subgroupDataItems = dataItems.filter(dataItem => dataItem.group == this.subgroup && !dataItem.hidden)\n const records = subgroupDataItems.reduce((max, dataItem) => {\n const value = data[dataItem.tag]\n return Math.max(max, Array.isArray(value) ? value.length : 1)\n }, 0)\n\n return html` <h3>${this.subgroup}</h3>\n <table>\n <tr>\n <th class=\"label\">${i18next.t('field.name')}</th>\n ${subgroupDataItems.map(\n dataItem => html` <th>${dataItem.name} ${dataItem.unit ? `(${dataItem.unit})` : ''}</th> `\n )}\n </tr>\n <tr>\n <td class=\"label\">${i18next.t('field.description')}</td>\n ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}\n </tr>\n ${Array.from({ length: records }, (_, index) => index).map(\n index => html`\n <tr>\n <td class=\"label\">${records > 1 ? index + 1 : i18next.t('field.value')}</td>\n ${subgroupDataItems.map(dataItem => {\n const { tag = '', type } = dataItem\n const valueArray = data[tag]\n const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined\n\n return html` <td>${this.buildValue(type, value)}</td> `\n })}\n </tr>\n `\n )}\n <tr>\n <td class=\"label\">${i18next.t('field.spec')}</td>\n ${subgroupDataItems.map(\n dataItem => html` <td><pre>${this.buildSpec(useCaseNames, dataItem.spec)}</pre></td> `\n )}\n </tr>\n <tr>\n <td class=\"label\">${i18next.t('field.ooc')}</td>\n ${subgroupDataItems.map(\n dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<md-icon>done</md-icon>` : nothing}</td> `\n )}\n </tr>\n <tr>\n <td class=\"label\">${i18next.t('field.oos')}</td>\n ${subgroupDataItems.map(\n dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<md-icon>done</md-icon>` : nothing}</td> `\n )}\n </tr>\n </table>`\n }\n\n private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n }\n\n private download(file: { mimetype: string; name: string; fullpath: string }) {\n const element = document.createElement('a')\n element.setAttribute('href', file.fullpath)\n element.setAttribute('download', file.name!)\n document.body.appendChild(element)\n element.click()\n }\n\n private buildValue(type: string, value: any | any[]) {\n if (value === undefined) {\n return ''\n }\n const values = value instanceof Array ? value : [value]\n\n if (type == 'file') {\n const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n return files.map(\n (file, idx) => html`\n <a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>\n ${files.length - 1 == idx ? html`</br>` : nothing}\n `\n )\n }\n\n if (type == 'signature') {\n return html` <ox-input-signature .value=${value} disabled></ox-input-signature>`\n }\n\n const elements = values.map((v: any, idx) => {\n switch (typeof v) {\n case 'boolean':\n return html` <input type=\"checkbox\" .checked=${v} disabled />`\n break\n\n default:\n if (type == 'date') {\n return v ? new Date(v).toLocaleDateString() : ''\n } else if (type == 'datetime') {\n return v ? new Date(v).toLocaleString() : ''\n }\n return v ?? ''\n }\n })\n\n return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n }\n}\n"]}
1
+ {"version":3,"file":"ox-data-entry-subgroup-view.js","sourceRoot":"","sources":["../../src/ox-data-entry-subgroup-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-signature.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataSample, DataSet, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-entry-subgroup-view')\nexport class OxDataEntrySubgroupView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n }\n\n h3 {\n margin: var(--title-margin);\n font: var(--title-font);\n font-size: 20px;\n color: var(--title-text-color);\n text-transform: capitalize;\n }\n\n table {\n border-collapse: collapse;\n margin-bottom: var(--spacing-medium);\n }\n\n th {\n padding: var(--th-padding);\n border-top: var(--th-border-top);\n border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n border-bottom: var(--td-border-bottom);\n text-transform: var(--th-text-transform);\n font: var(--th-font);\n font-weight: bold;\n color: var(--th-color);\n text-align: center;\n white-space: nowrap;\n }\n\n th.label,\n td.label {\n background-color: var(--label-cell-background-color, #f6f6f6);\n width: 120px;\n text-transform: var(--th-text-transform);\n }\n\n tr {\n background-color: var(--tr-background-color);\n }\n\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n\n td {\n border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));\n border-bottom: var(--td-border-bottom);\n padding: var(--td-padding);\n font: var(--td-font);\n color: var(--td-color);\n text-align: center;\n }\n tr th:first-child,\n tr td:first-child {\n border-left: none;\n }\n\n td md-icon {\n color: var(--md-sys-color-error);\n }\n\n pre {\n tab-size: 2;\n text-align: left;\n }\n\n a[file] {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\n\n a[file] md-icon {\n --md-icon-size: 16px;\n color: var(--md-sys-color-primary);\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) data?: any\n @property({ type: String }) subgroup?: string\n\n render() {\n if (!this.data || !this.dataSet) {\n return html``\n }\n\n const { useCase, dataItems = [] } = this.dataSet\n\n const { data } = this\n const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n const subgroupDataItems = dataItems.filter(dataItem => dataItem.group == this.subgroup && !dataItem.hidden)\n const records = subgroupDataItems.reduce((max, dataItem) => {\n const value = data[dataItem.tag]\n return Math.max(max, Array.isArray(value) ? value.length : 1)\n }, 0)\n const judgment = subgroupDataItems.reduce(\n (judgment, dataItem) => {\n const tag = dataItem.tag\n judgment[tag] = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}\n return judgment\n },\n {} as { [tag: string]: { ooc: boolean; oos: boolean } }\n )\n\n return html` <h3>${this.subgroup}</h3>\n <table>\n <tr>\n <th class=\"label\">${i18next.t('field.name')}</th>\n ${subgroupDataItems.map(\n dataItem => html` <th>${dataItem.name} ${dataItem.unit ? `(${dataItem.unit})` : ''}</th> `\n )}\n </tr>\n <tr>\n <td class=\"label\">${i18next.t('field.description')}</td>\n ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}\n </tr>\n ${Array.from({ length: records }, (_, index) => index).map(\n index => html`\n <tr>\n <td class=\"label\">${records > 1 ? index + 1 : i18next.t('field.value')}</td>\n ${subgroupDataItems.map(dataItem => {\n const { tag = '', type } = dataItem\n const valueArray = data[tag]\n const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined\n\n return html` <td>${this.buildValue(type, value)}</td> `\n })}\n </tr>\n `\n )}\n <tr>\n <td class=\"label\">${i18next.t('field.spec')}</td>\n ${subgroupDataItems.map(\n dataItem => html` <td><pre>${this.buildSpec(useCaseNames, dataItem.spec)}</pre></td> `\n )}\n </tr>\n <tr>\n <td class=\"label\">${i18next.t('field.ooc')}</td>\n ${subgroupDataItems.map(\n dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<md-icon>done</md-icon>` : nothing}</td> `\n )}\n </tr>\n <tr>\n <td class=\"label\">${i18next.t('field.oos')}</td>\n ${subgroupDataItems.map(\n dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<md-icon>done</md-icon>` : nothing}</td> `\n )}\n </tr>\n </table>`\n }\n\n private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n }\n\n private download(file: { mimetype: string; name: string; fullpath: string }) {\n const element = document.createElement('a')\n element.setAttribute('href', file.fullpath)\n element.setAttribute('download', file.name!)\n document.body.appendChild(element)\n element.click()\n }\n\n private buildValue(type: string, value: any | any[]) {\n if (value === undefined) {\n return ''\n }\n const values = value instanceof Array ? value : [value]\n\n if (type == 'file') {\n const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n return files.filter(Boolean).map(\n (file, idx) => html`\n <a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>\n ${files.length - 1 == idx ? html`</br>` : nothing}\n `\n )\n }\n\n if (type == 'signature') {\n return html` <ox-input-signature .value=${value} disabled></ox-input-signature>`\n }\n\n const elements = values.map((v: any, idx) => {\n switch (typeof v) {\n case 'boolean':\n return html` <input type=\"checkbox\" .checked=${v} disabled />`\n break\n\n default:\n if (type == 'date') {\n return v ? new Date(v).toLocaleDateString() : ''\n } else if (type == 'datetime') {\n return v ? new Date(v).toLocaleString() : ''\n }\n return v ?? ''\n }\n })\n\n return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n }\n}\n"]}
package/dist/src/ox-data-entry-view.d.ts CHANGED
@@ -1,5 +1,7 @@
1
+ import '@material/web/icon/icon.js';
1
2
  import '@operato/input/ox-input-file.js';
2
3
  import '@operato/input/ox-input-signature.js';
4
+ import './ox-data-entry-subgroup-view.js';
3
5
  import { LitElement, nothing } from 'lit';
4
6
  import { DataSet } from './types.js';
5
7
  export declare class OxDataEntryView extends LitElement {
@@ -8,9 +10,8 @@ export declare class OxDataEntryView extends LitElement {
8
10
  value?: {
9
11
  [tag: string]: any;
10
12
  };
11
- __render(): import("lit-html").TemplateResult<1>;
12
- private buildEntryViews;
13
- render(): import("lit-html").TemplateResult<1> | typeof nothing;
13
+ render(): typeof nothing | import("lit-html").TemplateResult<1>;
14
+ private groupDataItemsByGroup;
14
15
  private buildSpec;
15
16
  private download;
16
17
  private buildValue;
package/dist/src/ox-data-entry-view.js CHANGED
@@ -1,62 +1,13 @@
1
1
  import { __decorate } from "tslib";
2
+ import '@material/web/icon/icon.js';
2
3
  import '@operato/input/ox-input-file.js';
3
4
  import '@operato/input/ox-input-signature.js';
5
+ import './ox-data-entry-subgroup-view.js';
4
6
  import { css, html, LitElement, nothing } from 'lit';
5
7
  import { customElement, property } from 'lit/decorators.js';
6
8
  import { i18next } from '@operato/i18n';
7
9
  import { OxDataUseCase } from './usecase/ox-data-use-case.js';
8
10
  let OxDataEntryView = class OxDataEntryView extends LitElement {
9
- __render() {
10
- var _a, _b;
11
- return html `<form>
12
- <h2>${((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.name) || ''}</h2>
13
- <h3>${((_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.description) || ''}</h3>
14
- ${this.buildEntryViews()}
15
- </form> `;
16
- }
17
- buildEntryViews() {
18
- var _a;
19
- const dataItems = (_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems.filter(item => item.active);
20
- return (dataItems || []).map(dataItem => {
21
- const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem;
22
- const samples = new Array(quota).fill(0);
23
- const value = this.value && this.value[tag];
24
- const elements = samples.map((_, idx) => {
25
- const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined;
26
- switch (type) {
27
- case 'select':
28
- return html ` <select .name=${tag} disabled>
29
- <option value=""></option>
30
- ${(options.options || []).map(option => html `<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`)}
31
- </select>`;
32
- break;
33
- case 'boolean':
34
- return html ` <input type="checkbox" name=${tag} .checked=${v} disabled />`;
35
- break;
36
- case 'number':
37
- return html ` <input type="number" name=${tag} value=${v} disabled />`;
38
- break;
39
- case 'file':
40
- return html `<ox-input-file
41
- name=${tag}
42
- label="Attach Files"
43
- accept="*/*"
44
- multiple="true"
45
- hide-filelist
46
- disabled
47
- ></ox-input-file>`;
48
- case 'string':
49
- default:
50
- return html ` <input type="text" name=${tag} value=${v} disabled />`;
51
- }
52
- });
53
- return html ` <label .title=${description}>
54
- <div name>${name}${unit ? `(${unit})` : ''}</div>
55
- <div description><md-icon>info</md-icon> ${description}</div>
56
- <div elements>${elements}</div>
57
- </label>`;
58
- });
59
- }
60
11
  render() {
61
12
  if (!this.dataSet) {
62
13
  return nothing;
@@ -64,41 +15,69 @@ let OxDataEntryView = class OxDataEntryView extends LitElement {
64
15
  const { name, description, useCase, dataItems = [] } = this.dataSet;
65
16
  const data = this.value || {};
66
17
  const useCaseNames = (useCase === null || useCase === void 0 ? void 0 : useCase.split(',').filter(useCase => useCase.trim())) || [];
18
+ const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group && !dataItem.hidden);
19
+ const dataItemSubgroups = this.groupDataItemsByGroup(dataItems);
67
20
  return html ` <h2>${name}</h2>
68
21
  <p page-description><md-icon>info</md-icon> ${description}<br /></p>
69
22
 
70
23
  <form>
71
- <table>
72
- <tr>
73
- <th item>${i18next.t('field.item')}</th>
74
- <th>${i18next.t('field.description')}</th>
75
- <th>${i18next.t('field.finalizing-function')}</th>
76
- <th>${i18next.t('field.unit')}</th>
77
- <th value>${i18next.t('field.value')}</th>
78
- <th>${i18next.t('field.spec')}</th>
79
- <th>${i18next.t('field.ooc')}</th>
80
- <th>${i18next.t('field.oos')}</th>
81
- </tr>
82
- ${dataItems.map(dataItem => {
83
- const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem;
84
- const value = data[tag];
85
- const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet, dataItems, data, tag) || {};
24
+ ${nonGroupDataItems.length > 0
25
+ ? html `
26
+ <table>
27
+ <tr>
28
+ <th item>${i18next.t('field.item')}</th>
29
+ <th>${i18next.t('field.description')}</th>
30
+ <th>${i18next.t('field.finalizing-function')}</th>
31
+ <th>${i18next.t('field.unit')}</th>
32
+ <th value>${i18next.t('field.value')}</th>
33
+ <th>${i18next.t('field.spec')}</th>
34
+ <th>${i18next.t('field.ooc')}</th>
35
+ <th>${i18next.t('field.oos')}</th>
36
+ </tr>
37
+ ${nonGroupDataItems.map(dataItem => {
38
+ const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem;
39
+ const value = data[tag];
40
+ const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet, dataItems, data, tag) || {};
41
+ return html `
42
+ <tr ?ooc=${ooc} ?oos=${oos}>
43
+ <td name>${name}</td>
44
+ <td>${description}</td>
45
+ <td>${stat}</td>
46
+ <td>${unit}</td>
47
+ <td>${this.buildValue(type, value)}</td>
48
+ <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
49
+ <td>${ooc ? html `<md-icon>done</md-icon>` : ''}</td>
50
+ <td>${oos ? html `<md-icon>done</md-icon>` : ''}</td>
51
+ </tr>
52
+ `;
53
+ })}
54
+ </table>
55
+ `
56
+ : nothing}
57
+ ${Object.keys(dataItemSubgroups).map(subgroup => {
86
58
  return html `
87
- <tr ?ooc=${ooc} ?oos=${oos}>
88
- <td name>${name}</td>
89
- <td>${description}</td>
90
- <td>${stat}</td>
91
- <td>${unit}</td>
92
- <td>${this.buildValue(type, value)}</td>
93
- <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
94
- <td>${ooc ? html `<md-icon>done</md-icon>` : ''}</td>
95
- <td>${oos ? html `<md-icon>done</md-icon>` : ''}</td>
96
- </tr>
97
- `;
59
+ <ox-data-entry-subgroup-view
60
+ .subgroup=${subgroup}
61
+ .dataSet=${this.dataSet}
62
+ .data=${this.value}
63
+ ></ox-data-entry-subgroup-view>
64
+ `;
98
65
  })}
99
- </table>
100
66
  </form>`;
101
67
  }
68
+ groupDataItemsByGroup(dataItems) {
69
+ const groupedDataItems = {};
70
+ for (const dataItem of dataItems) {
71
+ const { group, hidden } = dataItem;
72
+ if (group && !hidden) {
73
+ if (!groupedDataItems[group]) {
74
+ groupedDataItems[group] = [];
75
+ }
76
+ groupedDataItems[group].push(dataItem);
77
+ }
78
+ }
79
+ return groupedDataItems;
80
+ }
102
81
  buildSpec(useCaseNames, spec) {
103
82
  return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec);
104
83
  }
@@ -116,7 +95,7 @@ let OxDataEntryView = class OxDataEntryView extends LitElement {
116
95
  const values = value instanceof Array ? value : [value];
117
96
  if (type == 'file') {
118
97
  const files = values.flat();
119
- return files.map(file => html `<a @click=${() => this.download(file)}>${file.name}</a></br>`);
98
+ return files.filter(Boolean).map(file => html `<a @click=${() => this.download(file)}>${file.name}</a></br>`);
120
99
  }
121
100
  if (type == 'signature') {
122
101
  return html ` <ox-input-signature .value=${value} disabled></ox-input-signature>`;
@@ -143,6 +122,9 @@ OxDataEntryView.styles = css `
143
122
  :host {
144
123
  display: flex;
145
124
  flex-direction: column;
125
+
126
+ --signature-min-width: 100px;
127
+ --signature-min-height: 60px;
146
128
  }
147
129
 
148
130
  form {
package/dist/src/ox-data-entry-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-entry-view.js","sourceRoot":"","sources":["../../src/ox-data-entry-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-signature.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataSet, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-entry-view')\nexport class OxDataEntryView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\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 }\n [page-description] {\n margin: var(--page-description-margin);\n opacity: 0.7;\n font: var(--page-description-font);\n color: var(--md-sys-color-on-secondary-container);\n text-transform: capitalize;\n }\n [page-description] * {\n vertical-align: middle;\n }\n [page-description] md-icon {\n margin-top: -2px;\n font-size: 0.9rem;\n color: var(--page-description-color);\n }\n\n table {\n border-collapse: collapse;\n margin-bottom: var(--spacing-medium);\n }\n th {\n padding: var(--th-padding);\n border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n text-transform: var(--th-text-transform);\n font: var(--th-font);\n color: var(--th-color);\n text-align: left;\n white-space: nowrap;\n }\n th[item] {\n min-width: 100px;\n }\n th[value] {\n min-width: 100px;\n }\n tr {\n background-color: var(--tr-background-color);\n }\n tr:nth-child(odd) {\n background-color: var(--tr-background-odd-color);\n }\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n tr[ooc],\n tr[oos] {\n background-color: #fefbdf;\n }\n td {\n border-bottom: var(--td-border-bottom);\n padding: var(--td-padding);\n font: var(--td-font);\n color: var(--td-color);\n }\n td[name] {\n font-weight: bold;\n }\n td md-icon {\n color: var(--md-sys-color-error);\n }\n\n pre {\n tab-size: 2;\n }\n\n @media screen and (max-width: 480px) {\n th {\n min-width: 50px;\n }\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n __render() {\n return html`<form>\n <h2>${this.dataSet?.name || ''}</h2>\n <h3>${this.dataSet?.description || ''}</h3>\n ${this.buildEntryViews()}\n </form> `\n }\n\n private buildEntryViews() {\n const dataItems = this.dataSet?.dataItems.filter(item => item.active)\n\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} disabled>\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 break\n\n case 'boolean':\n return html` <input type=\"checkbox\" name=${tag} .checked=${v} disabled />`\n break\n\n case 'number':\n return html` <input type=\"number\" name=${tag} value=${v} disabled />`\n break\n\n case 'file':\n return html`<ox-input-file\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n disabled\n ></ox-input-file>`\n\n case 'string':\n default:\n return html` <input type=\"text\" name=${tag} value=${v} disabled />`\n }\n })\n\n return html` <label .title=${description}>\n <div name>${name}${unit ? `(${unit})` : ''}</div>\n <div description><md-icon>info</md-icon> ${description}</div>\n <div elements>${elements}</div>\n </label>`\n })\n }\n\n render() {\n if (!this.dataSet) {\n return nothing\n }\n\n const { name, description, useCase, dataItems = [] } = this.dataSet!\n\n const data = this.value || {}\n const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n\n return html` <h2>${name}</h2>\n <p page-description><md-icon>info</md-icon> ${description}<br /></p>\n\n <form>\n <table>\n <tr>\n <th item>${i18next.t('field.item')}</th>\n <th>${i18next.t('field.description')}</th>\n <th>${i18next.t('field.finalizing-function')}</th>\n <th>${i18next.t('field.unit')}</th>\n <th value>${i18next.t('field.value')}</th>\n <th>${i18next.t('field.spec')}</th>\n <th>${i18next.t('field.ooc')}</th>\n <th>${i18next.t('field.oos')}</th>\n </tr>\n ${dataItems.map(dataItem => {\n const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n const value = data[tag]\n const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}\n\n return html`\n <tr ?ooc=${ooc} ?oos=${oos}>\n <td name>${name}</td>\n <td>${description}</td>\n <td>${stat}</td>\n <td>${unit}</td>\n <td>${this.buildValue(type, value)}</td>\n <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>\n <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>\n </tr>\n `\n })}\n </table>\n </form>`\n }\n\n private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n }\n\n private download(file: { mimetype: string; name: string; fullpath: string }) {\n const element = document.createElement('a')\n element.setAttribute('href', file.fullpath)\n element.setAttribute('download', file.name!)\n document.body.appendChild(element)\n element.click()\n }\n\n private buildValue(type: string, value: any | any[]) {\n if (value === undefined) {\n return ''\n }\n const values = value instanceof Array ? value : [value]\n\n if (type == 'file') {\n const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n return files.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\n }\n\n if (type == 'signature') {\n return html` <ox-input-signature .value=${value} disabled></ox-input-signature>`\n }\n\n const elements = values.map((v: any, idx) => {\n switch (typeof v) {\n case 'boolean':\n return html` <input type=\"checkbox\" .checked=${v} disabled />`\n break\n\n default:\n if (type == 'date') {\n return v ? new Date(v).toLocaleDateString() : ''\n } else if (type == 'datetime') {\n return v ? new Date(v).toLocaleString() : ''\n }\n return v ?? ''\n }\n })\n\n return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n }\n}\n"]}
1
+ {"version":3,"file":"ox-data-entry-view.js","sourceRoot":"","sources":["../../src/ox-data-entry-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-signature.js'\nimport './ox-data-entry-subgroup-view.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataItem, DataSet, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-entry-view')\nexport class OxDataEntryView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n --signature-min-width: 100px;\n --signature-min-height: 60px;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\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 }\n [page-description] {\n margin: var(--page-description-margin);\n opacity: 0.7;\n font: var(--page-description-font);\n color: var(--md-sys-color-on-secondary-container);\n text-transform: capitalize;\n }\n [page-description] * {\n vertical-align: middle;\n }\n [page-description] md-icon {\n margin-top: -2px;\n font-size: 0.9rem;\n color: var(--page-description-color);\n }\n\n table {\n border-collapse: collapse;\n margin-bottom: var(--spacing-medium);\n }\n th {\n padding: var(--th-padding);\n border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n text-transform: var(--th-text-transform);\n font: var(--th-font);\n color: var(--th-color);\n text-align: left;\n white-space: nowrap;\n }\n th[item] {\n min-width: 100px;\n }\n th[value] {\n min-width: 100px;\n }\n tr {\n background-color: var(--tr-background-color);\n }\n tr:nth-child(odd) {\n background-color: var(--tr-background-odd-color);\n }\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n tr[ooc],\n tr[oos] {\n background-color: #fefbdf;\n }\n td {\n border-bottom: var(--td-border-bottom);\n padding: var(--td-padding);\n font: var(--td-font);\n color: var(--td-color);\n }\n td[name] {\n font-weight: bold;\n }\n td md-icon {\n color: var(--md-sys-color-error);\n }\n\n pre {\n tab-size: 2;\n }\n\n @media screen and (max-width: 480px) {\n th {\n min-width: 50px;\n }\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n render() {\n if (!this.dataSet) {\n return nothing\n }\n\n const { name, description, useCase, dataItems = [] } = this.dataSet!\n\n const data = this.value || {}\n\n const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group && !dataItem.hidden)\n const dataItemSubgroups = this.groupDataItemsByGroup(dataItems)\n\n return html` <h2>${name}</h2>\n <p page-description><md-icon>info</md-icon> ${description}<br /></p>\n\n <form>\n ${nonGroupDataItems.length > 0\n ? html`\n <table>\n <tr>\n <th item>${i18next.t('field.item')}</th>\n <th>${i18next.t('field.description')}</th>\n <th>${i18next.t('field.finalizing-function')}</th>\n <th>${i18next.t('field.unit')}</th>\n <th value>${i18next.t('field.value')}</th>\n <th>${i18next.t('field.spec')}</th>\n <th>${i18next.t('field.ooc')}</th>\n <th>${i18next.t('field.oos')}</th>\n </tr>\n ${nonGroupDataItems.map(dataItem => {\n const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n const value = data[tag]\n const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}\n\n return html`\n <tr ?ooc=${ooc} ?oos=${oos}>\n <td name>${name}</td>\n <td>${description}</td>\n <td>${stat}</td>\n <td>${unit}</td>\n <td>${this.buildValue(type, value)}</td>\n <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>\n <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>\n <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>\n </tr>\n `\n })}\n </table>\n `\n : nothing}\n ${Object.keys(dataItemSubgroups).map(subgroup => {\n return html`\n <ox-data-entry-subgroup-view\n .subgroup=${subgroup}\n .dataSet=${this.dataSet}\n .data=${this.value}\n ></ox-data-entry-subgroup-view>\n `\n })}\n </form>`\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, hidden } = dataItem\n\n if (group && !hidden) {\n if (!groupedDataItems[group]) {\n groupedDataItems[group] = []\n }\n\n groupedDataItems[group].push(dataItem)\n }\n }\n\n return groupedDataItems\n }\n\n private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {\n return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)\n }\n\n private download(file: { mimetype: string; name: string; fullpath: string }) {\n const element = document.createElement('a')\n element.setAttribute('href', file.fullpath)\n element.setAttribute('download', file.name!)\n document.body.appendChild(element)\n element.click()\n }\n\n private buildValue(type: string, value: any | any[]) {\n if (value === undefined) {\n return ''\n }\n const values = value instanceof Array ? value : [value]\n\n if (type == 'file') {\n const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]\n\n return files.filter(Boolean).map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\n }\n\n if (type == 'signature') {\n return html` <ox-input-signature .value=${value} disabled></ox-input-signature>`\n }\n\n const elements = values.map((v: any, idx) => {\n switch (typeof v) {\n case 'boolean':\n return html` <input type=\"checkbox\" .checked=${v} disabled />`\n break\n\n default:\n if (type == 'date') {\n return v ? new Date(v).toLocaleDateString() : ''\n } else if (type == 'datetime') {\n return v ? new Date(v).toLocaleString() : ''\n }\n return v ?? ''\n }\n })\n\n return typeof values[0] === 'boolean' ? elements : elements.join(', ')\n }\n}\n"]}
package/dist/src/ox-data-sample-subgroup-view.js CHANGED
@@ -70,7 +70,7 @@ let OxDataSampleSubgroupView = class OxDataSampleSubgroupView extends LitElement
70
70
  const values = value instanceof Array ? value : [value];
71
71
  if (type == 'file') {
72
72
  const files = values.flat();
73
- return files.map((file, idx) => html `
73
+ return files.filter(Boolean).map((file, idx) => html `
74
74
  <a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>
75
75
  ${files.length - 1 == idx ? html `</br>` : nothing}
76
76
  `);