@dataloop-ai/components 0.20.167 → 0.20.168-ds-v3.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.
- package/package.json +1 -1
- package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue +172 -36
- package/src/components/compound/DlSelect/DlSelect.vue +10 -2
- package/src/components/compound/DlTable/DlTable.vue +11 -11
- package/src/components/compound/DlTreeTable/DlTreeTable.vue +8 -4
- package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +1 -1
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
>
|
|
9
9
|
<template #header>
|
|
10
10
|
<dl-dialog-box-header
|
|
11
|
-
title="DQL
|
|
11
|
+
title="DQL Editor"
|
|
12
12
|
:close-button="true"
|
|
13
13
|
@onClose="isOpen = false"
|
|
14
14
|
/>
|
|
@@ -21,31 +21,93 @@
|
|
|
21
21
|
>
|
|
22
22
|
<dl-select
|
|
23
23
|
:model-value="selectedOption"
|
|
24
|
+
ref="jsonQueryMenu"
|
|
24
25
|
width="300px"
|
|
25
26
|
:options="selectOptions"
|
|
26
27
|
placeholder="New Query"
|
|
28
|
+
searchable
|
|
29
|
+
after-options-padding="0"
|
|
30
|
+
no-options-padding="0"
|
|
31
|
+
menu-style="overflow-y: hidden;"
|
|
27
32
|
@update:model-value="onQuerySelect"
|
|
28
33
|
>
|
|
29
34
|
<template #selected="scope">
|
|
30
|
-
<span class="json-query-menu-
|
|
35
|
+
<span class="json-query-menu-selected">
|
|
31
36
|
{{ scope.opt ? scope.opt.label : '' }}
|
|
32
37
|
</span>
|
|
33
38
|
</template>
|
|
34
39
|
<template #option="scope">
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
40
|
+
<div class="json-query-menu-option">
|
|
41
|
+
<div class="json-query-menu-option-label">
|
|
42
|
+
{{ scope.opt.label }}
|
|
43
|
+
</div>
|
|
44
|
+
<dl-icon
|
|
45
|
+
v-if="scope.opt.label !== 'New Query'"
|
|
46
|
+
icon="icon-dl-delete"
|
|
47
|
+
color="dl-color-negative"
|
|
48
|
+
class="json-query-menu-option-delete"
|
|
49
|
+
@click.stop="onDelete(scope.opt)"
|
|
50
|
+
>
|
|
51
|
+
<dl-tooltip>Delete</dl-tooltip>
|
|
52
|
+
</dl-icon>
|
|
53
|
+
</div>
|
|
54
|
+
</template>
|
|
55
|
+
<template #after-options>
|
|
56
|
+
<dl-separator
|
|
57
|
+
style="margin: 0 0 2px 0 !important"
|
|
58
|
+
type="horizontal"
|
|
59
|
+
/>
|
|
60
|
+
<dl-button
|
|
61
|
+
icon="icon-dl-save"
|
|
62
|
+
flat
|
|
63
|
+
fluid
|
|
64
|
+
secondary
|
|
65
|
+
size="s"
|
|
66
|
+
label="Save Query"
|
|
67
|
+
class="json-query-menu-save-button"
|
|
68
|
+
@click="onSave"
|
|
69
|
+
/>
|
|
70
|
+
</template>
|
|
71
|
+
<template #no-options>
|
|
72
|
+
<div class="json-query-menu-no-option">
|
|
73
|
+
{{ noOptionsLabel }}
|
|
74
|
+
</div>
|
|
75
|
+
<dl-separator
|
|
76
|
+
style="margin: 0 0 2px 0 !important"
|
|
77
|
+
type="horizontal"
|
|
78
|
+
/>
|
|
79
|
+
<dl-button
|
|
80
|
+
icon="icon-dl-save"
|
|
81
|
+
flat
|
|
82
|
+
fluid
|
|
83
|
+
secondary
|
|
84
|
+
size="s"
|
|
85
|
+
label="Save Query"
|
|
86
|
+
class="json-query-menu-save-button"
|
|
87
|
+
@click="onSave"
|
|
88
|
+
/>
|
|
38
89
|
</template>
|
|
39
90
|
</dl-select>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
91
|
+
<div>
|
|
92
|
+
<dl-button
|
|
93
|
+
icon="icon-dl-align-left"
|
|
94
|
+
tooltip="Align Left"
|
|
95
|
+
flat
|
|
96
|
+
color="secondary"
|
|
97
|
+
padding="0px 3px"
|
|
98
|
+
:disabled="alignDisabled"
|
|
99
|
+
@click="alignJSON"
|
|
100
|
+
/>
|
|
101
|
+
<dl-button
|
|
102
|
+
icon="icon-dl-copy"
|
|
103
|
+
tooltip="Copy"
|
|
104
|
+
flat
|
|
105
|
+
color="secondary"
|
|
106
|
+
padding="0px 3px"
|
|
107
|
+
:disabled="alignDisabled"
|
|
108
|
+
@click="copyJSON"
|
|
109
|
+
/>
|
|
110
|
+
</div>
|
|
49
111
|
</div>
|
|
50
112
|
<dl-json-editor
|
|
51
113
|
ref="jsonEditor"
|
|
@@ -65,7 +127,7 @@
|
|
|
65
127
|
flat
|
|
66
128
|
color="secondary"
|
|
67
129
|
padding="0"
|
|
68
|
-
@click="
|
|
130
|
+
@click="optionToDelete = selectedOption"
|
|
69
131
|
/>
|
|
70
132
|
<div class="json-editor-footer-actions">
|
|
71
133
|
<dl-button
|
|
@@ -101,27 +163,20 @@
|
|
|
101
163
|
<template #body>
|
|
102
164
|
<dl-input
|
|
103
165
|
v-model="newQueryName"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
166
|
+
:red-asterisk="true"
|
|
167
|
+
:required="true"
|
|
168
|
+
title="Query Name"
|
|
169
|
+
placeholder="Insert query name"
|
|
107
170
|
/>
|
|
108
171
|
</template>
|
|
109
172
|
<template #footer>
|
|
110
173
|
<div class="dl-smart-search__buttons--save">
|
|
111
174
|
<dl-button
|
|
112
175
|
:disabled="!newQueryName"
|
|
113
|
-
outlined
|
|
114
|
-
style="margin-right: 5px"
|
|
115
176
|
@click="() => saveQuery(false)"
|
|
116
177
|
>
|
|
117
178
|
Save
|
|
118
179
|
</dl-button>
|
|
119
|
-
<dl-button
|
|
120
|
-
:disabled="!newQueryName"
|
|
121
|
-
@click="() => saveQuery(true)"
|
|
122
|
-
>
|
|
123
|
-
Save and Search
|
|
124
|
-
</dl-button>
|
|
125
180
|
</div>
|
|
126
181
|
</template>
|
|
127
182
|
</dl-dialog-box>
|
|
@@ -135,12 +190,13 @@
|
|
|
135
190
|
/>
|
|
136
191
|
</template>
|
|
137
192
|
<template #body>
|
|
138
|
-
<dl-typography
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
193
|
+
<dl-typography size="h5">
|
|
194
|
+
Are you sure you want to permanently delete the following query?
|
|
195
|
+
<br />
|
|
196
|
+
{{ optionToDelete.label }}
|
|
197
|
+
<br />
|
|
198
|
+
<br />
|
|
199
|
+
This action cannot be undone.
|
|
144
200
|
</dl-typography>
|
|
145
201
|
</template>
|
|
146
202
|
<template #footer>
|
|
@@ -166,10 +222,12 @@ import {
|
|
|
166
222
|
} from 'vue-demi'
|
|
167
223
|
import { DlSelect } from '../../../DlSelect'
|
|
168
224
|
import { DlSelectOption } from '../../../DlSelect/types'
|
|
225
|
+
import { DlSeparator } from '../../../../essential/DlSeparator'
|
|
169
226
|
import { DlButton } from '../../../../basic'
|
|
170
227
|
import { DlDialogBox, DlDialogBoxHeader } from '../../../DlDialogBox'
|
|
171
228
|
import { DlJsonEditor } from '../../../DlJsonEditor'
|
|
172
|
-
import {
|
|
229
|
+
import { DlTooltip } from '../../../../shared/DlTooltip'
|
|
230
|
+
import { DlTypography, DlIcon } from '../../../../essential'
|
|
173
231
|
import { DlInput } from '../../../DlInput'
|
|
174
232
|
import { stateManager } from '../../../../../StateManager'
|
|
175
233
|
import { cloneDeep, isEqual, uniqBy } from 'lodash'
|
|
@@ -179,9 +237,12 @@ export default defineComponent({
|
|
|
179
237
|
components: {
|
|
180
238
|
DlDialogBox,
|
|
181
239
|
DlDialogBoxHeader,
|
|
240
|
+
DlIcon,
|
|
182
241
|
DlJsonEditor,
|
|
183
242
|
DlButton,
|
|
184
243
|
DlSelect,
|
|
244
|
+
DlSeparator,
|
|
245
|
+
DlTooltip,
|
|
185
246
|
DlTypography,
|
|
186
247
|
DlInput
|
|
187
248
|
},
|
|
@@ -214,11 +275,24 @@ export default defineComponent({
|
|
|
214
275
|
'update:modelValue',
|
|
215
276
|
'search',
|
|
216
277
|
'change',
|
|
278
|
+
'copied',
|
|
217
279
|
'update:options',
|
|
218
280
|
'save',
|
|
219
281
|
'delete',
|
|
220
282
|
'select'
|
|
221
283
|
],
|
|
284
|
+
methods: {
|
|
285
|
+
onDelete(option: DlSelectOption) {
|
|
286
|
+
const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
|
|
287
|
+
select?.closeMenu()
|
|
288
|
+
this.optionToDelete = option
|
|
289
|
+
},
|
|
290
|
+
onSave() {
|
|
291
|
+
const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
|
|
292
|
+
select?.closeMenu()
|
|
293
|
+
this.showSaveDialog = true
|
|
294
|
+
}
|
|
295
|
+
},
|
|
222
296
|
setup(props, { emit }) {
|
|
223
297
|
const { modelValue, options, json, selectedFilter } = toRefs(props)
|
|
224
298
|
|
|
@@ -230,7 +304,15 @@ export default defineComponent({
|
|
|
230
304
|
const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
|
|
231
305
|
const jsonEditor = ref<any>(null)
|
|
232
306
|
const showSaveDialog = ref(false)
|
|
233
|
-
const
|
|
307
|
+
const optionToDelete = ref<DlSelectOption>(null)
|
|
308
|
+
const showDeleteDialog = computed<boolean>({
|
|
309
|
+
get: () => !!optionToDelete.value,
|
|
310
|
+
set: (val) => {
|
|
311
|
+
if (!val) {
|
|
312
|
+
optionToDelete.value = null
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
})
|
|
234
316
|
const newQueryName = ref('')
|
|
235
317
|
const alignDisabled = ref(false)
|
|
236
318
|
|
|
@@ -252,6 +334,12 @@ export default defineComponent({
|
|
|
252
334
|
}
|
|
253
335
|
)
|
|
254
336
|
|
|
337
|
+
const noOptionsLabel = computed<string>(() => {
|
|
338
|
+
return selectOptions.value.length
|
|
339
|
+
? 'No Results Found'
|
|
340
|
+
: 'No Saved Queries'
|
|
341
|
+
})
|
|
342
|
+
|
|
255
343
|
watch(
|
|
256
344
|
selectedFilter,
|
|
257
345
|
() => {
|
|
@@ -273,6 +361,11 @@ export default defineComponent({
|
|
|
273
361
|
jsonEditor.value?.format()
|
|
274
362
|
}
|
|
275
363
|
|
|
364
|
+
const copyJSON = async () => {
|
|
365
|
+
await navigator.clipboard.writeText(stringifiedJSON.value)
|
|
366
|
+
emit('copied')
|
|
367
|
+
}
|
|
368
|
+
|
|
276
369
|
const onQuerySelect = (option: DlSelectOption) => {
|
|
277
370
|
if (option.label === selectedOption.value.label) {
|
|
278
371
|
return
|
|
@@ -356,10 +449,10 @@ export default defineComponent({
|
|
|
356
449
|
|
|
357
450
|
const deleteQuery = () => {
|
|
358
451
|
const toDelete = options.value.find(
|
|
359
|
-
(o: DlSelectOption) => o.label ===
|
|
452
|
+
(o: DlSelectOption) => o.label === optionToDelete.value.label
|
|
360
453
|
)
|
|
361
454
|
const newOptions = options.value.filter(
|
|
362
|
-
(o: DlSelectOption) => o.label !==
|
|
455
|
+
(o: DlSelectOption) => o.label !== optionToDelete.value.label
|
|
363
456
|
)
|
|
364
457
|
|
|
365
458
|
emit('delete', toDelete)
|
|
@@ -390,11 +483,14 @@ export default defineComponent({
|
|
|
390
483
|
showSaveDialog,
|
|
391
484
|
stringifiedJSON,
|
|
392
485
|
selectedOption,
|
|
486
|
+
noOptionsLabel,
|
|
393
487
|
hasActiveFilter,
|
|
394
488
|
alignJSON,
|
|
489
|
+
copyJSON,
|
|
395
490
|
onQuerySelect,
|
|
396
491
|
newQueryName,
|
|
397
492
|
alignDisabled,
|
|
493
|
+
optionToDelete,
|
|
398
494
|
showDeleteDialog,
|
|
399
495
|
selectOptions,
|
|
400
496
|
search,
|
|
@@ -426,10 +522,50 @@ export default defineComponent({
|
|
|
426
522
|
}
|
|
427
523
|
|
|
428
524
|
.json-query-menu-option {
|
|
525
|
+
display: flex;
|
|
526
|
+
flex-direction: row;
|
|
527
|
+
}
|
|
528
|
+
.json-query-menu-option-label,
|
|
529
|
+
.json-query-menu-selected {
|
|
530
|
+
line-height: 20px;
|
|
429
531
|
white-space: nowrap;
|
|
430
532
|
display: inline-block;
|
|
431
533
|
width: 265px;
|
|
432
534
|
overflow: hidden;
|
|
433
535
|
text-overflow: ellipsis;
|
|
434
536
|
}
|
|
537
|
+
.json-query-menu-option:hover .json-query-menu-option-label {
|
|
538
|
+
margin-right: 6px;
|
|
539
|
+
width: 255px;
|
|
540
|
+
}
|
|
541
|
+
.json-query-menu-option-delete {
|
|
542
|
+
overflow-x: hidden;
|
|
543
|
+
width: 0;
|
|
544
|
+
}
|
|
545
|
+
.json-query-menu-option:hover .json-query-menu-option-delete {
|
|
546
|
+
border-radius: 4px;
|
|
547
|
+
overflow-x: visible;
|
|
548
|
+
padding: 4px;
|
|
549
|
+
width: auto;
|
|
550
|
+
}
|
|
551
|
+
.json-query-menu-option-delete:hover {
|
|
552
|
+
background-color: var(--dl-color-fill-secondary);
|
|
553
|
+
}
|
|
554
|
+
.json-query-menu-option-delete:active {
|
|
555
|
+
background-color: var(--dl-color-negative-background);
|
|
556
|
+
}
|
|
557
|
+
.json-query-menu-no-option {
|
|
558
|
+
display: flex;
|
|
559
|
+
padding: 20px 0;
|
|
560
|
+
flex-direction: column;
|
|
561
|
+
align-items: center;
|
|
562
|
+
align-self: stretch;
|
|
563
|
+
}
|
|
564
|
+
.json-query-menu-save-button:hover {
|
|
565
|
+
background-color: var(--dl-color-fill-secondary);
|
|
566
|
+
}
|
|
567
|
+
.dl-smart-search__buttons--save {
|
|
568
|
+
text-align: right;
|
|
569
|
+
width: 100%;
|
|
570
|
+
}
|
|
435
571
|
</style>
|
|
@@ -170,13 +170,17 @@
|
|
|
170
170
|
<slot name="before-options" />
|
|
171
171
|
</dl-item-section>
|
|
172
172
|
</dl-list-item>
|
|
173
|
-
<dl-list-item
|
|
173
|
+
<dl-list-item
|
|
174
|
+
v-if="noOptions"
|
|
175
|
+
:style="computedNoOptionsStyle"
|
|
176
|
+
:padding="noOptionsPadding"
|
|
177
|
+
>
|
|
174
178
|
<dl-item-section color="dl-color-medium">
|
|
175
179
|
<slot name="no-options"> No options </slot>
|
|
176
180
|
</dl-item-section>
|
|
177
181
|
</dl-list-item>
|
|
178
182
|
<dl-list
|
|
179
|
-
v-if="showMenuList"
|
|
183
|
+
v-else-if="showMenuList"
|
|
180
184
|
class="select-list"
|
|
181
185
|
:padding="false"
|
|
182
186
|
:style="
|
|
@@ -510,6 +514,10 @@ export default defineComponent({
|
|
|
510
514
|
type: String,
|
|
511
515
|
default: null
|
|
512
516
|
},
|
|
517
|
+
noOptionsPadding: {
|
|
518
|
+
type: String,
|
|
519
|
+
default: null
|
|
520
|
+
},
|
|
513
521
|
keepFocusOnBlur: {
|
|
514
522
|
type: Boolean,
|
|
515
523
|
default: false
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
<div
|
|
157
157
|
v-if="
|
|
158
158
|
visibleColumns &&
|
|
159
|
-
|
|
159
|
+
visibleColumns.length
|
|
160
160
|
"
|
|
161
161
|
class="visible-columns-justify-end"
|
|
162
162
|
style="width: 100%; display: flex"
|
|
@@ -269,8 +269,8 @@
|
|
|
269
269
|
isRowSelected(getRowKey(props.item))
|
|
270
270
|
? 'selected'
|
|
271
271
|
: hasAnyAction
|
|
272
|
-
|
|
273
|
-
|
|
272
|
+
? ' cursor-pointer'
|
|
273
|
+
: ''
|
|
274
274
|
"
|
|
275
275
|
:no-hover="noHover"
|
|
276
276
|
@click="
|
|
@@ -555,7 +555,7 @@
|
|
|
555
555
|
<div
|
|
556
556
|
v-if="
|
|
557
557
|
visibleColumns &&
|
|
558
|
-
|
|
558
|
+
visibleColumns.length
|
|
559
559
|
"
|
|
560
560
|
class="visible-columns-justify-end"
|
|
561
561
|
style="width: 100%; display: flex"
|
|
@@ -666,8 +666,8 @@
|
|
|
666
666
|
<dl-top-scroll
|
|
667
667
|
v-if="
|
|
668
668
|
tableScroll &&
|
|
669
|
-
|
|
670
|
-
|
|
669
|
+
infiniteScroll &&
|
|
670
|
+
!isDataEmpty
|
|
671
671
|
"
|
|
672
672
|
:container-ref="tableScroll"
|
|
673
673
|
@scroll-to-top="
|
|
@@ -701,8 +701,8 @@
|
|
|
701
701
|
isRowSelected(getRowKey(row))
|
|
702
702
|
? 'selected'
|
|
703
703
|
: hasAnyAction
|
|
704
|
-
|
|
705
|
-
|
|
704
|
+
? ' cursor-pointer'
|
|
705
|
+
: ''
|
|
706
706
|
"
|
|
707
707
|
:no-hover="noHover"
|
|
708
708
|
@click="onTrClick($event, row, pageIndex)"
|
|
@@ -837,8 +837,8 @@
|
|
|
837
837
|
<dl-bottom-scroll
|
|
838
838
|
v-if="
|
|
839
839
|
tableScroll &&
|
|
840
|
-
|
|
841
|
-
|
|
840
|
+
infiniteScroll &&
|
|
841
|
+
!isDataEmpty
|
|
842
842
|
"
|
|
843
843
|
:container-ref="tableScroll"
|
|
844
844
|
@scroll-to-bottom="
|
|
@@ -895,7 +895,7 @@
|
|
|
895
895
|
<div
|
|
896
896
|
v-if="
|
|
897
897
|
hasBottomSelectionBanner &&
|
|
898
|
-
|
|
898
|
+
selectedRowsLabel(rowsSelectedNumber)
|
|
899
899
|
"
|
|
900
900
|
class="dl-table__control"
|
|
901
901
|
>
|
|
@@ -788,7 +788,10 @@ export default defineComponent({
|
|
|
788
788
|
let shouldSkipValidation = false
|
|
789
789
|
|
|
790
790
|
if (storedValidTarget.value && targetRow.value) {
|
|
791
|
-
const targetParent = findParentForChild(
|
|
791
|
+
const targetParent = findParentForChild(
|
|
792
|
+
targetRow.value.id,
|
|
793
|
+
tableRows.value
|
|
794
|
+
)
|
|
792
795
|
if (targetParent === storedValidTarget.value.id) {
|
|
793
796
|
finalTarget = storedValidTarget.value
|
|
794
797
|
shouldSkipValidation = true
|
|
@@ -800,7 +803,9 @@ export default defineComponent({
|
|
|
800
803
|
targetRow: finalTarget
|
|
801
804
|
})
|
|
802
805
|
|
|
803
|
-
const isDragValid =
|
|
806
|
+
const isDragValid =
|
|
807
|
+
shouldSkipValidation ||
|
|
808
|
+
checkParentCondition(draggedRow.value, finalTarget)
|
|
804
809
|
if (isDragValid) {
|
|
805
810
|
const smartSortingMovement = {
|
|
806
811
|
...sortingMovement.value,
|
|
@@ -920,13 +925,12 @@ export default defineComponent({
|
|
|
920
925
|
return false
|
|
921
926
|
}
|
|
922
927
|
|
|
923
|
-
|
|
924
928
|
if (targetRow.disableDraggable) {
|
|
925
929
|
return false
|
|
926
930
|
}
|
|
927
931
|
|
|
928
932
|
const isValid = checkParentCondition(draggedRow.value, targetRow)
|
|
929
|
-
|
|
933
|
+
|
|
930
934
|
if (isValid) {
|
|
931
935
|
storedValidTarget.value = targetRow
|
|
932
936
|
}
|