@mixd-id/web-scaffold 0.1.2301231368 → 0.1.2301231369
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/ListPage1.vue +63 -44
package/package.json
CHANGED
|
@@ -42,8 +42,11 @@
|
|
|
42
42
|
</div>
|
|
43
43
|
</div>
|
|
44
44
|
|
|
45
|
-
<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px]" v-if="presetSummary && !isLoading">
|
|
46
|
-
<div v-if="
|
|
45
|
+
<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px] relative" v-if="presetSummary && !isLoading">
|
|
46
|
+
<div v-if="isSummaryLoading" :class="$style.overlay">
|
|
47
|
+
<svg class="animate-spin aspect-square w-[48px] h-[48px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
48
|
+
</div>
|
|
49
|
+
<div v-else-if="summary" class="flex-1 flex flex-col">
|
|
47
50
|
<VirtualTable v-if="presetSummary.mode === 'table'" :items="summaryItems" :columns="summaryColumns" class="flex-1"></VirtualTable>
|
|
48
51
|
<Bar v-else-if="presetSummary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
|
|
49
52
|
<Line v-else-if="presetSummary.mode === 'line'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
|
|
@@ -51,45 +54,50 @@
|
|
|
51
54
|
class="flex-1 w-full p-2" :apiKey="mapApiKey" />
|
|
52
55
|
</div>
|
|
53
56
|
<div v-else>
|
|
54
|
-
<label>
|
|
57
|
+
<label>No data</label>
|
|
55
58
|
</div>
|
|
56
59
|
</div>
|
|
57
60
|
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
<div>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
61
|
+
<div class="flex-1 relative flex">
|
|
62
|
+
<VirtualTable v-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items"
|
|
63
|
+
:state="isLoading ? 2 : 1"
|
|
64
|
+
:appearances="presetAppearances" @scroll-end="loadNext" :pinned="pinned">
|
|
65
|
+
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
66
|
+
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
67
|
+
<div>
|
|
68
|
+
{{ column.label }}
|
|
69
|
+
</div>
|
|
70
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-if="presetSortedColumns[column.key] === 'asc'">
|
|
71
|
+
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
72
|
+
<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"/>
|
|
73
|
+
<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"/>
|
|
74
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 11.5858 12.5858 11.25 13 11.25H18C18.4142 11.25 18.75 11.5858 18.75 12C18.75 12.4142 18.4142 12.75 18 12.75H13C12.5858 12.75 12.25 12.4142 12.25 12Z"/>
|
|
75
|
+
<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"/>
|
|
76
|
+
</svg>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-else-if="presetSortedColumns[column.key] === 'desc'">
|
|
79
|
+
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
80
|
+
<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"/>
|
|
81
|
+
<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"/>
|
|
82
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 12.4142 12.5858 12.75 13 12.75H18C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H13C12.5858 11.25 12.25 11.5858 12.25 12Z"/>
|
|
83
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H15C15.4142 17.75 15.75 17.4142 15.75 17C15.75 16.5858 15.4142 16.25 15 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
|
|
84
|
+
</svg>
|
|
85
|
+
</div>
|
|
73
86
|
</div>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 12.4142 12.5858 12.75 13 12.75H18C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H13C12.5858 11.25 12.25 11.5858 12.25 12Z"/>
|
|
79
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H15C15.4142 17.75 15.75 17.4142 15.75 17C15.75 16.5858 15.4142 16.25 15 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
|
|
80
|
-
</svg>
|
|
87
|
+
</template>
|
|
88
|
+
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
89
|
+
<div :class="getHeader(slot.replace('col-', ''))" @click="openColumnOptions(slot.replace('col-', ''), $event.target.closest('.' + $style.header))">
|
|
90
|
+
<slot :name="slot" :item="item" :index="index"></slot>
|
|
81
91
|
</div>
|
|
82
|
-
</
|
|
83
|
-
|
|
84
|
-
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
85
|
-
<div :class="getHeader(slot.replace('col-', ''))" @click="openColumnOptions(slot.replace('col-', ''), $event.target.closest('.' + $style.header))">
|
|
92
|
+
</template>
|
|
93
|
+
<template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
|
|
86
94
|
<slot :name="slot" :item="item" :index="index"></slot>
|
|
87
|
-
</
|
|
88
|
-
</
|
|
89
|
-
<
|
|
90
|
-
<
|
|
91
|
-
</
|
|
92
|
-
</
|
|
95
|
+
</template>
|
|
96
|
+
</VirtualTable>
|
|
97
|
+
<div v-if="isLoading" :class="$style.overlay">
|
|
98
|
+
<svg class="animate-spin aspect-square w-[48px] h-[48px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
93
101
|
|
|
94
102
|
<ContextMenu ref="columnMenu" :dismiss="false">
|
|
95
103
|
<div class="flex-1 flex flex-col w-[270px] p-3">
|
|
@@ -852,6 +860,7 @@ export default{
|
|
|
852
860
|
count: null,
|
|
853
861
|
hasNext: false,
|
|
854
862
|
isLoading: false,
|
|
863
|
+
isSummaryLoading: false,
|
|
855
864
|
|
|
856
865
|
summary: null,
|
|
857
866
|
summaryLoading: false,
|
|
@@ -903,19 +912,19 @@ export default{
|
|
|
903
912
|
window.removeEventListener('focus', this.onFocus)
|
|
904
913
|
this.socket.offAny(this.onHooks)
|
|
905
914
|
|
|
906
|
-
if(this.name)
|
|
907
|
-
this.socketEmit(this.name + '.unsubscribe', { name:this.name })
|
|
915
|
+
if(this.configs.name)
|
|
916
|
+
this.socketEmit(this.configs.name + '.unsubscribe', { name:this.configs.name })
|
|
908
917
|
},
|
|
909
918
|
|
|
910
919
|
methods:{
|
|
911
920
|
|
|
912
921
|
patch(){
|
|
913
|
-
this.isLoading = true
|
|
922
|
+
this.isLoading = this.isSummaryLoading = true
|
|
914
923
|
this.socketEmit(`${this.computedDataSource}.patch`, {
|
|
915
924
|
...(urlQuery().reset ? { reset:1 } : {})
|
|
916
925
|
}, (res) => {
|
|
917
926
|
const data = res.data ? res.data : res
|
|
918
|
-
this.isLoading = false
|
|
927
|
+
this.isLoading = this.isSummaryLoading = false
|
|
919
928
|
|
|
920
929
|
Object.assign(this.configs, data.configs)
|
|
921
930
|
this.mapApiKey = data.mapApiKey
|
|
@@ -928,12 +937,12 @@ export default{
|
|
|
928
937
|
|
|
929
938
|
this.loadSummary()
|
|
930
939
|
|
|
931
|
-
if(this.name)
|
|
932
|
-
this.socketEmit(this.name + '.subscribe', { name:this.name })
|
|
940
|
+
if(this.configs.name)
|
|
941
|
+
this.socketEmit(this.configs.name + '.subscribe', { name:this.configs.name })
|
|
933
942
|
})
|
|
934
943
|
|
|
935
944
|
}, (err) => {
|
|
936
|
-
this.isLoading = false
|
|
945
|
+
this.isLoading = this.isSummaryLoading = false
|
|
937
946
|
this.toast(err)
|
|
938
947
|
})
|
|
939
948
|
},
|
|
@@ -1016,11 +1025,16 @@ export default{
|
|
|
1016
1025
|
|
|
1017
1026
|
if(!this.presetSummary) return
|
|
1018
1027
|
|
|
1028
|
+
this.isSummaryLoading = true
|
|
1019
1029
|
this.socketEmit(`${this.computedDataSource}.load-summary`, {
|
|
1020
1030
|
preset: this.preset
|
|
1021
1031
|
}, (res) => {
|
|
1032
|
+
this.isSummaryLoading = false
|
|
1022
1033
|
const data = res && res.data ? res.data : res
|
|
1023
1034
|
this.summary = data
|
|
1035
|
+
}, (err) => {
|
|
1036
|
+
this.isSummaryLoading = false
|
|
1037
|
+
this.toast(err)
|
|
1024
1038
|
})
|
|
1025
1039
|
},
|
|
1026
1040
|
|
|
@@ -1030,8 +1044,8 @@ export default{
|
|
|
1030
1044
|
},
|
|
1031
1045
|
|
|
1032
1046
|
savePreset: throttle(function() {
|
|
1033
|
-
const presetName = this.name ?? this.model
|
|
1034
|
-
const presetUrl = this.name ?? 'user'
|
|
1047
|
+
const presetName = this.configs.name ?? this.model
|
|
1048
|
+
const presetUrl = this.configs.name ?? 'user'
|
|
1035
1049
|
this.socketEmit(`${presetUrl}.save-preset`, { key:presetName, preset:this.configs })
|
|
1036
1050
|
}, 1000),
|
|
1037
1051
|
|
|
@@ -1309,4 +1323,9 @@ export default{
|
|
|
1309
1323
|
background: rgba(0, 0, 0, .3);
|
|
1310
1324
|
}
|
|
1311
1325
|
|
|
1326
|
+
.overlay{
|
|
1327
|
+
@apply absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center;
|
|
1328
|
+
background-color: rgba(var(--base-500), .7);
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1312
1331
|
</style>
|