Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(data-stores): sortable Code/Name/Updated columns

Browse Source 
Click any column header to sort; click again to toggle ASC/DESC.
Sort re-runs the current search immediately if results are showing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-17 14:40:40 -04:00
parent 752504e173
commit 1ab93fd501
1 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/routes/core/data_stores/+page.svelte
View File

@@ -5,9 +5,12 @@ import { goto } from '$app/navigation';
import { Modal } from 'flowbite-svelte';
import {
ArrowRight,
ArrowUpDown,
Check,
ChevronDown,
ChevronLeft,
ChevronRight,
ChevronUp,
Code,
Database,
Eye,
@@ -44,6 +47,8 @@ let qry_for_id = $state('');
let qry_enabled = $state<'all' | 'enabled' | 'not_enabled'>('all');
let page_limit = $state(50);
let page_offset = $state(0);
let sort_col = $state<string>('code');
let sort_dir = $state<'ASC' | 'DESC'>('ASC');
// ── Results ───────────────────────────────────────────────────────────────────
let results: ae_DataStore[] = $state([]);
@@ -112,7 +117,7 @@ async function do_search(reset = true) {
api_cfg: $ae_api,
obj_type: 'data_store',
search_query,
order_by_li: [{ code: 'ASC' }, { updated_on: 'DESC' }],
order_by_li: [{ [sort_col]: sort_dir }],
limit: page_limit,
offset: page_offset,
log_lvl: 0
@@ -133,6 +138,16 @@ function clear_filters() {
searched = false;
}
function toggle_sort(col: string) {
if (sort_col === col) {
sort_dir = sort_dir === 'ASC' ? 'DESC' : 'ASC';
} else {
sort_col = col;
sort_dir = 'ASC';
}
if (searched) do_search(false);
}
// ── Open edit ─────────────────────────────────────────────────────────────────
function open_edit(obj: ae_DataStore) {
editing_obj = obj;
@@ -611,13 +626,40 @@ function content_preview(ds: ae_DataStore): string {
<table class="w-full text-xs">
<thead>
<tr class="border-surface-500/20 border-b text-left text-[10px] font-bold uppercase tracking-wider opacity-50">
<th class="px-3 py-2">Code</th>
<th class="px-3 py-2">Name</th>
<th class="px-3 py-2">
<button type="button" class="flex items-center gap-1 hover:opacity-100" onclick={() => toggle_sort('code')}>
Code
{#if sort_col === 'code'}
{#if sort_dir === 'ASC'}<ChevronUp size={10} />{:else}<ChevronDown size={10} />{/if}
{:else}
<ArrowUpDown size={10} class="opacity-30" />
{/if}
</button>
</th>
<th class="px-3 py-2">
<button type="button" class="flex items-center gap-1 hover:opacity-100" onclick={() => toggle_sort('name')}>
Name
{#if sort_col === 'name'}
{#if sort_dir === 'ASC'}<ChevronUp size={10} />{:else}<ChevronDown size={10} />{/if}
{:else}
<ArrowUpDown size={10} class="opacity-30" />
{/if}
</button>
</th>
<th class="px-3 py-2">Type</th>
<th class="px-3 py-2">Account</th>
<th class="px-3 py-2">For</th>
<th class="px-3 py-2 hidden md:table-cell">Preview</th>
<th class="px-3 py-2 hidden lg:table-cell">Updated</th>
<th class="px-3 py-2 hidden lg:table-cell">
<button type="button" class="flex items-center gap-1 hover:opacity-100" onclick={() => toggle_sort('updated_on')}>
Updated
{#if sort_col === 'updated_on'}
{#if sort_dir === 'ASC'}<ChevronUp size={10} />{:else}<ChevronDown size={10} />{/if}
{:else}
<ArrowUpDown size={10} class="opacity-30" />
{/if}
</button>
</th>
<th class="px-3 py-2"></th>
</tr>
</thead>