fix(core): comprehensive search UI redesign and module modernization
- Rebuilt Users and People search from scratch using robust flexbox (grow, min-w-100px, whitespace-nowrap). - Added search functionality and card-grid layout to Address and Contact management lists. - Modernized detail pages for Addresses and Contacts with standardized headers and iconography. - Unified form padding (p-3 for inputs, p-2 for selects) across all Core modules. - Fixed variable hoisting and missing icon imports in Address components.
This commit is contained in:
Scott Idem
@@ -2,13 +2,24 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { MapPin, Plus, Search, ExternalLink, X, ListFilter, MapPinned } from 'lucide-svelte';
|
||||
import { MapPin, Plus, Search, ExternalLink, X, ListFilter, MapPinned, Globe, Building2 } from 'lucide-svelte';
|
||||
import { load_ae_obj_li__address, create_ae_obj__address } from '$lib/ae_core/ae_core__address';
|
||||
import Address_form from './ae_comp__address_form.svelte';
|
||||
|
||||
let address_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let show_add_form = $state(false);
|
||||
let qry_str = $state('');
|
||||
let filtered_li: any[] = $derived(
|
||||
qry_str
|
||||
? address_li.filter(a =>
|
||||
a.city?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.state_province?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.organization_name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.line_1?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: address_li
|
||||
);
|
||||
|
||||
async function load_addresses() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
@@ -67,11 +78,35 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="max-w-2xl space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</label>
|
||||
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by city, state, organization, or street..."
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide">Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<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 if address_li.length === 0}
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<MapPinned size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Addresses Found</h3>
|
||||
@@ -79,43 +114,49 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-4 flex items-center gap-2">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Linked Addresses
|
||||
<span class="badge variant-soft-secondary ml-auto">{address_li.length} entries</span>
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} entries</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>City</th>
|
||||
<th>State/Province</th>
|
||||
<th>Country</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each address_li as addr}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{addr.city || '--'}</td>
|
||||
<td>{addr.state_province || '--'}</td>
|
||||
<td><span class="badge variant-soft-surface font-mono">{addr.country || '--'}</span></td>
|
||||
<td>
|
||||
<span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[10px] uppercase font-bold">
|
||||
{addr.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-sm variant-soft-primary font-bold shadow-sm" href="/core/addresses/{addr.address_id_random}">
|
||||
Manage <ExternalLink size={12} class="ml-2 opacity-50" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as addr}
|
||||
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4">
|
||||
<span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{addr.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<MapPin size={20} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">{addr.city || '--'}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50 truncate">{addr.state_province || '--'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-xs opacity-70">
|
||||
{#if addr.organization_name}
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Building2 size={14} class="text-primary-500 shrink-0" />
|
||||
<span class="truncate">{addr.organization_name}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Globe size={14} class="text-secondary-500 shrink-0" />
|
||||
<span class="truncate font-mono">{addr.country_name || addr.country || '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
|
||||
View Details
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user