@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.0

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 (216) hide show
  1. package/CHANGELOG.md +433 -0
  2. package/demo/data-grist-test.html +1 -1
  3. package/demo/index.html +1 -1
  4. package/dist/src/data-card/data-card-field.js +2 -2
  5. package/dist/src/data-card/data-card-field.js.map +1 -1
  6. package/dist/src/data-card/data-card-gutter-menu.js +5 -5
  7. package/dist/src/data-card/data-card-gutter-menu.js.map +1 -1
  8. package/dist/src/data-card/data-card-gutter.js +6 -6
  9. package/dist/src/data-card/data-card-gutter.js.map +1 -1
  10. package/dist/src/data-card/data-card.js +7 -9
  11. package/dist/src/data-card/data-card.js.map +1 -1
  12. package/dist/src/data-card/record-card.js +9 -10
  13. package/dist/src/data-card/record-card.js.map +1 -1
  14. package/dist/src/data-grid/data-grid-accum-field.js +12 -5
  15. package/dist/src/data-grid/data-grid-accum-field.js.map +1 -1
  16. package/dist/src/data-grid/data-grid-body-style.js +12 -0
  17. package/dist/src/data-grid/data-grid-body-style.js.map +1 -1
  18. package/dist/src/data-grid/data-grid-body.d.ts +0 -1
  19. package/dist/src/data-grid/data-grid-body.js +14 -21
  20. package/dist/src/data-grid/data-grid-body.js.map +1 -1
  21. package/dist/src/data-grid/data-grid-field.js +8 -2
  22. package/dist/src/data-grid/data-grid-field.js.map +1 -1
  23. package/dist/src/data-grid/data-grid-footer.js +4 -2
  24. package/dist/src/data-grid/data-grid-footer.js.map +1 -1
  25. package/dist/src/data-grid/data-grid-header.js +9 -6
  26. package/dist/src/data-grid/data-grid-header.js.map +1 -1
  27. package/dist/src/data-grid/data-grid.js +23 -1
  28. package/dist/src/data-grid/data-grid.js.map +1 -1
  29. package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js +3 -0
  30. package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js.map +1 -1
  31. package/dist/src/data-grist.d.ts +10 -2
  32. package/dist/src/data-grist.js +71 -8
  33. package/dist/src/data-grist.js.map +1 -1
  34. package/dist/src/data-list/data-list-field.js +5 -5
  35. package/dist/src/data-list/data-list-field.js.map +1 -1
  36. package/dist/src/data-list/data-list-gutter.js +3 -3
  37. package/dist/src/data-list/data-list-gutter.js.map +1 -1
  38. package/dist/src/data-list/data-list.js +4 -4
  39. package/dist/src/data-list/data-list.js.map +1 -1
  40. package/dist/src/data-list/record-partial.js +9 -10
  41. package/dist/src/data-list/record-partial.js.map +1 -1
  42. package/dist/src/data-manipulator.d.ts +1 -1
  43. package/dist/src/data-manipulator.js +5 -5
  44. package/dist/src/data-manipulator.js.map +1 -1
  45. package/dist/src/data-report/data-report-field.js +2 -1
  46. package/dist/src/data-report/data-report-field.js.map +1 -1
  47. package/dist/src/data-report/data-report-header.js +2 -2
  48. package/dist/src/data-report/data-report-header.js.map +1 -1
  49. package/dist/src/editors/ox-grist-editor-select.js +37 -25
  50. package/dist/src/editors/ox-grist-editor-select.js.map +1 -1
  51. package/dist/src/editors/ox-input-tree.js +8 -8
  52. package/dist/src/editors/ox-input-tree.js.map +1 -1
  53. package/dist/src/filters/filter-input-barcode.js +1 -0
  54. package/dist/src/filters/filter-input-barcode.js.map +1 -1
  55. package/dist/src/filters/filter-select.js +30 -16
  56. package/dist/src/filters/filter-select.js.map +1 -1
  57. package/dist/src/filters/filter-styles.js +46 -31
  58. package/dist/src/filters/filter-styles.js.map +1 -1
  59. package/dist/src/filters/filters-form.d.ts +15 -4
  60. package/dist/src/filters/filters-form.js +205 -70
  61. package/dist/src/filters/filters-form.js.map +1 -1
  62. package/dist/src/gutters/gutter-dirty.js +2 -2
  63. package/dist/src/gutters/gutter-dirty.js.map +1 -1
  64. package/dist/src/index.d.ts +1 -0
  65. package/dist/src/index.js +1 -0
  66. package/dist/src/index.js.map +1 -1
  67. package/dist/src/personalizer/index.d.ts +1 -0
  68. package/dist/src/personalizer/index.js +2 -0
  69. package/dist/src/personalizer/index.js.map +1 -0
  70. package/dist/src/personalizer/ox-grist-filter-personalizer.d.ts +8 -0
  71. package/dist/src/personalizer/ox-grist-filter-personalizer.js +177 -0
  72. package/dist/src/personalizer/ox-grist-filter-personalizer.js.map +1 -0
  73. package/dist/src/personalizer/ox-grist-personalizer.d.ts +8 -0
  74. package/dist/src/personalizer/ox-grist-personalizer.js +178 -0
  75. package/dist/src/personalizer/ox-grist-personalizer.js.map +1 -0
  76. package/dist/src/record-view/record-creator.js +2 -2
  77. package/dist/src/record-view/record-creator.js.map +1 -1
  78. package/dist/src/renderers/ox-grist-renderer-select.js +34 -4
  79. package/dist/src/renderers/ox-grist-renderer-select.js.map +1 -1
  80. package/dist/src/renderers/ox-grist-renderer-tree.js +8 -8
  81. package/dist/src/renderers/ox-grist-renderer-tree.js.map +1 -1
  82. package/dist/src/sorters/sorters-control.js +3 -3
  83. package/dist/src/sorters/sorters-control.js.map +1 -1
  84. package/dist/src/types.d.ts +41 -2
  85. package/dist/src/types.js.map +1 -1
  86. package/dist/stories/{accumulator.stories.d.ts → accumulator-format.stories.d.ts} +9 -0
  87. package/dist/stories/{accumulator.stories.js → accumulator-format.stories.js} +24 -12
  88. package/dist/stories/accumulator-format.stories.js.map +1 -0
  89. package/dist/stories/barcode-input-filter.stories.d.ts +5 -0
  90. package/dist/stories/barcode-input-filter.stories.js +29 -5
  91. package/dist/stories/barcode-input-filter.stories.js.map +1 -1
  92. package/dist/stories/bounded-select-filters.stories.d.ts +30 -0
  93. package/dist/stories/bounded-select-filters.stories.js +288 -0
  94. package/dist/stories/bounded-select-filters.stories.js.map +1 -0
  95. package/dist/stories/bounded-select-record.stories.d.ts +30 -0
  96. package/dist/stories/bounded-select-record.stories.js +291 -0
  97. package/dist/stories/bounded-select-record.stories.js.map +1 -0
  98. package/dist/stories/click-event.stories.d.ts +41 -0
  99. package/dist/stories/click-event.stories.js +234 -0
  100. package/dist/stories/click-event.stories.js.map +1 -0
  101. package/dist/stories/creatable-only-column.stories.d.ts +5 -0
  102. package/dist/stories/creatable-only-column.stories.js +46 -21
  103. package/dist/stories/creatable-only-column.stories.js.map +1 -1
  104. package/dist/stories/default-filters.stories.d.ts +5 -0
  105. package/dist/stories/default-filters.stories.js +84 -17
  106. package/dist/stories/default-filters.stories.js.map +1 -1
  107. package/dist/stories/dynamic-editable.stories.d.ts +5 -0
  108. package/dist/stories/dynamic-editable.stories.js +44 -21
  109. package/dist/stories/dynamic-editable.stories.js.map +1 -1
  110. package/dist/stories/empty-sorters.stories.d.ts +7 -1
  111. package/dist/stories/empty-sorters.stories.js +41 -17
  112. package/dist/stories/empty-sorters.stories.js.map +1 -1
  113. package/dist/stories/explicit-fetch.stories.d.ts +5 -0
  114. package/dist/stories/explicit-fetch.stories.js +40 -17
  115. package/dist/stories/explicit-fetch.stories.js.map +1 -1
  116. package/dist/stories/fixed-column.stories.d.ts +5 -0
  117. package/dist/stories/fixed-column.stories.js +53 -30
  118. package/dist/stories/fixed-column.stories.js.map +1 -1
  119. package/dist/stories/grid-setting.stories.d.ts +20 -4
  120. package/dist/stories/grid-setting.stories.js +96 -51
  121. package/dist/stories/grid-setting.stories.js.map +1 -1
  122. package/dist/stories/grist-modes.stories.d.ts +8 -2
  123. package/dist/stories/grist-modes.stories.js +58 -35
  124. package/dist/stories/grist-modes.stories.js.map +1 -1
  125. package/dist/stories/group-header.stories.d.ts +5 -0
  126. package/dist/stories/group-header.stories.js +53 -30
  127. package/dist/stories/group-header.stories.js.map +1 -1
  128. package/dist/stories/textarea.stories.d.ts +8 -2
  129. package/dist/stories/textarea.stories.js +37 -13
  130. package/dist/stories/textarea.stories.js.map +1 -1
  131. package/dist/stories/tree-column-with-checkbox.stories.d.ts +5 -0
  132. package/dist/stories/tree-column-with-checkbox.stories.js +44 -21
  133. package/dist/stories/tree-column-with-checkbox.stories.js.map +1 -1
  134. package/dist/stories/tree-column.stories.d.ts +5 -0
  135. package/dist/stories/tree-column.stories.js +44 -21
  136. package/dist/stories/tree-column.stories.js.map +1 -1
  137. package/dist/tsconfig.tsbuildinfo +1 -1
  138. package/docs/default-value/value-generator/date-generator.md +29 -0
  139. package/docs/default-value/value-generator/hour-time-generator.md +33 -0
  140. package/docs/default-value/value-generator/minute-time-generator.md +33 -0
  141. package/docs/default-value/value-generator/month-date-generator.md +2 -0
  142. package/docs/default-value/value-generator/now-generator.md +29 -0
  143. package/docs/default-value/value-generator/time-generator.md +31 -0
  144. package/docs/default-value/value-generator/today-generator.md +29 -0
  145. package/docs/default-value/value-generator/week-date-generator.md +31 -0
  146. package/docs/default-value/value-generator/year-date-generator.md +31 -0
  147. package/package.json +15 -10
  148. package/src/data-card/data-card-field.ts +2 -2
  149. package/src/data-card/data-card-gutter-menu.ts +5 -5
  150. package/src/data-card/data-card-gutter.ts +6 -6
  151. package/src/data-card/data-card.ts +7 -9
  152. package/src/data-card/record-card.ts +9 -10
  153. package/src/data-grid/data-grid-accum-field.ts +11 -5
  154. package/src/data-grid/data-grid-body-style.ts +12 -0
  155. package/src/data-grid/data-grid-body.ts +16 -29
  156. package/src/data-grid/data-grid-field.ts +7 -2
  157. package/src/data-grid/data-grid-footer.ts +4 -2
  158. package/src/data-grid/data-grid-header.ts +8 -6
  159. package/src/data-grid/data-grid.ts +23 -1
  160. package/src/data-grid/event-handlers/data-grid-body-click-handler.ts +4 -0
  161. package/src/data-grist.ts +88 -8
  162. package/src/data-list/data-list-field.ts +5 -5
  163. package/src/data-list/data-list-gutter.ts +3 -3
  164. package/src/data-list/data-list.ts +4 -4
  165. package/src/data-list/record-partial.ts +9 -10
  166. package/src/data-manipulator.ts +5 -5
  167. package/src/data-report/data-report-field.ts +2 -1
  168. package/src/data-report/data-report-header.ts +2 -2
  169. package/src/editors/ox-grist-editor-select.ts +41 -28
  170. package/src/editors/ox-input-tree.ts +8 -8
  171. package/src/filters/filter-input-barcode.ts +1 -0
  172. package/src/filters/filter-select.ts +41 -28
  173. package/src/filters/filter-styles.ts +46 -31
  174. package/src/filters/filters-form.ts +273 -119
  175. package/src/gutters/gutter-dirty.ts +2 -2
  176. package/src/index.ts +1 -0
  177. package/src/personalizer/index.ts +1 -0
  178. package/src/personalizer/ox-grist-filter-personalizer.ts +191 -0
  179. package/src/personalizer/ox-grist-personalizer.ts +192 -0
  180. package/src/record-view/record-creator.ts +2 -2
  181. package/src/renderers/ox-grist-renderer-select.ts +41 -6
  182. package/src/renderers/ox-grist-renderer-tree.ts +8 -8
  183. package/src/sorters/sorters-control.ts +3 -3
  184. package/src/types.ts +53 -2
  185. package/stories/{accumulator.stories.ts → accumulator-format.stories.ts} +33 -12
  186. package/stories/barcode-input-filter.stories.ts +31 -6
  187. package/stories/bounded-select-filters.stories.ts +339 -0
  188. package/stories/bounded-select-record.stories.ts +342 -0
  189. package/stories/click-event.stories.ts +269 -0
  190. package/stories/creatable-only-column.stories.ts +54 -28
  191. package/stories/default-filters.stories.ts +92 -24
  192. package/stories/dynamic-editable.stories.ts +52 -28
  193. package/stories/empty-sorters.stories.ts +51 -25
  194. package/stories/explicit-fetch.stories.ts +48 -24
  195. package/stories/fixed-column.stories.ts +62 -39
  196. package/stories/grid-setting.stories.ts +120 -63
  197. package/stories/grist-modes.stories.ts +74 -46
  198. package/stories/group-header.stories.ts +61 -39
  199. package/stories/textarea.stories.ts +49 -17
  200. package/stories/tree-column-with-checkbox.stories.ts +52 -28
  201. package/stories/tree-column.stories.ts +52 -28
  202. package/themes/dark-hc.css +151 -0
  203. package/themes/dark-mc.css +151 -0
  204. package/themes/dark.css +151 -0
  205. package/themes/grist-theme.css +103 -100
  206. package/themes/light-hc.css +151 -0
  207. package/themes/light-mc.css +151 -0
  208. package/themes/light.css +151 -0
  209. package/themes/md-typescale-styles.css +100 -0
  210. package/themes/spacing.css +43 -0
  211. package/themes/state-color.css +6 -0
  212. package/dist/stories/accumulator.stories.js.map +0 -1
  213. package/themes/app-theme.css +0 -145
  214. package/themes/form-theme.css +0 -75
  215. package/themes/oops-theme.css +0 -26
  216. package/themes/report-theme.css +0 -47
