Standardize Core UI forms and unify schemas for V3 API compatibility
- Implement new Svelte 5 Person, Address, and Contact form components with surgical payload logic. - Refactor core routes (People, Addresses, Contacts) to support unified Create/Edit workflows. - Update ae_types.ts, db_core.ts, and db_journals.ts to align with V3 backend object models. - Fix type safety issues in Journal history views and refine metadata display. - Migrate person core functions to the newer ae_core__person module.
This commit is contained in:
Scott Idem
@@ -2,11 +2,13 @@
|
||||
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 } from 'lucide-svelte';
|
||||
import { Phone, Plus, Search, Mail, User, ExternalLink, X } 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 loading = $state(true);
|
||||
let show_add_form = $state(false);
|
||||
|
||||
async function load_contacts() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
@@ -20,27 +22,6 @@
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function handle_add() {
|
||||
const name = prompt('Enter contact name:');
|
||||
if (!name) return;
|
||||
const email = prompt('Enter email address:');
|
||||
const phone = prompt('Enter phone number:');
|
||||
|
||||
const result = await create_ae_obj__contact({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
data_kv: { name, email, phone, enable: true },
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
load_contacts();
|
||||
if (result.contact_id_random) {
|
||||
goto(`/core/contacts/${result.contact_id_random}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
@@ -56,11 +37,30 @@
|
||||
<Phone size={24} />
|
||||
<h1 class="h2">Contact Management</h1>
|
||||
</div>
|
||||
<button class="btn variant-filled-primary" onclick={handle_add}>
|
||||
<Plus size={16} class="mr-2" /> Add Contact
|
||||
<button class="btn variant-filled-primary" onclick={() => show_add_form = !show_add_form}>
|
||||
{#if show_add_form}
|
||||
<X size={16} class="mr-2" /> Cancel
|
||||
{:else}
|
||||
<Plus size={16} class="mr-2" /> Add Contact
|
||||
{/if}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if show_add_form}
|
||||
<div class="mb-8">
|
||||
<Contact_form
|
||||
onSave={(new_con) => {
|
||||
show_add_form = false;
|
||||
load_contacts();
|
||||
if (new_con.contact_id_random) {
|
||||
goto(`/core/contacts/${new_con.contact_id_random}`);
|
||||
}
|
||||
}}
|
||||
onCancel={() => show_add_form = false}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="placeholder animate-pulse h-64 w-full"></div>
|
||||
{:else if contact_li.length === 0}
|
||||
|
||||
@@ -9,12 +9,13 @@
|
||||
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 } from 'lucide-svelte';
|
||||
import { Save, Trash2, ArrowLeft, UserRound, Edit, Eye } from 'lucide-svelte';
|
||||
import Contact_form from '../ae_comp__contact_form.svelte';
|
||||
|
||||
let contact_id = $page.params.contact_id;
|
||||
let contact: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
let is_editing = $state(false);
|
||||
|
||||
async function load_data() {
|
||||
loading = true;
|
||||
@@ -34,24 +35,6 @@
|
||||
load_data();
|
||||
});
|
||||
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
const data_kv: any = {};
|
||||
editable_fields__contact.forEach(field => {
|
||||
if (contact[field] !== undefined) {
|
||||
data_kv[field] = contact[field];
|
||||
}
|
||||
});
|
||||
|
||||
await update_ae_obj__contact({
|
||||
api_cfg: $ae_api,
|
||||
contact_id,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
saving = false;
|
||||
}
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Permanently delete this contact?')) return;
|
||||
await delete_ae_obj_id__contact({
|
||||
@@ -72,15 +55,19 @@
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<UserRound size={24} />
|
||||
<h1 class="h2">{contact?.name ?? 'Loading Contact...'}</h1>
|
||||
<h1 class="h2">{contact?.name || contact?.title || 'Loading Contact...'}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn variant-soft-error" onclick={handle_delete} disabled={loading || saving}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
<button class="btn btn-sm variant-soft-secondary" 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 variant-filled-primary" onclick={handle_save} disabled={loading || saving}>
|
||||
<Save size={16} class="mr-2" /> Save Changes
|
||||
<button class="btn btn-sm variant-soft-error" onclick={handle_delete} disabled={loading}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -88,72 +75,110 @@
|
||||
{#if loading}
|
||||
<div class="placeholder animate-pulse w-full h-64"></div>
|
||||
{:else if contact}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-4 space-y-4">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Contact Information</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<label class="label md:col-span-2">
|
||||
<span>Display Name</span>
|
||||
<input class="input" type="text" bind:value={contact.name} />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Email Address</span>
|
||||
<input class="input" type="email" bind:value={contact.email} />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Phone Number</span>
|
||||
<input class="input" type="tel" bind:value={contact.phone} />
|
||||
</label>
|
||||
{#if is_editing}
|
||||
<Contact_form
|
||||
{contact}
|
||||
onSave={(updated) => {
|
||||
contact = updated;
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<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}
|
||||
</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">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>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">Office Phone</p>
|
||||
<p>{contact.phone_office || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs opacity-60 uppercase font-bold">LinkedIn</p>
|
||||
<p>{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>
|
||||
</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="card p-4 space-y-4">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Internal Metadata</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<label class="label">
|
||||
<span>Group</span>
|
||||
<input class="input" type="text" bind:value={contact.group} />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Sort Priority</span>
|
||||
<input class="input" type="number" bind:value={contact.sort} />
|
||||
</label>
|
||||
<label class="label md:col-span-2">
|
||||
<span>Internal Notes</span>
|
||||
<textarea class="textarea" rows="3" bind:value={contact.notes}></textarea>
|
||||
</label>
|
||||
<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'}
|
||||
</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'}
|
||||
</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'}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="card p-4 space-y-4">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Status & Visibility</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center space-x-2">
|
||||
<input class="checkbox" type="checkbox" bind:checked={contact.enable} />
|
||||
<p>Enabled</p>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input class="checkbox" type="checkbox" bind:checked={contact.hide} />
|
||||
<p>Hidden from Public</p>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input class="checkbox" type="checkbox" bind:checked={contact.priority} />
|
||||
<p>High Priority</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 space-y-2 opacity-60 text-sm font-mono">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
240
src/routes/core/contacts/ae_comp__contact_form.svelte
Normal file
240
src/routes/core/contacts/ae_comp__contact_form.svelte
Normal file
@@ -0,0 +1,240 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Contact Form Component
|
||||
* Standardized 2026-01-09 for Core UI Polish.
|
||||
* Uses unified ae_Contact type and Svelte 5 Runes.
|
||||
*/
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { update_ae_obj__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
|
||||
import type { ae_Contact } from '$lib/types/ae_types';
|
||||
import { Save, X, Phone, Mail, Globe, Facebook, Instagram, Linkedin, UserPlus } from 'lucide-svelte';
|
||||
|
||||
interface Props {
|
||||
contact?: ae_Contact | null;
|
||||
onSave?: (contact: ae_Contact) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
let { contact = null, onSave, onCancel }: Props = $props();
|
||||
|
||||
// Form State (Runes)
|
||||
let formData = $state({
|
||||
title: contact?.title ?? '',
|
||||
tagline: contact?.tagline ?? '',
|
||||
email: contact?.email ?? '',
|
||||
phone_mobile: contact?.phone_mobile ?? '',
|
||||
phone_office: contact?.phone_office ?? '',
|
||||
website_url: contact?.website_url ?? '',
|
||||
facebook_url: contact?.facebook_url ?? '',
|
||||
instagram_url: contact?.instagram_url ?? '',
|
||||
linkedin_url: contact?.linkedin_url ?? '',
|
||||
notes: contact?.notes ?? '',
|
||||
enable: contact?.enable ?? true,
|
||||
hide: contact?.hide ?? false,
|
||||
priority: contact?.priority ?? false
|
||||
});
|
||||
|
||||
let is_loading = $state(false);
|
||||
let error_msg = $state('');
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
is_loading = true;
|
||||
error_msg = '';
|
||||
|
||||
// Surgical Payload
|
||||
const payload: any = { ...formData };
|
||||
for (const key in payload) {
|
||||
if (typeof payload[key] === 'string' && payload[key].trim() === '') {
|
||||
// title is likely required, but we'll trim it
|
||||
if (key === 'title') {
|
||||
payload[key] = payload[key].trim();
|
||||
} else {
|
||||
payload[key] = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
let result;
|
||||
if (contact?.contact_id_random) {
|
||||
// Update existing
|
||||
result = await update_ae_obj__contact({
|
||||
api_cfg: $ae_api,
|
||||
contact_id: contact.contact_id_random,
|
||||
data_kv: payload,
|
||||
log_lvl: 1
|
||||
});
|
||||
} else {
|
||||
// Create new
|
||||
result = await create_ae_obj__contact({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
data_kv: payload,
|
||||
log_lvl: 1
|
||||
});
|
||||
}
|
||||
|
||||
if (result) {
|
||||
if (onSave) onSave(result);
|
||||
} else {
|
||||
error_msg = 'Failed to save contact record.';
|
||||
}
|
||||
} catch (err: any) {
|
||||
error_msg = err.message || 'An error occurred while saving.';
|
||||
} finally {
|
||||
is_loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<UserPlus size={24} />
|
||||
{contact ? 'Edit Contact' : 'Create New Contact'}
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
{#if onCancel}
|
||||
<button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
<Save size={16} class="mr-1" />
|
||||
{/if}
|
||||
Save Contact
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if error_msg}
|
||||
<aside class="alert variant-filled-error">
|
||||
<div class="alert-message">
|
||||
<p>{error_msg}</p>
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Identity Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity & Branding</legend>
|
||||
|
||||
<label class="label">
|
||||
<span>Title / Name</span>
|
||||
<input class="input" type="text" bind:value={formData.title} required placeholder="Business Office" />
|
||||
</label>
|
||||
|
||||
<label class="label">
|
||||
<span>Tagline</span>
|
||||
<input class="input" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
|
||||
</label>
|
||||
|
||||
<label class="label">
|
||||
<span>Email Address</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="input-group-shim"><Mail size={16} /></div>
|
||||
<input type="email" bind:value={formData.email} placeholder="contact@example.com" />
|
||||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Communication Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="label">
|
||||
<span>Mobile Phone</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
|
||||
</div>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Office Phone</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input type="tel" bind:value={formData.phone_office} placeholder="+1..." />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="label">
|
||||
<span>Website URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="input-group-shim"><Globe size={16} /></div>
|
||||
<input type="url" bind:value={formData.website_url} placeholder="https://..." />
|
||||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Social Media Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
|
||||
|
||||
<label class="label">
|
||||
<span>LinkedIn URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="input-group-shim"><Linkedin size={16} /></div>
|
||||
<input type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="label">
|
||||
<span>Facebook URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="input-group-shim"><Facebook size={16} /></div>
|
||||
<input type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
|
||||
</div>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Instagram URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="input-group-shim"><Instagram size={16} /></div>
|
||||
<input type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Status Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
|
||||
|
||||
<div class="flex flex-wrap gap-4 pt-2">
|
||||
<label class="flex items-center space-x-2">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
|
||||
<span>Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
|
||||
<span>Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
|
||||
<span>Priority</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="label">
|
||||
<span>Internal Notes</span>
|
||||
<textarea class="textarea" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
|
||||
<button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{/if}
|
||||
{contact ? 'Update Contact' : 'Create Contact'}
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
Reference in New Issue
Block a user