@operato/dataset 8.0.0-beta.6 → 8.0.1
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.
- package/CHANGELOG.md +37 -165
- package/dist/src/ox-data-entry-form.d.ts +2 -3
- package/dist/src/ox-data-entry-form.js +141 -66
- package/dist/src/ox-data-entry-form.js.map +1 -1
- package/dist/src/ox-data-entry-subgroup-form.d.ts +1 -23
- package/dist/src/ox-data-entry-subgroup-form.js +44 -20
- package/dist/src/ox-data-entry-subgroup-form.js.map +1 -1
- package/dist/src/ox-data-ooc-correction-part.js +17 -7
- package/dist/src/ox-data-ooc-correction-part.js.map +1 -1
- package/dist/src/ox-data-ooc-history.js +11 -4
- package/dist/src/ox-data-ooc-history.js.map +1 -1
- package/dist/src/ox-data-sample-view.d.ts +2 -3
- package/dist/src/ox-data-sample-view.js +44 -66
- package/dist/src/ox-data-sample-view.js.map +1 -1
- package/dist/stories/ox-data-entry-form.stories.js +42 -54
- package/dist/stories/ox-data-entry-form.stories.js.map +1 -1
- package/dist/stories/ox-data-ooc-brief-view.stories.js +18 -19
- package/dist/stories/ox-data-ooc-brief-view.stories.js.map +1 -1
- package/dist/stories/ox-data-ooc-view.stories.js +20 -21
- package/dist/stories/ox-data-ooc-view.stories.js.map +1 -1
- package/dist/stories/ox-data-sample-view.stories.js +18 -19
- package/dist/stories/ox-data-sample-view.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -20
- package/dist/src/ox-data-input-factory.d.ts +0 -53
- package/dist/src/ox-data-input-factory.js +0 -162
- package/dist/src/ox-data-input-factory.js.map +0 -1
- package/dist/stories/ox-data-entry-form-subgroups.stories.d.ts +0 -19
- package/dist/stories/ox-data-entry-form-subgroups.stories.js +0 -248
- package/dist/stories/ox-data-entry-form-subgroups.stories.js.map +0 -1
|
@@ -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 } 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 || 1 }, (_, 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"]}
|
|
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"]}
|
|
@@ -14,16 +14,7 @@ export declare class OxDataEntrySubgroupForm extends LitElement {
|
|
|
14
14
|
list: {
|
|
15
15
|
fields: string[];
|
|
16
16
|
};
|
|
17
|
-
columns:
|
|
18
|
-
type: string;
|
|
19
|
-
name: string;
|
|
20
|
-
header: string;
|
|
21
|
-
record: any;
|
|
22
|
-
width: number;
|
|
23
|
-
} | {
|
|
24
|
-
type: string;
|
|
25
|
-
gutterName: string;
|
|
26
|
-
})[];
|
|
17
|
+
columns: any[];
|
|
27
18
|
rows: {
|
|
28
19
|
appendable: boolean;
|
|
29
20
|
};
|
|
@@ -33,24 +24,11 @@ export declare class OxDataEntrySubgroupForm extends LitElement {
|
|
|
33
24
|
};
|
|
34
25
|
grist: DataGrist;
|
|
35
26
|
render(): import("lit-html").TemplateResult<1>;
|
|
36
|
-
/**
|
|
37
|
-
* Builds the configuration for the Grist data grid.
|
|
38
|
-
* Uses OxDataInputFactory to determine column types.
|
|
39
|
-
*/
|
|
40
27
|
private buildGristConfiguration;
|
|
41
|
-
/**
|
|
42
|
-
* Fetches data for the Grist grid.
|
|
43
|
-
*/
|
|
44
28
|
fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
|
|
45
29
|
total: number;
|
|
46
30
|
records: any[];
|
|
47
31
|
}>;
|
|
48
|
-
/**
|
|
49
|
-
* Builds the value structure for form submission.
|
|
50
|
-
*/
|
|
51
32
|
buildValue(): any;
|
|
52
|
-
/**
|
|
53
|
-
* Handles field change events.
|
|
54
|
-
*/
|
|
55
33
|
onFieldChange(e: CustomEvent): void;
|
|
56
34
|
}
|
|
@@ -5,7 +5,6 @@ import { css, html, LitElement } from 'lit';
|
|
|
5
5
|
import { customElement, property, state, query } from 'lit/decorators.js';
|
|
6
6
|
import { ScrollbarStyles } from '@operato/styles';
|
|
7
7
|
import { isMobileDevice } from '@operato/utils';
|
|
8
|
-
import { OxDataInputFactory } from './ox-data-input-factory'; // Importing OxDataInputFactory
|
|
9
8
|
let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
|
|
10
9
|
constructor() {
|
|
11
10
|
super(...arguments);
|
|
@@ -22,23 +21,56 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
|
|
|
22
21
|
</ox-grist>
|
|
23
22
|
`;
|
|
24
23
|
}
|
|
25
|
-
/**
|
|
26
|
-
* Builds the configuration for the Grist data grid.
|
|
27
|
-
* Uses OxDataInputFactory to determine column types.
|
|
28
|
-
*/
|
|
29
24
|
buildGristConfiguration() {
|
|
30
25
|
const columns = (this.dataItems || []).map(dataItem => {
|
|
31
|
-
const { name, tag, type, options = {}, unit } = dataItem;
|
|
32
|
-
|
|
33
|
-
type
|
|
26
|
+
const { name, description, tag, type, options = {}, unit } = dataItem;
|
|
27
|
+
const columnConfig = {
|
|
28
|
+
type,
|
|
34
29
|
name: tag,
|
|
35
30
|
header: `${name}${unit ? ` (${unit})` : ''}`,
|
|
36
31
|
record: {
|
|
37
|
-
editable: true
|
|
38
|
-
...OxDataInputFactory.getGristRecordOptions(type, options)
|
|
32
|
+
editable: true
|
|
39
33
|
},
|
|
40
34
|
width: 200
|
|
41
35
|
};
|
|
36
|
+
switch (type) {
|
|
37
|
+
case 'select':
|
|
38
|
+
case 'radio': // 그리드안에 radio가 들어갈수 없어서 select로 변환
|
|
39
|
+
columnConfig.type = 'select';
|
|
40
|
+
columnConfig.record.options = [
|
|
41
|
+
'',
|
|
42
|
+
...(options.options || []).map((option) => {
|
|
43
|
+
if (typeof option == 'string') {
|
|
44
|
+
return option;
|
|
45
|
+
}
|
|
46
|
+
const { display, text, value } = option || {};
|
|
47
|
+
return {
|
|
48
|
+
display: display || text,
|
|
49
|
+
value
|
|
50
|
+
};
|
|
51
|
+
})
|
|
52
|
+
];
|
|
53
|
+
return columnConfig;
|
|
54
|
+
case 'boolean':
|
|
55
|
+
columnConfig.record.align = 'center';
|
|
56
|
+
return columnConfig;
|
|
57
|
+
case 'number':
|
|
58
|
+
columnConfig.record.align = 'right';
|
|
59
|
+
return columnConfig;
|
|
60
|
+
case 'date':
|
|
61
|
+
return columnConfig;
|
|
62
|
+
case 'datetime':
|
|
63
|
+
return columnConfig;
|
|
64
|
+
case 'file':
|
|
65
|
+
columnConfig.record.multiple = true;
|
|
66
|
+
return columnConfig;
|
|
67
|
+
case 'signature':
|
|
68
|
+
return columnConfig;
|
|
69
|
+
case 'string':
|
|
70
|
+
return columnConfig;
|
|
71
|
+
default:
|
|
72
|
+
return columnConfig;
|
|
73
|
+
}
|
|
42
74
|
});
|
|
43
75
|
return {
|
|
44
76
|
list: { fields: ['name', 'data'] },
|
|
@@ -49,9 +81,6 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
|
|
|
49
81
|
pagination: { infinite: true }
|
|
50
82
|
};
|
|
51
83
|
}
|
|
52
|
-
/**
|
|
53
|
-
* Fetches data for the Grist grid.
|
|
54
|
-
*/
|
|
55
84
|
async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
|
|
56
85
|
const length = Object.entries(this.value || {}).reduce((max, [tag, value]) => {
|
|
57
86
|
return Math.max(max, Array.isArray(value) ? value.length : 1);
|
|
@@ -61,7 +90,7 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
|
|
|
61
90
|
return tags.reduce((partial, tag) => {
|
|
62
91
|
var _a;
|
|
63
92
|
const v = (_a = this.value) === null || _a === void 0 ? void 0 : _a[tag];
|
|
64
|
-
partial[tag] = Array.isArray(v) ? v[index] : index
|
|
93
|
+
partial[tag] = Array.isArray(v) ? v[index] : index == 0 ? v : undefined;
|
|
65
94
|
return partial;
|
|
66
95
|
}, {});
|
|
67
96
|
});
|
|
@@ -70,9 +99,6 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
|
|
|
70
99
|
records: records
|
|
71
100
|
};
|
|
72
101
|
}
|
|
73
|
-
/**
|
|
74
|
-
* Builds the value structure for form submission.
|
|
75
|
-
*/
|
|
76
102
|
buildValue() {
|
|
77
103
|
const records = this.grist._data.records || [];
|
|
78
104
|
const tags = (this.dataItems || []).map(dataItem => dataItem.tag);
|
|
@@ -85,9 +111,6 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
|
|
|
85
111
|
return partial;
|
|
86
112
|
}, {});
|
|
87
113
|
}
|
|
88
|
-
/**
|
|
89
|
-
* Handles field change events.
|
|
90
|
-
*/
|
|
91
114
|
onFieldChange(e) {
|
|
92
115
|
this.dispatchEvent(new CustomEvent('change', { detail: this.grist.dirtyData }));
|
|
93
116
|
}
|
|
@@ -98,6 +121,7 @@ OxDataEntrySubgroupForm.styles = [
|
|
|
98
121
|
:host {
|
|
99
122
|
display: flex;
|
|
100
123
|
flex-direction: column;
|
|
124
|
+
|
|
101
125
|
width: 100%;
|
|
102
126
|
min-height: 100px;
|
|
103
127
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-data-entry-subgroup-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-subgroup-form.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;
|
|
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"]}
|
|
@@ -12,23 +12,29 @@ let OxDataOocCorrectionPart = class OxDataOocCorrectionPart extends LitElement {
|
|
|
12
12
|
${reviewer
|
|
13
13
|
? html `
|
|
14
14
|
<h3>${i18next.t('label.corrective instruction')}</h3>
|
|
15
|
-
<
|
|
15
|
+
<div>
|
|
16
16
|
<span field-info
|
|
17
17
|
>${formatter.format(new Date(reviewedAt))} <md-icon>account_circle</md-icon>${reviewer.name}</span
|
|
18
18
|
>
|
|
19
|
-
<
|
|
20
|
-
|
|
19
|
+
<pre>
|
|
20
|
+
<strong>${correctiveInstruction}</strong>
|
|
21
|
+
</pre
|
|
22
|
+
>
|
|
23
|
+
</div>
|
|
21
24
|
`
|
|
22
25
|
: nothing}
|
|
23
26
|
${corrector
|
|
24
27
|
? html `
|
|
25
28
|
<h3>${i18next.t('label.corrective action')}</h3>
|
|
26
|
-
<
|
|
29
|
+
<div>
|
|
27
30
|
<span field-info
|
|
28
31
|
>${formatter.format(new Date(correctedAt))} <md-icon>account_circle</md-icon>${corrector.name}</span
|
|
29
32
|
>
|
|
30
|
-
<
|
|
31
|
-
|
|
33
|
+
<pre>
|
|
34
|
+
<strong>${correctiveAction}</strong>
|
|
35
|
+
</pre
|
|
36
|
+
>
|
|
37
|
+
</div>
|
|
32
38
|
`
|
|
33
39
|
: nothing}
|
|
34
40
|
`;
|
|
@@ -63,7 +69,7 @@ OxDataOocCorrectionPart.styles = css `
|
|
|
63
69
|
color: var(--md-sys-color-surface);
|
|
64
70
|
}
|
|
65
71
|
|
|
66
|
-
|
|
72
|
+
div {
|
|
67
73
|
background-color: var(--md-sys-color-surface);
|
|
68
74
|
box-shadow: var(--box-shadow);
|
|
69
75
|
border-radius: var(--border-radius);
|
|
@@ -73,6 +79,10 @@ OxDataOocCorrectionPart.styles = css `
|
|
|
73
79
|
color: var(--md-sys-color-on-secondary-container);
|
|
74
80
|
}
|
|
75
81
|
|
|
82
|
+
pre {
|
|
83
|
+
margin: 0 1em;
|
|
84
|
+
}
|
|
85
|
+
|
|
76
86
|
md-icon {
|
|
77
87
|
position: relative;
|
|
78
88
|
top: 3px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-data-ooc-correction-part.js","sourceRoot":"","sources":["../../src/ox-data-ooc-correction-part.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAKhC,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"ox-data-ooc-correction-part.js","sourceRoot":"","sources":["../../src/ox-data-ooc-correction-part.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAKhC,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IA+DrD,MAAM;QACJ,MAAM,EACJ,qBAAqB,GAAG,EAAE,EAC1B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACZ,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACtB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;QACP,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;kBACI,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;;;mBAGxC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAW,CAAC,CAAC,qCAAqC,QAAQ,CAAC,IAAI;;;0BAGlF,qBAAqB;;;;WAIpC;YACH,CAAC,CAAC,OAAO;QACT,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;kBACI,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;mBAGnC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,WAAY,CAAC,CAAC,qCAAqC,SAAS,CAAC,IAAI;;;0BAGpF,gBAAgB;;;;WAI/B;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;;AAvGM,8BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DlB,AA1DY,CA0DZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AA7DlC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAyGnC","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-correction-part')\nexport class OxDataOocCorrectionPart extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n position: relative;\n }\n\n h3 {\n margin: var(--title-margin);\n padding-top: 12px;\n font: var(--title-font);\n color: var(--title-text-color);\n font-size: 20px;\n }\n\n md-icon {\n font-size: 16px;\n }\n\n [field-state] {\n border-radius: 2px;\n background-color: var(--md-sys-color-on-primary-container);\n margin-left: var(--spacing-medium);\n padding: 1px 2px;\n font-size: 0.7rem;\n color: var(--md-sys-color-surface);\n }\n\n div {\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n margin: var(--page-description-margin);\n padding: var(--padding-default);\n font: var(--page-description-font);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n pre {\n margin: 0 1em;\n }\n\n md-icon {\n position: relative;\n top: 3px;\n margin: 0 2px 0 10px;\n }\n\n [field-info] {\n opacity: 0.7;\n }\n\n strong {\n display: block;\n font-weight: bold;\n font-size: 0.9rem;\n }\n `\n\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const {\n correctiveInstruction = '',\n correctiveAction = '',\n reviewer,\n reviewedAt,\n corrector,\n correctedAt\n } = this.dataOoc || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html`\n ${reviewer\n ? html`\n <h3>${i18next.t('label.corrective instruction')}</h3>\n <div>\n <span field-info\n >${formatter.format(new Date(reviewedAt!))} <md-icon>account_circle</md-icon>${reviewer.name}</span\n >\n <pre>\n <strong>${correctiveInstruction}</strong>\n </pre\n >\n </div>\n `\n : nothing}\n ${corrector\n ? html`\n <h3>${i18next.t('label.corrective action')}</h3>\n <div>\n <span field-info\n >${formatter.format(new Date(correctedAt!))} <md-icon>account_circle</md-icon>${corrector.name}</span\n >\n <pre>\n <strong>${correctiveAction}</strong>\n </pre\n >\n </div>\n `\n : nothing}\n `\n }\n}\n"]}
|
|
@@ -10,14 +10,17 @@ let OxDataOocHistory = class OxDataOocHistory extends LitElement {
|
|
|
10
10
|
const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
|
|
11
11
|
return html `
|
|
12
12
|
${history.map(({ user, state, comment, timestamp }) => html `
|
|
13
|
-
<
|
|
13
|
+
<div page-history>
|
|
14
14
|
<!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
|
|
15
15
|
<span field-info
|
|
16
16
|
>${formatter.format(new Date(timestamp))} <md-icon>account_circle</md-icon>${user.name}</span
|
|
17
17
|
>
|
|
18
18
|
<span field-state>${state}</span>
|
|
19
|
-
<
|
|
20
|
-
|
|
19
|
+
<pre>
|
|
20
|
+
<strong>${comment}</strong>
|
|
21
|
+
</pre
|
|
22
|
+
>
|
|
23
|
+
</div>
|
|
21
24
|
`)}
|
|
22
25
|
`;
|
|
23
26
|
}
|
|
@@ -36,7 +39,7 @@ OxDataOocHistory.styles = css `
|
|
|
36
39
|
color: var(--md-sys-color-surface);
|
|
37
40
|
}
|
|
38
41
|
|
|
39
|
-
|
|
42
|
+
div {
|
|
40
43
|
background-color: var(--md-sys-color-surface);
|
|
41
44
|
box-shadow: var(--box-shadow);
|
|
42
45
|
border-radius: var(--border-radius);
|
|
@@ -46,6 +49,10 @@ OxDataOocHistory.styles = css `
|
|
|
46
49
|
color: var(--md-sys-color-on-secondary-container);
|
|
47
50
|
}
|
|
48
51
|
|
|
52
|
+
pre {
|
|
53
|
+
margin: 0 1em;
|
|
54
|
+
}
|
|
55
|
+
|
|
49
56
|
md-icon {
|
|
50
57
|
position: relative;
|
|
51
58
|
top: 3px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-data-ooc-history.js","sourceRoot":"","sources":["../../src/ox-data-ooc-history.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"ox-data-ooc-history.js","sourceRoot":"","sources":["../../src/ox-data-ooc-history.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAgD9C,MAAM;QACJ,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAC3C,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;;iBAIpC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,qCAAqC,IAAI,CAAC,IAAI;;gCAEpE,KAAK;;wBAEb,OAAO;;;;SAItB,CACF;KACF,CAAA;IACH,CAAC;;AApEM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ClB,AA3CY,CA2CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAkB;AA9ClC,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAsE5B","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataOoc } from './types.js'\n\n@customElement('ox-data-ooc-history')\nexport class OxDataOocHistory extends LitElement {\n static styles = css`\n md-icon {\n font-size: 16px;\n }\n\n [field-state] {\n border-radius: 2px;\n background-color: var(--md-sys-color-on-primary-container);\n margin-left: var(--spacing-medium);\n padding: 1px 2px;\n font-size: 0.7rem;\n color: var(--md-sys-color-surface);\n }\n\n div {\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n margin: var(--page-description-margin);\n padding: var(--padding-default);\n font: var(--page-description-font);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n pre {\n margin: 0 1em;\n }\n\n md-icon {\n position: relative;\n top: 3px;\n margin: 0 2px 0 10px;\n }\n\n [field-info] {\n opacity: 0.7;\n }\n\n strong {\n display: block;\n font-weight: bold;\n font-size: 0.9rem;\n }\n `\n\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const { history = [] } = this.dataOoc || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html`\n ${history.map(\n ({ user, state, comment, timestamp }) => html`\n <div page-history>\n <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->\n <span field-info\n >${formatter.format(new Date(timestamp))} <md-icon>account_circle</md-icon>${user.name}</span\n >\n <span field-state>${state}</span>\n <pre>\n <strong>${comment}</strong>\n </pre\n >\n </div>\n `\n )}\n `\n }\n}\n"]}
|
|
@@ -2,13 +2,12 @@ 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 './ox-data-sample-subgroup-view.js';
|
|
5
|
-
import { LitElement
|
|
5
|
+
import { LitElement } from 'lit';
|
|
6
6
|
import { DataSample } from './types.js';
|
|
7
7
|
export declare class OxDataSampleView extends LitElement {
|
|
8
8
|
static styles: import("lit").CSSResult;
|
|
9
9
|
dataSample?: DataSample;
|
|
10
|
-
render(): TemplateResult<1>;
|
|
11
|
-
private buildTable;
|
|
10
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
12
11
|
private groupDataItemsByGroup;
|
|
13
12
|
private buildSpec;
|
|
14
13
|
private download;
|
|
@@ -3,7 +3,7 @@ import '@material/web/icon/icon.js';
|
|
|
3
3
|
import '@operato/input/ox-input-file.js';
|
|
4
4
|
import '@operato/input/ox-input-signature.js';
|
|
5
5
|
import './ox-data-sample-subgroup-view.js';
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
6
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
7
7
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
8
|
import { i18next } from '@operato/i18n';
|
|
9
9
|
import { OxDataUseCase } from './usecase/ox-data-use-case.js';
|
|
@@ -15,38 +15,9 @@ let OxDataSampleView = class OxDataSampleView extends LitElement {
|
|
|
15
15
|
const { name, description, collectedAt, workDate, workShift, useCase, data = {}, judgment, dataItems = [] } = this.dataSample;
|
|
16
16
|
const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
|
|
17
17
|
const useCaseNames = (useCase === null || useCase === void 0 ? void 0 : useCase.split(',').filter(useCase => useCase.trim())) || [];
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
const tables = []; // To store generated tables
|
|
22
|
-
dataItems.forEach((dataItem, index) => {
|
|
23
|
-
if (dataItem.group) {
|
|
24
|
-
// If we reach a subgroup, first store the existing non-grouped items as a table
|
|
25
|
-
if (currentTableItems.length > 0) {
|
|
26
|
-
tables.push(this.buildTable(currentTableItems, data, judgment, useCaseNames));
|
|
27
|
-
currentTableItems = []; // Reset for the next segment
|
|
28
|
-
}
|
|
29
|
-
// Render the subgroup **only if it's the first time being encountered**
|
|
30
|
-
if (!renderedGroups.has(dataItem.group)) {
|
|
31
|
-
renderedGroups.add(dataItem.group);
|
|
32
|
-
tables.push(html `
|
|
33
|
-
<ox-data-sample-subgroup-view
|
|
34
|
-
.subgroup=${dataItem.group}
|
|
35
|
-
.dataSample=${this.dataSample}
|
|
36
|
-
></ox-data-sample-subgroup-view>
|
|
37
|
-
`);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
currentTableItems.push(dataItem);
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
// If there are any remaining non-grouped items, render them in a final table
|
|
45
|
-
if (currentTableItems.length > 0) {
|
|
46
|
-
tables.push(this.buildTable(currentTableItems, data, judgment, useCaseNames));
|
|
47
|
-
}
|
|
48
|
-
return html `
|
|
49
|
-
<h2>${name}</h2>
|
|
18
|
+
const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group && !dataItem.hidden);
|
|
19
|
+
const dataItemSubgroups = this.groupDataItemsByGroup(dataItems);
|
|
20
|
+
return html ` <h2>${name}</h2>
|
|
50
21
|
<p page-description>
|
|
51
22
|
<md-icon>info</md-icon> ${description}<br />
|
|
52
23
|
<md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
|
|
@@ -54,42 +25,49 @@ let OxDataSampleView = class OxDataSampleView extends LitElement {
|
|
|
54
25
|
${formatter.format(new Date(collectedAt))}
|
|
55
26
|
</p>
|
|
56
27
|
|
|
57
|
-
<form
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
28
|
+
<form>
|
|
29
|
+
${nonGroupDataItems.length > 0
|
|
30
|
+
? html `
|
|
31
|
+
<table>
|
|
32
|
+
<tr>
|
|
33
|
+
<th item>${i18next.t('field.item')}</th>
|
|
34
|
+
<th>${i18next.t('field.description')}</th>
|
|
35
|
+
<th>${i18next.t('field.finalizing-function')}</th>
|
|
36
|
+
<th>${i18next.t('field.unit')}</th>
|
|
37
|
+
<th value>${i18next.t('field.value')}</th>
|
|
38
|
+
<th>${i18next.t('field.spec')}</th>
|
|
39
|
+
<th>${i18next.t('field.ooc')}</th>
|
|
40
|
+
<th>${i18next.t('field.oos')}</th>
|
|
41
|
+
</tr>
|
|
42
|
+
${nonGroupDataItems.map(dataItem => {
|
|
43
|
+
const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem;
|
|
44
|
+
const value = data[tag];
|
|
45
|
+
const { ooc, oos } = (judgment === null || judgment === void 0 ? void 0 : judgment[tag]) || {};
|
|
46
|
+
return html `
|
|
47
|
+
<tr ?ooc=${ooc} ?oos=${oos}>
|
|
48
|
+
<td name>${name}</td>
|
|
49
|
+
<td>${description}</td>
|
|
50
|
+
<td>${stat}</td>
|
|
51
|
+
<td>${unit}</td>
|
|
52
|
+
<td>${this.buildValue(type, value)}</td>
|
|
53
|
+
<td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
|
|
54
|
+
<td>${ooc ? html `<md-icon>done</md-icon>` : ''}</td>
|
|
55
|
+
<td>${oos ? html `<md-icon>done</md-icon>` : ''}</td>
|
|
56
|
+
</tr>
|
|
57
|
+
`;
|
|
58
|
+
})}
|
|
59
|
+
</table>
|
|
60
|
+
`
|
|
61
|
+
: nothing}
|
|
62
|
+
${Object.keys(dataItemSubgroups).map(subgroup => {
|
|
78
63
|
return html `
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<td>${unit}</td>
|
|
84
|
-
<td>${this.buildValue(type, value)}</td>
|
|
85
|
-
<td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
|
|
86
|
-
<td>${ooc ? html `<md-icon>done</md-icon>` : ''}</td>
|
|
87
|
-
<td>${oos ? html `<md-icon>done</md-icon>` : ''}</td>
|
|
88
|
-
</tr>
|
|
64
|
+
<ox-data-sample-subgroup-view
|
|
65
|
+
.subgroup=${subgroup}
|
|
66
|
+
.dataSample=${this.dataSample}
|
|
67
|
+
></ox-data-sample-subgroup-view>
|
|
89
68
|
`;
|
|
90
69
|
})}
|
|
91
|
-
</
|
|
92
|
-
`;
|
|
70
|
+
</form>`;
|
|
93
71
|
}
|
|
94
72
|
groupDataItemsByGroup(dataItems) {
|
|
95
73
|
const groupedDataItems = {};
|