@@ -5,10 +5,11 @@ import '@operato/popup/ox-popup-list.js';
5
5
  import '@operato/input/ox-input-search.js';
6
6
  import { css, html, LitElement } from 'lit';
7
7
  import { customElement, property, queryAsync, state } from 'lit/decorators.js';
8
+ import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
8
9
  import { getDefaultValue } from '@operato/time-calculator';
9
10
  import { FilterStyles } from './filter-styles';
10
11
  import { getFilterRenderer } from './registry';
11
- let FiltersForm = class FiltersForm extends LitElement {
12
+ let OxFiltersForm = class OxFiltersForm extends LitElement {
12
13
  constructor() {
13
14
  super(...arguments);
14
15
  this.value = [];
@@ -17,12 +18,14 @@ let FiltersForm = class FiltersForm extends LitElement {
17
18
  this.empty = true;
18
19
  this.filterColumns = [];
19
20
  this.searchColumns = [];
21
+ this.autoUpdateTargetsOnChange = {};
20
22
  }
21
23
  connectedCallback() {
22
24
  super.connectedCallback();
23
25
  const grist = this.closest('ox-grist');
24
26
  if (grist) {
25
27
  this.config = grist.compiledConfig;
28
+ this.personalConfigProvider = grist.personalConfigProvider;
26
29
  grist.addEventListener('config-change', (e) => {
27
30
  this.config = e.detail;
28
31
  });
@@ -34,14 +37,33 @@ let FiltersForm = class FiltersForm extends LitElement {
34
37
  this.value = filters;
35
38
  });
36
39
  this.renderRoot.addEventListener('change', async (e) => {
37
- this.dispatchEvent(new CustomEvent('fetch-params-change', {
38
- bubbles: true,
39
- composed: true,
40
- detail: {
41
- filters: await this.getQueryFilters(),
42
- from: 'filters-form'
43
- }
44
- }));
40
+ const { target, detail: value } = e;
41
+ const name = target.name;
42
+ const { filter } = this.filterColumns.find(filter => filter.name == name) || {};
43
+ if (this.autoUpdateTargetsOnChange[name]) {
44
+ /* 일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함. */
45
+ ;
46
+ (this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
47
+ const target = this.renderRoot.querySelector(`[name='${name}']`);
48
+ if (target) {
49
+ ;
50
+ target.value = '';
51
+ }
52
+ });
53
+ await this.updateObjectValues();
54
+ this.requestUpdate();
55
+ }
56
+ const onchange = typeof filter == 'object' ? filter.onchange : null;
57
+ const keepGoing = onchange ? await onchange.call(null, value !== null && value !== void 0 ? value : target.value, this) : true;
58
+ keepGoing &&
59
+ this.dispatchEvent(new CustomEvent('fetch-params-change', {
60
+ bubbles: true,
61
+ composed: true,
62
+ detail: {
63
+ filters: await this.getQueryFilters(),
64
+ from: 'filters-form'
65
+ }
66
+ }));
45
67
  });
46
68
  }
47
69
  }
@@ -56,25 +78,12 @@ let FiltersForm = class FiltersForm extends LitElement {
56
78
  return getDefaultValue(defaultValue, this);
57
79
  }
58
80
  }
