@operato/dataset 1.0.0-alpha.38 → 1.0.0-alpha.40

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.
@@ -12,39 +12,35 @@ let OxDataSampleView = class OxDataSampleView extends LitElement {
12
12
  return html ` <h2>${(_c = this.dataSample) === null || _c === void 0 ? void 0 : _c.name}</h2>
13
13
  <p page-description>
14
14
  ${(_d = this.dataSample) === null || _d === void 0 ? void 0 : _d.description}<br /><br />
15
- collected at: ${formatter.format(new Date((_e = this.dataSample) === null || _e === void 0 ? void 0 : _e.collectedAt))}
15
+ collected at: ${this.dataSample && formatter.format(new Date((_e = this.dataSample) === null || _e === void 0 ? void 0 : _e.collectedAt))}
16
16
  </p>
17
17
 
18
18
  <form @change=${(e) => this.onChange(e)}>
19
19
  <table>
20
20
  <tr>
21
- <th>item</th>
21
+ <th item>item</th>
22
22
  <th>description</th>
23
23
  <th>unit</th>
24
- <th>value</th>
24
+ <th value>value</th>
25
25
  <th>specification</th>
26
- <th>ooc</th>
27
- <th>oos</th>
26
+ <th>OOC</th>
27
+ <th>OOS</th>
28
28
  </tr>
29
29
  ${dataItems.map(dataItem => {
30
30
  const { ooc, oos } = this.evaluateOOC(dataItem, data === null || data === void 0 ? void 0 : data[dataItem.tag]) || {};
31
31
  return html `
32
- <tr>
33
- <!--tr에다가 ooc, oos를 어트리뷰트로 넣어주시면 배경이 살짝 하일라이트 되도록 style 넣어놨습니다 -->
32
+ <tr ?ooc=${ooc} ?oos=${oos}>
34
33
  <td name>${dataItem.name}</td>
35
34
  <td>${dataItem.description}</td>
36
35
  <td>${dataItem.unit}</td>
37
36
  <td>${this.buildValue(dataItem)}</td>
38
37
  <td><pre>${this.buildSpec(dataItem)}</pre></td>
39
- <td>${ooc ? html `<mwc-icon>checked</mwc-icon>` : ''}</td>
40
- <td>${oos ? html `<mwc-icon>checked</mwc-icon>` : ''}</td>
38
+ <td>${ooc ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
39
+ <td>${oos ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
41
40
  </tr>
42
41
  `;
43
42
  })}
44
43
  </table>
45
-
46
- <label><mwc-icon>build_circle</mwc-icon> correction activity</label>
47
- <textarea name="correctionActivity"> </textarea>
48
44
  </form>`;
49
45
  }
50
46
  onChange(e) { }
@@ -86,7 +82,6 @@ OxDataSampleView.styles = css `
86
82
  display: flex;
87
83
  flex-direction: column;
88
84
  background-color: var(--main-section-background-color);
89
- padding: var(--padding-wide);
90
85
  }
91
86
 
92
87
  form {
@@ -95,48 +90,7 @@ OxDataSampleView.styles = css `
95
90
  display: flex;
96
91
  flex-direction: column;
97
92
  }
98
- label {
99
- font: var(--label-font);
100
- color: var(--label-color);
101
- }
102
- label * {
103
- text-align: middle;
104
- }
105
- label:nth-child(even) {
106
- background-color: var(--main-section-background-color);
107
- padding: var(--padding-default) 0;
108
- }
109
- label mwc-icon {
110
- position: relative;
111
- top: 4px;
112
- font-size: 18px;
113
- color: var(--status-danger-color);
114
- }
115
93
 
116
- div[name] {
117
- grid-column: span 2 / auto;
118
- font: var(--label-font);
119
- color: var(--label-color);
120
- text-align: right;
121
- }
122
- div[elements] {
123
- grid-column: span 10 / auto;
124
- display: flex;
125
- flex-direction: row;
126
- flex-wrap: wrap;
127
- gap: 10px;
128
- padding-right: var(--padding-default);
129
- }
130
- div[elements] * {
131
- flex: 1;
132
- }
133
- div[elements] input,
134
- div[elements] select {
135
- border: var(--input-field-border);
136
- border-radius: var(--input-field-border-radius);
137
- padding: var(--input-field-padding);
138
- font: var(--input-field-font);
139
- }
140
94
  h2 {
141
95
  margin: var(--title-margin);
142
96
  padding-top: 25px;
@@ -148,6 +102,7 @@ OxDataSampleView.styles = css `
148
102
  font: var(--page-description-font);
149
103
  color: var(--page-description-color);
150
104
  }
105
+
151
106
  table {
152
107
  border-collapse: collapse;
153
108
  margin-bottom: var(--margin-default);
@@ -161,6 +116,12 @@ OxDataSampleView.styles = css `
161
116
  color: var(--th-color);
162
117
  text-align: left;
163
118
  }
119
+ th[item] {
120
+ min-width: 100px;
121
+ }
122
+ th[value] {
123
+ min-width: 100px;
124
+ }
164
125
  tr {
165
126
  background-color: var(--tr-background-color);
166
127
  }
@@ -170,7 +131,8 @@ OxDataSampleView.styles = css `
170
131
  tr:hover {
171
132
  background-color: var(--tr-background-hover-color);
172
133
  }
173
- tr[ooc] tr[oos] {
134
+ tr[ooc],
135
+ tr[oos] {
174
136
  background-color: #fefbdf;
175
137
  }
176
138
  td {
@@ -185,20 +147,9 @@ OxDataSampleView.styles = css `
185
147
  td mwc-icon {
186
148
  color: var(--status-danger-color);
187
149
  }
188
- textarea {
189
- border: var(--input-field-border);
190
- border-radius: var(--input-border-radius);
191
- padding: var(--input-field-padding);
192
- font: var(--input-field-font);
193
- }
194
150
 
195
- @media only screen and (max-width: 460px) {
196
- div[name] {
197
- grid-column: span 3 / auto;
198
- }
199
- div[elements] {
200
- grid-column: span 9 / auto;
201
- }
151
+ pre {
152
+ tab-size: 2;
202
153
  }
203
154
  `;
204
155
  __decorate([
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-sample-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { DataItem, DataSample, DataSet } from './types.js'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxDataUseCase } from './ox-data-use-case.js'\n\n@customElement('ox-data-sample-view')\nexport class OxDataSampleView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n padding: var(--padding-wide);\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n label {\n font: var(--label-font);\n color: var(--label-color);\n }\n label * {\n text-align: middle;\n }\n label:nth-child(even) {\n background-color: var(--main-section-background-color);\n padding: var(--padding-default) 0;\n }\n label mwc-icon {\n position: relative;\n top: 4px;\n font-size: 18px;\n color: var(--status-danger-color);\n }\n\n div[name] {\n grid-column: span 2 / auto;\n font: var(--label-font);\n color: var(--label-color);\n text-align: right;\n }\n div[elements] {\n grid-column: span 10 / auto;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n padding-right: var(--padding-default);\n }\n div[elements] * {\n flex: 1;\n }\n div[elements] input,\n div[elements] 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 h2 {\n margin: var(--title-margin);\n padding-top: 25px;\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n table {\n border-collapse: collapse;\n margin-bottom: var(--margin-default);\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 }\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] 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 mwc-icon {\n color: var(--status-danger-color);\n }\n textarea {\n border: var(--input-field-border);\n border-radius: var(--input-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n @media only screen and (max-width: 460px) {\n div[name] {\n grid-column: span 3 / auto;\n }\n div[elements] {\n grid-column: span 9 / auto;\n }\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) dataSample?: DataSample\n\n render() {\n const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []\n const data = this.dataSample?.data || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html` <h2>${this.dataSample?.name}</h2>\n <p page-description>\n ${this.dataSample?.description}<br /><br />\n collected at: ${formatter.format(new Date(this.dataSample?.collectedAt!))}\n </p>\n\n <form @change=${(e: Event) => this.onChange(e)}>\n <table>\n <tr>\n <th>item</th>\n <th>description</th>\n <th>unit</th>\n <th>value</th>\n <th>specification</th>\n <th>ooc</th>\n <th>oos</th>\n </tr>\n ${dataItems.map(dataItem => {\n const { ooc, oos } = this.evaluateOOC(dataItem, data?.[dataItem.tag]) || {}\n return html`\n <tr>\n <!--tr에다가 ooc, oos를 어트리뷰트로 넣어주시면 배경이 살짝 하일라이트 되도록 style 넣어놨습니다 -->\n <td name>${dataItem.name}</td>\n <td>${dataItem.description}</td>\n <td>${dataItem.unit}</td>\n <td>${this.buildValue(dataItem)}</td>\n <td><pre>${this.buildSpec(dataItem)}</pre></td>\n <td>${ooc ? html`<mwc-icon>checked</mwc-icon>` : ''}</td>\n <td>${oos ? html`<mwc-icon>checked</mwc-icon>` : ''}</td>\n </tr>\n `\n })}\n </table>\n\n <label><mwc-icon>build_circle</mwc-icon> correction activity</label>\n <textarea name=\"correctionActivity\"> </textarea>\n </form>`\n }\n\n private onChange(e: Event) {}\n\n private buildSpec(dataItem: DataItem) {\n return OxDataUseCase.elaborateDataItemSpec(this.dataSet!, dataItem)\n }\n\n private buildValue(dataItem: DataItem) {\n const { tag, type } = dataItem\n\n if (!this.dataSample) {\n return ''\n }\n\n const value = this.dataSample?.data[dataItem.tag]\n if (value === undefined) {\n return ''\n }\n const values = value instanceof Array ? value : [value]\n\n const elements = values.map((_: any, idx) => {\n const v = value[idx]\n\n switch (type) {\n case 'boolean':\n return html` <input type=\"checkbox\" name=${tag} .checked=${v} disabled />`\n break\n\n case 'select':\n case 'number':\n case 'string':\n default:\n return String(v === undefined ? '' : v)\n }\n })\n\n return type === 'boolean' ? elements : elements.join(', ')\n }\n\n private evaluateOOC(dataItem: DataItem, value: any) {\n return OxDataUseCase.evaluateItem(this.dataSet!, dataItem, value)\n }\n}\n"]}
1
+ {"version":3,"file":"ox-data-sample-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { DataItem, DataSample, DataSet } from './types.js'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxDataUseCase } from './ox-data-use-case.js'\n\n@customElement('ox-data-sample-view')\nexport class OxDataSampleView extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\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 padding-top: 25px;\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table {\n border-collapse: collapse;\n margin-bottom: var(--margin-default);\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 }\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 mwc-icon {\n color: var(--status-danger-color);\n }\n\n pre {\n tab-size: 2;\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) dataSample?: DataSample\n\n render() {\n const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []\n const data = this.dataSample?.data || {}\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html` <h2>${this.dataSample?.name}</h2>\n <p page-description>\n ${this.dataSample?.description}<br /><br />\n collected at: ${this.dataSample && formatter.format(new Date(this.dataSample?.collectedAt!))}\n </p>\n\n <form @change=${(e: Event) => this.onChange(e)}>\n <table>\n <tr>\n <th item>item</th>\n <th>description</th>\n <th>unit</th>\n <th value>value</th>\n <th>specification</th>\n <th>OOC</th>\n <th>OOS</th>\n </tr>\n ${dataItems.map(dataItem => {\n const { ooc, oos } = this.evaluateOOC(dataItem, data?.[dataItem.tag]) || {}\n return html`\n <tr ?ooc=${ooc} ?oos=${oos}>\n <td name>${dataItem.name}</td>\n <td>${dataItem.description}</td>\n <td>${dataItem.unit}</td>\n <td>${this.buildValue(dataItem)}</td>\n <td><pre>${this.buildSpec(dataItem)}</pre></td>\n <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>\n <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>\n </tr>\n `\n })}\n </table>\n </form>`\n }\n\n private onChange(e: Event) {}\n\n private buildSpec(dataItem: DataItem) {\n return OxDataUseCase.elaborateDataItemSpec(this.dataSet!, dataItem)\n }\n\n private buildValue(dataItem: DataItem) {\n const { tag, type } = dataItem\n\n if (!this.dataSample) {\n return ''\n }\n\n const value = this.dataSample?.data[dataItem.tag]\n if (value === undefined) {\n return ''\n }\n const values = value instanceof Array ? value : [value]\n\n const elements = values.map((_: any, idx) => {\n const v = value[idx]\n\n switch (type) {\n case 'boolean':\n return html` <input type=\"checkbox\" name=${tag} .checked=${v} disabled />`\n break\n\n case 'select':\n case 'number':\n case 'string':\n default:\n return String(v === undefined ? '' : v)\n }\n })\n\n return type === 'boolean' ? elements : elements.join(', ')\n }\n\n private evaluateOOC(dataItem: DataItem, value: any) {\n return OxDataUseCase.evaluateItem(this.dataSet!, dataItem, value)\n }\n}\n"]}
@@ -56,6 +56,20 @@ export declare type DataSample = {
56
56
  quota: number;
57
57
  collectedAt: Date;
58
58
  };
