@operato/dataset 7.0.80 → 7.1.2

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 (38) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/src/ox-data-entry-form.d.ts +1 -0
  3. package/dist/src/ox-data-entry-form.js +9 -1
  4. package/dist/src/ox-data-entry-form.js.map +1 -1
  5. package/dist/src/ox-data-entry-subgroup-form.js +2 -0
  6. package/dist/src/ox-data-entry-subgroup-form.js.map +1 -1
  7. package/dist/src/ox-data-entry-view.d.ts +1 -0
  8. package/dist/src/ox-data-entry-view.js +4 -0
  9. package/dist/src/ox-data-entry-view.js.map +1 -1
  10. package/dist/src/ox-data-sample-subgroup-view.d.ts +1 -0
  11. package/dist/src/ox-data-sample-subgroup-view.js +4 -0
  12. package/dist/src/ox-data-sample-subgroup-view.js.map +1 -1
  13. package/dist/src/ox-data-sample-view.d.ts +1 -0
  14. package/dist/src/ox-data-sample-view.js +4 -0
  15. package/dist/src/ox-data-sample-view.js.map +1 -1
  16. package/dist/src/ox-data-summary-view.d.ts +2 -0
  17. package/dist/src/ox-data-summary-view.js +15 -0
  18. package/dist/src/ox-data-summary-view.js.map +1 -1
  19. package/dist/stories/ox-data-entry-form.stories.js +11 -1
  20. package/dist/stories/ox-data-entry-form.stories.js.map +1 -1
  21. package/dist/stories/ox-data-ooc-brief-view.stories.js +11 -1
  22. package/dist/stories/ox-data-ooc-brief-view.stories.js.map +1 -1
  23. package/dist/stories/ox-data-ooc-view.stories.js +15 -1
  24. package/dist/stories/ox-data-ooc-view.stories.js.map +1 -1
  25. package/dist/stories/ox-data-sample-view.stories.js +11 -1
  26. package/dist/stories/ox-data-sample-view.stories.js.map +1 -1
  27. package/dist/tsconfig.tsbuildinfo +1 -1
  28. package/package.json +12 -12
  29. package/src/ox-data-entry-form.ts +10 -1
  30. package/src/ox-data-entry-subgroup-form.ts +3 -0
  31. package/src/ox-data-entry-view.ts +5 -0
  32. package/src/ox-data-sample-subgroup-view.ts +5 -0
  33. package/src/ox-data-sample-view.ts +5 -0
  34. package/src/ox-data-summary-view.ts +19 -0
  35. package/stories/ox-data-entry-form.stories.ts +13 -1
  36. package/stories/ox-data-ooc-brief-view.stories.ts +12 -1
  37. package/stories/ox-data-ooc-view.stories.ts +16 -1
  38. package/stories/ox-data-sample-view.stories.ts +12 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,31 @@
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.2](https://github.com/hatiolab/operato/compare/v7.1.1...v7.1.2) (2024-09-02)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * support signature-input type for dataset ([f9e758e](https://github.com/hatiolab/operato/commit/f9e758eeb5efd6926af9d3526f0d7374e0c1b081))
12
+
13
+
14
+
15
+ ### [7.1.1](https://github.com/hatiolab/operato/compare/v7.0.80...v7.1.1) (2024-09-01)
16
+
17
+ **Note:** Version bump only for package @operato/dataset
18
+
19
+
20
+
21
+
22
+
23
+ ## [7.1.0](https://github.com/hatiolab/operato/compare/v7.0.80...v7.1.0) (2024-09-01)
24
+
25
+ **Note:** Version bump only for package @operato/dataset
26
+
27
+
28
+
29
+
30
+
6
31
  ### [7.0.80](https://github.com/hatiolab/operato/compare/v7.0.79...v7.0.80) (2024-08-31)
7
32
 
8
33
  **Note:** Version bump only for package @operato/dataset
package/dist/src/ox-data-entry-form.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@operato/input/ox-input-file.js';
2
+ import '@operato/input/ox-input-signature.js';
2
3
  import './ox-data-entry-subgroup-form.js';
3
4
  import { LitElement, TemplateResult } from 'lit';
4
5
  import { DataSet } from './types.js';
package/dist/src/ox-data-entry-form.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@operato/input/ox-input-file.js';
3
+ import '@operato/input/ox-input-signature.js';
3
4
  import './ox-data-entry-subgroup-form.js';
4
5
  import { css, html, LitElement } from 'lit';
5
6
  import { customElement, property, queryAll } from 'lit/decorators.js';
@@ -91,7 +92,14 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
91
92
  case 'datetime':
92
93
  return html ` <input type="datetime-local" name=${tag} value=${v} />`;
93
94
  case 'file':
94
- return html `<ox-input-file name=${tag} label="Attach Files" accept="*/*" multiple="true"></ox-input-file>`;
95
+ return html `<ox-input-file name=${tag}></ox-input-file>`;
96
+ case 'signature':
97
+ return html `<ox-input-signature
98
+ name=${tag}
99
+ label="Attach Files"
100
+ accept="*/*"
101
+ multiple="true"
102
+ ></ox-input-signature>`;
95
103
  case 'string':
96
104
  default:
97
105
  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":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAM9D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAsH7C,MAAM;;QACJ,OAAO,IAAI,CAAA,kBAAkB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,KAAI,EAAE;YACxB,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW,KAAI,EAAE;QACnC,IAAI,CAAC,WAAW,EAAE;YACd,CAAA;IACV,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAEO,WAAW;;QACjB,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAI,EAAE,CAAA;QAC3E,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACvE,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,EAAE;YAC5G,MAAM,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;YACpD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;;gBACzC,OAAO,CAAC,GAAG,CAAC,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAG,GAAG,CAAC,CAAA;gBAChC,OAAO,OAAO,CAAA;YAChB,CAAC,EAAE,EAAS,CAAC,CAAA;YAEb,OAAO,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;QAC9D,CAAC,CAAC,CAAA;QAEF,OAAO,CAAC,GAAG,IAAI,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,CAAA;IAClF,CAAC;IAEO,oBAAoB,CAAC,QAAgB,EAAE,SAAqB,EAAE,KAA6B;QACjG,OAAO,IAAI,CAAA;;oBAEK,QAAQ;;;wBAGJ,QAAQ;yBACP,SAAS;qBACb,KAAK;;;;KAIrB,CAAA;IACH,CAAC;IAEO,sBAAsB,CAAC,SAAqB;QAClD,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACtC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;YAEhF,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YACxC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE3C,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBACtC,MAAM,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;gBAE7E,QAAQ,IAAI,EAAE,CAAC;oBACb,KAAK,QAAQ;wBACX,OAAO,IAAI,CAAA,kBAAkB,GAAG;;gBAE5B,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,CAAC,KAAK,cAAc,MAAM,CAAC,KAAK,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,WAAW,CACtG;sBACO,CAAA;oBAEZ,KAAK,OAAO;wBACV,OAAO,IAAI,CAAA;wBACC,CAAC,CAAQ,EAAE,EAAE;4BACrB,MAAM,GAAG,GAAG,CAAC,CAAC,aAA4B,CAAA;4BAC1C,MAAM,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC,eAAe,GAAG,IAAI,CAAqB,CAAA;4BACjF,WAAW,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;wBAC1D,CAAC;;0CAE2B,GAAG;;gBAE7B,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;;6BAGO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;+BACnB,MAAM,CAAC,KAAK;iCACV,MAAM,CAAC,KAAK,KAAK,CAAC;;sBAE7B,MAAM,CAAC,IAAI;2BACN,CACZ;mBACI,CAAA;oBAET,KAAK,SAAS;wBACZ,OAAO,IAAI,CAAA,gCAAgC,GAAG,aAAa,CAAC,KAAK,CAAA;oBAEnE,KAAK,QAAQ;wBACX,OAAO,IAAI,CAAA,8BAA8B,GAAG,UAAU,CAAC,KAAK,CAAA;oBAE9D,KAAK,MAAM;wBACT,OAAO,IAAI,CAAA,4BAA4B,GAAG,UAAU,CAAC,KAAK,CAAA;oBAE5D,KAAK,UAAU;wBACb,OAAO,IAAI,CAAA,sCAAsC,GAAG,UAAU,CAAC,KAAK,CAAA;oBAEtE,KAAK,MAAM;wBACT,OAAO,IAAI,CAAA,uBAAuB,GAAG,qEAAqE,CAAA;oBAE5G,KAAK,QAAQ,CAAC;oBACd;wBACE,OAAO,IAAI,CAAA,4BAA4B,GAAG,UAAU,CAAC,KAAK,CAAA;gBAC9D,CAAC;YACH,CAAC,CAAC,CAAA;YAEF,OAAO,IAAI,CAAA;oBACG,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;mDACC,WAAW;wBACtC,QAAQ;aACnB,CAAA;QACT,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,UAAU;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAQ,CAAC,SAAS,CAAA;QACzC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAEvE,MAAM,aAAa,GAAG,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,MAAM,CACpD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE;YAChB,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;YAE9B,MAAM,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CACxC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,GAAG,GAAG,CAAiC,CAC5D,CAAA;YAEvB,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvB,GAAG,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACxF,CAAC;YAED,OAAO,GAAG,CAAA;QACZ,CAAC,EACD,EAA4B,CAC7B,CAAA;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YAC3D,OAAO;gBACL,GAAG,KAAK;gBACR,GAAG,QAAQ,CAAC,UAAU,EAAE;aACzB,CAAA;QACH,CAAC,EAAE,aAAa,IAAI,EAAE,CAAC,CAAA;IACzB,CAAC;IAEO,qBAAqB,CAAC,SAAqB;QACjD,MAAM,gBAAgB,GAAoC,EAAE,CAAA;QAE5D,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;YACjC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;YAE1B,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC7B,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;gBAC9B,CAAC;gBAED,gBAAgB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YACxC,CAAC;QACH,CAAC;QAED,OAAO,gBAAgB,CAAA;IACzB,CAAC;;AA7RM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8GlB,AA9GY,CA8GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAEjB;IAAxC,QAAQ,CAAC,6BAA6B,CAAC;kDAAgD;AApH7E,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CA+R3B","sourcesContent":["import '@operato/input/ox-input-file.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} label=\"Attach Files\" accept=\"*/*\" multiple=\"true\"></ox-input-file>`\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 ></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}></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"]}