59
- updated(changes) {
60
- if (changes.has('config')) {
61
- const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter);
62
- this.filterColumns = filters.filter((columnConfig) => {
63
- const filter = columnConfig.filter;
64
- return filter.operator !== 'search';
65
- });
66
- this.searchColumns = filters.filter(columnConfig => {
67
- const filter = columnConfig.filter;
68
- return filter.operator === 'search';
69
- });
70
- const grist = this.closest('ox-grist');
71
- this.value = ((grist === null || grist === void 0 ? void 0 : grist.filters) || []).map(filter => {
72
- return {
73
- ...filter,
74
- value: this.buildDefaultValue(filter.operator, filter.value)
75
- };
76
- });
77
- this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0;
81
+ async updated(changes) {
82
+ if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
83
+ this.personalConfig = await this.personalConfigProvider.load();
84
+ }
85
+ else if (changes.has('config') || changes.has('personalConfig')) {
86
+ this.applyUpdatedConfiguration();
78
87
  }
79
88
  }
80
89
  render() {
@@ -84,6 +93,7 @@ let FiltersForm = class FiltersForm extends LitElement {
84
93
  ? html ``
85
94
  : html `
86
95
  <form
96
+ class="md-typescale-body-medium-prominent"
87
97
  @submit=${(e) => {
88
98
  e.stopPropagation();
89
99
  e.preventDefault();
@@ -91,15 +101,17 @@ let FiltersForm = class FiltersForm extends LitElement {
91
101
  grist && grist.fetch();
92
102
  }}
93
103
  >
94
- ${this.searchColumns.length === 0 || this.withoutSearch
95
- ? html ``
96
- : html `
97
- <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
98
- `}
99
- ${this.filterColumns.map((column) => {
104
+ ${this.filterColumns
105
+ .filter(column => !column.filter.hidden)
106
+ .map((column) => {
100
107
  var _a, _b, _c;
101
108
  const { name, header, label, filter } = column;
102
109
  const type = filter.type;
110
+ if (type == 'search') {
111
+ return html `
112
+ <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
113
+ `;
114
+ }
103
115
  const operator = filter.operator;
104
116
  const filterLabel = filter.label;
105
117
  const labelText = filterLabel !== undefined
@@ -119,17 +131,17 @@ let FiltersForm = class FiltersForm extends LitElement {
119
131
  ? renderer(column, value, this)
120
132
  : type !== 'select' && labelText
121
133
  ? html `<label filter-title ?between=${operator === 'between'}
122
- ><span>${labelText}</span> ${renderer(column, value, this)}
123
- </label> `
134
+ ><span>${labelText}</span> ${renderer(column, value, this)}
135
+ </label> `
124
136
  : type !== 'select' && !labelText
125
137
  ? renderer(column, value, this)
126
138
  : operator === 'in'
127
139
  ? html `
128
- <ox-select
129
- name=${name}
130
- placeholder=${labelText}
131
- .value=${value}
132
- @change=${(e) => {
140
+ <ox-select
141
+ name=${name}
142
+ placeholder=${labelText}
143
+ .value=${value}
144
+ @change=${(e) => {
133
145
  var _a;
134
146
  return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
135
147
  detail: {
@@ -139,18 +151,18 @@ let FiltersForm = class FiltersForm extends LitElement {
139
151
  }
140
152
  }));
141
153
  }}
142
- >
143
- <ox-popup-list multiple attr-selected="checked" with-search>
144
- ${renderer(column, value, this)}
145
- </ox-popup-list>
146
- </ox-select>
147
- `
154
+ >
155
+ <ox-popup-list multiple attr-selected="checked" with-search>
156
+ ${renderer(column, value, this)}
157
+ </ox-popup-list>
158
+ </ox-select>
159
+ `
148
160
  : html `
149
- <ox-select
150
- name=${name}
151
- placeholder=${labelText}
152
- .value=${value}
153
- @change=${(e) => {
161
+ <ox-select
162
+ name=${name}
163
+ placeholder=${labelText}
164
+ .value=${value}
165
+ @change=${(e) => {
154
166
  var _a;
155
167
  return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
156
168
  detail: {
@@ -160,14 +172,95 @@ let FiltersForm = class FiltersForm extends LitElement {
160
172
  }
161
173
  }));
162
174
  }}
163
- >
164
- <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
165
- </ox-select>
166
- `;
175
+ >
176
+ <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
177
+ </ox-select>
178
+ `;
167
179
  })}
