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}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
import { editable_fields__address } from '$lib/ae_core/ae_core__address.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Save, Trash2, ArrowLeft, MapPin, Edit, Eye } from 'lucide-svelte';
|
||||
import { Save, Trash2, ArrowLeft, MapPin, Edit, Eye, Globe, Building2, MapPinned, Info, ShieldCheck, Activity, Clock, User } from 'lucide-svelte';
|
||||
import Address_form from '../ae_comp__address_form.svelte';
|
||||
|
||||
let address_id = $page.params.address_id;
|
||||
@@ -48,123 +48,162 @@
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm variant-soft" href="/core/addresses">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/addresses">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<MapPin size={24} />
|
||||
<h1 class="h2">{address ? `${address.city}, ${address.state_province}` : 'Loading Address...'}</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<MapPin size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">{address ? `${address.city}, ${address.state_province}` : 'Loading...'}</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Address Detail</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-soft-secondary" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
<button class="btn btn-sm variant-soft-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
{#if is_editing}
|
||||
<Eye size={16} class="mr-2" /> View Mode
|
||||
{:else}
|
||||
<Edit size={16} class="mr-2" /> Edit Mode
|
||||
{/if}
|
||||
</button>
|
||||
<button class="btn btn-sm variant-soft-error" onclick={handle_delete} disabled={loading}>
|
||||
<button class="btn btn-sm variant-soft-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="placeholder animate-pulse w-full h-64"></div>
|
||||
<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}
|
||||
{#if is_editing}
|
||||
<Address_form
|
||||
{address}
|
||||
onSave={(updated) => {
|
||||
address = updated;
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
<div class="animate-fade-in">
|
||||
<Address_form
|
||||
{address}
|
||||
onSave={(updated) => {
|
||||
address = updated;
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 space-y-4 variant-soft">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Address Details</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Attention To</p>
|
||||
<p>{address.attention_to || '--'}</p>
|
||||
<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">
|
||||
<MapPinned size={20} class="text-primary-500" />
|
||||
Location Information
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<User size={10} /> Attention To
|
||||
</p>
|
||||
<p class="font-bold">{address.attention_to || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Organization</p>
|
||||
<p>{address.organization_name || '--'}</p>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Building2 size={10} /> Organization
|
||||
</p>
|
||||
<p class="font-bold">{address.organization_name || '--'}</p>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Address Lines</p>
|
||||
<p>{address.line_1}</p>
|
||||
{#if address.line_2}<p>{address.line_2}</p>{/if}
|
||||
{#if address.line_3}<p>{address.line_3}</p>{/if}
|
||||
<div class="md:col-span-2 space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest">Street Address</p>
|
||||
<div class="space-y-1 mt-1">
|
||||
<p class="text-lg font-black tracking-tight leading-tight">{address.line_1}</p>
|
||||
{#if address.line_2}<p class="text-lg font-black tracking-tight leading-tight opacity-75">{address.line_2}</p>{/if}
|
||||
{#if address.line_3}<p class="text-lg font-black tracking-tight leading-tight opacity-50">{address.line_3}</p>{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">City, State/Province</p>
|
||||
<p>{address.city}, {address.state_province || '--'}</p>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<MapPin size={10} /> City, State/Province
|
||||
</p>
|
||||
<p class="font-bold">{address.city}, {address.state_province || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Postal Code / Country</p>
|
||||
<p>{address.postal_code || '--'} / {address.country_name || address.country || '--'}</p>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Globe size={10} /> Postal Code / Country
|
||||
</p>
|
||||
<p class="font-bold">{address.postal_code || '--'} / <span class="badge variant-soft-surface">{address.country_name || address.country || '--'}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 variant-soft">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Technical Details</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Timezone</p>
|
||||
<p>{address.timezone || '--'}</p>
|
||||
<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">
|
||||
<Activity size={20} class="text-secondary-500" />
|
||||
Technical Details
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Clock size={10} /> Timezone
|
||||
</p>
|
||||
<p class="font-mono">{address.timezone || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Coordinates</p>
|
||||
<p>{address.latitude || '--'}, {address.longitude || '--'}</p>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<MapPin size={10} /> Coordinates
|
||||
</p>
|
||||
<p class="font-mono">{address.latitude || '--'}, {address.longitude || '--'}</p>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Internal Notes</p>
|
||||
<p class="whitespace-pre-wrap">{address.notes || '--'}</p>
|
||||
<div class="md:col-span-2 space-y-2">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Info size={10} /> Internal Notes
|
||||
</p>
|
||||
<div class="p-4 bg-black/5 rounded-xl border border-dashed border-surface-500/20 italic opacity-80 min-h-[80px]">
|
||||
{address.notes || 'No internal notes provided for this address.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 space-y-4 variant-soft">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Status</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Enabled</span>
|
||||
<span class="badge {address.enable ? 'variant-filled-success' : 'variant-filled-error'}">
|
||||
{address.enable ? 'Yes' : 'No'}
|
||||
<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">
|
||||
<ShieldCheck size={20} class="text-warning-500" />
|
||||
Visibility & Status
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Enabled</span>
|
||||
<span class="badge {address.enable ? 'variant-filled-success' : 'variant-filled-error'} px-4 py-1 shadow-sm">
|
||||
{address.enable ? 'ACTIVE' : 'DISABLED'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Hidden</span>
|
||||
<span class="badge {address.hide ? 'variant-filled-warning' : 'variant-filled-surface'}">
|
||||
{address.hide ? 'Yes' : 'No'}
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Hidden</span>
|
||||
<span class="badge {address.hide ? 'variant-filled-warning' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{address.hide ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Priority</span>
|
||||
<span class="badge {address.priority ? 'variant-filled-secondary' : 'variant-filled-surface'}">
|
||||
{address.priority ? 'Yes' : 'No'}
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Priority</span>
|
||||
<span class="badge {address.priority ? 'variant-filled-secondary' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{address.priority ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 opacity-60 text-xs font-mono variant-soft">
|
||||
<p>ID: {address.address_id_random}</p>
|
||||
<p>Created: {new Date(address.created_on).toLocaleString()}</p>
|
||||
{#if address.updated_on}
|
||||
<p>Updated: {new Date(address.updated_on).toLocaleString()}</p>
|
||||
{/if}
|
||||
<div class="card p-5 variant-soft-surface shadow-inner border border-surface-500/10 space-y-3">
|
||||
<p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
|
||||
<div class="space-y-2 text-[10px] font-mono opacity-60">
|
||||
<p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{address.address_id_random}</span></p>
|
||||
<p class="flex justify-between"><span>Created:</span> <span>{new Date(address.created_on).toLocaleString()}</span></p>
|
||||
{#if address.updated_on}
|
||||
<p class="flex justify-between"><span>Updated:</span> <span>{new Date(address.updated_on).toLocaleString()}</span></p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,11 +2,22 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Phone, Plus, Search, Mail, User, ExternalLink, X, ListFilter, Contact } from 'lucide-svelte';
|
||||
import { Phone, Plus, Search, Mail, User, ExternalLink, X, ListFilter, Contact, ShieldCheck, Activity } from 'lucide-svelte';
|
||||
import { load_ae_obj_li__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
|
||||
import Contact_form from './ae_comp__contact_form.svelte';
|
||||
|
||||
let contact_li: any[] = $state([]);
|
||||
let qry_str = $state('');
|
||||
let filtered_li: any[] = $derived(
|
||||
qry_str
|
||||
? contact_li.filter(c =>
|
||||
c.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
c.title?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
c.email?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
c.phone_office?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: contact_li
|
||||
);
|
||||
let loading = $state(true);
|
||||
let show_add_form = $state(false);
|
||||
|
||||
@@ -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 name, title, email, or phone..."
|
||||
/>
|
||||
<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_contacts} 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 contact_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">
|
||||
<Contact size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Contacts Found</h3>
|
||||
@@ -79,61 +114,47 @@
|
||||
</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" />
|
||||
Directory Results
|
||||
<span class="badge variant-soft-secondary ml-auto">{contact_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>Name / Title</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each contact_li as con}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar variant-soft-surface w-8 h-8 flex items-center justify-center rounded-full">
|
||||
<User size={14} class="opacity-60" />
|
||||
</div>
|
||||
{con.title || con.name || '--'}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{#if con.email}
|
||||
<div class="flex items-center gap-2">
|
||||
<Mail size={14} class="opacity-40" />
|
||||
<span class="text-sm">{con.email}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="opacity-20 text-xs italic">No Email</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-mono text-sm opacity-80">{con.phone_office || con.phone_mobile || '--'}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[10px] uppercase font-bold">
|
||||
{con.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-sm variant-soft-primary font-bold shadow-sm" href="/core/contacts/{con.contact_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 con}
|
||||
<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 {con.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{con.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">{con.name || con.title || '--'}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50 truncate">{con.title || 'Support Contact'}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="space-y-2 text-xs opacity-70">
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Mail size={14} class="text-primary-500 shrink-0" />
|
||||
<span class="truncate">{con.email || 'No Email'}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Phone size={14} class="text-secondary-500 shrink-0" />
|
||||
<span class="truncate">{con.phone_office || con.phone_mobile || '--'}</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/contacts/{con.contact_id_random}">
|
||||
Manage Contact
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
import { editable_fields__contact } from '$lib/ae_core/ae_core__contact.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Save, Trash2, ArrowLeft, UserRound, Edit, Eye } from 'lucide-svelte';
|
||||
import { Save, Trash2, ArrowLeft, UserRound, Edit, Eye, Mail, Phone, Globe, Linkedin, Info, ShieldCheck, Activity, Link2, Contact } from 'lucide-svelte';
|
||||
import Contact_form from '../ae_comp__contact_form.svelte';
|
||||
|
||||
let contact_id = $page.params.contact_id;
|
||||
@@ -48,134 +48,166 @@
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm variant-soft" href="/core/contacts">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/contacts">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<UserRound size={24} />
|
||||
<h1 class="h2">{contact?.name || contact?.title || 'Loading Contact...'}</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<UserRound size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">{contact?.name || contact?.title || 'Loading...'}</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Contact Detail</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-soft-secondary" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
<button class="btn btn-sm variant-soft-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
{#if is_editing}
|
||||
<Eye size={16} class="mr-2" /> View Mode
|
||||
{:else}
|
||||
<Edit size={16} class="mr-2" /> Edit Mode
|
||||
{/if}
|
||||
</button>
|
||||
<button class="btn btn-sm variant-soft-error" onclick={handle_delete} disabled={loading}>
|
||||
<button class="btn btn-sm variant-soft-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="placeholder animate-pulse w-full h-64"></div>
|
||||
<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 contact}
|
||||
{#if is_editing}
|
||||
<Contact_form
|
||||
{contact}
|
||||
onSave={(updated) => {
|
||||
contact = updated;
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
<div class="animate-fade-in">
|
||||
<Contact_form
|
||||
{contact}
|
||||
onSave={(updated) => {
|
||||
contact = updated;
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 space-y-4 variant-soft">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Contact Details</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Title / Name</p>
|
||||
<p>{contact.title || contact.name || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Tagline</p>
|
||||
<p>{contact.tagline || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Email</p>
|
||||
<p>{contact.email || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Website</p>
|
||||
<p>
|
||||
{#if contact.website_url}
|
||||
<a href={contact.website_url} target="_blank" class="text-blue-500 underline">{contact.website_url}</a>
|
||||
{:else}
|
||||
--
|
||||
{/if}
|
||||
<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">
|
||||
<Contact size={20} class="text-primary-500" />
|
||||
Core Information
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<UserRound size={10} /> Full Name / Title
|
||||
</p>
|
||||
<p class="text-lg font-black tracking-tight leading-tight">{contact.name || contact.title || '--'}</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Activity size={10} /> Tagline / Role
|
||||
</p>
|
||||
<p class="font-bold">{contact.tagline || '--'}</p>
|
||||
</div>
|
||||
<div class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Mail size={10} /> Email Address
|
||||
</p>
|
||||
<p class="font-bold text-primary-500 break-all">{contact.email || '--'}</p>
|
||||
</div>
|
||||
<div class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Globe size={10} /> Website
|
||||
</p>
|
||||
{#if contact.website_url}
|
||||
<a href={contact.website_url} target="_blank" class="font-bold text-secondary-500 hover:underline flex items-center gap-2 truncate">
|
||||
{contact.website_url} <Link2 size={12} />
|
||||
</a>
|
||||
{:else}
|
||||
<p class="font-bold">--</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 variant-soft">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Communication & Social</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Mobile Phone</p>
|
||||
<p>{contact.phone_mobile || contact.phone || '--'}</p>
|
||||
<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">
|
||||
<Phone size={20} class="text-secondary-500" />
|
||||
Communication & Social
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Phone size={10} /> Mobile Phone
|
||||
</p>
|
||||
<p class="font-mono font-bold">{contact.phone_mobile || contact.phone || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Office Phone</p>
|
||||
<p>{contact.phone_office || '--'}</p>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Phone size={10} /> Office Phone
|
||||
</p>
|
||||
<p class="font-mono font-bold">{contact.phone_office || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">LinkedIn</p>
|
||||
<p>{contact.linkedin_url || '--'}</p>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Linkedin size={10} /> LinkedIn
|
||||
</p>
|
||||
<p class="font-bold truncate">{contact.linkedin_url || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Socials</p>
|
||||
<div class="flex gap-2">
|
||||
{#if contact.facebook_url}<span>FB</span>{/if}
|
||||
{#if contact.instagram_url}<span>IG</span>{/if}
|
||||
<div class="md:col-span-2 space-y-2">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Info size={10} /> Internal Notes
|
||||
</p>
|
||||
<div class="p-4 bg-black/5 rounded-xl border border-dashed border-surface-500/20 italic opacity-80 min-h-[80px]">
|
||||
{contact.notes || 'No internal notes provided for this contact.'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Internal Notes</p>
|
||||
<p class="whitespace-pre-wrap">{contact.notes || '--'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 space-y-4 variant-soft">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Status</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Enabled</span>
|
||||
<span class="badge {contact.enable ? 'variant-filled-success' : 'variant-filled-error'}">
|
||||
{contact.enable ? 'Yes' : 'No'}
|
||||
<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">
|
||||
<ShieldCheck size={20} class="text-warning-500" />
|
||||
Status & Flags
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Enabled</span>
|
||||
<span class="badge {contact.enable ? 'variant-filled-success' : 'variant-filled-error'} px-4 py-1 shadow-sm">
|
||||
{contact.enable ? 'ACTIVE' : 'DISABLED'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Hidden</span>
|
||||
<span class="badge {contact.hide ? 'variant-filled-warning' : 'variant-filled-surface'}">
|
||||
{contact.hide ? 'Yes' : 'No'}
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Hidden</span>
|
||||
<span class="badge {contact.hide ? 'variant-filled-warning' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{contact.hide ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Priority</span>
|
||||
<span class="badge {contact.priority ? 'variant-filled-secondary' : 'variant-filled-surface'}">
|
||||
{contact.priority ? 'Yes' : 'No'}
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Priority</span>
|
||||
<span class="badge {contact.priority ? 'variant-filled-secondary' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{contact.priority ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 opacity-60 text-xs font-mono variant-soft">
|
||||
<p>ID: {contact.contact_id_random}</p>
|
||||
<p>Created: {new Date(contact.created_on).toLocaleString()}</p>
|
||||
{#if contact.updated_on}
|
||||
<p>Updated: {new Date(contact.updated_on).toLocaleString()}</p>
|
||||
{/if}
|
||||
<div class="card p-5 variant-soft-surface shadow-inner border border-surface-500/10 space-y-3">
|
||||
<p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
|
||||
<div class="space-y-2 text-[10px] font-mono opacity-60">
|
||||
<p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{contact.contact_id_random}</span></p>
|
||||
<p class="flex justify-between"><span>Created:</span> <span>{new Date(contact.created_on).toLocaleString()}</span></p>
|
||||
{#if contact.updated_on}
|
||||
<p class="flex justify-between"><span>Updated:</span> <span>{new Date(contact.updated_on).toLocaleString()}</span></p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -46,20 +46,22 @@
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search People</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] variant-filled-surface rounded-lg overflow-hidden border border-surface-500/20 shadow-inner">
|
||||
<div class="input-group-shim !px-4"><Search size={18} class="opacity-50" /></div>
|
||||
<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"
|
||||
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 name, email, or ID..."
|
||||
onkeydown={(e) => e.key === 'Enter' && handle_search()}
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-8 hover:brightness-110 transition-all border-l border-surface-500/20" onclick={handle_search} disabled={loading}>
|
||||
<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={handle_search} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin mr-1">⏳</span>
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
Go
|
||||
<span class="whitespace-nowrap tracking-wide">Go</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -83,20 +83,22 @@
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] variant-filled-surface rounded-lg overflow-hidden border border-surface-500/20 shadow-inner">
|
||||
<div class="input-group-shim !px-4"><Search size={18} class="opacity-50" /></div>
|
||||
<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"
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search username or email..."
|
||||
onkeydown={(e) => e.key === 'Enter' && load_users()}
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-8 hover:brightness-110 transition-all border-l border-surface-500/20" onclick={load_users} disabled={loading}>
|
||||
<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_users} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin mr-1">⏳</span>
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
Go
|
||||
<span class="whitespace-nowrap tracking-wide">Go</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user