@mixd-id/web-scaffold 0.1.230406042 → 0.1.230406044
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/Datepicker.vue +2 -5
- package/src/components/ListView.vue +319 -54
- package/src/components/ListViewSettings.vue +121 -67
- package/src/components/Modal.vue +19 -3
- package/src/components/PageBuilder.vue +299 -69
- package/src/components/VirtualScroll.vue +5 -1
- package/src/components/VirtualTable.vue +1 -2
package/package.json
CHANGED
|
@@ -133,10 +133,7 @@ export default{
|
|
|
133
133
|
default: ''
|
|
134
134
|
},
|
|
135
135
|
|
|
136
|
-
modelValue:
|
|
137
|
-
type: String,
|
|
138
|
-
default: currentDate
|
|
139
|
-
}
|
|
136
|
+
modelValue:String
|
|
140
137
|
|
|
141
138
|
},
|
|
142
139
|
|
|
@@ -309,4 +306,4 @@ export default{
|
|
|
309
306
|
@apply bg-primary;
|
|
310
307
|
}
|
|
311
308
|
|
|
312
|
-
</style>
|
|
309
|
+
</style>
|
|
@@ -1,27 +1,71 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="$style.comp" v-if="
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
<div :class="$style.comp" v-if="configLoaded">
|
|
3
|
+
|
|
4
|
+
<slot v-if="$slots.head" name="head"></slot>
|
|
5
|
+
<div v-else class="flex flex-row items-center gap-4">
|
|
6
|
+
<div class="flex-1 flex flex-row gap-4">
|
|
7
|
+
<button type="button" ref="presetSelectorBtn"
|
|
8
|
+
class="flex flex-row gap-1 items-center"
|
|
9
|
+
@click="$refs.presetSelector.open($refs.presetSelectorBtn)">
|
|
10
|
+
<h3>{{ preset.name }}</h3>
|
|
11
|
+
<svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
|
|
12
|
+
</button>
|
|
13
|
+
<button type="button" @click="openPreset()">
|
|
14
|
+
<svg width="19" height="19" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M452.515 237l31.843-18.382c9.426-5.441 13.996-16.542 11.177-27.054-11.404-42.531-33.842-80.547-64.058-110.797-7.68-7.688-19.575-9.246-28.985-3.811l-31.785 18.358a196.276 196.276 0 0 0-32.899-19.02V39.541a24.016 24.016 0 0 0-17.842-23.206c-41.761-11.107-86.117-11.121-127.93-.001-10.519 2.798-17.844 12.321-17.844 23.206v36.753a196.276 196.276 0 0 0-32.899 19.02l-31.785-18.358c-9.41-5.435-21.305-3.877-28.985 3.811-30.216 30.25-52.654 68.265-64.058 110.797-2.819 10.512 1.751 21.613 11.177 27.054L59.485 237a197.715 197.715 0 0 0 0 37.999l-31.843 18.382c-9.426 5.441-13.996 16.542-11.177 27.054 11.404 42.531 33.842 80.547 64.058 110.797 7.68 7.688 19.575 9.246 28.985 3.811l31.785-18.358a196.202 196.202 0 0 0 32.899 19.019v36.753a24.016 24.016 0 0 0 17.842 23.206c41.761 11.107 86.117 11.122 127.93.001 10.519-2.798 17.844-12.321 17.844-23.206v-36.753a196.34 196.34 0 0 0 32.899-19.019l31.785 18.358c9.41 5.435 21.305 3.877 28.985-3.811 30.216-30.25 52.654-68.266 64.058-110.797 2.819-10.512-1.751-21.613-11.177-27.054L452.515 275c1.22-12.65 1.22-25.35 0-38zm-52.679 63.019l43.819 25.289a200.138 200.138 0 0 1-33.849 58.528l-43.829-25.309c-31.984 27.397-36.659 30.077-76.168 44.029v50.599a200.917 200.917 0 0 1-67.618 0v-50.599c-39.504-13.95-44.196-16.642-76.168-44.029l-43.829 25.309a200.15 200.15 0 0 1-33.849-58.528l43.819-25.289c-7.63-41.299-7.634-46.719 0-88.038l-43.819-25.289c7.85-21.229 19.31-41.049 33.849-58.529l43.829 25.309c31.984-27.397 36.66-30.078 76.168-44.029V58.845a200.917 200.917 0 0 1 67.618 0v50.599c39.504 13.95 44.196 16.642 76.168 44.029l43.829-25.309a200.143 200.143 0 0 1 33.849 58.529l-43.819 25.289c7.631 41.3 7.634 46.718 0 88.037zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 144c-26.468 0-48-21.532-48-48 0-26.467 21.532-48 48-48s48 21.533 48 48c0 26.468-21.532 48-48 48z"/></svg>
|
|
9
15
|
</button>
|
|
16
|
+
|
|
17
|
+
<ContextMenu ref="presetSelector">
|
|
18
|
+
<div class="flex-1 flex flex-col w-[270px]">
|
|
19
|
+
<button type="button" v-for="(preset, idx) in config.presets"
|
|
20
|
+
class="p-3 text-left hover:bg-primary hover:text-white"
|
|
21
|
+
@click="config.presetIdx = idx">
|
|
22
|
+
{{ preset.name }}
|
|
23
|
+
</button>
|
|
24
|
+
</div>
|
|
25
|
+
</ContextMenu>
|
|
26
|
+
|
|
27
|
+
<Modal ref="setting" width="680" height="560">
|
|
28
|
+
<template #head>
|
|
29
|
+
<div class="relative">
|
|
30
|
+
<div class="absolute top-0 right-0 p-2">
|
|
31
|
+
<button type="button" class="p-2" @click="$refs.setting.close()">
|
|
32
|
+
<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
|
|
33
|
+
<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
|
|
34
|
+
</svg>
|
|
35
|
+
</button>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</template>
|
|
39
|
+
<template #foot>
|
|
40
|
+
<div class="p-6 py-4 border-t-[1px] border-text-50">
|
|
41
|
+
<Button class="w-[90px]" @click="applyPreset">Apply</Button>
|
|
42
|
+
</div>
|
|
43
|
+
</template>
|
|
44
|
+
<ListViewSettings ref="listviewSettings" class="flex-1"
|
|
45
|
+
:config="copiedConfig" />
|
|
46
|
+
</Modal>
|
|
10
47
|
</div>
|
|
11
|
-
<Textbox placeholder="Cari..." :clearable="true" @clear="clearSearch" v-model="preset.search"
|
|
12
|
-
@keyup.enter="load">
|
|
13
48
|
|
|
49
|
+
<slot name="headerOpt"></slot>
|
|
50
|
+
|
|
51
|
+
<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
|
|
52
|
+
@keyup.enter="load" :class="$style.searchBox">
|
|
53
|
+
<template #start>
|
|
54
|
+
<div class="pl-2">
|
|
55
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>
|
|
56
|
+
</div>
|
|
57
|
+
</template>
|
|
14
58
|
</Textbox>
|
|
15
59
|
</div>
|
|
16
60
|
|
|
17
61
|
<VirtualTable ref="table1" :columns="presetColumns" :items="items" class="flex-1"
|
|
18
|
-
|
|
62
|
+
@scroll-end="loadNext">
|
|
19
63
|
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
20
|
-
<div :class="getHeader(column)">
|
|
64
|
+
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
21
65
|
<div>
|
|
22
66
|
{{ column.label ?? column.key }}
|
|
23
67
|
</div>
|
|
24
|
-
<div class="absolute top-0 right-0 p-2 bg-base-500" v-if="
|
|
68
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-if="presetSortedColumns[column.key] === 'asc'">
|
|
25
69
|
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
26
70
|
<path d="M6.75 5C6.75 4.58579 6.41421 4.25 6 4.25C5.58579 4.25 5.25 4.58579 5.25 5V17.6893L3.53033 15.9697C3.23744 15.6768 2.76256 15.6768 2.46967 15.9697C2.17678 16.2626 2.17678 16.7374 2.46967 17.0303L4.76256 19.3232C5.44598 20.0066 6.55402 20.0066 7.23744 19.3232L9.53033 17.0303C9.82322 16.7374 9.82322 16.2626 9.53033 15.9697C9.23744 15.6768 8.76256 15.6768 8.46967 15.9697L6.75 17.6893V5Z"/>
|
|
27
71
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H21C21.4142 17.75 21.75 17.4142 21.75 17C21.75 16.5858 21.4142 16.25 21 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
|
|
@@ -29,7 +73,7 @@
|
|
|
29
73
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 7C12.25 6.58579 12.5858 6.25 13 6.25H15C15.4142 6.25 15.75 6.58579 15.75 7C15.75 7.41421 15.4142 7.75 15 7.75H13C12.5858 7.75 12.25 7.41421 12.25 7Z"/>
|
|
30
74
|
</svg>
|
|
31
75
|
</div>
|
|
32
|
-
<div class="absolute top-0 right-0 p-2 bg-base-500" v-else-if="
|
|
76
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-else-if="presetSortedColumns[column.key] === 'desc'">
|
|
33
77
|
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
34
78
|
<path d="M6.75 5C6.75 4.58579 6.41421 4.25 6 4.25C5.58579 4.25 5.25 4.58579 5.25 5V17.6893L3.53033 15.9697C3.23744 15.6768 2.76256 15.6768 2.46967 15.9697C2.17678 16.2626 2.17678 16.7374 2.46967 17.0303L4.76256 19.3232C5.44598 20.0066 6.55402 20.0066 7.23744 19.3232L9.53033 17.0303C9.82322 16.7374 9.82322 16.2626 9.53033 15.9697C9.23744 15.6768 8.76256 15.6768 8.46967 15.9697L6.75 17.6893V5Z"/>
|
|
35
79
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 7C12.25 6.58579 12.5858 6.25 13 6.25H21C21.4142 6.25 21.75 6.58579 21.75 7C21.75 7.41421 21.4142 7.75 21 7.75H13C12.5858 7.75 12.25 7.41421 12.25 7Z"/>
|
|
@@ -49,24 +93,38 @@
|
|
|
49
93
|
</template>
|
|
50
94
|
</VirtualTable>
|
|
51
95
|
|
|
52
|
-
<
|
|
53
|
-
<
|
|
54
|
-
<div class="
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
<
|
|
58
|
-
<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
|
|
59
|
-
<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
|
|
60
|
-
</svg>
|
|
61
|
-
</button>
|
|
96
|
+
<ContextMenu ref="columnMenu" :dismiss="false">
|
|
97
|
+
<div class="flex-1 flex flex-col w-[270px] p-3">
|
|
98
|
+
<div class="flex flex-col">
|
|
99
|
+
<div class="flex flex-row gap-2 items-center">
|
|
100
|
+
<div class="p-2 text-text-300 flex-1">Sort By</div>
|
|
101
|
+
<div class="text-primary cursor-pointer text-sm" @click="openPreset('sort');$refs.columnMenu.close()">Sort Options</div>
|
|
62
102
|
</div>
|
|
103
|
+
<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="setSortCurrent(1)">Sort Ascending</div>
|
|
104
|
+
<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="setSortCurrent(2)">Sort Descending</div>
|
|
63
105
|
</div>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
106
|
+
<div class="h-[1px] bg-text-50 my-2"></div>
|
|
107
|
+
<div class="flex flex-col">
|
|
108
|
+
<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="hide">Hide</div>
|
|
109
|
+
<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="openPreset();$refs.columnMenu.close()">Column Options</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="h-[1px] bg-text-50 my-2"></div>
|
|
112
|
+
<div class="flex flex-col">
|
|
113
|
+
<div class="flex flex-row gap-2 items-center">
|
|
114
|
+
<div class="p-2 text-text-300 flex-1">Filters</div>
|
|
115
|
+
<div class="text-primary cursor-pointer text-sm" @click="openPreset('filter');$refs.columnMenu.close()">Filter Options</div>
|
|
116
|
+
</div>
|
|
117
|
+
<div v-if="presetCurrentFilters.length > 0">
|
|
118
|
+
<ListPage1Filter v-if="preset.filters" v-for="filter in presetCurrentFilters"
|
|
119
|
+
:filter="filter" :column="config.columns[filter.key]"
|
|
120
|
+
@remove="removeFilter(filter)" @change="load" />
|
|
121
|
+
</div>
|
|
122
|
+
<div v-else>
|
|
123
|
+
<div class="p-2 cursor-pointer" :class="$style.hoverable" @click.stop="addCurrentFilter">Add Filter</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</ContextMenu>
|
|
70
128
|
|
|
71
129
|
</div>
|
|
72
130
|
</template>
|
|
@@ -74,8 +132,11 @@
|
|
|
74
132
|
<script>
|
|
75
133
|
|
|
76
134
|
import throttle from "lodash/throttle";
|
|
135
|
+
import VirtualTable from "./VirtualTable.vue";
|
|
136
|
+
|
|
77
137
|
|
|
78
138
|
export default{
|
|
139
|
+
components: {VirtualTable},
|
|
79
140
|
|
|
80
141
|
emits: [ ],
|
|
81
142
|
|
|
@@ -92,6 +153,7 @@ export default{
|
|
|
92
153
|
defaultValue: {}
|
|
93
154
|
},
|
|
94
155
|
configStore: String,
|
|
156
|
+
subscription: String,
|
|
95
157
|
|
|
96
158
|
title: String
|
|
97
159
|
|
|
@@ -99,6 +161,38 @@ export default{
|
|
|
99
161
|
|
|
100
162
|
methods: {
|
|
101
163
|
|
|
164
|
+
addCurrentFilter(){
|
|
165
|
+
this.addFilter(this.selectedColumn)
|
|
166
|
+
},
|
|
167
|
+
|
|
168
|
+
addFilter(key){
|
|
169
|
+
|
|
170
|
+
const column = this.presetColumns.find((_) => _.key === key)
|
|
171
|
+
|
|
172
|
+
if(!this.preset.filters){
|
|
173
|
+
this.preset.filters = []
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
let filters = [{}]
|
|
177
|
+
switch(column.type){
|
|
178
|
+
case 'date':
|
|
179
|
+
case 'enum':
|
|
180
|
+
filters = [{ value:[] }]
|
|
181
|
+
break
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
this.preset.filters.push({
|
|
185
|
+
enabled: true,
|
|
186
|
+
key: column.key,
|
|
187
|
+
label: column.label,
|
|
188
|
+
type: column.type,
|
|
189
|
+
typeParams: column.typeParams,
|
|
190
|
+
filters
|
|
191
|
+
})
|
|
192
|
+
|
|
193
|
+
this.presetFilterSelector = null
|
|
194
|
+
},
|
|
195
|
+
|
|
102
196
|
clearSearch(){
|
|
103
197
|
this.preset.search = ''
|
|
104
198
|
this.load()
|
|
@@ -118,6 +212,12 @@ export default{
|
|
|
118
212
|
.join(' ')
|
|
119
213
|
},
|
|
120
214
|
|
|
215
|
+
hide(){
|
|
216
|
+
const idx = this.preset.columns.findIndex((_) => _.key === this.selectedColumn)
|
|
217
|
+
this.preset.columns[idx].visible = false
|
|
218
|
+
this.$refs.columnMenu.close()
|
|
219
|
+
},
|
|
220
|
+
|
|
121
221
|
load(){
|
|
122
222
|
if(!this.src) return
|
|
123
223
|
|
|
@@ -137,7 +237,6 @@ export default{
|
|
|
137
237
|
.then((res) => {
|
|
138
238
|
this.items.push(...res.items)
|
|
139
239
|
this.hasNext = res.hasNext
|
|
140
|
-
console.log('loadNext', this.$data)
|
|
141
240
|
})
|
|
142
241
|
.catch((err) => {
|
|
143
242
|
this.toast(err)
|
|
@@ -146,9 +245,12 @@ export default{
|
|
|
146
245
|
},
|
|
147
246
|
|
|
148
247
|
async loadConfig(){
|
|
248
|
+
if(!this.configStoreObj) return
|
|
249
|
+
|
|
149
250
|
switch(this.configStoreObj.type){
|
|
150
251
|
case 'socket':
|
|
151
|
-
return this.socketEmit2(this.configStoreObj.src,
|
|
252
|
+
return this.socketEmit2(this.configStoreObj.src,
|
|
253
|
+
{ key:this.configStoreObj.name ?? 'ListView' })
|
|
152
254
|
.then((config) => {
|
|
153
255
|
Object.assign(this.config, config ?? {})
|
|
154
256
|
this.configLoaded = true
|
|
@@ -156,30 +258,137 @@ export default{
|
|
|
156
258
|
}
|
|
157
259
|
},
|
|
158
260
|
|
|
261
|
+
loadSummary(){
|
|
262
|
+
|
|
263
|
+
if(!this.presetSummary) return
|
|
264
|
+
|
|
265
|
+
this.socketEmit2(`${this.computedDataSource}.load-summary`, {
|
|
266
|
+
preset: this.preset
|
|
267
|
+
})
|
|
268
|
+
.then((res) => {
|
|
269
|
+
const data = res && res.data ? res.data : res
|
|
270
|
+
this.summary = data
|
|
271
|
+
})
|
|
272
|
+
.catch((err) => {
|
|
273
|
+
this.toast(err)
|
|
274
|
+
})
|
|
275
|
+
},
|
|
276
|
+
|
|
277
|
+
onHooks(model, event, items){
|
|
278
|
+
if(model === this.subscriptionObj.model){
|
|
279
|
+
switch(event){
|
|
280
|
+
|
|
281
|
+
case 'create':
|
|
282
|
+
case 'update':
|
|
283
|
+
items.forEach((item) => {
|
|
284
|
+
this.$util.unshift(this.items, item)
|
|
285
|
+
})
|
|
286
|
+
break
|
|
287
|
+
|
|
288
|
+
case 'remove':
|
|
289
|
+
case 'destroy':
|
|
290
|
+
items.forEach((item) => {
|
|
291
|
+
const idx = this.items.findIndex((_) => _.id === item.id)
|
|
292
|
+
if(idx >= 0){
|
|
293
|
+
this.items.splice(idx, 1)
|
|
294
|
+
}
|
|
295
|
+
})
|
|
296
|
+
break
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
|
|
301
|
+
openColumnOptions(key, target){
|
|
302
|
+
this.selectedColumn = key
|
|
303
|
+
this.$refs.columnMenu.open(target)
|
|
304
|
+
},
|
|
305
|
+
|
|
306
|
+
openPreset(tab){
|
|
307
|
+
if(!this.config.presetTab) this.config.presetTab = 'column'
|
|
308
|
+
|
|
309
|
+
this.copiedConfig = {
|
|
310
|
+
...JSON.parse(JSON.stringify(this.config)),
|
|
311
|
+
presetTab: tab ?? this.config.presetTab
|
|
312
|
+
}
|
|
313
|
+
this.$refs.setting.open()
|
|
314
|
+
},
|
|
315
|
+
|
|
316
|
+
applyPreset(){
|
|
317
|
+
if(JSON.stringify(this.copiedConfig) !== JSON.stringify(this.config)){
|
|
318
|
+
Object.assign(this.config, this.copiedConfig)
|
|
319
|
+
this.load()
|
|
320
|
+
}
|
|
321
|
+
this.$refs.setting.close()
|
|
322
|
+
},
|
|
323
|
+
|
|
324
|
+
removeFilter(filter){
|
|
325
|
+
this.preset.filters.splice(this.preset.filters.indexOf(filter), 1)
|
|
326
|
+
this.load()
|
|
327
|
+
},
|
|
328
|
+
|
|
329
|
+
setSortCurrent(sortType){
|
|
330
|
+
this.preset.sorts = [
|
|
331
|
+
{
|
|
332
|
+
key: this.selectedColumn,
|
|
333
|
+
label: this.presetColumns.find((_) => _.key === this.selectedColumn).label,
|
|
334
|
+
type: sortType === 2 ? 'desc' : 'asc'
|
|
335
|
+
}
|
|
336
|
+
]
|
|
337
|
+
this.load()
|
|
338
|
+
this.$refs.columnMenu.close()
|
|
339
|
+
},
|
|
340
|
+
|
|
159
341
|
saveConfig: throttle(function() {
|
|
160
|
-
if(!this.configLoaded) return
|
|
342
|
+
if(!this.configLoaded || !this.configStoreObj) return
|
|
161
343
|
switch(this.configStoreObj.type){
|
|
162
344
|
case 'socket':
|
|
163
|
-
this.socketEmit2(this.configStoreObj.src,
|
|
345
|
+
this.socketEmit2(this.configStoreObj.src,
|
|
346
|
+
{ key:this.configStoreObj.name ?? 'ListView', config:this.config })
|
|
164
347
|
break
|
|
165
348
|
}
|
|
166
349
|
}, 1000, { leading:true }),
|
|
167
350
|
|
|
351
|
+
subscribe(){
|
|
352
|
+
if(!this.subscriptionObj) return
|
|
353
|
+
|
|
354
|
+
const { type, method, model } = this.subscriptionObj
|
|
355
|
+
|
|
356
|
+
switch(type){
|
|
357
|
+
|
|
358
|
+
case 'socket':
|
|
359
|
+
this.socketEmit2(method, { name:model }).then()
|
|
360
|
+
break
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
|
|
168
364
|
},
|
|
169
365
|
|
|
170
366
|
|
|
171
|
-
inject: [ 'socketEmit2', 'toast', 'alert' ],
|
|
367
|
+
inject: [ 'socket', 'socketEmit2', 'toast', 'alert' ],
|
|
172
368
|
|
|
173
369
|
computed: {
|
|
174
370
|
|
|
371
|
+
subscriptionObj(){
|
|
372
|
+
const splitted = ((this.subscription ?? '').toString()).split(':')
|
|
373
|
+
const splitted2 = (splitted[1] ?? '').split(',')
|
|
374
|
+
const obj = {
|
|
375
|
+
type: splitted[0],
|
|
376
|
+
method: splitted2[0],
|
|
377
|
+
model: splitted2[1],
|
|
378
|
+
}
|
|
379
|
+
return obj.type && obj.method && obj.model ? obj : null
|
|
380
|
+
},
|
|
381
|
+
|
|
175
382
|
configStoreObj(){
|
|
176
383
|
const splitted = ((this.configStore ?? '').toString()).split(':')
|
|
177
|
-
|
|
178
|
-
|
|
384
|
+
const splitted2 = (splitted[1] ?? '').split(',')
|
|
385
|
+
const obj = {
|
|
179
386
|
type: splitted[0],
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
387
|
+
src: splitted2[0],
|
|
388
|
+
name: splitted2[1]
|
|
389
|
+
}
|
|
390
|
+
return obj.type && obj.src ? obj : null
|
|
391
|
+
},
|
|
183
392
|
|
|
184
393
|
contentSlots(){
|
|
185
394
|
const slots = {}
|
|
@@ -204,21 +413,53 @@ export default{
|
|
|
204
413
|
},
|
|
205
414
|
|
|
206
415
|
presetColumns(){
|
|
207
|
-
if(!this.preset.columns) return
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
this.preset.columns[i][key] = column[key]
|
|
215
|
-
}
|
|
416
|
+
if(!this.preset || !this.preset.columns) return []
|
|
417
|
+
|
|
418
|
+
const presetColumns = {}
|
|
419
|
+
this.preset.columns.forEach((column, _index) => {
|
|
420
|
+
presetColumns[column.key] = {
|
|
421
|
+
...column,
|
|
422
|
+
_index
|
|
216
423
|
}
|
|
217
|
-
}
|
|
424
|
+
})
|
|
425
|
+
|
|
426
|
+
this.preset.columns = this.config.columns.map((column, index) => {
|
|
427
|
+
const _sort = {
|
|
428
|
+
index: presetColumns[column.key] ? presetColumns[column.key]._index : index,
|
|
429
|
+
isUser: !!presetColumns[column.key]
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
return {
|
|
433
|
+
...column,
|
|
434
|
+
...(presetColumns[column.key] ?? {}),
|
|
435
|
+
_sort
|
|
436
|
+
}
|
|
437
|
+
})
|
|
438
|
+
.sort((a, b) => {
|
|
439
|
+
if(a._sort.index < b._sort.index) return -1
|
|
440
|
+
if(a._sort.index > b._sort.index) return 1
|
|
441
|
+
return a._sort.isUser ? 1 : -1
|
|
442
|
+
})
|
|
443
|
+
.map((column) => {
|
|
444
|
+
delete column._sort
|
|
445
|
+
delete column._index
|
|
446
|
+
return column
|
|
447
|
+
})
|
|
218
448
|
|
|
219
449
|
return this.preset.columns
|
|
220
450
|
},
|
|
221
451
|
|
|
452
|
+
presetCurrentFilters(){
|
|
453
|
+
if(!this.preset.filters) return []
|
|
454
|
+
return this.preset.filters.filter((_) => _.key === this.selectedColumn)
|
|
455
|
+
},
|
|
456
|
+
|
|
457
|
+
presetSortedColumns(){
|
|
458
|
+
const c = {};
|
|
459
|
+
(this.preset.sorts ?? []).forEach((_) => c[_.key] = _.type);
|
|
460
|
+
return c
|
|
461
|
+
},
|
|
462
|
+
|
|
222
463
|
},
|
|
223
464
|
|
|
224
465
|
data(){
|
|
@@ -226,18 +467,30 @@ export default{
|
|
|
226
467
|
items: [],
|
|
227
468
|
hasNext: false,
|
|
228
469
|
count: null,
|
|
229
|
-
configLoaded: false
|
|
470
|
+
configLoaded: false,
|
|
471
|
+
selectedColumn: null,
|
|
472
|
+
copiedConfig: null
|
|
230
473
|
}
|
|
231
474
|
},
|
|
232
475
|
|
|
233
476
|
|
|
234
477
|
mounted() {
|
|
235
|
-
this.
|
|
236
|
-
|
|
237
|
-
|
|
478
|
+
this.socket.onAny(this.onHooks)
|
|
479
|
+
|
|
480
|
+
window.setTimeout(() => {
|
|
481
|
+
this.loadConfig().then(() => {
|
|
482
|
+
this.load()
|
|
483
|
+
})
|
|
484
|
+
}, 201)
|
|
485
|
+
|
|
486
|
+
this.subscribe()
|
|
238
487
|
},
|
|
239
488
|
|
|
240
|
-
|
|
489
|
+
unmounted() {
|
|
490
|
+
this.socket.offAny(this.onHooks)
|
|
491
|
+
},
|
|
492
|
+
|
|
493
|
+
watch: {
|
|
241
494
|
|
|
242
495
|
config: {
|
|
243
496
|
deep: true,
|
|
@@ -265,4 +518,16 @@ export default{
|
|
|
265
518
|
@apply text-ellipsis whitespace-nowrap overflow-x-hidden;
|
|
266
519
|
}
|
|
267
520
|
|
|
521
|
+
.headerSelected{
|
|
522
|
+
@apply border-primary;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.searchBox{
|
|
526
|
+
@apply w-[300px] max-w-[30%];
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.hoverable{
|
|
530
|
+
@apply hover:bg-primary hover:text-white;
|
|
531
|
+
}
|
|
532
|
+
|
|
268
533
|
</style>
|