168
180
  </form>
181
+ <slot name="setting"></slot>
169
182
  `;
170
183
  }
184
+ applyUpdatedConfiguration() {
185
+ var _a;
186
+ if (!this.config) {
187
+ return;
188
+ }
189
+ const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter);
190
+ this.filterColumns = filters.filter((columnConfig) => {
191
+ const filter = columnConfig.filter;
192
+ return filter.operator !== 'search';
193
+ });
194
+ this.searchColumns = filters.filter(columnConfig => {
195
+ const filter = columnConfig.filter;
196
+ return filter.operator === 'search';
197
+ });
198
+ if (this.searchColumns.length > 0 && !this.withoutSearch) {
199
+ this.filterColumns.unshift({ name: 'search', filter: { type: 'search' } });
200
+ }
201
+ if (!this.personalConfig) {
202
+ this.personalFilters = this.filterColumns.map(column => {
203
+ return { name: column.name };
204
+ });
205
+ }
206
+ else {
207
+ const { filters: personalFilters = [] } = this.personalConfig;
208
+ if (personalFilters) {
209
+ const xfilters = this.filterColumns.map(column => {
210
+ return personalFilters.find(pFilter => pFilter.name == column.name) || { name: column.name };
211
+ });
212
+ function reorderList(a, b) {
213
+ // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
214
+ const result = new Array(a.length);
215
+ // b 배열에 없는 아이템은 원래 위치로 채움
216
+ a.forEach((item, index) => {
217
+ if (!item.name || !b.find(bi => bi.name == item.name)) {
218
+ result[index] = item;
219
+ }
220
+ });
221
+ b.forEach(item => {
222
+ const ai = a.find(ai => ai.name == item.name);
223
+ if (ai) {
224
+ result[result.findIndex(slot => slot === undefined)] = ai;
225
+ }
226
+ });
227
+ return result;
228
+ }
229
+ // 배열 재정렬 실행
230
+ this.personalFilters = reorderList(xfilters, personalFilters);
231
+ this.filterColumns = this.personalFilters
232
+ .map(filter => {
233
+ const column = this.filterColumns.find(column => column.name == filter.name);
234
+ if (column === null || column === void 0 ? void 0 : column.filter) {
235
+ ;
236
+ column.filter.hidden = filter.hidden;
237
+ }
238
+ return column;
239
+ })
240
+ .filter(Boolean);
241
+ }
242
+ }
243
+ const grist = this.closest('ox-grist');
244
+ this.value = ((grist === null || grist === void 0 ? void 0 : grist.filters) || []).map(filter => {
245
+ return {
246
+ ...filter,
247
+ value: this.buildDefaultValue(filter.operator, filter.value)
248
+ };
249
+ });
250
+ this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0;
251
+ this.autoUpdateTargetsOnChange = {};
252
+ (_a = this.filterColumns) === null || _a === void 0 ? void 0 : _a.filter(({ filter }) => {
253
+ return typeof filter == 'object' && filter.boundTo && filter.boundTo.length > 0;
254
+ }).map(({ name, filter }) => {
255
+ const boundTo = filter.boundTo;
256
+ boundTo.forEach(to => {
257
+ const origin = this.autoUpdateTargetsOnChange[to] || [];
258
+ if (name && !origin.includes(name)) {
259
+ this.autoUpdateTargetsOnChange[to] = [...origin, name];
260
+ }
261
+ });
262
+ });
263
+ }
171
264
  async getQueryFilters() {
172
265
  var _a;
173
266
  const form = await this.form;
@@ -176,6 +269,7 @@ let FiltersForm = class FiltersForm extends LitElement {
176
269
  const formData = new FormData(form);
177
270
  const search = (_a = formData.get('search')) === null || _a === void 0 ? void 0 : _a.toString();
178
271
  var filters = this.filterColumns
272
+ .filter(column => column.name !== 'search' && !column.filter.hidden)
179
273
  .map((column) => {
180
274
  const { name, type, filter } = column;
181
275
  const operator = filter.operator;
@@ -231,12 +325,43 @@ let FiltersForm = class FiltersForm extends LitElement {
231
325
  const input = this.renderRoot.querySelector(`form [name="${name}"]`);
232
326
  return input === null || input === void 0 ? void 0 : input.value;
233
327
  }
328
+ async updateObjectValues() {
329
+ const form = await this.form;
330
+ if (!form)
331
+ return [];
332
+ const formData = new FormData(form);
333
+ const object = {};
334
+ formData.forEach((value, key) => {
335
+ const prev = object[key];
336
+ if (key in object) {
337
+ object[key] = prev instanceof Array ? [...prev, value] : [prev, value];
338
+ }
339
+ else {
340
+ object[key] = value;
341
+ }
342
+ });
343
+ this.objectValue = object;
344
+ }
345
+ getFormObjectValue() {
346
+ return this.objectValue;
347
+ }
348
+ reset() {
349
+ this.form
350
+ .then((form) => {
351
+ form.reset();
352
+ })
353
+ .catch((error) => {
354
+ console.error('Error resetting the form:', error);
355
+ });
356
+ }
234
357
  };
235
- FiltersForm.styles = [
358
+ OxFiltersForm.styles = [
359
+ MDTypeScaleStyles,
236
360
  FilterStyles,
237
361
  css `
