Reorganized System Lookups page and added Time Zone priority filtering.
- Sequenced sections as Country, Subdivisions, then Time Zones. - Implemented a reactive toggle for 'only_priority' in the Time Zone section to support high-priority filtering. - Switched to a full-width card layout for improved readability of large datasets.
This commit is contained in:
Scott Idem
@@ -2,10 +2,11 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { List, Globe, Clock, MapPin, ListFilter, RefreshCcw, Landmark, Info } from 'lucide-svelte';
|
||||
import { List, Globe, Clock, MapPin, ListFilter, RefreshCcw, Landmark, Info, Star } from 'lucide-svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
|
||||
let loading = $state(true);
|
||||
let tz_only_priority = $state(false);
|
||||
let lookups: any = $state({
|
||||
countries: [],
|
||||
time_zones: [],
|
||||
@@ -15,19 +16,24 @@
|
||||
async function load_lookups() {
|
||||
loading = true;
|
||||
try {
|
||||
const [countries, time_zones, subdivisions] = await Promise.all([
|
||||
const [countries, subdivisions, time_zones] = await Promise.all([
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country', log_lvl: 1 }),
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'time_zone', log_lvl: 1 }),
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country_subdivision', log_lvl: 1 })
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country_subdivision', log_lvl: 1 }),
|
||||
api.get_ae_obj_li_for_lu({
|
||||
api_cfg: $ae_api,
|
||||
for_lu_type: 'time_zone',
|
||||
only_priority: tz_only_priority,
|
||||
log_lvl: 1
|
||||
})
|
||||
]);
|
||||
|
||||
console.log('Lookup Results - Countries:', countries);
|
||||
console.log('Lookup Results - Time Zones:', time_zones);
|
||||
console.log('Lookup Results - Subdivisions:', subdivisions);
|
||||
console.log('Lookup Results - Time Zones:', time_zones);
|
||||
|
||||
lookups.countries = countries || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
lookups.subdivisions = subdivisions || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load lookups:', error);
|
||||
} finally {
|
||||
@@ -42,6 +48,12 @@
|
||||
}
|
||||
load_lookups();
|
||||
});
|
||||
|
||||
// Handle TZ priority toggle
|
||||
function toggle_tz_priority() {
|
||||
tz_only_priority = !tz_only_priority;
|
||||
load_lookups();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
@@ -66,13 +78,13 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
{#if loading && !lookups.countries.length}
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in">
|
||||
<!-- Countries -->
|
||||
<div class="space-y-6 animate-fade-in">
|
||||
<!-- 1. Countries -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Globe size={20} class="text-secondary-500" />
|
||||
@@ -80,7 +92,7 @@
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<div class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
@@ -100,14 +112,54 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Zones -->
|
||||
<!-- 2. Subdivisions -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Clock size={20} class="text-tertiary-500" />
|
||||
Time Zone Reference
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
|
||||
<MapPin size={20} class="text-primary-500" />
|
||||
Country Subdivisions (States/Provinces)
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Country</th>
|
||||
<th>Name</th>
|
||||
<th class="text-center">Code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each lookups.subdivisions as s}
|
||||
<tr class="transition-colors">
|
||||
<td class="opacity-60">{s.country_alpha_2_code}</td>
|
||||
<td class="font-bold">{s.name}</td>
|
||||
<td class="text-center"><span class="badge variant-soft-surface font-mono">{s.code}</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Time Zones -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
|
||||
<h3 class="h4 font-bold flex items-center gap-2">
|
||||
<Clock size={20} class="text-tertiary-500" />
|
||||
Time Zone Reference
|
||||
<span class="badge variant-soft-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
|
||||
</h3>
|
||||
<button
|
||||
class="btn btn-sm transition-all {tz_only_priority ? 'variant-filled-warning' : 'variant-soft-surface'}"
|
||||
onclick={toggle_tz_priority}
|
||||
disabled={loading}
|
||||
>
|
||||
<Star size={14} class="mr-2 {tz_only_priority ? 'fill-current' : ''}" />
|
||||
{tz_only_priority ? 'Showing Priority' : 'Show Only Priority'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
@@ -129,36 +181,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subdivisions (Full Width) -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6 animate-fade-in" style="animation-delay: 100ms;">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<MapPin size={20} class="text-primary-500" />
|
||||
Country Subdivisions (States/Provinces)
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[600px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Country</th>
|
||||
<th>Name</th>
|
||||
<th class="text-center">Code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each lookups.subdivisions as s}
|
||||
<tr class="transition-colors">
|
||||
<td class="opacity-60">{s.country_alpha_2_code}</td>
|
||||
<td class="font-bold">{s.name}</td>
|
||||
<td class="text-center"><span class="badge variant-soft-surface font-mono">{s.code}</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 variant-soft-surface border border-surface-500/10 flex items-center gap-3">
|
||||
<Info size={16} class="text-primary-500" />
|
||||
<p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>
|
||||
|
||||
Reference in New Issue
Block a user