59
+ export declare type DataOocState = 'CREATED' | 'REVIEWED' | 'CORRECTED';
60
+ export declare type DataOoc = DataSample & {
61
+ state: DataOocState;
62
+ correctiveAction: string;
63
+ history: {
64
+ user: {
65
+ id: string;
66
+ name: string;
67
+ };
68
+ state: DataOocState;
69
+ comment: string;
70
+ timestamp: number;
71
+ }[];
72
+ };
59
73
  export declare type EvaluationResult = {
60
74
  oos: boolean;
61
75
  ooc: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type SelectOption = { text: string; value: string }\nexport type SelectOptions = SelectOption[]\nexport type TypeOptions = {\n options?: SelectOptions\n [prop: string]: any\n}\n\nexport type DataItem = {\n name: string\n description: string\n sequence: number\n tag: string\n type: string\n active: boolean\n options: TypeOptions\n unit: string\n quota: number\n spec: { [useCase: string]: any }\n}\n\nexport type DataSet = {\n name: string\n description: string\n type: 'manual' | 'automatic'\n useCase: string\n active: boolean\n dataItems: DataItem[]\n spec: { [dataItem: string]: { [useCase: string]: any } }\n}\n\nexport type DataItemSpec = {\n type: string\n label: string\n name: string\n property?: { [option: string]: any }\n}\n\nexport type DataItemSpecSet = {\n name: string\n description: string\n help: string\n specs: DataItemSpec[]\n}\n\nexport type DataSample = {\n name: string\n description: string\n data: any\n spec: any\n quota: number\n collectedAt: Date\n}\n\nexport type EvaluationResult = { oos: boolean; ooc: boolean }\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type SelectOption = { text: string; value: string }\nexport type SelectOptions = SelectOption[]\nexport type TypeOptions = {\n options?: SelectOptions\n [prop: string]: any\n}\n\nexport type DataItem = {\n name: string\n description: string\n sequence: number\n tag: string\n type: string\n active: boolean\n options: TypeOptions\n unit: string\n quota: number\n spec: { [useCase: string]: any }\n}\n\nexport type DataSet = {\n name: string\n description: string\n type: 'manual' | 'automatic'\n useCase: string\n active: boolean\n dataItems: DataItem[]\n spec: { [dataItem: string]: { [useCase: string]: any } }\n}\n\nexport type DataItemSpec = {\n type: string\n label: string\n name: string\n property?: { [option: string]: any }\n}\n\nexport type DataItemSpecSet = {\n name: string\n description: string\n help: string\n specs: DataItemSpec[]\n}\n\nexport type DataSample = {\n name: string\n description: string\n data: any\n spec: any\n quota: number\n collectedAt: Date\n}\n\nexport type DataOocState = 'CREATED' | 'REVIEWED' | 'CORRECTED'\n\nexport type DataOoc = DataSample & {\n state: DataOocState\n correctiveAction: string\n history: {\n user: {\n id: string\n name: string\n }\n state: DataOocState\n comment: string\n timestamp: number\n }[]\n}\n\nexport type EvaluationResult = { oos: boolean; ooc: boolean }\n"]}