@mixd-id/web-scaffold 0.1.2301231354 → 0.1.2301231355
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
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<Suspense @resolve="patch">
|
|
3
3
|
<div :class="$style.comp">
|
|
4
4
|
|
|
5
|
-
<div class="flex-1 flex flex-col p-6">
|
|
5
|
+
<div class="flex-1 flex flex-col p-6 relative">
|
|
6
6
|
|
|
7
7
|
<div class="pb-0 flex flex-row gap-3 items-center mb-6">
|
|
8
8
|
<slot v-if="$slots['lp-start']" name="lp-start" :preset="preset"/>
|
|
@@ -43,14 +43,19 @@
|
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|
|
45
45
|
|
|
46
|
-
<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px]" v-if="summary">
|
|
46
|
+
<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px]" v-if="summary && !isLoading">
|
|
47
47
|
<VirtualTable v-if="preset.summary.mode === 'table'" :items="summaryItems" :columns="summaryColumns" class="flex-1"></VirtualTable>
|
|
48
48
|
<Bar v-else-if="preset.summary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
|
|
49
49
|
<Line v-else-if="preset.summary.mode === 'line'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
|
-
<
|
|
52
|
+
<div v-if="isLoading" :class="$style.loadingComp">
|
|
53
|
+
<svg class="animate-spin aspect-square w-[36px] 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>
|
|
54
|
+
<label>Memuat...</label>
|
|
55
|
+
</div>
|
|
56
|
+
<VirtualTable v-else-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items" :state="isLoading ? 2 : 1"
|
|
53
57
|
:appearances="appearances" @scroll-end="loadNext" :pinned="pinned">
|
|
58
|
+
|
|
54
59
|
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
55
60
|
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
56
61
|
<div>
|
|
@@ -599,6 +604,7 @@ export default{
|
|
|
599
604
|
{ text:'Sorts', value:'sort' },
|
|
600
605
|
{ text:'Summary', value:'summary' },
|
|
601
606
|
],
|
|
607
|
+
isLoading: false,
|
|
602
608
|
name: null,
|
|
603
609
|
columns: [],
|
|
604
610
|
selectedColumn: null,
|
|
@@ -629,6 +635,7 @@ export default{
|
|
|
629
635
|
|
|
630
636
|
patch(){
|
|
631
637
|
|
|
638
|
+
this.isLoading = true
|
|
632
639
|
this.socketEmit(`${this.computedDataSource}.patch`, {
|
|
633
640
|
...(urlQuery().reset ? { reset:1 } : {})
|
|
634
641
|
}, (res) => {
|
|
@@ -644,10 +651,14 @@ export default{
|
|
|
644
651
|
this.summary = data.summary
|
|
645
652
|
this.hasNext = data.hasNext
|
|
646
653
|
this.count = data.count
|
|
654
|
+
this.isLoading = false
|
|
647
655
|
})
|
|
648
656
|
|
|
649
657
|
if(this.name)
|
|
650
658
|
this.socketEmit(this.name + '.subscribe', { name:this.name })
|
|
659
|
+
}, (err) => {
|
|
660
|
+
this.isLoading = false
|
|
661
|
+
this.toast(err)
|
|
651
662
|
})
|
|
652
663
|
},
|
|
653
664
|
|
|
@@ -691,6 +702,7 @@ export default{
|
|
|
691
702
|
},
|
|
692
703
|
|
|
693
704
|
load(){
|
|
705
|
+
this.isLoading = true
|
|
694
706
|
this.socketEmit(`${this.computedDataSource}.load`, {
|
|
695
707
|
preset: this.preset
|
|
696
708
|
}, (res) => {
|
|
@@ -699,6 +711,10 @@ export default{
|
|
|
699
711
|
this.summary = data.summary
|
|
700
712
|
this.hasNext = data.hasNext
|
|
701
713
|
this.count = data.count
|
|
714
|
+
this.isLoading = false
|
|
715
|
+
}, (err) => {
|
|
716
|
+
this.isLoading = false
|
|
717
|
+
this.toast(err)
|
|
702
718
|
})
|
|
703
719
|
},
|
|
704
720
|
|
|
@@ -930,7 +946,7 @@ export default{
|
|
|
930
946
|
<style module>
|
|
931
947
|
|
|
932
948
|
.comp{
|
|
933
|
-
@apply flex-1 flex flex-row;
|
|
949
|
+
@apply flex-1 flex flex-row relative;
|
|
934
950
|
}
|
|
935
951
|
|
|
936
952
|
.header{
|
|
@@ -948,4 +964,10 @@ export default{
|
|
|
948
964
|
@apply hover:bg-primary hover:text-white;
|
|
949
965
|
}
|
|
950
966
|
|
|
967
|
+
.loadingComp{
|
|
968
|
+
@apply absolute left-0 top-0 right-0 bottom-0;
|
|
969
|
+
@apply flex flex-col gap-4 items-center justify-center;
|
|
970
|
+
background: rgba(0, 0, 0, .3);
|
|
971
|
+
}
|
|
972
|
+
|
|
951
973
|
</style>
|