package/dist/src/ox-data-entry-subgroup-form.js CHANGED
@@ -62,6 +62,8 @@ let OxDataEntrySubgroupForm = class OxDataEntrySubgroupForm extends LitElement {
62
62
  return columnConfig;
63
63
  case 'file':
64
64
  return columnConfig;
65
+ case 'signature':
66
+ return columnConfig;
65
67
  case 'string':
66
68
  return columnConfig;
67
69
  default:
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 '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 >\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"]}
package/dist/src/ox-data-entry-view.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@operato/input/ox-input-file.js';
2
+ import '@operato/input/ox-input-signature.js';
2
3
  import { LitElement, nothing } from 'lit';
3
4
  import { DataSet } from './types.js';
4
5
  export declare class OxDataEntryView extends LitElement {
package/dist/src/ox-data-entry-view.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@operato/input/ox-input-file.js';
3
+ import '@operato/input/ox-input-signature.js';
3
4
  import { css, html, LitElement, nothing } from 'lit';
4
5
  import { customElement, property } from 'lit/decorators.js';
5
6
  import { i18next } from '@operato/i18n';
@@ -117,6 +118,9 @@ let OxDataEntryView = class OxDataEntryView extends LitElement {
117
118
  const files = values.flat();
118
119
  return files.map(file => html `<a @click=${() => this.download(file)}>${file.name}</a></br>`);
119
120
  }
121
+ if (type == 'signature') {
122
+ return html ` <ox-input-signature .value=${value} disabled></ox-input-signature>`;
123
+ }
120
124
  const elements = values.map((v, idx) => {
121
125
  switch (typeof v) {
122
126
  case 'boolean':
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'\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 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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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 '@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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@operato/input/ox-input-file.js';
2
+ import '@operato/input/ox-input-signature.js';
2
3
  import { LitElement } from 'lit';
3
4
  import { DataSample } from './types.js';
4
5
  export declare class OxDataSampleSubgroupView extends LitElement {
package/dist/src/ox-data-sample-subgroup-view.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@operato/input/ox-input-file.js';
3
+ import '@operato/input/ox-input-signature.js';
3
4
  import { css, html, LitElement, nothing } from 'lit';
4
5
  import { customElement, property } from 'lit/decorators.js';
5
6
  import { i18next } from '@operato/i18n';
@@ -70,6 +71,9 @@ let OxDataSampleSubgroupView = class OxDataSampleSubgroupView extends LitElement
70
71
  const files = values.flat();
71
72
  return files.map(file => html `<a @click=${() => this.download(file)}>${file.name}</a></br>`);
72
73
  }
74
+ if (type == 'signature') {
75
+ return html ` <ox-input-signature .value=${value} disabled></ox-input-signature>`;
76
+ }
73
77
  const elements = values.map((v, idx) => {
74
78
  switch (typeof v) {
75
79
  case 'boolean':
package/dist/src/ox-data-sample-subgroup-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-sample-subgroup-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-subgroup-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.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-sample-subgroup-view')\nexport class OxDataSampleSubgroupView 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\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(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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-sample-subgroup-view.js","sourceRoot":"","sources":["../../src/ox-data-sample-subgroup-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 { DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-sample-subgroup-view')\nexport class OxDataSampleSubgroupView 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\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(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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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-view.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@operato/input/ox-input-file.js';
2
+ import '@operato/input/ox-input-signature.js';
2
3
  import './ox-data-sample-subgroup-view.js';
3
4
  import { LitElement } from 'lit';
4
5
  import { DataSample } from './types.js';
package/dist/src/ox-data-sample-view.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@operato/input/ox-input-file.js';
3
+ import '@operato/input/ox-input-signature.js';
3
4
  import './ox-data-sample-subgroup-view.js';
4
5
  import { css, html, LitElement, nothing } from 'lit';
5
6
  import { customElement, property } from 'lit/decorators.js';
@@ -99,6 +100,9 @@ let OxDataSampleView = class OxDataSampleView extends LitElement {
99
100
  const files = values.flat();
100
101
  return files.map(file => html `<a @click=${() => this.download(file)}>${file.name}</a></br>`);
101
102
  }
103
+ if (type == 'signature') {
104
+ return html ` <ox-input-signature .value=${value} disabled></ox-input-signature>`;
105
+ }
102
106
  const elements = values.map((v, idx) => {
103
107
  switch (typeof v) {
104
108
  case 'boolean':
package/dist/src/ox-data-sample-view.js.map CHANGED
@@ -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'\nimport './ox-data-sample-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, DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/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 }\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 print {\n :host {\n display: block;\n }\n }\n\n @media screen and (max-width: 480px) {\n th {\n min-width: 50px;\n }\n }\n `\n\n @property({ type: Object }) dataSample?: DataSample\n\n render() {\n if (!this.dataSample) {\n return html``\n }\n\n const {\n name,\n description,\n collectedAt,\n workDate,\n workShift,\n useCase,\n data = {},\n judgment,\n dataItems = []\n } = this.dataSample\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\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>\n <md-icon>info</md-icon> ${description}<br />\n <md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |\n <md-icon>pending_actions</md-icon> ${i18next.t('field.collected-at')}:\n ${formatter.format(new Date(collectedAt!))}\n </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 } = judgment?.[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-sample-subgroup-view\n .subgroup=${subgroup}\n .dataSample=${this.dataSample}\n ></ox-data-sample-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.map(file => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)\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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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-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'\nimport '@operato/input/ox-input-signature.js'\nimport './ox-data-sample-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, DataSample, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/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 }\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 print {\n :host {\n display: block;\n }\n }\n\n @media screen and (max-width: 480px) {\n th {\n min-width: 50px;\n }\n }\n `\n\n @property({ type: Object }) dataSample?: DataSample\n\n render() {\n if (!this.dataSample) {\n return html``\n }\n\n const {\n name,\n description,\n collectedAt,\n workDate,\n workShift,\n useCase,\n data = {},\n judgment,\n dataItems = []\n } = this.dataSample\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\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>\n <md-icon>info</md-icon> ${description}<br />\n <md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |\n <md-icon>pending_actions</md-icon> ${i18next.t('field.collected-at')}:\n ${formatter.format(new Date(collectedAt!))}\n </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 } = judgment?.[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-sample-subgroup-view\n .subgroup=${subgroup}\n .dataSample=${this.dataSample}\n ></ox-data-sample-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.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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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-summary-view.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@operato/input/ox-input-file.js';
2
+ import '@operato/input/ox-input-signature.js';
2
3
  import { LitElement } from 'lit';
3
4
  import { DataSummary } from './types.js';
4
5
  export declare class OxDataSummaryView extends LitElement {
@@ -6,5 +7,6 @@ export declare class OxDataSummaryView extends LitElement {
6
7
  dataSummary?: DataSummary;
7
8
  render(): import("lit-html").TemplateResult<1>;
8
9
  private buildSpec;
10
+ private download;
9
11
  private buildValue;
10
12
  }
package/dist/src/ox-data-summary-view.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@operato/input/ox-input-file.js';
3
+ import '@operato/input/ox-input-signature.js';
3
4
  import { css, html, LitElement } from 'lit';
4
5
  import { customElement, property } from 'lit/decorators.js';
5
6
  import { i18next } from '@operato/i18n';
@@ -49,11 +50,25 @@ let OxDataSummaryView = class OxDataSummaryView extends LitElement {
49
50
  buildSpec(useCaseNames, spec) {
50
51
  return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec);
51
52
  }
53
+ download(file) {
54
+ const element = document.createElement('a');
55
+ element.setAttribute('href', file.fullpath);
56
+ element.setAttribute('download', file.name);
57
+ document.body.appendChild(element);
58
+ element.click();
59
+ }
52
60
  buildValue(type, value) {
53
61
  if (value === undefined) {
54
62
  return '';
55
63
  }
56
64
  const values = value instanceof Array ? value : [value];
65
+ if (type == 'file') {
66
+ const files = values.flat();
67
+ return files.map(file => html `<a @click=${() => this.download(file)}>${file.name}</a></br>`);
68
+ }
69
+ if (type == 'signature') {
70
+ return html ` <ox-input-signature .value=${value} disabled></ox-input-signature>`;
71
+ }
57
72
  const elements = values.map((v, idx) => {
58
73
  switch (typeof v) {
59
74
  case 'boolean':
package/dist/src/ox-data-summary-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-data-summary-view.js","sourceRoot":"","sources":["../../src/ox-data-summary-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAGtD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IA8F/C,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QACnG,MAAM,YAAY,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,KAAI,EAAE,CAAA;QAEhF,OAAO,IAAI,CAAA,QAAQ,IAAI;;kCAEO,WAAW;mCACV,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,MAAM;;;;;;uBAMtD,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;kBAC5B,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;kBAC9B,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;kBACtC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;wBACjB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;kBAC9B,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;;YAE7B,SAAS;aACR,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;aACjC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACd,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;YAC5F,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;YAE1B,OAAO,IAAI,CAAA;;6BAEI,IAAI;wBACT,WAAW;wBACX,IAAI;wBACJ,IAAI;wBACJ,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;6BACvB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC;;eAEhD,CAAA;QACH,CAAC,CAAC;;cAEA,CAAA;IACZ,CAAC;IAEO,SAAS,CAAC,YAAsB,EAAE,IAAsB;QAC9D,OAAO,aAAa,CAAC,qBAAqB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;IAChE,CAAC;IAEO,UAAU,CAAC,IAAY,EAAE,KAAkB;QACjD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO,EAAE,CAAA;QACX,CAAC;QACD,MAAM,MAAM,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;QAEvD,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,GAAG,EAAE,EAAE;YAC1C,QAAQ,OAAO,CAAC,EAAE,CAAC;gBACjB,KAAK,SAAS;oBACZ,OAAO,IAAI,CAAA,oCAAoC,CAAC,cAAc,CAAA;oBAC9D,MAAK;gBAEP;oBACE,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;wBACnB,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAA;oBACzC,CAAC;yBAAM,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;wBAC9B,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAA;oBACrC,CAAC;oBACD,OAAO,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAA;YAClB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACxE,CAAC;;AArKM,wBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFlB,AAzFY,CAyFZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA0B;AA5F1C,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAuK7B","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataSummary, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-summary-view')\nexport class OxDataSummaryView 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 }\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 }) dataSummary?: DataSummary\n\n render() {\n if (!this.dataSummary) {\n return html``\n }\n\n const { name, description, date, period, summary = {}, dataItems = [], useCase } = this.dataSummary\n const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n\n return html` <h2>${name}</h2>\n <p page-description>\n <md-icon>info</md-icon> ${description}<br />\n <md-icon>alarm</md-icon> ${i18next.t('field.date')}: ${date} ${period}\n </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 </tr>\n ${dataItems\n .filter(dataItem => dataItem.stat)\n .map(dataItem => {\n const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n const value = summary[tag]\n\n return html`\n <tr>\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 </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 buildValue(type: string, value: any | any[]) {\n if (value === undefined) {\n return ''\n }\n const values = value instanceof Array ? value : [value]\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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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-summary-view.js","sourceRoot":"","sources":["../../src/ox-data-summary-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 } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { DataSummary, DataSpecLimitSet } from './types.js'\nimport { OxDataUseCase } from './usecase/ox-data-use-case.js'\n\n@customElement('ox-data-summary-view')\nexport class OxDataSummaryView 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 }\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 }) dataSummary?: DataSummary\n\n render() {\n if (!this.dataSummary) {\n return html``\n }\n\n const { name, description, date, period, summary = {}, dataItems = [], useCase } = this.dataSummary\n const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []\n\n return html` <h2>${name}</h2>\n <p page-description>\n <md-icon>info</md-icon> ${description}<br />\n <md-icon>alarm</md-icon> ${i18next.t('field.date')}: ${date} ${period}\n </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 </tr>\n ${dataItems\n .filter(dataItem => dataItem.stat)\n .map(dataItem => {\n const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem\n const value = summary[tag]\n\n return html`\n <tr>\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 </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 new Date(v).toLocaleDateString()\n } else if (type == 'datetime') {\n return 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/stories/ox-data-entry-form.stories.js CHANGED
@@ -168,6 +168,15 @@ const dataSet = {
168
168
  type: 'file',
169
169
  quota: 1,
170
170
  active: true
171
+ },
172
+ {
173
+ name: '서명',
174
+ description: '서명',
175
+ sequence: 5,
176
+ tag: 'signature',
177
+ type: 'signature',
178
+ quota: 1,
179
+ active: true
171
180
  }
172
181
  ]
173
182
  };
@@ -176,7 +185,8 @@ var value = {
176
185
  humid: [20, 23, 21, 26, 27],
177
186
  inspection: [true, false, true],
178
187
  evaluation: ['최우수', '보통', '우수'],
179
- comment: '이것이 코멘트입니다.'
188
+ comment: '이것이 코멘트입니다.',
189
+ signature: 'data:image/png;base64,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'
180
190
  };
181
191
  const Template = ({}) => html `
182
192
  <link