@operato/data-grist 0.3.17 → 0.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/custom-elements.json +343 -336
- package/demo/data-grist-test.html +142 -85
- package/demo/index.html +60 -95
- package/dist/src/configure/column-builder.js +26 -2
- package/dist/src/configure/column-builder.js.map +1 -1
- package/dist/src/data-grid/data-grid-header.js +5 -3
- package/dist/src/data-grid/data-grid-header.js.map +1 -1
- package/dist/src/data-grist.js +5 -0
- package/dist/src/data-grist.js.map +1 -1
- package/dist/src/filters/filter-checkbox.js +2 -2
- package/dist/src/filters/filter-checkbox.js.map +1 -1
- package/dist/src/filters/filter-input.js +1 -1
- package/dist/src/filters/filter-input.js.map +1 -1
- package/dist/src/filters/filter-range-date.js +1 -1
- package/dist/src/filters/filter-range-date.js.map +1 -1
- package/dist/src/filters/filter-range-number.js +1 -1
- package/dist/src/filters/filter-range-number.js.map +1 -1
- package/dist/src/filters/filter-select.js +2 -2
- package/dist/src/filters/filter-select.js.map +1 -1
- package/dist/src/filters/filters-form.d.ts +9 -5
- package/dist/src/filters/filters-form.js +63 -15
- package/dist/src/filters/filters-form.js.map +1 -1
- package/dist/src/record-view/record-view-body.js +4 -2
- package/dist/src/record-view/record-view-body.js.map +1 -1
- package/dist/src/sorters/sorters-control.js +22 -8
- package/dist/src/sorters/sorters-control.js.map +1 -1
- package/dist/src/types.d.ts +6 -3
- package/dist/src/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -8
- package/src/configure/column-builder.ts +29 -3
- package/src/data-grid/data-grid-header.ts +7 -5
- package/src/data-grist.ts +8 -0
- package/src/filters/filter-checkbox.ts +3 -2
- package/src/filters/filter-input.ts +3 -3
- package/src/filters/filter-range-date.ts +3 -3
- package/src/filters/filter-range-number.ts +3 -3
- package/src/filters/filter-select.ts +3 -2
- package/src/filters/filters-form.ts +77 -41
- package/src/record-view/record-view-body.ts +4 -2
- package/src/sorters/sorters-control.ts +22 -8
- package/src/types.ts +33 -30
- package/dist/src/editors/image-editor.d.ts +0 -9
- package/dist/src/editors/image-editor.js +0 -53
- package/dist/src/editors/image-editor.js.map +0 -1
- package/dist/src/editors/input-editors copy.d.ts +0 -75
- package/dist/src/editors/input-editors copy.js +0 -373
- package/dist/src/editors/input-editors copy.js.map +0 -1
- package/dist/src/record-view/record-creator copy.d.ts +0 -13
- package/dist/src/record-view/record-creator copy.js +0 -90
- package/dist/src/record-view/record-creator copy.js.map +0 -1
- package/dist/src/record-view/record-creator-backup.d.ts +0 -13
- package/dist/src/record-view/record-creator-backup.js +0 -90
- package/dist/src/record-view/record-creator-backup.js.map +0 -1
|
@@ -44,11 +44,15 @@
|
|
|
44
44
|
<link href="/themes/oops-theme.css" rel="stylesheet" />
|
|
45
45
|
<link href="/themes/grist-theme.css" rel="stylesheet" />
|
|
46
46
|
</head>
|
|
47
|
+
|
|
47
48
|
<body>
|
|
48
49
|
<script type="module">
|
|
49
50
|
import { LitElement, html, css, render } from 'lit'
|
|
50
51
|
import '../dist/index.js'
|
|
51
|
-
import '
|
|
52
|
+
import '../dist/src/filters/filters-form.js'
|
|
53
|
+
import '../dist/src/sorters/sorters-control.js'
|
|
54
|
+
import '../dist/src/record-view/record-creator.js'
|
|
55
|
+
import '@operato/popup/ox-popup-list.js'
|
|
52
56
|
import '@material/mwc-icon'
|
|
53
57
|
|
|
54
58
|
const fetchHandler = async ({ page, limit, sorters = [] }) => {
|
|
@@ -65,7 +69,8 @@
|
|
|
65
69
|
return {
|
|
66
70
|
id: idx,
|
|
67
71
|
name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
|
|
68
|
-
description:
|
|
72
|
+
description:
|
|
73
|
+
idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
|
|
69
74
|
email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
|
|
70
75
|
active: Math.round(Math.random() * 2) % 2 ? true : false,
|
|
71
76
|
barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
|
|
@@ -81,10 +86,14 @@
|
|
|
81
86
|
name: 'HatioSEA',
|
|
82
87
|
description: `말레이시아 세티아알람-${start + idx + 1}`
|
|
83
88
|
},
|
|
84
|
-
|
|
85
|
-
idx %
|
|
89
|
+
thumbnail:
|
|
90
|
+
idx % 4 === 0
|
|
91
|
+
? '' /* no source */
|
|
92
|
+
: idx % 4 === 1
|
|
86
93
|
? `http://www.hatiolab.com/assets/img/operato-biz3.png`
|
|
87
|
-
:
|
|
94
|
+
: idx % 4 === 2
|
|
95
|
+
? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
|
|
96
|
+
: `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
|
|
88
97
|
role: ['admin', 'worker', 'tester'][idx % 3],
|
|
89
98
|
color: idx % 2 ? `#87f018` : `#180f87`,
|
|
90
99
|
rate: Math.round(Math.random() * 100),
|
|
@@ -107,9 +116,7 @@
|
|
|
107
116
|
|
|
108
117
|
const config = {
|
|
109
118
|
list: {
|
|
110
|
-
thumbnail:
|
|
111
|
-
return html` <img src=${record.image} style="width: 100%; height: 100%;" /> `
|
|
112
|
-
},
|
|
119
|
+
thumbnail: 'thumbnail',
|
|
113
120
|
fields: ['name', 'description'],
|
|
114
121
|
details: ['role', 'email']
|
|
115
122
|
},
|
|
@@ -153,10 +160,11 @@
|
|
|
153
160
|
// href: 'http://hatiolab.com',
|
|
154
161
|
href: function (column, record, rowIndex) {
|
|
155
162
|
return record['homepage']
|
|
156
|
-
}
|
|
157
|
-
|
|
163
|
+
},
|
|
164
|
+
target: '_blank'
|
|
158
165
|
}
|
|
159
166
|
},
|
|
167
|
+
filter: 'search',
|
|
160
168
|
sortable: true,
|
|
161
169
|
width: 120
|
|
162
170
|
},
|
|
@@ -164,13 +172,14 @@
|
|
|
164
172
|
type: 'string',
|
|
165
173
|
name: 'description',
|
|
166
174
|
header: 'description',
|
|
175
|
+
filter: 'search',
|
|
167
176
|
record: {
|
|
168
177
|
editable: true,
|
|
169
178
|
align: 'left'
|
|
170
179
|
},
|
|
171
180
|
width: 200,
|
|
172
181
|
handlers: {
|
|
173
|
-
|
|
182
|
+
click: (columns, data, column, record, rowIndex, target) => {
|
|
174
183
|
alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
|
|
175
184
|
}
|
|
176
185
|
}
|
|
@@ -183,6 +192,7 @@
|
|
|
183
192
|
record: {
|
|
184
193
|
editable: true
|
|
185
194
|
},
|
|
195
|
+
filter: 'search',
|
|
186
196
|
sortable: true,
|
|
187
197
|
width: 130,
|
|
188
198
|
validation: function (after, before, record, column) {
|
|
@@ -207,6 +217,7 @@
|
|
|
207
217
|
record: {
|
|
208
218
|
editable: true
|
|
209
219
|
},
|
|
220
|
+
filter: true,
|
|
210
221
|
handlers: {
|
|
211
222
|
dblclick: () => {
|
|
212
223
|
const grist = document.querySelector('ox-grist')
|
|
@@ -225,6 +236,10 @@
|
|
|
225
236
|
options: ['admin', 'worker', 'tester'],
|
|
226
237
|
editable: true
|
|
227
238
|
},
|
|
239
|
+
filter: {
|
|
240
|
+
options: ['admin', 'worker', 'tester', 'xyz', 'VERY'],
|
|
241
|
+
multiple: true /* this case, operator should be 'in' */
|
|
242
|
+
},
|
|
228
243
|
sortable: true,
|
|
229
244
|
width: 120
|
|
230
245
|
},
|
|
@@ -246,6 +261,7 @@
|
|
|
246
261
|
align: 'right',
|
|
247
262
|
editable: true
|
|
248
263
|
},
|
|
264
|
+
filter: 'between',
|
|
249
265
|
sortable: true,
|
|
250
266
|
width: 50
|
|
251
267
|
},
|
|
@@ -255,6 +271,14 @@
|
|
|
255
271
|
header: 'JSON5',
|
|
256
272
|
width: 200
|
|
257
273
|
},
|
|
274
|
+
{
|
|
275
|
+
type: 'image',
|
|
276
|
+
name: 'thumbnail',
|
|
277
|
+
header: 'thumbnail',
|
|
278
|
+
record: {
|
|
279
|
+
editable: true
|
|
280
|
+
}
|
|
281
|
+
},
|
|
258
282
|
{
|
|
259
283
|
type: 'datetime',
|
|
260
284
|
name: 'updatedAt',
|
|
@@ -262,6 +286,7 @@
|
|
|
262
286
|
record: {
|
|
263
287
|
editable: true
|
|
264
288
|
},
|
|
289
|
+
filter: 'between',
|
|
265
290
|
sortable: true,
|
|
266
291
|
width: 180
|
|
267
292
|
},
|
|
@@ -270,7 +295,7 @@
|
|
|
270
295
|
name: 'createdAt',
|
|
271
296
|
header: 'created at',
|
|
272
297
|
record: {
|
|
273
|
-
editable:
|
|
298
|
+
editable: false
|
|
274
299
|
},
|
|
275
300
|
sortable: true,
|
|
276
301
|
width: 180
|
|
@@ -311,6 +336,7 @@
|
|
|
311
336
|
css`
|
|
312
337
|
:host {
|
|
313
338
|
display: flex;
|
|
339
|
+
flex-direction: column;
|
|
314
340
|
}
|
|
315
341
|
|
|
316
342
|
ox-grist {
|
|
@@ -321,34 +347,95 @@
|
|
|
321
347
|
--grid-record-emphasized-color: yellow;
|
|
322
348
|
}
|
|
323
349
|
|
|
324
|
-
|
|
350
|
+
[slot='headroom'] {
|
|
325
351
|
display: flex;
|
|
326
|
-
flex-direction:
|
|
327
|
-
background-color: var(--primary-color);
|
|
328
|
-
height: 200px;
|
|
352
|
+
flex-direction: row;
|
|
329
353
|
align-items: center;
|
|
330
|
-
|
|
331
|
-
|
|
354
|
+
padding: var(--padding-default) var(--padding-wide);
|
|
355
|
+
border-top: 2px solid rgba(0, 0, 0, 0.2);
|
|
356
|
+
background-color: var(--theme-white-color);
|
|
357
|
+
box-shadow: var(--box-shadow);
|
|
358
|
+
|
|
359
|
+
--mdc-icon-size: 24px;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
#sorters {
|
|
363
|
+
margin-left: auto;
|
|
364
|
+
position: relative;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
#sorters > * {
|
|
368
|
+
padding: var(--padding-narrow);
|
|
369
|
+
margin-right: var(--margin-default);
|
|
332
370
|
}
|
|
333
371
|
|
|
334
372
|
#modes > * {
|
|
335
373
|
padding: var(--padding-narrow);
|
|
336
|
-
|
|
337
|
-
|
|
374
|
+
opacity: 0.5;
|
|
375
|
+
color: var(--primary-text-color);
|
|
376
|
+
cursor: pointer;
|
|
338
377
|
}
|
|
339
378
|
|
|
340
379
|
#modes > mwc-icon[active] {
|
|
341
|
-
border: 1px solid var(--status-warning-color);
|
|
342
380
|
border-radius: 9px;
|
|
343
|
-
background-color: rgba(
|
|
381
|
+
background-color: rgba(var(--primary-color-rgb), 0.05);
|
|
344
382
|
opacity: 1;
|
|
383
|
+
color: var(--secondary-text-color);
|
|
384
|
+
cursor: default;
|
|
345
385
|
}
|
|
346
386
|
|
|
347
|
-
#
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
387
|
+
#modes > mwc-icon:hover {
|
|
388
|
+
opacity: 1;
|
|
389
|
+
color: var(--secondary-text-color);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
#add {
|
|
393
|
+
width: 50px;
|
|
394
|
+
text-align: right;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
#add button {
|
|
398
|
+
background-color: var(--status-success-color);
|
|
399
|
+
border: 0;
|
|
400
|
+
border-radius: 50%;
|
|
401
|
+
padding: 5px;
|
|
402
|
+
width: 36px;
|
|
403
|
+
height: 36px;
|
|
404
|
+
cursor: pointer;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
#add button:hover {
|
|
408
|
+
background-color: var(--focus-background-color);
|
|
409
|
+
box-shadow: var(--box-shadow);
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
#add button mwc-icon {
|
|
413
|
+
font-size: 2em;
|
|
414
|
+
color: var(--theme-white-color);
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
#filters * {
|
|
418
|
+
margin-right: var(--margin-default);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
#tailer {
|
|
422
|
+
display: flex;
|
|
423
|
+
flex-direction: row;
|
|
424
|
+
margin: 0 var(--margin-default);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
#tailer a {
|
|
428
|
+
padding: 0 var(--padding-narrow) 0 var(--padding-default);
|
|
429
|
+
margin: 0 var(--margin-narrow);
|
|
430
|
+
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
|
431
|
+
font-size: var(--fontsize-default);
|
|
432
|
+
color: var(--primary-color);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
@media only screen and (max-width: 460px) {
|
|
436
|
+
#modes {
|
|
437
|
+
display: none;
|
|
438
|
+
}
|
|
352
439
|
}
|
|
353
440
|
`
|
|
354
441
|
]
|
|
@@ -359,27 +446,49 @@
|
|
|
359
446
|
}
|
|
360
447
|
}
|
|
361
448
|
|
|
449
|
+
get searchForm() {
|
|
450
|
+
return this.shadowRoot.querySelector('ox-filters-form')
|
|
451
|
+
}
|
|
452
|
+
|
|
362
453
|
render() {
|
|
363
454
|
const mode = this.mode || 'CARD'
|
|
364
455
|
|
|
365
456
|
return html`
|
|
366
457
|
<ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
|
|
458
|
+
<ox-filters-form slot="headroom" @change=${e => console.log('changed', e.detail)}></ox-filters-form>
|
|
459
|
+
|
|
367
460
|
<div slot="headroom" id="headroom">
|
|
368
|
-
<
|
|
461
|
+
<div id="sorters">
|
|
462
|
+
<mwc-icon
|
|
463
|
+
@click=${e => {
|
|
464
|
+
const target = e.currentTarget
|
|
465
|
+
this.renderRoot.querySelector('#sorter-control').open({
|
|
466
|
+
right: 0,
|
|
467
|
+
top: target.offsetTop + target.offsetHeight
|
|
468
|
+
})
|
|
469
|
+
}}
|
|
470
|
+
>sort</mwc-icon
|
|
471
|
+
>
|
|
472
|
+
<ox-popup id="sorter-control">
|
|
473
|
+
<ox-sorters-control> </ox-sorters-control>
|
|
474
|
+
</ox-popup>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
369
477
|
<div id="modes">
|
|
370
478
|
<mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
|
|
371
479
|
<mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
|
|
372
480
|
<mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
|
|
373
481
|
</div>
|
|
482
|
+
|
|
374
483
|
<div id="tailer">
|
|
375
|
-
<a href="./report-test.html">Report Test</a
|
|
484
|
+
<a href="./report-test.html">Report Test</a>
|
|
376
485
|
<a
|
|
377
486
|
href="#"
|
|
378
487
|
@click=${() => {
|
|
379
488
|
this.renderRoot.querySelector('ox-grist').reset()
|
|
380
489
|
}}
|
|
381
490
|
>Reset</a
|
|
382
|
-
|
|
491
|
+
>
|
|
383
492
|
<a
|
|
384
493
|
href="#"
|
|
385
494
|
@click=${() => {
|
|
@@ -389,61 +498,9 @@
|
|
|
389
498
|
>
|
|
390
499
|
</div>
|
|
391
500
|
|
|
392
|
-
<
|
|
393
|
-
<mwc-icon
|
|
394
|
-
|
|
395
|
-
const target = e.currentTarget
|
|
396
|
-
this.renderRoot.querySelector('ox-popup-list').open({
|
|
397
|
-
left: target.offsetLeft,
|
|
398
|
-
top: target.offsetTop + target.offsetHeight
|
|
399
|
-
})
|
|
400
|
-
}}
|
|
401
|
-
>sort</mwc-icon
|
|
402
|
-
>
|
|
403
|
-
<mwc-icon
|
|
404
|
-
@click=${e => {
|
|
405
|
-
const target = e.currentTarget
|
|
406
|
-
this.renderRoot.querySelector('ox-popup-list').open({
|
|
407
|
-
left: target.offsetLeft,
|
|
408
|
-
top: target.offsetTop + target.offsetHeight
|
|
409
|
-
})
|
|
410
|
-
}}
|
|
411
|
-
>more_horiz</mwc-icon
|
|
412
|
-
>
|
|
413
|
-
<mwc-icon
|
|
414
|
-
@click=${e => {
|
|
415
|
-
const target = e.currentTarget
|
|
416
|
-
this.renderRoot.querySelector('ox-popup-list').open({
|
|
417
|
-
left: target.offsetLeft,
|
|
418
|
-
top: target.offsetTop + target.offsetHeight
|
|
419
|
-
})
|
|
420
|
-
}}
|
|
421
|
-
>sort</mwc-icon
|
|
422
|
-
>
|
|
423
|
-
|
|
424
|
-
<ox-popup-list @select=${() => console.log(e.detail)} multiple>
|
|
425
|
-
<div
|
|
426
|
-
option
|
|
427
|
-
@click=${function (e) {
|
|
428
|
-
const icon = e.currentTarget.querySelector('mwc-icon')
|
|
429
|
-
icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
|
|
430
|
-
}}
|
|
431
|
-
>
|
|
432
|
-
<mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
|
|
433
|
-
<span>click me to toggle</span>
|
|
434
|
-
</div>
|
|
435
|
-
<div
|
|
436
|
-
option
|
|
437
|
-
@click=${function (e) {
|
|
438
|
-
const icon = e.currentTarget.querySelector('mwc-icon')
|
|
439
|
-
icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
|
|
440
|
-
}}
|
|
441
|
-
>
|
|
442
|
-
<mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
|
|
443
|
-
<span>click me to toggle</span>
|
|
444
|
-
</div>
|
|
445
|
-
</ox-popup-list>
|
|
446
|
-
</div>
|
|
501
|
+
<ox-record-creator id="add" light-popup>
|
|
502
|
+
<button><mwc-icon>add</mwc-icon></button>
|
|
503
|
+
</ox-record-creator>
|
|
447
504
|
</div>
|
|
448
505
|
</ox-grist>
|
|
449
506
|
`
|
package/demo/index.html
CHANGED
|
@@ -164,9 +164,7 @@
|
|
|
164
164
|
target: '_blank'
|
|
165
165
|
}
|
|
166
166
|
},
|
|
167
|
-
filter:
|
|
168
|
-
type: 'text'
|
|
169
|
-
},
|
|
167
|
+
filter: 'search',
|
|
170
168
|
sortable: true,
|
|
171
169
|
width: 120
|
|
172
170
|
},
|
|
@@ -174,6 +172,7 @@
|
|
|
174
172
|
type: 'string',
|
|
175
173
|
name: 'description',
|
|
176
174
|
header: 'description',
|
|
175
|
+
filter: 'search',
|
|
177
176
|
record: {
|
|
178
177
|
editable: true,
|
|
179
178
|
align: 'left'
|
|
@@ -193,9 +192,7 @@
|
|
|
193
192
|
record: {
|
|
194
193
|
editable: true
|
|
195
194
|
},
|
|
196
|
-
filter:
|
|
197
|
-
operator: 'i_like'
|
|
198
|
-
},
|
|
195
|
+
filter: 'search',
|
|
199
196
|
sortable: true,
|
|
200
197
|
width: 130,
|
|
201
198
|
validation: function (after, before, record, column) {
|
|
@@ -253,7 +250,6 @@
|
|
|
253
250
|
record: {
|
|
254
251
|
editable: true
|
|
255
252
|
},
|
|
256
|
-
filter: true,
|
|
257
253
|
sortable: true,
|
|
258
254
|
width: 50
|
|
259
255
|
},
|
|
@@ -265,9 +261,7 @@
|
|
|
265
261
|
align: 'right',
|
|
266
262
|
editable: true
|
|
267
263
|
},
|
|
268
|
-
filter:
|
|
269
|
-
operator: 'between'
|
|
270
|
-
},
|
|
264
|
+
filter: 'between',
|
|
271
265
|
sortable: true,
|
|
272
266
|
width: 50
|
|
273
267
|
},
|
|
@@ -292,10 +286,7 @@
|
|
|
292
286
|
record: {
|
|
293
287
|
editable: true
|
|
294
288
|
},
|
|
295
|
-
filter:
|
|
296
|
-
type: 'datetime',
|
|
297
|
-
operator: 'between'
|
|
298
|
-
},
|
|
289
|
+
filter: 'between',
|
|
299
290
|
sortable: true,
|
|
300
291
|
width: 180
|
|
301
292
|
},
|
|
@@ -362,12 +353,24 @@
|
|
|
362
353
|
align-items: center;
|
|
363
354
|
padding: var(--padding-default) var(--padding-wide);
|
|
364
355
|
border-top: 2px solid rgba(0, 0, 0, 0.2);
|
|
365
|
-
background-color: var(--
|
|
356
|
+
background-color: var(--theme-white-color);
|
|
357
|
+
box-shadow: var(--box-shadow);
|
|
358
|
+
|
|
359
|
+
--mdc-icon-size: 24px;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
#sorters {
|
|
363
|
+
margin-left: auto;
|
|
364
|
+
position: relative;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
#sorters > * {
|
|
368
|
+
padding: var(--padding-narrow);
|
|
369
|
+
margin-right: var(--margin-default);
|
|
366
370
|
}
|
|
367
371
|
|
|
368
372
|
#modes > * {
|
|
369
373
|
padding: var(--padding-narrow);
|
|
370
|
-
font-size: 1em;
|
|
371
374
|
opacity: 0.5;
|
|
372
375
|
color: var(--primary-text-color);
|
|
373
376
|
cursor: pointer;
|
|
@@ -381,41 +384,38 @@
|
|
|
381
384
|
cursor: default;
|
|
382
385
|
}
|
|
383
386
|
|
|
384
|
-
#
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
justify-content: space-between;
|
|
388
|
-
margin-right: auto;
|
|
389
|
-
align-items: center;
|
|
387
|
+
#modes > mwc-icon:hover {
|
|
388
|
+
opacity: 1;
|
|
389
|
+
color: var(--secondary-text-color);
|
|
390
390
|
}
|
|
391
391
|
|
|
392
|
-
#
|
|
393
|
-
|
|
392
|
+
#add {
|
|
393
|
+
width: 50px;
|
|
394
|
+
text-align: right;
|
|
394
395
|
}
|
|
395
396
|
|
|
396
|
-
#
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
397
|
+
#add button {
|
|
398
|
+
background-color: var(--status-success-color);
|
|
399
|
+
border: 0;
|
|
400
|
+
border-radius: 50%;
|
|
401
|
+
padding: 5px;
|
|
402
|
+
width: 36px;
|
|
403
|
+
height: 36px;
|
|
404
|
+
cursor: pointer;
|
|
405
|
+
}
|
|
402
406
|
|
|
403
|
-
|
|
407
|
+
#add button:hover {
|
|
408
|
+
background-color: var(--focus-background-color);
|
|
409
|
+
box-shadow: var(--box-shadow);
|
|
404
410
|
}
|
|
405
411
|
|
|
406
|
-
#
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
border: 0;
|
|
410
|
-
border-bottom: var(--border-dark-color);
|
|
411
|
-
padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
|
|
412
|
-
font-size: var(--fontsize-large);
|
|
413
|
-
outline: none;
|
|
412
|
+
#add button mwc-icon {
|
|
413
|
+
font-size: 2em;
|
|
414
|
+
color: var(--theme-white-color);
|
|
414
415
|
}
|
|
415
416
|
|
|
416
|
-
#
|
|
417
|
-
|
|
418
|
-
color: var(--secondary-color);
|
|
417
|
+
#filters * {
|
|
418
|
+
margin-right: var(--margin-default);
|
|
419
419
|
}
|
|
420
420
|
|
|
421
421
|
#tailer {
|
|
@@ -432,29 +432,9 @@
|
|
|
432
432
|
color: var(--primary-color);
|
|
433
433
|
}
|
|
434
434
|
|
|
435
|
-
#add button {
|
|
436
|
-
background-color: var(--status-success-color);
|
|
437
|
-
border: 0;
|
|
438
|
-
border-radius: 50%;
|
|
439
|
-
padding: 5px;
|
|
440
|
-
width: 36px;
|
|
441
|
-
height: 36px;
|
|
442
|
-
cursor: pointer;
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
#add button:hover {
|
|
446
|
-
background-color: var(--focus-background-color);
|
|
447
|
-
box-shadow: var(--box-shadow);
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
#add button mwc-icon {
|
|
451
|
-
font-size: 2em;
|
|
452
|
-
color: var(--theme-white-color);
|
|
453
|
-
}
|
|
454
|
-
|
|
455
435
|
@media only screen and (max-width: 460px) {
|
|
456
|
-
#
|
|
457
|
-
|
|
436
|
+
#modes {
|
|
437
|
+
display: none;
|
|
458
438
|
}
|
|
459
439
|
}
|
|
460
440
|
`
|
|
@@ -475,40 +455,25 @@
|
|
|
475
455
|
|
|
476
456
|
return html`
|
|
477
457
|
<ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
|
|
478
|
-
<ox-filters-form
|
|
479
|
-
slot="headroom"
|
|
480
|
-
.config=${config}
|
|
481
|
-
@submit=${event => {
|
|
482
|
-
event.preventDefault()
|
|
483
|
-
console.log(this.searchForm.queryFilters)
|
|
484
|
-
}}
|
|
485
|
-
@input=${() => console.log(this.searchForm.queryFilters)}
|
|
486
|
-
@change=${() => console.log(this.searchForm.queryFilters)}
|
|
487
|
-
></ox-filters-form>
|
|
458
|
+
<ox-filters-form slot="headroom" @change=${e => console.log('changed', e.detail)}></ox-filters-form>
|
|
488
459
|
|
|
489
460
|
<div slot="headroom" id="headroom">
|
|
490
|
-
<div id="
|
|
491
|
-
<
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
}}
|
|
505
|
-
>sort</mwc-icon
|
|
506
|
-
>
|
|
507
|
-
<ox-popup id="sorter-control">
|
|
508
|
-
<ox-sorters-control> </ox-sorters-control>
|
|
509
|
-
</ox-popup>
|
|
510
|
-
</div>
|
|
461
|
+
<div id="sorters">
|
|
462
|
+
<mwc-icon
|
|
463
|
+
@click=${e => {
|
|
464
|
+
const target = e.currentTarget
|
|
465
|
+
this.renderRoot.querySelector('#sorter-control').open({
|
|
466
|
+
right: 0,
|
|
467
|
+
top: target.offsetTop + target.offsetHeight
|
|
468
|
+
})
|
|
469
|
+
}}
|
|
470
|
+
>sort</mwc-icon
|
|
471
|
+
>
|
|
472
|
+
<ox-popup id="sorter-control">
|
|
473
|
+
<ox-sorters-control> </ox-sorters-control>
|
|
474
|
+
</ox-popup>
|
|
511
475
|
</div>
|
|
476
|
+
|
|
512
477
|
<div id="modes">
|
|
513
478
|
<mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
|
|
514
479
|
<mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NOOP } from '../const';
|
|
2
|
-
import { generateGutterColumn } from '../gutters';
|
|
3
2
|
import { getEditor } from '../editors';
|
|
3
|
+
import { generateGutterColumn } from '../gutters';
|
|
4
4
|
import { getGristEventHandler } from '../handlers';
|
|
5
5
|
import { getRenderer } from '../renderers';
|
|
6
6
|
export const buildColumn = (column) => {
|
|
@@ -8,7 +8,7 @@ export const buildColumn = (column) => {
|
|
|
8
8
|
if (column.type == 'gutter') {
|
|
9
9
|
compiled = generateGutterColumn(column);
|
|
10
10
|
}
|
|
11
|
-
var { name, header, record, handlers, label } = compiled;
|
|
11
|
+
var { name, header, record, handlers, label, filter } = compiled;
|
|
12
12
|
/* header */
|
|
13
13
|
if (typeof header == 'string') {
|
|
14
14
|
compiled.header = {
|
|
@@ -61,6 +61,30 @@ export const buildColumn = (column) => {
|
|
|
61
61
|
renderer: recordRenderer,
|
|
62
62
|
editor
|
|
63
63
|
};
|
|
64
|
+
/* filter */
|
|
65
|
+
if (filter) {
|
|
66
|
+
let type = typeof filter;
|
|
67
|
+
switch (type) {
|
|
68
|
+
case 'boolean':
|
|
69
|
+
compiled.filter = {
|
|
70
|
+
type: column.type,
|
|
71
|
+
operator: 'eq'
|
|
72
|
+
};
|
|
73
|
+
break;
|
|
74
|
+
case 'string':
|
|
75
|
+
compiled.filter = {
|
|
76
|
+
type: column.type,
|
|
77
|
+
operator: filter
|
|
78
|
+
};
|
|
79
|
+
break;
|
|
80
|
+
default:
|
|
81
|
+
compiled.filter = {
|
|
82
|
+
//@ts-ignore
|
|
83
|
+
type: column.type,
|
|
84
|
+
...filter
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
}
|
|
64
88
|
/* handler */
|
|
65
89
|
var { click, dblclick } = handlers || {};
|
|
66
90
|
compiled.handlers = {
|