sveltekit-ui 1.0.15 → 1.0.17
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/dist/Components/Content/index.svelte.js +1 -1
- package/dist/Components/TableAdvanced/SortByInput/index.svelte +32 -29
- package/dist/Components/TableAdvanced/SortByInput/index.svelte.js +32 -8
- package/dist/Components/TableAdvanced/index.svelte +4 -1
- package/dist/Components/TableAdvanced/index.svelte.js +58 -15
- package/package.json +6 -6
- package/src/lib/Components/Content/index.svelte.js +1 -1
- package/src/lib/Components/TableAdvanced/SortByInput/index.svelte +32 -29
- package/src/lib/Components/TableAdvanced/SortByInput/index.svelte.js +32 -8
- package/src/lib/Components/TableAdvanced/index.svelte +4 -1
- package/src/lib/Components/TableAdvanced/index.svelte.js +58 -15
- package/src/routes/[component]/Showcase/TableAdvanced/index.svelte +4 -4
|
@@ -609,7 +609,7 @@ export function create_content_manager(config) {
|
|
|
609
609
|
const static_val = set_closurable(val_loc?.attributes?.val)
|
|
610
610
|
if (Array.isArray(static_val)) {
|
|
611
611
|
for (let i = 0; i < static_val.length; i++) {
|
|
612
|
-
console.log("loop_test", val_loc?.attributes)
|
|
612
|
+
// console.log("loop_test", val_loc?.attributes)
|
|
613
613
|
let children = []
|
|
614
614
|
if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
|
|
615
615
|
is_children = true
|
|
@@ -19,32 +19,32 @@
|
|
|
19
19
|
</tr>
|
|
20
20
|
</thead>
|
|
21
21
|
<tbody>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
22
|
+
{#if Array.isArray(manager?.sorts_prepped) && manager?.sorts_prepped.length > 0}
|
|
23
|
+
{#each manager?.sorts_prepped as sort_prepped, i}
|
|
24
|
+
<tr>
|
|
25
|
+
<td>{i == 0 ? "Primary" : "Subsort"}</td>
|
|
26
|
+
<td>
|
|
27
|
+
<VariablePathInput manager={sort_prepped?.variable_path_input_manager} />
|
|
28
|
+
</td>
|
|
29
|
+
<td>
|
|
30
|
+
<Checkbox manager={sort_prepped?.is_ascending_checkbox_manager} />
|
|
31
|
+
</td>
|
|
32
|
+
<td>
|
|
33
|
+
<Button manager={sort_prepped?.extra_button_manager} />
|
|
34
|
+
<Popover manager={sort_prepped?.extra_popover_manager}>
|
|
35
|
+
{#snippet content()}
|
|
36
|
+
{#if Array(manager?.sorts_prepped) && manager?.sorts_prepped.length > 0 && i > 1}
|
|
37
|
+
<Button manager={sort_prepped?.shift_up_button_manager} />
|
|
38
|
+
{/if}
|
|
39
|
+
{#if Array(manager?.sorts_prepped) && manager?.sorts_prepped.length > 1 && i < manager?.sorts_prepped.length}
|
|
40
|
+
<Button manager={sort_prepped?.shift_down_button_manager} />
|
|
41
|
+
{/if}
|
|
42
|
+
<Button manager={sort_prepped?.delete_button_manager} />
|
|
43
|
+
{/snippet}
|
|
44
|
+
</Popover>
|
|
45
|
+
</td>
|
|
46
|
+
</tr>
|
|
47
|
+
{/each}
|
|
48
48
|
{:else}
|
|
49
49
|
<tr>
|
|
50
50
|
<td colspan="4">No Sorts added yet</td>
|
|
@@ -65,7 +65,10 @@
|
|
|
65
65
|
{@render sort_content()}
|
|
66
66
|
{/snippet}
|
|
67
67
|
{#snippet footer()}
|
|
68
|
-
<
|
|
68
|
+
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
69
|
+
<Button manager={manager?.save_server_sort_button_manager} />
|
|
70
|
+
<Button manager={manager?.apply_sorting_button_manager} />
|
|
71
|
+
</div>
|
|
69
72
|
{/snippet}
|
|
70
73
|
</Popover>
|
|
71
74
|
{:else}
|
|
@@ -73,7 +76,7 @@
|
|
|
73
76
|
{/if}
|
|
74
77
|
|
|
75
78
|
<style>
|
|
76
|
-
th{
|
|
79
|
+
th {
|
|
77
80
|
font-size: 1.2rem;
|
|
78
81
|
}
|
|
79
|
-
</style>
|
|
82
|
+
</style>
|
|
@@ -12,6 +12,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
12
12
|
let popover_toggle_button_manager = $state(null)
|
|
13
13
|
let popover_manager = $state(null)
|
|
14
14
|
let apply_sorting_button_manager = $state(null)
|
|
15
|
+
let save_server_sort_button_manager = $state(null)
|
|
15
16
|
let add_sort_button_manager = $state(null)
|
|
16
17
|
let sorts_prepped = $state(null)
|
|
17
18
|
|
|
@@ -23,7 +24,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
23
24
|
for (let sort_prepped of sorts_prepped) {
|
|
24
25
|
sorts.push({
|
|
25
26
|
is_ascending: sort_prepped?.is_ascending_checkbox_manager?.val,
|
|
26
|
-
|
|
27
|
+
variable_path: sort_prepped?.variable_path_input_manager?.val,
|
|
27
28
|
})
|
|
28
29
|
}
|
|
29
30
|
}
|
|
@@ -89,11 +90,12 @@ export function create_sort_by_input_manager(config) {
|
|
|
89
90
|
console.log("toggle is ascending")
|
|
90
91
|
},
|
|
91
92
|
})
|
|
92
|
-
let
|
|
93
|
+
let variable_path_input_manager = create_variable_path_input_manager({
|
|
93
94
|
is_popover: false,
|
|
94
95
|
defined_data_type: row_data_type,
|
|
95
96
|
get_defined_options: config?.get_defined_options,
|
|
96
|
-
val: sorts?.[i]?.
|
|
97
|
+
val: sorts?.[i]?.variable_path ?? null,
|
|
98
|
+
on_finish: () => variable_path_input_manager.close_popover(),
|
|
97
99
|
})
|
|
98
100
|
sorts_prepped_loc.push({
|
|
99
101
|
...sorts?.[i],
|
|
@@ -103,13 +105,14 @@ export function create_sort_by_input_manager(config) {
|
|
|
103
105
|
shift_up_button_manager: shift_up_button_manager,
|
|
104
106
|
shift_down_button_manager: shift_down_button_manager,
|
|
105
107
|
is_ascending_checkbox_manager: is_ascending_checkbox_manager,
|
|
106
|
-
|
|
108
|
+
variable_path_input_manager: variable_path_input_manager,
|
|
107
109
|
})
|
|
108
110
|
}
|
|
109
111
|
}
|
|
110
112
|
sorts_prepped = sorts_prepped_loc
|
|
111
113
|
}
|
|
112
114
|
|
|
115
|
+
let save_server_sort_is_loading = $state(false)
|
|
113
116
|
function init(config) {
|
|
114
117
|
popover_manager = create_popover_manager({
|
|
115
118
|
header: "Sort By",
|
|
@@ -124,9 +127,27 @@ export function create_sort_by_input_manager(config) {
|
|
|
124
127
|
popover_target: () => `popover_${popover_manager?.id}`,
|
|
125
128
|
})
|
|
126
129
|
apply_sorting_button_manager = create_button_manager({
|
|
127
|
-
text: "Apply
|
|
130
|
+
text: "Apply Local Sort",
|
|
128
131
|
on_click: () => {
|
|
129
|
-
|
|
132
|
+
if (typeof config?.apply_sort == "function") {
|
|
133
|
+
config?.apply_sort(val)
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
})
|
|
137
|
+
save_server_sort_button_manager = create_button_manager({
|
|
138
|
+
type: "outlined",
|
|
139
|
+
text: "Save Server Sort",
|
|
140
|
+
on_click: async () => {
|
|
141
|
+
save_server_sort_is_loading = true
|
|
142
|
+
if (typeof config?.save_server_sort == "function") {
|
|
143
|
+
const res = await config?.save_server_sort(val)
|
|
144
|
+
if (res?.is_success) {
|
|
145
|
+
save_server_sort_button_manager.success_trigger()
|
|
146
|
+
} else {
|
|
147
|
+
save_server_sort_button_manager.error_trigger()
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
save_server_sort_is_loading = false
|
|
130
151
|
},
|
|
131
152
|
})
|
|
132
153
|
add_sort_button_manager = create_button_manager({
|
|
@@ -139,7 +160,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
139
160
|
for (let sort_prepped of sorts_prepped) {
|
|
140
161
|
sorts.push({
|
|
141
162
|
is_ascending: sort_prepped?.is_ascending_checkbox_manager?.val,
|
|
142
|
-
|
|
163
|
+
variable_path: sort_prepped?.variable_path_input_manager?.val,
|
|
143
164
|
})
|
|
144
165
|
}
|
|
145
166
|
}
|
|
@@ -147,7 +168,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
147
168
|
...sorts,
|
|
148
169
|
{
|
|
149
170
|
is_ascending: false,
|
|
150
|
-
|
|
171
|
+
variable_path: null,
|
|
151
172
|
},
|
|
152
173
|
]
|
|
153
174
|
set_sorts_prepped(sorts)
|
|
@@ -180,6 +201,9 @@ export function create_sort_by_input_manager(config) {
|
|
|
180
201
|
get apply_sorting_button_manager() {
|
|
181
202
|
return apply_sorting_button_manager
|
|
182
203
|
},
|
|
204
|
+
get save_server_sort_button_manager() {
|
|
205
|
+
return save_server_sort_button_manager
|
|
206
|
+
},
|
|
183
207
|
get sorts_prepped() {
|
|
184
208
|
return sorts_prepped
|
|
185
209
|
},
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import SortByInput from "./SortByInput/index.svelte"
|
|
14
14
|
import ColumnInput from "./ColumnInput/index.svelte"
|
|
15
15
|
|
|
16
|
-
let { manager } = $props()
|
|
16
|
+
let { manager, header_extra } = $props()
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
{#if Array.isArray(manager?.nav_items) && manager?.nav_items.length > 0}
|
|
@@ -100,6 +100,9 @@
|
|
|
100
100
|
{#if manager?.is_more_to_load && manager?.nav_items.includes("load_more")}
|
|
101
101
|
<Button manager={manager?.load_more_button_manager} />
|
|
102
102
|
{/if}
|
|
103
|
+
{#if header_extra}
|
|
104
|
+
{@render header_extra()}
|
|
105
|
+
{/if}
|
|
103
106
|
</div>
|
|
104
107
|
{/if}
|
|
105
108
|
|
|
@@ -15,14 +15,11 @@ import {
|
|
|
15
15
|
csv_to_json,
|
|
16
16
|
create_unique_id,
|
|
17
17
|
set_definition_stack,
|
|
18
|
-
set_def,
|
|
19
18
|
get_def_from_variable_path,
|
|
20
19
|
variables_data_type_remaining_to_astc,
|
|
21
20
|
} from "../../client/index.js"
|
|
22
21
|
import { tick } from "svelte"
|
|
23
22
|
import { browser } from "$app/environment"
|
|
24
|
-
// tbd quick sort for column override default sort or work conjuction with
|
|
25
|
-
// select bulk rows with condition (eg ["row","points"] greater_than 2000) where
|
|
26
23
|
|
|
27
24
|
export function create_table_advanced_manager(config) {
|
|
28
25
|
const id = create_unique_id(null, 20)
|
|
@@ -61,6 +58,7 @@ export function create_table_advanced_manager(config) {
|
|
|
61
58
|
let pagination_manager = $state(null)
|
|
62
59
|
let rows_per_page_dropdown_manager = $state(null)
|
|
63
60
|
let cur_page = $state(1)
|
|
61
|
+
let sort_by = $state(null)
|
|
64
62
|
let load_more_button_manager = $state(null)
|
|
65
63
|
let sort_by_input_manager = $state(null)
|
|
66
64
|
let is_bulk_select = $state(false)
|
|
@@ -134,21 +132,48 @@ export function create_table_advanced_manager(config) {
|
|
|
134
132
|
table_search_text_input_manager?.val.trim() !== ""
|
|
135
133
|
) {
|
|
136
134
|
for (let i = 0; i < rows_prepped.length; i++) {
|
|
137
|
-
if (
|
|
135
|
+
if (
|
|
136
|
+
rows_prepped[i]?.searchable_text &&
|
|
137
|
+
rows_prepped[i]?.searchable_text.toLowerCase().includes(table_search_text_input_manager.val.toLowerCase())
|
|
138
|
+
) {
|
|
138
139
|
row_indexes.push(i)
|
|
139
140
|
}
|
|
140
141
|
}
|
|
141
142
|
} else {
|
|
142
143
|
row_indexes = Array.isArray(rows_prepped) ? Array.from({ length: rows_prepped.length }, (_, i) => i) : []
|
|
143
144
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
145
|
+
if (Array.isArray(sort_by) && sort_by.length > 0) {
|
|
146
|
+
row_indexes.sort((a, b) => {
|
|
147
|
+
for (let sort_item of sort_by) {
|
|
148
|
+
const column_id = sort_item?.variable_path?.[0]
|
|
149
|
+
const is_ascending = !!sort_item?.is_ascending
|
|
150
|
+
const val_a =
|
|
151
|
+
rows_prepped[a]?.columns?.[column_id]?.content_manager?.val_prepped?.attributes?.val ??
|
|
152
|
+
rows_prepped[a]?.columns?.[column_id]?.body_content?.attributes?.val ??
|
|
153
|
+
rows_prepped[a]?.columns?.[column_id]?.body_content?.attributes?.content ??
|
|
154
|
+
rows_prepped[a]?.columns?.[column_id]?.body_content?.attributes?.content_from_variable_path ??
|
|
155
|
+
null
|
|
156
|
+
const val_b =
|
|
157
|
+
rows_prepped[b]?.columns?.[column_id]?.content_manager?.val_prepped?.attributes?.val ??
|
|
158
|
+
rows_prepped[b]?.columns?.[column_id]?.body_content?.attributes?.val ??
|
|
159
|
+
rows_prepped[b]?.columns?.[column_id]?.body_content?.attributes?.content ??
|
|
160
|
+
rows_prepped[b]?.columns?.[column_id]?.body_content?.attributes?.content_from_variable_path ??
|
|
161
|
+
null
|
|
162
|
+
if (val_a === val_b) continue
|
|
163
|
+
if (val_a == null) return is_ascending ? 1 : -1
|
|
164
|
+
if (val_b == null) return is_ascending ? -1 : 1
|
|
165
|
+
|
|
166
|
+
if (typeof val_a === "number" && typeof val_b === "number") {
|
|
167
|
+
return is_ascending ? val_a - val_b : val_b - val_a
|
|
168
|
+
}
|
|
169
|
+
const a_str = Array.isArray(val_a) ? val_a.join(",") : String(val_a)
|
|
170
|
+
const b_str = Array.isArray(val_b) ? val_b.join(",") : String(val_b)
|
|
171
|
+
if (a_str === b_str) continue
|
|
172
|
+
return is_ascending ? a_str.localeCompare(b_str) : b_str.localeCompare(a_str)
|
|
173
|
+
}
|
|
174
|
+
return 0
|
|
175
|
+
})
|
|
176
|
+
}
|
|
152
177
|
return row_indexes
|
|
153
178
|
}
|
|
154
179
|
|
|
@@ -191,7 +216,7 @@ export function create_table_advanced_manager(config) {
|
|
|
191
216
|
}
|
|
192
217
|
|
|
193
218
|
function get_row_prepped(columns_prepped_input, row_data, row_i) {
|
|
194
|
-
console.log("get_row_prepped", { row_data, row_i, ds: [{ [row_iter_identifier]: row_i }, ...definition_stack] })
|
|
219
|
+
// console.log("get_row_prepped", { row_data, row_i, ds: [{ [row_iter_identifier]: row_i }, ...definition_stack] })
|
|
195
220
|
let searchable_text = ""
|
|
196
221
|
let columns_prepped_loc = {}
|
|
197
222
|
if (Array.isArray(column_ids_display_order)) {
|
|
@@ -734,6 +759,7 @@ export function create_table_advanced_manager(config) {
|
|
|
734
759
|
table_id = config?.table_id
|
|
735
760
|
table_name = config?.table_name
|
|
736
761
|
table_description = config?.table_description
|
|
762
|
+
sort_by = config?.table?.default_sort
|
|
737
763
|
rows_data_from_variable_path = config?.rows_data_from_variable_path
|
|
738
764
|
row_iter_identifier = config?.row_iter_identifier ?? "row_i"
|
|
739
765
|
definition_stack = config?.definition_stack
|
|
@@ -785,8 +811,25 @@ export function create_table_advanced_manager(config) {
|
|
|
785
811
|
})
|
|
786
812
|
sort_by_input_manager = create_sort_by_input_manager({
|
|
787
813
|
is_popover: true,
|
|
788
|
-
val:
|
|
789
|
-
|
|
814
|
+
val: sort_by,
|
|
815
|
+
apply_sort: (input) => {
|
|
816
|
+
sort_by = input
|
|
817
|
+
console.log("apply_sort", sort_by)
|
|
818
|
+
},
|
|
819
|
+
save_server_sort: async (input) => {
|
|
820
|
+
if (typeof config?.on_event == "function") {
|
|
821
|
+
const res = await config?.on_event({
|
|
822
|
+
type: "update_table_server_sort",
|
|
823
|
+
input: input,
|
|
824
|
+
})
|
|
825
|
+
return res
|
|
826
|
+
}
|
|
827
|
+
},
|
|
828
|
+
get_defined_options: () => {
|
|
829
|
+
console.log("columns_prepped", columns_prepped)
|
|
830
|
+
const defined_options = Object.keys(columns_prepped || {}).map((h) => ({ key: h, name: h }))
|
|
831
|
+
return defined_options
|
|
832
|
+
},
|
|
790
833
|
})
|
|
791
834
|
toggle_bulk_selectable_button_manager = create_button_manager({
|
|
792
835
|
type: "soft",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sveltekit-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.17",
|
|
4
4
|
"description": "A SvelteKit UI component library for building modern web applications",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -19,19 +19,19 @@
|
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"context-filter-polyfill": "^0.3.23",
|
|
21
21
|
"qr-code-styling": "^1.9.2",
|
|
22
|
-
"svelte": "^5.
|
|
22
|
+
"svelte": "^5.38.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@sveltejs/kit": "^2.22.2"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@sveltejs/adapter-vercel": "^5.8.
|
|
29
|
-
"@sveltejs/kit": "^2.27.
|
|
30
|
-
"@sveltejs/package": "^2.4.
|
|
28
|
+
"@sveltejs/adapter-vercel": "^5.8.2",
|
|
29
|
+
"@sveltejs/kit": "^2.27.3",
|
|
30
|
+
"@sveltejs/package": "^2.4.1",
|
|
31
31
|
"@sveltejs/vite-plugin-svelte": "^6.1.0",
|
|
32
32
|
"@vercel/analytics": "^1.5.0",
|
|
33
33
|
"typescript": "^5.9.2",
|
|
34
|
-
"vite": "^7.0
|
|
34
|
+
"vite": "^7.1.0"
|
|
35
35
|
},
|
|
36
36
|
"homepage": "https://www.sveltekit-ui.com",
|
|
37
37
|
"keywords": [
|
|
@@ -609,7 +609,7 @@ export function create_content_manager(config) {
|
|
|
609
609
|
const static_val = set_closurable(val_loc?.attributes?.val)
|
|
610
610
|
if (Array.isArray(static_val)) {
|
|
611
611
|
for (let i = 0; i < static_val.length; i++) {
|
|
612
|
-
console.log("loop_test", val_loc?.attributes)
|
|
612
|
+
// console.log("loop_test", val_loc?.attributes)
|
|
613
613
|
let children = []
|
|
614
614
|
if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
|
|
615
615
|
is_children = true
|
|
@@ -19,32 +19,32 @@
|
|
|
19
19
|
</tr>
|
|
20
20
|
</thead>
|
|
21
21
|
<tbody>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
22
|
+
{#if Array.isArray(manager?.sorts_prepped) && manager?.sorts_prepped.length > 0}
|
|
23
|
+
{#each manager?.sorts_prepped as sort_prepped, i}
|
|
24
|
+
<tr>
|
|
25
|
+
<td>{i == 0 ? "Primary" : "Subsort"}</td>
|
|
26
|
+
<td>
|
|
27
|
+
<VariablePathInput manager={sort_prepped?.variable_path_input_manager} />
|
|
28
|
+
</td>
|
|
29
|
+
<td>
|
|
30
|
+
<Checkbox manager={sort_prepped?.is_ascending_checkbox_manager} />
|
|
31
|
+
</td>
|
|
32
|
+
<td>
|
|
33
|
+
<Button manager={sort_prepped?.extra_button_manager} />
|
|
34
|
+
<Popover manager={sort_prepped?.extra_popover_manager}>
|
|
35
|
+
{#snippet content()}
|
|
36
|
+
{#if Array(manager?.sorts_prepped) && manager?.sorts_prepped.length > 0 && i > 1}
|
|
37
|
+
<Button manager={sort_prepped?.shift_up_button_manager} />
|
|
38
|
+
{/if}
|
|
39
|
+
{#if Array(manager?.sorts_prepped) && manager?.sorts_prepped.length > 1 && i < manager?.sorts_prepped.length}
|
|
40
|
+
<Button manager={sort_prepped?.shift_down_button_manager} />
|
|
41
|
+
{/if}
|
|
42
|
+
<Button manager={sort_prepped?.delete_button_manager} />
|
|
43
|
+
{/snippet}
|
|
44
|
+
</Popover>
|
|
45
|
+
</td>
|
|
46
|
+
</tr>
|
|
47
|
+
{/each}
|
|
48
48
|
{:else}
|
|
49
49
|
<tr>
|
|
50
50
|
<td colspan="4">No Sorts added yet</td>
|
|
@@ -65,7 +65,10 @@
|
|
|
65
65
|
{@render sort_content()}
|
|
66
66
|
{/snippet}
|
|
67
67
|
{#snippet footer()}
|
|
68
|
-
<
|
|
68
|
+
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
69
|
+
<Button manager={manager?.save_server_sort_button_manager} />
|
|
70
|
+
<Button manager={manager?.apply_sorting_button_manager} />
|
|
71
|
+
</div>
|
|
69
72
|
{/snippet}
|
|
70
73
|
</Popover>
|
|
71
74
|
{:else}
|
|
@@ -73,7 +76,7 @@
|
|
|
73
76
|
{/if}
|
|
74
77
|
|
|
75
78
|
<style>
|
|
76
|
-
th{
|
|
79
|
+
th {
|
|
77
80
|
font-size: 1.2rem;
|
|
78
81
|
}
|
|
79
|
-
</style>
|
|
82
|
+
</style>
|
|
@@ -12,6 +12,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
12
12
|
let popover_toggle_button_manager = $state(null)
|
|
13
13
|
let popover_manager = $state(null)
|
|
14
14
|
let apply_sorting_button_manager = $state(null)
|
|
15
|
+
let save_server_sort_button_manager = $state(null)
|
|
15
16
|
let add_sort_button_manager = $state(null)
|
|
16
17
|
let sorts_prepped = $state(null)
|
|
17
18
|
|
|
@@ -23,7 +24,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
23
24
|
for (let sort_prepped of sorts_prepped) {
|
|
24
25
|
sorts.push({
|
|
25
26
|
is_ascending: sort_prepped?.is_ascending_checkbox_manager?.val,
|
|
26
|
-
|
|
27
|
+
variable_path: sort_prepped?.variable_path_input_manager?.val,
|
|
27
28
|
})
|
|
28
29
|
}
|
|
29
30
|
}
|
|
@@ -89,11 +90,12 @@ export function create_sort_by_input_manager(config) {
|
|
|
89
90
|
console.log("toggle is ascending")
|
|
90
91
|
},
|
|
91
92
|
})
|
|
92
|
-
let
|
|
93
|
+
let variable_path_input_manager = create_variable_path_input_manager({
|
|
93
94
|
is_popover: false,
|
|
94
95
|
defined_data_type: row_data_type,
|
|
95
96
|
get_defined_options: config?.get_defined_options,
|
|
96
|
-
val: sorts?.[i]?.
|
|
97
|
+
val: sorts?.[i]?.variable_path ?? null,
|
|
98
|
+
on_finish: () => variable_path_input_manager.close_popover(),
|
|
97
99
|
})
|
|
98
100
|
sorts_prepped_loc.push({
|
|
99
101
|
...sorts?.[i],
|
|
@@ -103,13 +105,14 @@ export function create_sort_by_input_manager(config) {
|
|
|
103
105
|
shift_up_button_manager: shift_up_button_manager,
|
|
104
106
|
shift_down_button_manager: shift_down_button_manager,
|
|
105
107
|
is_ascending_checkbox_manager: is_ascending_checkbox_manager,
|
|
106
|
-
|
|
108
|
+
variable_path_input_manager: variable_path_input_manager,
|
|
107
109
|
})
|
|
108
110
|
}
|
|
109
111
|
}
|
|
110
112
|
sorts_prepped = sorts_prepped_loc
|
|
111
113
|
}
|
|
112
114
|
|
|
115
|
+
let save_server_sort_is_loading = $state(false)
|
|
113
116
|
function init(config) {
|
|
114
117
|
popover_manager = create_popover_manager({
|
|
115
118
|
header: "Sort By",
|
|
@@ -124,9 +127,27 @@ export function create_sort_by_input_manager(config) {
|
|
|
124
127
|
popover_target: () => `popover_${popover_manager?.id}`,
|
|
125
128
|
})
|
|
126
129
|
apply_sorting_button_manager = create_button_manager({
|
|
127
|
-
text: "Apply
|
|
130
|
+
text: "Apply Local Sort",
|
|
128
131
|
on_click: () => {
|
|
129
|
-
|
|
132
|
+
if (typeof config?.apply_sort == "function") {
|
|
133
|
+
config?.apply_sort(val)
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
})
|
|
137
|
+
save_server_sort_button_manager = create_button_manager({
|
|
138
|
+
type: "outlined",
|
|
139
|
+
text: "Save Server Sort",
|
|
140
|
+
on_click: async () => {
|
|
141
|
+
save_server_sort_is_loading = true
|
|
142
|
+
if (typeof config?.save_server_sort == "function") {
|
|
143
|
+
const res = await config?.save_server_sort(val)
|
|
144
|
+
if (res?.is_success) {
|
|
145
|
+
save_server_sort_button_manager.success_trigger()
|
|
146
|
+
} else {
|
|
147
|
+
save_server_sort_button_manager.error_trigger()
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
save_server_sort_is_loading = false
|
|
130
151
|
},
|
|
131
152
|
})
|
|
132
153
|
add_sort_button_manager = create_button_manager({
|
|
@@ -139,7 +160,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
139
160
|
for (let sort_prepped of sorts_prepped) {
|
|
140
161
|
sorts.push({
|
|
141
162
|
is_ascending: sort_prepped?.is_ascending_checkbox_manager?.val,
|
|
142
|
-
|
|
163
|
+
variable_path: sort_prepped?.variable_path_input_manager?.val,
|
|
143
164
|
})
|
|
144
165
|
}
|
|
145
166
|
}
|
|
@@ -147,7 +168,7 @@ export function create_sort_by_input_manager(config) {
|
|
|
147
168
|
...sorts,
|
|
148
169
|
{
|
|
149
170
|
is_ascending: false,
|
|
150
|
-
|
|
171
|
+
variable_path: null,
|
|
151
172
|
},
|
|
152
173
|
]
|
|
153
174
|
set_sorts_prepped(sorts)
|
|
@@ -180,6 +201,9 @@ export function create_sort_by_input_manager(config) {
|
|
|
180
201
|
get apply_sorting_button_manager() {
|
|
181
202
|
return apply_sorting_button_manager
|
|
182
203
|
},
|
|
204
|
+
get save_server_sort_button_manager() {
|
|
205
|
+
return save_server_sort_button_manager
|
|
206
|
+
},
|
|
183
207
|
get sorts_prepped() {
|
|
184
208
|
return sorts_prepped
|
|
185
209
|
},
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import SortByInput from "$lib/Components/TableAdvanced/SortByInput/index.svelte"
|
|
14
14
|
import ColumnInput from "$lib/Components/TableAdvanced/ColumnInput/index.svelte"
|
|
15
15
|
|
|
16
|
-
let { manager } = $props()
|
|
16
|
+
let { manager, header_extra } = $props()
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
{#if Array.isArray(manager?.nav_items) && manager?.nav_items.length > 0}
|
|
@@ -100,6 +100,9 @@
|
|
|
100
100
|
{#if manager?.is_more_to_load && manager?.nav_items.includes("load_more")}
|
|
101
101
|
<Button manager={manager?.load_more_button_manager} />
|
|
102
102
|
{/if}
|
|
103
|
+
{#if header_extra}
|
|
104
|
+
{@render header_extra()}
|
|
105
|
+
{/if}
|
|
103
106
|
</div>
|
|
104
107
|
{/if}
|
|
105
108
|
|
|
@@ -15,14 +15,11 @@ import {
|
|
|
15
15
|
csv_to_json,
|
|
16
16
|
create_unique_id,
|
|
17
17
|
set_definition_stack,
|
|
18
|
-
set_def,
|
|
19
18
|
get_def_from_variable_path,
|
|
20
19
|
variables_data_type_remaining_to_astc,
|
|
21
20
|
} from "$lib/client/index.js"
|
|
22
21
|
import { tick } from "svelte"
|
|
23
22
|
import { browser } from "$app/environment"
|
|
24
|
-
// tbd quick sort for column override default sort or work conjuction with
|
|
25
|
-
// select bulk rows with condition (eg ["row","points"] greater_than 2000) where
|
|
26
23
|
|
|
27
24
|
export function create_table_advanced_manager(config) {
|
|
28
25
|
const id = create_unique_id(null, 20)
|
|
@@ -61,6 +58,7 @@ export function create_table_advanced_manager(config) {
|
|
|
61
58
|
let pagination_manager = $state(null)
|
|
62
59
|
let rows_per_page_dropdown_manager = $state(null)
|
|
63
60
|
let cur_page = $state(1)
|
|
61
|
+
let sort_by = $state(null)
|
|
64
62
|
let load_more_button_manager = $state(null)
|
|
65
63
|
let sort_by_input_manager = $state(null)
|
|
66
64
|
let is_bulk_select = $state(false)
|
|
@@ -134,21 +132,48 @@ export function create_table_advanced_manager(config) {
|
|
|
134
132
|
table_search_text_input_manager?.val.trim() !== ""
|
|
135
133
|
) {
|
|
136
134
|
for (let i = 0; i < rows_prepped.length; i++) {
|
|
137
|
-
if (
|
|
135
|
+
if (
|
|
136
|
+
rows_prepped[i]?.searchable_text &&
|
|
137
|
+
rows_prepped[i]?.searchable_text.toLowerCase().includes(table_search_text_input_manager.val.toLowerCase())
|
|
138
|
+
) {
|
|
138
139
|
row_indexes.push(i)
|
|
139
140
|
}
|
|
140
141
|
}
|
|
141
142
|
} else {
|
|
142
143
|
row_indexes = Array.isArray(rows_prepped) ? Array.from({ length: rows_prepped.length }, (_, i) => i) : []
|
|
143
144
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
145
|
+
if (Array.isArray(sort_by) && sort_by.length > 0) {
|
|
146
|
+
row_indexes.sort((a, b) => {
|
|
147
|
+
for (let sort_item of sort_by) {
|
|
148
|
+
const column_id = sort_item?.variable_path?.[0]
|
|
149
|
+
const is_ascending = !!sort_item?.is_ascending
|
|
150
|
+
const val_a =
|
|
151
|
+
rows_prepped[a]?.columns?.[column_id]?.content_manager?.val_prepped?.attributes?.val ??
|
|
152
|
+
rows_prepped[a]?.columns?.[column_id]?.body_content?.attributes?.val ??
|
|
153
|
+
rows_prepped[a]?.columns?.[column_id]?.body_content?.attributes?.content ??
|
|
154
|
+
rows_prepped[a]?.columns?.[column_id]?.body_content?.attributes?.content_from_variable_path ??
|
|
155
|
+
null
|
|
156
|
+
const val_b =
|
|
157
|
+
rows_prepped[b]?.columns?.[column_id]?.content_manager?.val_prepped?.attributes?.val ??
|
|
158
|
+
rows_prepped[b]?.columns?.[column_id]?.body_content?.attributes?.val ??
|
|
159
|
+
rows_prepped[b]?.columns?.[column_id]?.body_content?.attributes?.content ??
|
|
160
|
+
rows_prepped[b]?.columns?.[column_id]?.body_content?.attributes?.content_from_variable_path ??
|
|
161
|
+
null
|
|
162
|
+
if (val_a === val_b) continue
|
|
163
|
+
if (val_a == null) return is_ascending ? 1 : -1
|
|
164
|
+
if (val_b == null) return is_ascending ? -1 : 1
|
|
165
|
+
|
|
166
|
+
if (typeof val_a === "number" && typeof val_b === "number") {
|
|
167
|
+
return is_ascending ? val_a - val_b : val_b - val_a
|
|
168
|
+
}
|
|
169
|
+
const a_str = Array.isArray(val_a) ? val_a.join(",") : String(val_a)
|
|
170
|
+
const b_str = Array.isArray(val_b) ? val_b.join(",") : String(val_b)
|
|
171
|
+
if (a_str === b_str) continue
|
|
172
|
+
return is_ascending ? a_str.localeCompare(b_str) : b_str.localeCompare(a_str)
|
|
173
|
+
}
|
|
174
|
+
return 0
|
|
175
|
+
})
|
|
176
|
+
}
|
|
152
177
|
return row_indexes
|
|
153
178
|
}
|
|
154
179
|
|
|
@@ -191,7 +216,7 @@ export function create_table_advanced_manager(config) {
|
|
|
191
216
|
}
|
|
192
217
|
|
|
193
218
|
function get_row_prepped(columns_prepped_input, row_data, row_i) {
|
|
194
|
-
console.log("get_row_prepped", { row_data, row_i, ds: [{ [row_iter_identifier]: row_i }, ...definition_stack] })
|
|
219
|
+
// console.log("get_row_prepped", { row_data, row_i, ds: [{ [row_iter_identifier]: row_i }, ...definition_stack] })
|
|
195
220
|
let searchable_text = ""
|
|
196
221
|
let columns_prepped_loc = {}
|
|
197
222
|
if (Array.isArray(column_ids_display_order)) {
|
|
@@ -734,6 +759,7 @@ export function create_table_advanced_manager(config) {
|
|
|
734
759
|
table_id = config?.table_id
|
|
735
760
|
table_name = config?.table_name
|
|
736
761
|
table_description = config?.table_description
|
|
762
|
+
sort_by = config?.table?.default_sort
|
|
737
763
|
rows_data_from_variable_path = config?.rows_data_from_variable_path
|
|
738
764
|
row_iter_identifier = config?.row_iter_identifier ?? "row_i"
|
|
739
765
|
definition_stack = config?.definition_stack
|
|
@@ -785,8 +811,25 @@ export function create_table_advanced_manager(config) {
|
|
|
785
811
|
})
|
|
786
812
|
sort_by_input_manager = create_sort_by_input_manager({
|
|
787
813
|
is_popover: true,
|
|
788
|
-
val:
|
|
789
|
-
|
|
814
|
+
val: sort_by,
|
|
815
|
+
apply_sort: (input) => {
|
|
816
|
+
sort_by = input
|
|
817
|
+
console.log("apply_sort", sort_by)
|
|
818
|
+
},
|
|
819
|
+
save_server_sort: async (input) => {
|
|
820
|
+
if (typeof config?.on_event == "function") {
|
|
821
|
+
const res = await config?.on_event({
|
|
822
|
+
type: "update_table_server_sort",
|
|
823
|
+
input: input,
|
|
824
|
+
})
|
|
825
|
+
return res
|
|
826
|
+
}
|
|
827
|
+
},
|
|
828
|
+
get_defined_options: () => {
|
|
829
|
+
console.log("columns_prepped", columns_prepped)
|
|
830
|
+
const defined_options = Object.keys(columns_prepped || {}).map((h) => ({ key: h, name: h }))
|
|
831
|
+
return defined_options
|
|
832
|
+
},
|
|
790
833
|
})
|
|
791
834
|
toggle_bulk_selectable_button_manager = create_button_manager({
|
|
792
835
|
type: "soft",
|
|
@@ -244,7 +244,7 @@
|
|
|
244
244
|
children: [],
|
|
245
245
|
attributes: {
|
|
246
246
|
size: 10,
|
|
247
|
-
content_from_variable_path: ["variables", "rows", ["
|
|
247
|
+
content_from_variable_path: ["variables", "rows", ["row_i"], "id"],
|
|
248
248
|
},
|
|
249
249
|
selector_id: "hcsqz",
|
|
250
250
|
},
|
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
children: [],
|
|
320
320
|
attributes: {
|
|
321
321
|
format: "epoch",
|
|
322
|
-
val_from_variable_path: ["variables", "rows", ["
|
|
322
|
+
val_from_variable_path: ["variables", "rows", ["row_i"], "db_epoch_created"],
|
|
323
323
|
},
|
|
324
324
|
selector_id: "time_urzjm",
|
|
325
325
|
},
|
|
@@ -356,7 +356,7 @@
|
|
|
356
356
|
children: [],
|
|
357
357
|
attributes: {
|
|
358
358
|
format: "epoch",
|
|
359
|
-
val_from_variable_path: ["variables", "rows", ["
|
|
359
|
+
val_from_variable_path: ["variables", "rows", ["row_i"], "db_epoch_updated"],
|
|
360
360
|
},
|
|
361
361
|
selector_id: "epoch_rozyy",
|
|
362
362
|
},
|
|
@@ -390,7 +390,7 @@
|
|
|
390
390
|
})
|
|
391
391
|
|
|
392
392
|
let table_manager = $state(null)
|
|
393
|
-
let variables = $state({ rows:
|
|
393
|
+
let variables = $state({ rows: [{ ttttt: "cccc" }, { ttttt: "zzzz" }, { ttttt: "aaaaa" }] })
|
|
394
394
|
|
|
395
395
|
table_manager = create_table_advanced_manager({
|
|
396
396
|
table_id: "abcdefg",
|