238
362
  :host {
239
363
  display: flex;
364
+ padding: var(--spacing-small);
240
365
  }
241
366
 
242
367
  form {
@@ -258,38 +383,48 @@ FiltersForm.styles = [
258
383
  }
259
384
 
260
385
  @media only screen and (max-width: 460px) {
261
- label[between] {
262
- display: block;
386
+ form {
387
+ flex-direction: column;
388
+ flex-flow: column;
263
389
  }
264
390
  }
265
391
  `
266
392
  ];
267
393
  __decorate([
268
394
  property({ type: Array })
269
- ], FiltersForm.prototype, "value", void 0);
395
+ ], OxFiltersForm.prototype, "value", void 0);
270
396
  __decorate([
271
397
  property({ type: Boolean, attribute: 'without-search' })
272
- ], FiltersForm.prototype, "withoutSearch", void 0);
398
+ ], OxFiltersForm.prototype, "withoutSearch", void 0);
273
399
  __decorate([
274
400
  property({ type: Boolean, attribute: 'autofocus' })
275
- ], FiltersForm.prototype, "autofocus", void 0);
401
+ ], OxFiltersForm.prototype, "autofocus", void 0);
276
402
  __decorate([
277
403
  property({ type: Boolean, attribute: 'empty', reflect: true })
278
- ], FiltersForm.prototype, "empty", void 0);
404
+ ], OxFiltersForm.prototype, "empty", void 0);
405
+ __decorate([
406
+ state()
407
+ ], OxFiltersForm.prototype, "personalConfigProvider", void 0);
408
+ __decorate([
409
+ state()
410
+ ], OxFiltersForm.prototype, "personalConfig", void 0);
411
+ __decorate([
412
+ state()
413
+ ], OxFiltersForm.prototype, "personalFilters", void 0);
279
414
  __decorate([
280
415
  state()
281
- ], FiltersForm.prototype, "config", void 0);
416
+ ], OxFiltersForm.prototype, "config", void 0);
282
417
  __decorate([
283
418
  state()
284
- ], FiltersForm.prototype, "filterColumns", void 0);
419
+ ], OxFiltersForm.prototype, "filterColumns", void 0);
285
420
  __decorate([
286
421
  state()
287
- ], FiltersForm.prototype, "searchColumns", void 0);
422
+ ], OxFiltersForm.prototype, "searchColumns", void 0);
288
423
  __decorate([
289
424
  queryAsync('form')
290
- ], FiltersForm.prototype, "form", void 0);
291
- FiltersForm = __decorate([
425
+ ], OxFiltersForm.prototype, "form", void 0);
426
+ OxFiltersForm = __decorate([
292
427
  customElement('ox-filters-form')
293
- ], FiltersForm);
294
- export { FiltersForm };
428
+ ], OxFiltersForm);
429
+ export { OxFiltersForm };
295
430
  //# sourceMappingURL=filters-form.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n name: string\n operator: FilterOperator\n value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: flex;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--ox-filters-form-gap);\n }\n\n form > * {\n display: flex;\n align-items: center;\n gap: var(--input-intra-gap, 7px);\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n label[between] {\n display: block;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n @state() config!: GristConfig\n @state() filterColumns: ColumnConfig[] = []\n @state() searchColumns: ColumnConfig[] = []\n\n @queryAsync('form') form!: HTMLFormElement\n\n connectedCallback(): void {\n super.connectedCallback()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n if (grist) {\n this.config = grist.compiledConfig\n\n grist.addEventListener('config-change', (e: Event) => {\n this.config = (e as CustomEvent).detail\n })\n\n grist.addEventListener('fetch-params-change', (e: Event) => {\n const { filters, from } = (e as CustomEvent).detail || {}\n if (from === 'filters-form') {\n return\n }\n\n this.value = filters\n })\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n this.dispatchEvent(\n new CustomEvent('fetch-params-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: await this.getQueryFilters(),\n from: 'filters-form'\n }\n })\n )\n })\n }\n }\n\n buildDefaultValue(operator: string, defaultValue: any) {\n if (defaultValue === undefined) {\n return\n }\n if (operator == 'between') {\n return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n } else {\n return getDefaultValue(defaultValue, this)\n }\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator !== 'search'\n })\n this.searchColumns = filters.filter(columnConfig => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator === 'search'\n })\n\n const grist = this.closest('ox-grist') as DataGrist\n\n this.value = (grist?.filters || []).map(filter => {\n return {\n ...filter,\n value: this.buildDefaultValue(filter!.operator, filter!.value)\n }\n })\n\n this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n }\n }\n\n render(): TemplateResult {\n const searchValue =\n (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n return this.empty\n ? html``\n : html`\n <form\n @submit=${(e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n grist && grist.fetch()\n }}\n >\n ${this.searchColumns.length === 0 || this.withoutSearch\n ? html``\n : html`\n <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n `}\n ${this.filterColumns.map((column: ColumnConfig) => {\n const { name, header, label, filter } = column\n\n const type = (filter as FilterConfigObject).type\n const operator = (filter as FilterConfigObject).operator\n const filterLabel = (filter as FilterConfigObject).label\n\n const labelText =\n filterLabel !== undefined\n ? filterLabel\n : typeof label === 'object' && label.renderer\n ? label.renderer(column)\n : header.renderer(column) || name\n\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n const value =\n this.value?.find(filter => filter.name == name)?.value ??\n this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)\n\n if (!renderer) {\n return html``\n }\n\n return type === 'boolean' || type === 'checkbox'\n ? renderer(column, value, this)\n : type !== 'select' && labelText\n ? html`<label filter-title ?between=${operator === 'between'}\n ><span>${labelText}</span> ${renderer(column, value, this)}\n </label> `\n : type !== 'select' && !labelText\n ? renderer(column, value, this)\n : operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(column, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n </ox-select>\n `\n })}\n </form>\n `\n }\n\n async getQueryFilters(): Promise<QueryFilter[]> {\n const form = await this.form\n if (!form) return []\n\n const formData = new FormData(form)\n const search: string | undefined = formData.get('search')?.toString()\n\n var filters = this.filterColumns\n .map((column: ColumnConfig) => {\n const { name, type, filter } = column\n const operator = (filter as FilterConfigObject).operator\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as QueryFilter[]\n\n if (search) {\n filters = filters.concat(\n this.searchColumns.map((column: ColumnConfig) => {\n const { name } = column\n\n return {\n name,\n operator: 'search',\n value: `%${search}%`\n }\n })\n )\n }\n\n return filters\n }\n\n public setInputValue(name: string, value: any) {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n if (input) {\n input.value = value\n input.dispatchEvent(new Event('change', { bubbles: true }))\n }\n }\n\n public getInputValue(name: string): any {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n return input?.value\n }\n}\n"]}
1
+ {"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { PagePreferenceProvider } from '@operato/p13n'\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterConfigObject, FilterPreference } from '../types.js'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig, PersonalGristPreference } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n name: string\n operator: FilterOperator\n value: any\n}\n\n@customElement('ox-filters-form')\nexport class OxFiltersForm extends LitElement {\n static styles = [\n MDTypeScaleStyles,\n FilterStyles,\n css`\n :host {\n display: flex;\n padding: var(--spacing-small);\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--ox-filters-form-gap);\n }\n\n form > * {\n display: flex;\n align-items: center;\n gap: var(--input-intra-gap, 7px);\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n form {\n flex-direction: column;\n flex-flow: column;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n @state() personalConfigProvider?: PagePreferenceProvider\n @state() personalConfig?: PersonalGristPreference\n @state() personalFilters?: FilterPreference[]\n\n @state() config!: GristConfig\n @state() filterColumns: ColumnConfig[] = []\n @state() searchColumns: ColumnConfig[] = []\n\n @queryAsync('form') form!: HTMLFormElement\n\n private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}\n private objectValue?: object\n\n connectedCallback(): void {\n super.connectedCallback()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n if (grist) {\n this.config = grist.compiledConfig\n this.personalConfigProvider = grist.personalConfigProvider\n\n grist.addEventListener('config-change', (e: Event) => {\n this.config = (e as CustomEvent).detail\n })\n\n grist.addEventListener('fetch-params-change', (e: Event) => {\n const { filters, from } = (e as CustomEvent).detail || {}\n if (from === 'filters-form') {\n return\n }\n\n this.value = filters\n })\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n const { target, detail: value } = e as CustomEvent\n const name = (target as HTMLInputElement).name\n const { filter } = this.filterColumns.find(filter => filter.name == name) || {}\n\n if (this.autoUpdateTargetsOnChange[name]) {\n /* 일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함. */\n ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {\n const target = this.renderRoot.querySelector(`[name='${name}']`)\n if (target) {\n ;(target as HTMLInputElement).value = ''\n }\n })\n\n await this.updateObjectValues()\n this.requestUpdate()\n }\n\n const onchange = typeof filter == 'object' ? filter.onchange : null\n const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n keepGoing &&\n this.dispatchEvent(\n new CustomEvent('fetch-params-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: await this.getQueryFilters(),\n from: 'filters-form'\n }\n })\n )\n })\n }\n }\n\n buildDefaultValue(operator: FilterOperator, defaultValue: any) {\n if (defaultValue === undefined) {\n return\n }\n if (operator == 'between') {\n return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n } else {\n return getDefaultValue(defaultValue, this)\n }\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('personalConfigProvider') && this.personalConfigProvider) {\n this.personalConfig = await this.personalConfigProvider.load()\n } else if (changes.has('config') || changes.has('personalConfig')) {\n this.applyUpdatedConfiguration()\n }\n }\n\n render(): TemplateResult {\n const searchValue =\n (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n return this.empty\n ? html``\n : html`\n <form\n class=\"md-typescale-body-medium-prominent\"\n @submit=${(e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n const grist = this.closest('ox-grist') as DataGrist\n\n grist && grist.fetch()\n }}\n >\n ${this.filterColumns\n .filter(column => !(column.filter as FilterConfigObject).hidden)\n .map((column: ColumnConfig) => {\n const { name, header, label, filter } = column\n\n const type = (filter as FilterConfigObject).type\n\n if (type == 'search') {\n return html`\n <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n `\n }\n\n const operator = (filter as FilterConfigObject).operator\n const filterLabel = (filter as FilterConfigObject).label\n\n const labelText =\n filterLabel !== undefined\n ? filterLabel\n : typeof label === 'object' && label.renderer\n ? label.renderer(column)\n : header.renderer(column) || name\n\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n const value =\n this.value?.find(filter => filter.name == name)?.value ??\n this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)\n\n if (!renderer) {\n return html``\n }\n\n return type === 'boolean' || type === 'checkbox'\n ? renderer(column, value, this)\n : type !== 'select' && labelText\n ? html`<label filter-title ?between=${operator === 'between'}\n ><span>${labelText}</span> ${renderer(column, value, this)}\n </label> `\n : type !== 'select' && !labelText\n ? renderer(column, value, this)\n : operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(column, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${labelText}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n </ox-select>\n `\n })}\n </form>\n <slot name=\"setting\"></slot>\n `\n }\n\n applyUpdatedConfiguration() {\n if (!this.config) {\n return\n }\n\n const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n\n this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator !== 'search'\n })\n this.searchColumns = filters.filter(columnConfig => {\n const filter = columnConfig.filter as FilterConfigObject\n return filter!.operator === 'search'\n })\n\n if (this.searchColumns.length > 0 && !this.withoutSearch) {\n this.filterColumns.unshift({ name: 'search', filter: { type: 'search' } } as any)\n }\n\n if (!this.personalConfig) {\n this.personalFilters = this.filterColumns.map(column => {\n return { name: column.name }\n })\n } else {\n const { filters: personalFilters = [] } = this.personalConfig\n\n if (personalFilters) {\n const xfilters = this.filterColumns.map(column => {\n return personalFilters.find(pFilter => pFilter.name == column.name) || { name: column.name }\n })\n\n function reorderList(a: FilterPreference[], b: FilterPreference[]): FilterPreference[] {\n // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움\n const result = new Array(a.length)\n\n // b 배열에 없는 아이템은 원래 위치로 채움\n a.forEach((item, index) => {\n if (!item.name || !b.find(bi => bi.name == item.name)) {\n result[index] = item\n }\n })\n\n b.forEach(item => {\n const ai = a.find(ai => ai.name == item.name)\n if (ai) {\n result[result.findIndex(slot => slot === undefined)] = ai\n }\n })\n\n return result\n }\n\n // 배열 재정렬 실행\n this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterPreference[]\n\n this.filterColumns = this.personalFilters\n .map(filter => {\n const column = this.filterColumns.find(column => column.name == filter.name)\n if (column?.filter) {\n ;(column.filter as FilterConfigObject)!.hidden = filter.hidden\n }\n return column\n })\n .filter(Boolean) as ColumnConfig[]\n }\n }\n\n const grist = this.closest('ox-grist') as DataGrist\n\n this.value = (grist?.filters || []).map(filter => {\n return {\n ...filter,\n value: this.buildDefaultValue(filter!.operator, filter!.value)\n }\n })\n\n this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n\n this.autoUpdateTargetsOnChange = {}\n this.filterColumns\n ?.filter(({ filter }) => {\n return typeof filter == 'object' && filter.boundTo && filter.boundTo.length > 0\n })\n .map(({ name, filter }) => {\n const boundTo = (filter as FilterConfigObject).boundTo\n\n boundTo!.forEach(to => {\n const origin = this.autoUpdateTargetsOnChange[to] || []\n if (name && !origin.includes(name)) {\n this.autoUpdateTargetsOnChange[to] = [...origin, name]\n }\n })\n })\n }\n\n async getQueryFilters(): Promise<QueryFilter[]> {\n const form = await this.form\n if (!form) return []\n\n const formData = new FormData(form)\n const search: string | undefined = formData.get('search')?.toString()\n\n var filters = this.filterColumns\n .filter(column => column.name !== 'search' && !(column.filter as FilterConfigObject)!.hidden)\n .map((column: ColumnConfig) => {\n const { name, type, filter } = column\n const operator = (filter as FilterConfigObject).operator\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as QueryFilter[]\n\n if (search) {\n filters = filters.concat(\n this.searchColumns.map((column: ColumnConfig) => {\n const { name } = column\n\n return {\n name,\n operator: 'search',\n value: `%${search}%`\n }\n })\n )\n }\n\n return filters\n }\n\n public setInputValue(name: string, value: any) {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n if (input) {\n input.value = value\n input.dispatchEvent(new Event('change', { bubbles: true }))\n }\n }\n\n public getInputValue(name: string): any {\n const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n return input?.value\n }\n\n private async updateObjectValues() {\n const form = await this.form\n if (!form) return []\n\n const formData = new FormData(form)\n\n const object = {} as any\n formData.forEach((value, key) => {\n const prev = object[key]\n\n if (key in object) {\n object[key] = prev instanceof Array ? [...prev, value] : [prev, value]\n } else {\n object[key] = value\n }\n })\n\n this.objectValue = object\n }\n\n public getFormObjectValue() {\n return this.objectValue\n }\n\n reset() {\n this.form\n .then((form: HTMLFormElement) => {\n form.reset()\n })\n .catch((error: any) => {\n console.error('Error resetting the form:', error)\n })\n }\n}\n"]}
@@ -18,7 +18,7 @@ let GutterDirtyElement = class GutterDirtyElement extends LitElement {
18
18
  };
19
19
  GutterDirtyElement.styles = css `
20
20
  :host {
21
- display: block;
21
+ display: flex;
22
22
  margin: auto;
23
23
  }
24
24
 
@@ -30,7 +30,7 @@ GutterDirtyElement.styles = css `
30
30
  }
31
31
 
32
32
  [add] {
33
- background-color: var(--primary-color);
33
+ background-color: var(--md-sys-color-on-primary-container);
34
34
  }
35
35
 
36
36
  [remove] {
@@ -1 +1 @@
1
- {"version":3,"file":"gutter-dirty.js","sourceRoot":"","sources":["../../../src/gutters/gutter-dirty.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAK3D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IA6BzC,MAAM;QACJ,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,4BAA4B,CAAA;YACvE,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,kCAAkC,CAAA;YAC7E,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,8BAA8B,CAAA;YACzE;gBACE,OAAO,EAAE,CAAA;QACb,CAAC;IACH,CAAC;;AAvCM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBlB,AAxBY,CAwBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;AA3BtC,kBAAkB;IADvB,aAAa,CAAC,yBAAyB,CAAC;GACnC,kBAAkB,CAyCvB;AAED,MAAM,WAAW,GACf,sGAAsG,CAAA;AAExG,MAAM,OAAO,WAAW;IACtB,MAAM,CAAC,QAAQ,CAAC,SAAuB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAS;QACjF,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,EAAE;YACV,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,KAAK,8BAA8B,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;gBACpG,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE;gBACR,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;oBAC7D,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,kBAAkB,EAAE;wBAClC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,QAAQ,EAAE,QAAQ;4BAClB,WAAW,EAAE,CAAC;4BACd,MAAM,EAAE,QAAQ;4BAChB,SAAS,EAAE,CAAC,CAAC;yBACd;qBACF,CAAC,CACH,CAAA;gBACH,CAAC,CAAsB;aACxB;SACF,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColumnConfig, FieldRenderer, GristEventHandler } from '../types'\n\n@customElement('ox-gutter-dirty-element')\nclass GutterDirtyElement extends LitElement {\n static styles = css`\n :host {\n display: block;\n margin: auto;\n }\n\n md-icon {\n width: var(--grid-record-dirty-icon-size);\n height: var(--grid-record-dirty-icon-size);\n border-radius: 50%;\n opacity: 0.8;\n }\n\n [add] {\n background-color: var(--primary-color);\n }\n\n [remove] {\n background-color: var(--status-danger-color);\n }\n\n [done] {\n background-color: var(--status-info-color);\n }\n `\n\n @property({ type: String }) value?: string\n\n render() {\n switch (this.value) {\n case '+':\n return html` <md-icon style=${INLINESTYLE} center add>add</md-icon> `\n case '-':\n return html` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `\n case 'M':\n return html` <md-icon style=${INLINESTYLE} center done>done</md-icon> `\n default:\n return ''\n }\n }\n}\n\nconst INLINESTYLE =\n 'font-size: var(--grid-record-fontsize);vertical-align: middle; color: var(--grid-record-dirty-color)'\n\nexport class GutterDirty {\n static instance(config: ColumnConfig = { type: 'gutter', name: '__dirty__' } as any) {\n return Object.assign(\n {},\n {\n type: 'gutter',\n name: '__dirty__',\n gutterType: 'dirty',\n width: 30,\n resizable: false,\n sortable: false,\n header: '',\n record: {\n align: 'center',\n renderer: function (value, column, record, rowIndex, field) {\n return value ? html` <ox-gutter-dirty-element value=${value}></ox-gutter-dirty-element> ` : html``\n } as FieldRenderer\n },\n forGrid: true,\n forList: false,\n forCard: false,\n handlers: {\n dblclick: ((columns, data, column, record, rowIndex, target) => {\n target.dispatchEvent(\n new CustomEvent('set-select-block', {\n bubbles: true,\n composed: true,\n detail: {\n startRow: rowIndex,\n startColumn: 0,\n endRow: rowIndex,\n endColumn: -1\n }\n })\n )\n }) as GristEventHandler\n }\n },\n config\n )\n }\n}\n"]}
1
+ {"version":3,"file":"gutter-dirty.js","sourceRoot":"","sources":["../../../src/gutters/gutter-dirty.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAK3D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IA6BzC,MAAM;QACJ,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,4BAA4B,CAAA;YACvE,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,kCAAkC,CAAA;YAC7E,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,8BAA8B,CAAA;YACzE;gBACE,OAAO,EAAE,CAAA;QACb,CAAC;IACH,CAAC;;AAvCM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBlB,AAxBY,CAwBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;AA3BtC,kBAAkB;IADvB,aAAa,CAAC,yBAAyB,CAAC;GACnC,kBAAkB,CAyCvB;AAED,MAAM,WAAW,GACf,sGAAsG,CAAA;AAExG,MAAM,OAAO,WAAW;IACtB,MAAM,CAAC,QAAQ,CAAC,SAAuB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAS;QACjF,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,EAAE;YACV,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,KAAK,8BAA8B,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;gBACpG,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE;gBACR,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;oBAC7D,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,kBAAkB,EAAE;wBAClC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,QAAQ,EAAE,QAAQ;4BAClB,WAAW,EAAE,CAAC;4BACd,MAAM,EAAE,QAAQ;4BAChB,SAAS,EAAE,CAAC,CAAC;yBACd;qBACF,CAAC,CACH,CAAA;gBACH,CAAC,CAAsB;aACxB;SACF,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColumnConfig, FieldRenderer, GristEventHandler } from '../types'\n\n@customElement('ox-gutter-dirty-element')\nclass GutterDirtyElement extends LitElement {\n static styles = css`\n :host {\n display: flex;\n margin: auto;\n }\n\n md-icon {\n width: var(--grid-record-dirty-icon-size);\n height: var(--grid-record-dirty-icon-size);\n border-radius: 50%;\n opacity: 0.8;\n }\n\n [add] {\n background-color: var(--md-sys-color-on-primary-container);\n }\n\n [remove] {\n background-color: var(--status-danger-color);\n }\n\n [done] {\n background-color: var(--status-info-color);\n }\n `\n\n @property({ type: String }) value?: string\n\n render() {\n switch (this.value) {\n case '+':\n return html` <md-icon style=${INLINESTYLE} center add>add</md-icon> `\n case '-':\n return html` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `\n case 'M':\n return html` <md-icon style=${INLINESTYLE} center done>done</md-icon> `\n default:\n return ''\n }\n }\n}\n\nconst INLINESTYLE =\n 'font-size: var(--grid-record-fontsize);vertical-align: middle; color: var(--grid-record-dirty-color)'\n\nexport class GutterDirty {\n static instance(config: ColumnConfig = { type: 'gutter', name: '__dirty__' } as any) {\n return Object.assign(\n {},\n {\n type: 'gutter',\n name: '__dirty__',\n gutterType: 'dirty',\n width: 30,\n resizable: false,\n sortable: false,\n header: '',\n record: {\n align: 'center',\n renderer: function (value, column, record, rowIndex, field) {\n return value ? html` <ox-gutter-dirty-element value=${value}></ox-gutter-dirty-element> ` : html``\n } as FieldRenderer\n },\n forGrid: true,\n forList: false,\n forCard: false,\n handlers: {\n dblclick: ((columns, data, column, record, rowIndex, target) => {\n target.dispatchEvent(\n new CustomEvent('set-select-block', {\n bubbles: true,\n composed: true,\n detail: {\n startRow: rowIndex,\n startColumn: 0,\n endRow: rowIndex,\n endColumn: -1\n }\n })\n )\n }) as GristEventHandler\n }\n },\n config\n )\n }\n}\n"]}
@@ -10,4 +10,5 @@ export * from './gutters';
10
10
  export * from './filters';
11
11
  export * from './sorters/sorters-control';
12
12
  export * from './record-view';
13
+ export * from './personalizer';
13
14
  export * from './utils/list-param';
package/dist/src/index.js CHANGED
@@ -10,5 +10,6 @@ export * from './gutters';
10
10
  export * from './filters';
11
11
  export * from './sorters/sorters-control';
12
12
  export * from './record-view';
13
+ export * from './personalizer';
13
14
  export * from './utils/list-param';
14
15
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAE7B,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\nexport * from './sorters/sorters-control'\nexport * from './record-view'\n\nexport * from './utils/list-param'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAE9B,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\nexport * from './sorters/sorters-control'\nexport * from './record-view'\nexport * from './personalizer'\n\nexport * from './utils/list-param'\n"]}
@@ -0,0 +1 @@
1
+ export * from './ox-grist-personalizer';
@@ -0,0 +1,2 @@
1
+ export * from './ox-grist-personalizer';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/personalizer/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './ox-grist-personalizer'\n"]}
@@ -0,0 +1,8 @@
1
+ import '@material/web/button/outlined-button.js';
2
+ import { LitElement } from 'lit';
3
+ export declare class OxGristFilterPersonalizer extends LitElement {
4
+ static styles: import("lit").CSSResult[];
5
+ debug: boolean;
6
+ private preference?;
7
+ render(): import("lit-html").TemplateResult<1>;
8
+ }