Improved sorting for badges. Waiting on an API fix to include the missing badge fields. I think only the minimum is being returned. We need things like the print_count, print_first_datetime, and other fields.

src/lib/ae_events/ae_events__event_badge.ts

@@ -466,7 +466,7 @@ export async function search__event_badge({
     log_lvl?: number;
 }) {
     if (log_lvl) {
-        console.log(`*** search__event_badge() *** event_id=${event_id} printed_status=${printed_status} affiliations=${affiliations_qry_str}`);
+        console.log(`*** search__event_badge() *** event_id=${event_id} printed_status=${printed_status} affiliations=${affiliations_qry_str} order_by_li=`, order_by_li);
     }
 
     if (!fulltext_search_qry_str && !like_search_qry_str && !affiliations_qry_str && !type_code && !external_event_id && printed_status === 'all') {
@@ -633,6 +633,8 @@ export const properties_to_save = [
     'updated_on',
 
     'print_count',
+    'print_first_datetime',
+    'print_last_datetime',
 
     // Generated fields for sorting locally only
     'tmp_sort_1',

src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte

@@ -24,6 +24,7 @@
     import { liveQuery } from 'dexie';
     import { db_events, type Badge } from '$lib/ae_events/db_events';
     import { ae_loc } from '$lib/stores/ae_stores';
+    import { ae_util } from '$lib/ae_utils/ae_utils';
     // let trusted_access = $derived(ae_loc.trusted_access); // This does NOT work with Svelte v5
     // let trusted_access = $ae_loc?.trusted_access; // This works with Svelte v5
 
@@ -31,7 +32,16 @@
         liveQuery(async () => {
             if (badge_obj_li?.length) {
                 const ids = badge_obj_li.map((b) => b.event_badge_id_random);
-                return await db_events.badge.bulkGet(ids);
+                const db_results = await db_events.badge.bulkGet(ids);
+
+                // Create a map for quick lookup by ID to restore order
+                // bulkGet does not guarantee order, so we must re-sort based on the input list
+                const db_results_map = new Map(
+                    db_results.filter(Boolean).map((item) => [item.event_badge_id_random, item])
+                );
+
+                // Return items in the exact order of the original 'ids' array
+                return ids.map((id) => db_results_map.get(id)).filter(Boolean);
             }
             return [];
         })
@@ -51,15 +61,16 @@
 
         <!-- The email should only be the first 3 chars and then @domain name. -->
 
-        <ul class="list-disc list-inside">
+        <ul class="list-disc list-inside w-full">
             {#each $lq__event_badge_obj_li.filter(Boolean) as event_badge_obj: Badge (event_badge_obj?.event_badge_id)}
                 {#if !event_badge_obj?.hide || $ae_loc.trusted_access}
                     <li
                         class="
                     border-b border-gray-300 dark:border-gray-600 py-0.5
-                    flex flex-row gap-1 items-center justify-between w-full
+                    flex flex-row flex-wrap gap-1 items-center justify-between w-full
                     "
                     >
+                        <div class="flex flex-row flex-wrap gap-1 items-center justify-start grow">
                             {#if event_badge_obj?.print_count < 1 || $ae_loc.trusted_access}
                                 <a
                                     href={`/events/${event_badge_obj?.event_id}/badges/${event_badge_obj?.event_badge_id}`}
@@ -130,7 +141,7 @@
                             {/if}
 
                             {#if show_sensitive_fields}
-                            -
+                                <span class="mx-1 text-gray-400">|</span>
                                 <span class="min-w-fit">
                                     <span class="fas fa-envelope"></span>
                                     {#if $ae_loc.trusted_access}
@@ -143,22 +154,64 @@
                                 </span>
                             {/if}
                             {#if !hide_affiliations}
-                            -
+                                <span class="mx-1 text-gray-400">|</span>
+                                <span class="text-sm">
                                     {event_badge_obj?.affiliations ?? '-- no affiliations --'}
+                                </span>
                             {/if}
                             {#if !hide_location}
-                            -
+                                <span class="mx-1 text-gray-400">|</span>
+                                <span class="text-sm">
                                     {event_badge_obj?.location ?? '-- no location --'}
+                                </span>
                             {/if}
                             {#if !hide_badge_type}
-                            -
+                                <span class="mx-1 text-gray-400">|</span>
-                            <span class="italic">{event_badge_obj?.badge_type}</span>
+                                <span class="italic text-sm">{event_badge_obj?.badge_type}</span>
                             {/if}
 
+                            {#if $ae_loc.edit_mode}
+                                <div
+                                    class="flex flex-row flex-wrap gap-2 items-center justify-start w-full mt-1 p-1 bg-surface-100/50 dark:bg-surface-800/50 rounded text-[10px] font-mono border border-surface-200 dark:border-surface-700"
+                                >
+                                    <span title="Badge ID" class="bg-primary-500/10 px-1 rounded">
+                                        ID: {event_badge_obj?.event_badge_id}
+                                    </span>
+                                    <span title="Created On">
+                                        CR: {event_badge_obj?.created_on
+                                            ? new Date(event_badge_obj.created_on).toLocaleString()
+                                            : '--'}
+                                    </span>
+                                    <span title="Updated On">
+                                        UP: {event_badge_obj?.updated_on
+                                            ? new Date(event_badge_obj.updated_on).toLocaleString()
+                                            : '--'}
+                                    </span>
+                                    <span title="First Printed">
+                                        FP: {event_badge_obj?.print_first_datetime
+                                            ? new Date(
+                                                  event_badge_obj.print_first_datetime
+                                              ).toLocaleString()
+                                            : '--'}
+                                    </span>
+                                    <span title="Last Printed">
+                                        LP: {event_badge_obj?.print_last_datetime
+                                            ? new Date(
+                                                  event_badge_obj.print_last_datetime
+                                              ).toLocaleString()
+                                            : '--'}
+                                    </span>
+                                    <span title="Print Count">
+                                        CNT: {event_badge_obj?.print_count ?? 0}
+                                    </span>
+                                </div>
+                            {/if}
+                        </div>
+
                         {#if $ae_loc.trusted_access}
                             <a
                                 href={`/events/${event_badge_obj?.event_id}/badges/${event_badge_obj?.event_badge_id}#review`}
-                                class="btn btn-sm variant-soft-primary">Review</a
+                                class="btn btn-sm variant-soft-primary min-w-fit">Review</a
                             >
                         {/if}
                     </li>

src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte

@@ -122,7 +122,8 @@
         { code: 'test', name: 'Test' }
     ];
 
-    let computed_order_by_li = $derived(() => {
+    let computed_order_by_li = $derived(
+        (() => {
             switch (qry_sort_order) {
                 case 'name_asc':
                     return { given_name: 'ASC', family_name: 'ASC' };
@@ -132,6 +133,16 @@
                     return { updated_on: 'DESC' };
                 case 'updated_asc':
                     return { updated_on: 'ASC' };
+                case 'print_count_desc':
+                    return { print_count: 'DESC' };
+                case 'print_first_desc':
+                    return { print_first_datetime: 'DESC' };
+                case 'print_last_desc':
+                    return { print_last_datetime: 'DESC' };
+                case 'badge_type_asc':
+                    return { badge_type: 'ASC' };
+                case 'affiliations_asc':
+                    return { affiliations: 'ASC' };
                 default:
                     return {
                         // print_count: 'ASC',
@@ -143,7 +154,8 @@
                         created_on: 'DESC'
                     };
             }
-    });
+        })()
+    );
 
     // *** Functions and Logic
     function preventDefault<T extends Event>(fn: (event: T) => void) {
@@ -166,7 +178,8 @@
 
             if (log_lvl) {
                 console.log(
-                    `Triggered: event_badge_qry: ft search qry str:=${$events_loc.badges.fulltext_search_qry_str}`
+                    `Triggered: event_badge_qry: ft search qry str:=${$events_loc.badges.fulltext_search_qry_str} sort order:=`,
+                    computed_order_by_li
                 );
             }
 
@@ -455,6 +468,27 @@
                     </select>
                 {/if}
 
+                {#if $ae_loc.trusted_access}
+                    <select
+                        bind:value={qry_sort_order}
+                        onchange={() => {
+                            ae_triggers.event_badge_qry = true;
+                        }}
+                        class="select text-xs px-1 max-w-fit"
+                    >
+                        <option value="">-- Default Sort --</option>
+                        <option value="name_asc">Name ASC</option>
+                        <option value="name_desc">Name DESC</option>
+                        <option value="updated_desc">Updated DESC</option>
+                        <option value="updated_asc">Updated ASC</option>
+                        <option value="print_count_desc">Print Count DESC</option>
+                        <option value="print_first_desc">First Printed DESC</option>
+                        <option value="print_last_desc">Last Printed DESC</option>
+                        <option value="badge_type_asc">Badge Type ASC</option>
+                        <option value="affiliations_asc">Affiliations ASC</option>
+                    </select>
+                {/if}
+
                 {#if $ae_loc.trusted_access}
                     <input
                         type="search"