Implement reactive sorting for IDAA Archives
- Forced priority archives to the top of the list. - Implemented descending (DESC) sort by the 'sort' field within groups. - Added a sort selector to the archive list component. - Centralized sorting logic in-memory within LiveQuery for immediate reactivity.
This commit is contained in:
@@ -44,17 +44,26 @@
|
|||||||
|
|
||||||
let lq__archive_obj_li = $derived(
|
let lq__archive_obj_li = $derived(
|
||||||
liveQuery(async () => {
|
liveQuery(async () => {
|
||||||
let results = await db_archives.archive
|
const results = await db_archives.archive
|
||||||
.where('account_id')
|
.where('account_id')
|
||||||
.equals($slct.account_id)
|
.equals($slct.account_id)
|
||||||
// .orderBy('updated_on')
|
.toArray();
|
||||||
// .toArray()
|
|
||||||
// .reverse() // Removed reverse: sortBy('sort') already provides the correct 1, 2, 3... order
|
// In-memory sort: Priority (desc) then Sort (desc)
|
||||||
.sortBy('sort');
|
results.sort((a, b) => {
|
||||||
// .sortBy('updated_on');
|
// Priority: True (1) before False (0)
|
||||||
// .sortBy('updated_on, created_on');
|
const prioA = a.priority ? 1 : 0;
|
||||||
// .sortBy('[updated_on+created_on]');
|
const prioB = b.priority ? 1 : 0;
|
||||||
// .sortBy('[created_on+updated_on]');
|
if (prioA !== prioB) return prioB - prioA;
|
||||||
|
|
||||||
|
// Sort: 9, 8, 7...
|
||||||
|
const sortA = a.sort ?? 0;
|
||||||
|
const sortB = b.sort ?? 0;
|
||||||
|
if (sortA !== sortB) return sortB - sortA;
|
||||||
|
|
||||||
|
// Fallback: Name
|
||||||
|
return (a.name ?? '').localeCompare(b.name ?? '');
|
||||||
|
});
|
||||||
|
|
||||||
return results;
|
return results;
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -25,6 +25,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let { lq__archive_obj_li }: Props = $props();
|
let { lq__archive_obj_li }: Props = $props();
|
||||||
|
|
||||||
|
// Local Sort State
|
||||||
|
let qry_sort_mode = $state('priority_sort'); // 'priority_sort', 'updated_desc', 'name_asc'
|
||||||
|
|
||||||
|
let sorted_archive_obj_li = $derived.by(() => {
|
||||||
|
const list = [...($lq__archive_obj_li ?? [])];
|
||||||
|
if (!list.length) return [];
|
||||||
|
|
||||||
|
list.sort((a, b) => {
|
||||||
|
if (qry_sort_mode === 'priority_sort') {
|
||||||
|
const prioA = a.priority ? 1 : 0;
|
||||||
|
const prioB = b.priority ? 1 : 0;
|
||||||
|
if (prioA !== prioB) return prioB - prioA;
|
||||||
|
|
||||||
|
const sortA = a.sort ?? 0;
|
||||||
|
const sortB = b.sort ?? 0;
|
||||||
|
if (sortA !== sortB) return sortB - sortA;
|
||||||
|
} else if (qry_sort_mode === 'updated_desc') {
|
||||||
|
const dateA = new Date(a.updated_on || a.created_on).getTime();
|
||||||
|
const dateB = new Date(b.updated_on || b.created_on).getTime();
|
||||||
|
return dateB - dateA;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default fallback: Name
|
||||||
|
return (a.name ?? '').localeCompare(b.name ?? '');
|
||||||
|
});
|
||||||
|
|
||||||
|
return list;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
@@ -33,8 +62,17 @@
|
|||||||
flex flex-col gap-2 items-center justify-center w-full
|
flex flex-col gap-2 items-center justify-center w-full
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{#if $lq__archive_obj_li && $lq__archive_obj_li.length}
|
<div class="w-full max-w-(--breakpoint-lg) flex flex-row items-center justify-end px-2 mb-2 gap-2">
|
||||||
{#each $lq__archive_obj_li as idaa_archive_obj, index}
|
<span class="text-xs font-bold opacity-50 uppercase tracking-widest">Sort By:</span>
|
||||||
|
<select bind:value={qry_sort_mode} class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-1 w-fit">
|
||||||
|
<option value="priority_sort">Priority & Order</option>
|
||||||
|
<option value="name_asc">Name (A-Z)</option>
|
||||||
|
<option value="updated_desc">Recently Updated</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if sorted_archive_obj_li && sorted_archive_obj_li.length}
|
||||||
|
{#each sorted_archive_obj_li as idaa_archive_obj, index}
|
||||||
<div
|
<div
|
||||||
class="container archive archive_obj border rounded p-2 mb-2 space-y-2 w-full max-w-(--breakpoint-lg) flex flex-col items-center justify-center"
|
class="container archive archive_obj border rounded p-2 mb-2 space-y-2 w-full max-w-(--breakpoint-lg) flex flex-col items-center justify-center"
|
||||||
class:hidden={(idaa_archive_obj?.hide ||
|
class:hidden={(idaa_archive_obj?.hide ||
|
||||||
|
|||||||
Reference in New Issue
Block a user