Making the code easier to read and more consistent.
This commit is contained in:
Scott Idem
10
.prettierrc
10
.prettierrc
@@ -4,6 +4,14 @@
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 80,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"bracketSameLine": true,
|
||||
|
||||
"svelteSortOrder": "options-scripts-markup-styles",
|
||||
"svelteIndentScriptAndStyle": false,
|
||||
"svelteAllowShorthand": true,
|
||||
"plugins": [
|
||||
"prettier-plugin-svelte",
|
||||
"prettier-plugin-tailwindcss"
|
||||
],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
|
||||
106
package-lock.json
generated
106
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "osit-aether-app-svelte",
|
||||
"version": "3.12.08",
|
||||
"version": "3.00.05",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "osit-aether-app-svelte",
|
||||
"version": "3.12.08",
|
||||
"version": "3.00.05",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.20.0",
|
||||
"@codemirror/commands": "^6.10.0",
|
||||
@@ -34,6 +34,7 @@
|
||||
"lucide-svelte": "^0.*.0",
|
||||
"marked": "^17.0.0",
|
||||
"openai": "^6.10.0",
|
||||
"prettier-plugin-tailwindcss": "^0.7.2",
|
||||
"qrcode": "^1.5.4",
|
||||
"shadcn-svelte": "^1.0.11",
|
||||
"svelte-persisted-store": "^0.12.0",
|
||||
@@ -6161,6 +6162,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-load-config/node_modules/yaml": {
|
||||
"version": "1.10.3",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
|
||||
"integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-safe-parser": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
|
||||
@@ -6242,7 +6253,6 @@
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
|
||||
"integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
@@ -6258,13 +6268,91 @@
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.5.1.tgz",
|
||||
"integrity": "sha512-65+fr5+cgIKWKiqM1Doum4uX6bY8iFCdztvvp2RcF+AJoieaw9kJOFMNcJo/bkmKYsxFaM9OsVZK/gWauG/5mg==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"prettier": "^3.0.0",
|
||||
"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz",
|
||||
"integrity": "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=20.19"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ianvs/prettier-plugin-sort-imports": "*",
|
||||
"@prettier/plugin-hermes": "*",
|
||||
"@prettier/plugin-oxc": "*",
|
||||
"@prettier/plugin-pug": "*",
|
||||
"@shopify/prettier-plugin-liquid": "*",
|
||||
"@trivago/prettier-plugin-sort-imports": "*",
|
||||
"@zackad/prettier-plugin-twig": "*",
|
||||
"prettier": "^3.0",
|
||||
"prettier-plugin-astro": "*",
|
||||
"prettier-plugin-css-order": "*",
|
||||
"prettier-plugin-jsdoc": "*",
|
||||
"prettier-plugin-marko": "*",
|
||||
"prettier-plugin-multiline-arrays": "*",
|
||||
"prettier-plugin-organize-attributes": "*",
|
||||
"prettier-plugin-organize-imports": "*",
|
||||
"prettier-plugin-sort-imports": "*",
|
||||
"prettier-plugin-svelte": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@ianvs/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-hermes": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-oxc": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-pug": {
|
||||
"optional": true
|
||||
},
|
||||
"@shopify/prettier-plugin-liquid": {
|
||||
"optional": true
|
||||
},
|
||||
"@trivago/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@zackad/prettier-plugin-twig": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-astro": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-css-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-jsdoc": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-marko": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-multiline-arrays": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-attributes": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-svelte": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-compare": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.1.tgz",
|
||||
@@ -7737,16 +7825,6 @@
|
||||
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
|
||||
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
|
||||
"devOptional": true,
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs": {
|
||||
"version": "15.4.1",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
|
||||
|
||||
@@ -112,6 +112,7 @@
|
||||
"lucide-svelte": "^0.*.0",
|
||||
"marked": "^17.0.0",
|
||||
"openai": "^6.10.0",
|
||||
"prettier-plugin-tailwindcss": "^0.7.2",
|
||||
"qrcode": "^1.5.4",
|
||||
"shadcn-svelte": "^1.0.11",
|
||||
"svelte-persisted-store": "^0.12.0",
|
||||
|
||||
@@ -1,34 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { Building, Globe, History, LayoutDashboard, List, Lock, MapPin, Phone, ShieldCheck, Users } from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
let { data, children }: Props = $props();
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import {
|
||||
Building,
|
||||
Globe,
|
||||
History,
|
||||
LayoutDashboard,
|
||||
List,
|
||||
Lock,
|
||||
MapPin,
|
||||
Phone,
|
||||
ShieldCheck,
|
||||
Users
|
||||
} from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
let { data, children }: Props = $props();
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
// Wait for a second to see if the permissions load before redirecting.
|
||||
setTimeout(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
console.log('Access Denied to /core. Redirecting to home.');
|
||||
goto('/');
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
// Wait for a second to see if the permissions load before redirecting.
|
||||
setTimeout(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
console.log('Access Denied to /core. Redirecting to home.');
|
||||
goto('/');
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Core - {$ae_loc.title ?? 'Æ loading...'}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto p-4">
|
||||
<div
|
||||
class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto p-4">
|
||||
{#if $ae_loc.manager_access}
|
||||
<nav class="flex flex-wrap gap-2 mb-6 border-b border-surface-500/30 pb-4">
|
||||
<nav
|
||||
class="flex flex-wrap gap-2 mb-6 border-b border-surface-500/30 pb-4">
|
||||
<a href="/core" class="btn btn-sm preset-tonal-surface">
|
||||
<LayoutDashboard size={14} class="mr-1" /> Dashboard
|
||||
</a>
|
||||
@@ -44,7 +57,9 @@
|
||||
<a href="/core/people" class="btn btn-sm preset-tonal-warning">
|
||||
<Users size={14} class="mr-1" /> People
|
||||
</a>
|
||||
<a href="/core/activity_logs" class="btn btn-sm preset-tonal-success">
|
||||
<a
|
||||
href="/core/activity_logs"
|
||||
class="btn btn-sm preset-tonal-success">
|
||||
<History size={14} class="mr-1" /> Logs
|
||||
</a>
|
||||
<a href="/core/addresses" class="btn btn-sm preset-tonal-surface">
|
||||
@@ -62,15 +77,21 @@
|
||||
{@render children?.()}
|
||||
</section>
|
||||
{:else}
|
||||
<section class="flex flex-col items-center justify-center grow text-center space-y-4 py-20">
|
||||
<section
|
||||
class="flex flex-col items-center justify-center grow text-center space-y-4 py-20">
|
||||
<div class="p-6 bg-error-500/10 rounded-full">
|
||||
<Lock size={64} class="text-error-500" />
|
||||
</div>
|
||||
<h1 class="h1 font-black">Access Restricted</h1>
|
||||
<p class="max-w-md opacity-70">The area you are trying to access is reserved for system managers. If you believe you should have access, please sign in with an authorized account.</p>
|
||||
<p class="max-w-md opacity-70">
|
||||
The area you are trying to access is reserved for system
|
||||
managers. If you believe you should have access, please sign in
|
||||
with an authorized account.
|
||||
</p>
|
||||
<div class="flex gap-4 pt-4">
|
||||
<a href="/" class="btn preset-filled-primary font-bold">Return Home</a>
|
||||
<a href="/" class="btn preset-filled-primary font-bold"
|
||||
>Return Home</a>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,163 +1,238 @@
|
||||
<script lang="ts">
|
||||
import { Building, Globe, History, Landmark, LayoutDashboard, List, MapPin, Phone, ShieldCheck, Users } from '@lucide/svelte';
|
||||
import { ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import {
|
||||
Building,
|
||||
Globe,
|
||||
History,
|
||||
Landmark,
|
||||
LayoutDashboard,
|
||||
List,
|
||||
MapPin,
|
||||
Phone,
|
||||
ShieldCheck,
|
||||
Users
|
||||
} from '@lucide/svelte';
|
||||
import { ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
let { data }: Props = $props();
|
||||
|
||||
// Quickly save the data passed from the parent(s)
|
||||
$effect(() => { $slct.account_id = data.account_id; });
|
||||
// Quickly save the data passed from the parent(s)
|
||||
$effect(() => {
|
||||
$slct.account_id = data.account_id;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-8">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-6 rounded-2xl shadow-xl border border-surface-500/10 gap-4">
|
||||
<header
|
||||
class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-6 rounded-2xl shadow-xl border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-primary-500/10 rounded-xl">
|
||||
<LayoutDashboard size={32} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight text-balance">Æ Core Management</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">System Infrastructure & Identity</p>
|
||||
<h1 class="h2 font-black tracking-tight text-balance">
|
||||
Æ Core Management
|
||||
</h1>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
System Infrastructure & Identity
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black/5 p-3 rounded-xl border border-surface-500/10 min-w-50">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1 mb-1">
|
||||
<div
|
||||
class="bg-black/5 p-3 rounded-xl border border-surface-500/10 min-w-50">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1 mb-1">
|
||||
<Landmark size={10} /> Active Account
|
||||
</p>
|
||||
<p class="font-bold text-sm">{$ae_loc.account_name ?? 'Loading...'}</p>
|
||||
<p class="font-bold text-sm">
|
||||
{$ae_loc.account_name ?? 'Loading...'}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<!-- Account Management Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<Building size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Accounts</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage client accounts and high-level system settings.</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
Manage client accounts and high-level system settings.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
|
||||
<a
|
||||
class="btn preset-filled-primary font-bold shadow-md w-full mt-4"
|
||||
href="/core/accounts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Site Management Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<Globe size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Sites</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Configure sites and domains associated with the active account.</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
Configure sites and domains associated with the active
|
||||
account.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
|
||||
<a
|
||||
class="btn preset-filled-secondary font-bold shadow-md w-full mt-4"
|
||||
href="/core/sites">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- User Management Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<ShieldCheck size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Users</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage system access, permissions, and user credentials.</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
Manage system access, permissions, and user credentials.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
|
||||
<a
|
||||
class="btn preset-filled-error font-bold shadow-md w-full mt-4"
|
||||
href="/core/users">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Person Management Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">People</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Search and manage person records and their user linking.</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
Search and manage person records and their user linking.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
|
||||
<a
|
||||
class="btn preset-filled-warning font-bold shadow-md w-full mt-4"
|
||||
href="/core/people">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Address Management Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<MapPin size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Addresses</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage physical locations, shipping, and billing addresses.</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
Manage physical locations, shipping, and billing addresses.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
|
||||
<a
|
||||
class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
|
||||
href="/core/addresses">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contact Management Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<Phone size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Contacts</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Maintain support contacts, office numbers, and digital links.</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
Maintain support contacts, office numbers, and digital
|
||||
links.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
|
||||
<a
|
||||
class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
|
||||
href="/core/contacts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Activity Log Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<History size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Activity Logs</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Monitor system actions and historical changes for the account.</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
Monitor system actions and historical changes for the
|
||||
account.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
|
||||
<a
|
||||
class="btn preset-filled-success font-bold shadow-md w-full mt-4"
|
||||
href="/core/activity_logs">
|
||||
View Logs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Lookups Card -->
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div
|
||||
class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
<List size={24} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Lookups</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">View system lookup tables (countries, time zones, etc).</p>
|
||||
<p class="text-sm opacity-80 leading-relaxed">
|
||||
View system lookup tables (countries, time zones, etc).
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
|
||||
<a
|
||||
class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
|
||||
href="/core/lookups">
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,14 @@ import { error } from '@sveltejs/kit';
|
||||
|
||||
export const load: PageLoad = async ({ parent }) => {
|
||||
const data = await parent();
|
||||
|
||||
|
||||
if (!data.account_id) {
|
||||
console.error('Core Dashboard: No account_id found in parent data');
|
||||
// We could throw an error here, but for now let's just log it and return
|
||||
// to avoid a hard crash if the user is just navigating.
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
account_id: data.account_id
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,96 +1,125 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { load_ae_obj_li__account, create_ae_obj__account } from '$lib/ae_core/ae_core__account';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Building, Calendar, ExternalLink, FileText, ListFilter, Plus, RefreshCcw, Search, ShieldCheck, X } from '@lucide/svelte';
|
||||
let account_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
load_ae_obj_li__account,
|
||||
create_ae_obj__account
|
||||
} from '$lib/ae_core/ae_core__account';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Building,
|
||||
Calendar,
|
||||
ExternalLink,
|
||||
FileText,
|
||||
ListFilter,
|
||||
Plus,
|
||||
RefreshCcw,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
let account_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? account_li.filter(a =>
|
||||
a.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: account_li
|
||||
);
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? account_li.filter(
|
||||
(a) =>
|
||||
a.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: account_li
|
||||
);
|
||||
|
||||
async function load_accounts() {
|
||||
loading = true;
|
||||
account_li = await load_ae_obj_li__account({
|
||||
api_cfg: $ae_api,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
async function load_accounts() {
|
||||
loading = true;
|
||||
account_li = await load_ae_obj_li__account({
|
||||
api_cfg: $ae_api,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
load_accounts();
|
||||
onMount(() => {
|
||||
load_accounts();
|
||||
});
|
||||
|
||||
async function handle_add_account() {
|
||||
const name = prompt('Enter new account name:');
|
||||
if (!name) return;
|
||||
|
||||
const code = prompt('Enter account code (optional):');
|
||||
|
||||
const new_acct = await create_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
data_kv: {
|
||||
name,
|
||||
code: code || undefined,
|
||||
enable: true
|
||||
},
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
async function handle_add_account() {
|
||||
const name = prompt('Enter new account name:');
|
||||
if (!name) return;
|
||||
|
||||
const code = prompt('Enter account code (optional):');
|
||||
|
||||
const new_acct = await create_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
data_kv: {
|
||||
name,
|
||||
code: code || undefined,
|
||||
enable: true
|
||||
},
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (new_acct) {
|
||||
load_accounts();
|
||||
}
|
||||
if (new_acct) {
|
||||
load_accounts();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<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">
|
||||
<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-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Building size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Account Management</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Client Entities & Billing</p>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
Client Entities & Billing
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_account}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={handle_add_account}>
|
||||
<Plus size={16} class="mr-2" /> Add Account
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Accounts</span>
|
||||
<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">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Accounts</span>
|
||||
<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 or code..."
|
||||
/>
|
||||
<button class="preset-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_accounts} disabled={loading}>
|
||||
placeholder="Search by name or code..." />
|
||||
<button
|
||||
class="preset-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_accounts}
|
||||
disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide">Refresh</span>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -98,8 +127,13 @@
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Status</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_enabled}
|
||||
onchange={load_accounts}>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
@@ -107,8 +141,13 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Visibility</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_hidden}
|
||||
onchange={load_accounts}>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
@@ -120,56 +159,87 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Building size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Accounts Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your filters or add a new client account.</p>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
Try adjusting your filters or add a new client account.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<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 preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{filtered_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as acct (acct.account_id_random)}
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div
|
||||
class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4 flex gap-1">
|
||||
{#if acct.hide}
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
<span
|
||||
class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm"
|
||||
>Hidden</span>
|
||||
{/if}
|
||||
<span class="badge {acct.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span
|
||||
class="badge {acct.enable
|
||||
? 'preset-filled-success'
|
||||
: 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{acct.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<Building size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">{acct.name}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">Code: {acct.code || '--'}</p>
|
||||
<p class="font-black tracking-tight truncate">
|
||||
{acct.name}
|
||||
</p>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">
|
||||
Code: {acct.code || '--'}
|
||||
</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">
|
||||
<Calendar size={14} class="text-primary-500 shrink-0" />
|
||||
<span>Created: {new Date(acct.created_on).toLocaleDateString()}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Calendar
|
||||
size={14}
|
||||
class="text-primary-500 shrink-0" />
|
||||
<span
|
||||
>Created: {new Date(
|
||||
acct.created_on
|
||||
).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck size={14} class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate">{acct.account_id_random}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck
|
||||
size={14}
|
||||
class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate"
|
||||
>{acct.account_id_random}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/accounts/{acct.account_id_random}">
|
||||
<a
|
||||
class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
|
||||
href="/core/accounts/{acct.account_id_random}">
|
||||
Manage Account
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { ae_api } from '$lib/stores/ae_stores';
|
||||
export const load: PageLoad = async ({ parent }) => {
|
||||
// Ensure we have parent data if needed, but for listing accounts we mostly need the api_cfg
|
||||
const parentData = await parent();
|
||||
|
||||
|
||||
return {
|
||||
// We could pre-load here, but listing accounts might be better handled in the component
|
||||
// to support interactive filtering/pagination more easily.
|
||||
|
||||
@@ -1,91 +1,114 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { load_ae_obj_id__account, update_ae_obj__account, delete_ae_obj_id__account } from '$lib/ae_core/ae_core__account';
|
||||
import { editable_fields__account } from '$lib/ae_core/ae_core__account.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Activity, ArrowLeft, Building, Info, Save, Settings, Trash2 } from '@lucide/svelte';
|
||||
let account_id = $derived($page.params.account_id ?? '');
|
||||
let account: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__account,
|
||||
update_ae_obj__account,
|
||||
delete_ae_obj_id__account
|
||||
} from '$lib/ae_core/ae_core__account';
|
||||
import { editable_fields__account } from '$lib/ae_core/ae_core__account.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
Building,
|
||||
Info,
|
||||
Save,
|
||||
Settings,
|
||||
Trash2
|
||||
} from '@lucide/svelte';
|
||||
let account_id = $derived($page.params.account_id ?? '');
|
||||
let account: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
|
||||
async function load_account() {
|
||||
loading = true;
|
||||
account = await load_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
async function load_account() {
|
||||
loading = true;
|
||||
account = await load_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_account();
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
// Filter fields to only include editable ones
|
||||
const data_kv: any = {};
|
||||
editable_fields__account.forEach((field) => {
|
||||
if (account[field] !== undefined) {
|
||||
data_kv[field] = account[field];
|
||||
}
|
||||
load_account();
|
||||
});
|
||||
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
// Filter fields to only include editable ones
|
||||
const data_kv: any = {};
|
||||
editable_fields__account.forEach(field => {
|
||||
if (account[field] !== undefined) {
|
||||
data_kv[field] = account[field];
|
||||
}
|
||||
});
|
||||
const result = await update_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
const result = await update_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
alert('Account updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
if (result) {
|
||||
alert('Account updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
}
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this account?')) return;
|
||||
|
||||
const result = await delete_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this account?')) return;
|
||||
|
||||
if (result) {
|
||||
goto('/core/accounts');
|
||||
}
|
||||
const result = await delete_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
goto('/core/accounts');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/accounts">
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-surface shadow-sm"
|
||||
href="/core/accounts">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Building size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">{account?.name ?? 'Loading...'}</h1>
|
||||
<h1 class="h2 font-black tracking-tight">
|
||||
{account?.name ?? 'Loading...'}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-error font-bold shadow-lg"
|
||||
onclick={handle_delete}
|
||||
disabled={loading || saving}>
|
||||
<Trash2 size={16} class="mr-2" /> Disable
|
||||
</button>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={handle_save}
|
||||
disabled={loading || saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -98,70 +121,129 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if account}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Info size={18} class="text-primary-500" /> Basic Information
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Name</span>
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Account Name</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-3"
|
||||
type="text"
|
||||
bind:value={account.name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Short Name</span>
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Short Name</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-3"
|
||||
type="text"
|
||||
bind:value={account.short_name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Code</span>
|
||||
<input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Account Code</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg font-mono p-3"
|
||||
type="text"
|
||||
bind:value={account.code} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Description</span>
|
||||
<textarea
|
||||
class="textarea preset-filled-surface rounded-lg p-3"
|
||||
rows="3"
|
||||
bind:value={account.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Settings size={18} class="text-secondary-500" /> Settings & Status
|
||||
</h3>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.enable} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Enabled</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={account.enable} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.hide} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={account.hide} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.priority} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Priority Account</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={account.priority} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Priority Account</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="space-y-4 border-t border-surface-500/30 pt-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Group</span>
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Group</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-3"
|
||||
type="text"
|
||||
bind:value={account.group} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Sort Order</span>
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Sort Order</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-3"
|
||||
type="number"
|
||||
bind:value={account.sort} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 md:col-span-2 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 md:col-span-2 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Activity size={18} class="text-tertiary-500" /> Internal Notes
|
||||
</h3>
|
||||
<div class="space-y-1">
|
||||
<textarea class="textarea preset-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
|
||||
<textarea
|
||||
class="textarea preset-filled-surface rounded-lg p-3"
|
||||
rows="4"
|
||||
bind:value={account.notes}
|
||||
placeholder="Private notes for staff..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,64 +1,82 @@
|
||||
<script lang="ts">
|
||||
/** @type {import('./$types').PageData} */
|
||||
import { onMount } from 'svelte';
|
||||
import { qry__activity_log } from '$lib/ae_core/ae_core__activity_log';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { Activity, Calendar, Clock, History, ListFilter, RefreshCcw, Search, ShieldCheck, Tag, User } from '@lucide/svelte';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
/** @type {import('./$types').PageData} */
|
||||
import { onMount } from 'svelte';
|
||||
import { qry__activity_log } from '$lib/ae_core/ae_core__activity_log';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import {
|
||||
Activity,
|
||||
Calendar,
|
||||
Clock,
|
||||
History,
|
||||
ListFilter,
|
||||
RefreshCcw,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
Tag,
|
||||
User
|
||||
} from '@lucide/svelte';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
|
||||
// State
|
||||
let log_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_str = $state('');
|
||||
let limit = $state(50);
|
||||
// State
|
||||
let log_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_str = $state('');
|
||||
let limit = $state(50);
|
||||
|
||||
/**
|
||||
* Fetches activity logs from the API based on current filters.
|
||||
*/
|
||||
async function load_logs() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
/**
|
||||
* Fetches activity logs from the API based on current filters.
|
||||
*/
|
||||
async function load_logs() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
|
||||
const results = await qry__activity_log({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
qry_str: qry_str || undefined,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
limit: limit,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
log_li = results || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
load_logs();
|
||||
const results = await qry__activity_log({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
qry_str: qry_str || undefined,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
limit: limit,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
/**
|
||||
* Handles the search form submission.
|
||||
*/
|
||||
function handle_search(e: Event) {
|
||||
e.preventDefault();
|
||||
load_logs();
|
||||
}
|
||||
log_li = results || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
load_logs();
|
||||
});
|
||||
|
||||
/**
|
||||
* Handles the search form submission.
|
||||
*/
|
||||
function handle_search(e: Event) {
|
||||
e.preventDefault();
|
||||
load_logs();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<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">
|
||||
<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-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<History size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Activity Logs</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Audit Trail & History</p>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
Audit Trail & History
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_logs} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={load_logs}
|
||||
disabled={loading}>
|
||||
{#if loading}
|
||||
<RefreshCcw size={16} class="mr-2 animate-spin" /> Updating...
|
||||
{:else}
|
||||
@@ -69,29 +87,43 @@
|
||||
</header>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Keywords</span>
|
||||
<form onsubmit={handle_search} 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">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Keywords</span>
|
||||
<form
|
||||
onsubmit={handle_search}
|
||||
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="Action, name, description..."
|
||||
/>
|
||||
<button type="submit" class="preset-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]" disabled={loading}>
|
||||
<span class="whitespace-nowrap tracking-wide">Search</span>
|
||||
placeholder="Action, name, description..." />
|
||||
<button
|
||||
type="submit"
|
||||
class="preset-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]"
|
||||
disabled={loading}>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Search</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Display Limit</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={limit} onchange={load_logs}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Display Limit</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={limit}
|
||||
onchange={load_logs}>
|
||||
<option value={25}>Latest 25</option>
|
||||
<option value={50}>Latest 50</option>
|
||||
<option value={100}>Latest 100</option>
|
||||
@@ -103,26 +135,34 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if log_li.length === 0}
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Activity size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Logs Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try broadening your search or check another account.</p>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
Try broadening your search or check another account.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<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" />
|
||||
System Events
|
||||
<span class="badge preset-tonal-secondary ml-auto">{log_li.length} entries shown</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{log_li.length} entries shown</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<tr
|
||||
class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Timestamp</th>
|
||||
<th>Identity</th>
|
||||
<th>Action</th>
|
||||
@@ -136,11 +176,22 @@
|
||||
<!-- Date/Time -->
|
||||
<td class="whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<Calendar size={14} class="opacity-40" />
|
||||
<Calendar
|
||||
size={14}
|
||||
class="opacity-40" />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">{ae_util.iso_datetime_formatter(log.created_on, 'date_short')}</span>
|
||||
<span class="text-[10px] opacity-50 flex items-center gap-1">
|
||||
<Clock size={10} /> {ae_util.iso_datetime_formatter(log.created_on, 'time_12_short')}
|
||||
<span class="font-bold"
|
||||
>{ae_util.iso_datetime_formatter(
|
||||
log.created_on,
|
||||
'date_short'
|
||||
)}</span>
|
||||
<span
|
||||
class="text-[10px] opacity-50 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{ae_util.iso_datetime_formatter(
|
||||
log.created_on,
|
||||
'time_12_short'
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,17 +200,28 @@
|
||||
<!-- User/Person -->
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar preset-tonal-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
|
||||
<User size={14} class="opacity-60" />
|
||||
<div
|
||||
class="avatar preset-tonal-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
|
||||
<User
|
||||
size={14}
|
||||
class="opacity-60" />
|
||||
</div>
|
||||
<div class="flex flex-col max-w-[180px]">
|
||||
<div
|
||||
class="flex flex-col max-w-[180px]">
|
||||
{#if log.person_full_name || log.person_id_random}
|
||||
<span class="font-bold truncate">{log.person_full_name || 'Person'}</span>
|
||||
<span class="text-[9px] opacity-40 font-mono uppercase">ID: {log.person_id_random || '--'}</span>
|
||||
<span class="font-bold truncate"
|
||||
>{log.person_full_name ||
|
||||
'Person'}</span>
|
||||
<span
|
||||
class="text-[9px] opacity-40 font-mono uppercase"
|
||||
>ID: {log.person_id_random ||
|
||||
'--'}</span>
|
||||
{:else if log.name}
|
||||
<span class="italic opacity-70">{log.name}</span>
|
||||
<span class="italic opacity-70"
|
||||
>{log.name}</span>
|
||||
{:else}
|
||||
<span class="opacity-30 italic">Unknown</span>
|
||||
<span class="opacity-30 italic"
|
||||
>Unknown</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -168,11 +230,13 @@
|
||||
<!-- Action -->
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="badge preset-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
|
||||
<span
|
||||
class="badge preset-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
|
||||
{log.action}
|
||||
</span>
|
||||
{#if log.action_with}
|
||||
<span class="text-[9px] opacity-40 font-bold uppercase ml-1 flex items-center gap-1">
|
||||
<span
|
||||
class="text-[9px] opacity-40 font-bold uppercase ml-1 flex items-center gap-1">
|
||||
<ShieldCheck size={8} /> via {log.action_with}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -182,17 +246,26 @@
|
||||
<!-- Context -->
|
||||
<td>
|
||||
{#if log.object_type}
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg border border-surface-500/10">
|
||||
<Tag size={12} class="text-secondary-500 shrink-0" />
|
||||
<div class="flex flex-col text-[10px] truncate">
|
||||
<span class="font-bold uppercase tracking-tighter">{log.object_type}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg border border-surface-500/10">
|
||||
<Tag
|
||||
size={12}
|
||||
class="text-secondary-500 shrink-0" />
|
||||
<div
|
||||
class="flex flex-col text-[10px] truncate">
|
||||
<span
|
||||
class="font-bold uppercase tracking-tighter"
|
||||
>{log.object_type}</span>
|
||||
{#if log.external_client_id}
|
||||
<span class="opacity-40 font-mono truncate">{log.external_client_id}</span>
|
||||
<span
|
||||
class="opacity-40 font-mono truncate"
|
||||
>{log.external_client_id}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="opacity-20 italic text-xs">--</span>
|
||||
<span class="opacity-20 italic text-xs"
|
||||
>--</span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
@@ -200,13 +273,21 @@
|
||||
<td>
|
||||
<div class="flex flex-col gap-1 max-w-sm">
|
||||
{#if log.summary}
|
||||
<span class="font-bold text-primary-500 leading-tight">{log.summary}</span>
|
||||
<span
|
||||
class="font-bold text-primary-500 leading-tight"
|
||||
>{log.summary}</span>
|
||||
{/if}
|
||||
{#if log.description}
|
||||
<p class="text-xs opacity-60 line-clamp-2 italic" title={log.description}>{log.description}</p>
|
||||
<p
|
||||
class="text-xs opacity-60 line-clamp-2 italic"
|
||||
title={log.description}>
|
||||
{log.description}
|
||||
</p>
|
||||
{/if}
|
||||
{#if !log.summary && !log.description}
|
||||
<span class="italic opacity-20 text-[10px]">No detail record</span>
|
||||
<span
|
||||
class="italic opacity-20 text-[10px]"
|
||||
>No detail record</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -1,50 +1,69 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Building2, ExternalLink, Globe, ListFilter, MapPin, MapPinned, Plus, Search, X } 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';
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Building2,
|
||||
ExternalLink,
|
||||
Globe,
|
||||
ListFilter,
|
||||
MapPin,
|
||||
MapPinned,
|
||||
Plus,
|
||||
Search,
|
||||
X
|
||||
} 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
|
||||
);
|
||||
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;
|
||||
loading = true;
|
||||
address_li = await load_ae_obj_li__address({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_addresses();
|
||||
async function load_addresses() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
address_li = await load_ae_obj_li__address({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_addresses();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<MapPin size={24} class="text-primary-500" />
|
||||
@@ -53,8 +72,7 @@
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={() => show_add_form = !show_add_form}
|
||||
>
|
||||
onclick={() => (show_add_form = !show_add_form)}>
|
||||
{#if show_add_form}
|
||||
<X size={16} class="mr-2" /> Cancel
|
||||
{:else}
|
||||
@@ -73,29 +91,36 @@
|
||||
goto(`/core/addresses/${new_addr.address_id_random}`);
|
||||
}
|
||||
}}
|
||||
onCancel={() => show_add_form = false}
|
||||
/>
|
||||
onCancel={() => (show_add_form = false)} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<div class="max-w-2xl space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
|
||||
<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">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Directory</span>
|
||||
<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="preset-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}>
|
||||
placeholder="Search by city, state, organization, or street..." />
|
||||
<button
|
||||
class="preset-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>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -104,55 +129,84 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-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>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Addresses associated with this account will appear here.</p>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
Addresses associated with this account will appear here.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<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 preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{filtered_li.length} entries</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as addr (addr.address_id_random)}
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div
|
||||
class="card p-5 space-y-4 preset-tonal-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 ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span
|
||||
class="badge {addr.enable
|
||||
? 'preset-filled-success'
|
||||
: 'preset-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 preset-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="avatar preset-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>
|
||||
<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
|
||||
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
|
||||
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 preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
|
||||
<a
|
||||
class="btn btn-sm preset-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>
|
||||
|
||||
@@ -1,56 +1,74 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__address,
|
||||
update_ae_obj__address,
|
||||
delete_ae_obj_id__address
|
||||
} from '$lib/ae_core/ae_core__address';
|
||||
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 { Activity, ArrowLeft, Building2, Clock, Edit, Eye, Globe, Info, MapPin, MapPinned, Save, ShieldCheck, Trash2, User } from '@lucide/svelte';
|
||||
import Address_form from '../ae_comp__address_form.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__address,
|
||||
update_ae_obj__address,
|
||||
delete_ae_obj_id__address
|
||||
} from '$lib/ae_core/ae_core__address';
|
||||
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 {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
Building2,
|
||||
Clock,
|
||||
Edit,
|
||||
Eye,
|
||||
Globe,
|
||||
Info,
|
||||
MapPin,
|
||||
MapPinned,
|
||||
Save,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
User
|
||||
} from '@lucide/svelte';
|
||||
import Address_form from '../ae_comp__address_form.svelte';
|
||||
|
||||
let address_id = $derived($page.params.address_id ?? '');
|
||||
let address: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let is_editing = $state(false);
|
||||
let address_id = $derived($page.params.address_id ?? '');
|
||||
let address: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let is_editing = $state(false);
|
||||
|
||||
async function load_data() {
|
||||
loading = true;
|
||||
address = await load_ae_obj_id__address({
|
||||
api_cfg: $ae_api,
|
||||
address_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_data();
|
||||
async function load_data() {
|
||||
loading = true;
|
||||
address = await load_ae_obj_id__address({
|
||||
api_cfg: $ae_api,
|
||||
address_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Permanently delete this address?')) return;
|
||||
await delete_ae_obj_id__address({
|
||||
api_cfg: $ae_api,
|
||||
address_id,
|
||||
method: 'delete',
|
||||
log_lvl: 1
|
||||
});
|
||||
goto('/core/addresses');
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_data();
|
||||
});
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Permanently delete this address?')) return;
|
||||
await delete_ae_obj_id__address({
|
||||
api_cfg: $ae_api,
|
||||
address_id,
|
||||
method: 'delete',
|
||||
log_lvl: 1
|
||||
});
|
||||
goto('/core/addresses');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<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">
|
||||
<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 preset-tonal-surface shadow-sm" href="/core/addresses">
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-surface shadow-sm"
|
||||
href="/core/addresses">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -58,20 +76,33 @@
|
||||
<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>
|
||||
<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 preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-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 preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-error font-bold shadow-sm"
|
||||
onclick={handle_delete}
|
||||
disabled={loading}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
@@ -79,88 +110,132 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if address}
|
||||
{#if is_editing}
|
||||
<div class="animate-fade-in">
|
||||
<Address_form
|
||||
{address}
|
||||
<Address_form
|
||||
{address}
|
||||
onSave={(updated) => {
|
||||
address = updated;
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
onCancel={() => (is_editing = false)} />
|
||||
</div>
|
||||
{:else}
|
||||
<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 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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">
|
||||
<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>
|
||||
<p class="font-bold">
|
||||
{address.attention_to || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-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>
|
||||
<p class="font-bold">
|
||||
{address.organization_name || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<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="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}
|
||||
<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 class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-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>
|
||||
<p class="font-bold">
|
||||
{address.city}, {address.state_province ||
|
||||
'--'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-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 preset-tonal-surface">{address.country_name || address.country || '--'}</span></p>
|
||||
<p class="font-bold">
|
||||
{address.postal_code || '--'} /
|
||||
<span class="badge preset-tonal-surface"
|
||||
>{address.country_name ||
|
||||
address.country ||
|
||||
'--'}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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">
|
||||
<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>
|
||||
<p class="font-mono">
|
||||
{address.timezone || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-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>
|
||||
<p class="font-mono">
|
||||
{address.latitude || '--'}, {address.longitude ||
|
||||
'--'}
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<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
|
||||
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>
|
||||
@@ -168,40 +243,77 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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 ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
|
||||
<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
|
||||
? 'preset-filled-success'
|
||||
: 'preset-filled-error'} px-4 py-1 shadow-sm">
|
||||
{address.enable ? 'ACTIVE' : 'DISABLED'}
|
||||
</span>
|
||||
</div>
|
||||
<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 ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<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
|
||||
? 'preset-filled-warning'
|
||||
: 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{address.hide ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<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 ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<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
|
||||
? 'preset-filled-secondary'
|
||||
: 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{address.priority ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-5 preset-tonal-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="card p-5 preset-tonal-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>
|
||||
<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>
|
||||
<p class="flex justify-between">
|
||||
<span>Updated:</span>
|
||||
<span
|
||||
>{new Date(
|
||||
address.updated_on
|
||||
).toLocaleString()}</span>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,128 +1,140 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Address Form Component
|
||||
* Standardized 2026-01-09 for Core UI Polish.
|
||||
* Uses unified ae_Address type and Svelte 5 Runes.
|
||||
*/
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { update_ae_obj__address, create_ae_obj__address } from '$lib/ae_core/ae_core__address';
|
||||
import type { ae_Address } from '$lib/types/ae_types';
|
||||
import { Clock, Globe, MapPin, Navigation, Save, X } from '@lucide/svelte';
|
||||
interface Props {
|
||||
address?: ae_Address | null;
|
||||
onSave?: (address: ae_Address) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
/**
|
||||
* Address Form Component
|
||||
* Standardized 2026-01-09 for Core UI Polish.
|
||||
* Uses unified ae_Address type and Svelte 5 Runes.
|
||||
*/
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import {
|
||||
update_ae_obj__address,
|
||||
create_ae_obj__address
|
||||
} from '$lib/ae_core/ae_core__address';
|
||||
import type { ae_Address } from '$lib/types/ae_types';
|
||||
import { Clock, Globe, MapPin, Navigation, Save, X } from '@lucide/svelte';
|
||||
interface Props {
|
||||
address?: ae_Address | null;
|
||||
onSave?: (address: ae_Address) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
let { address = null, onSave, onCancel }: Props = $props();
|
||||
let { address = null, onSave, onCancel }: Props = $props();
|
||||
|
||||
// Form State (Runes)
|
||||
let formData = $state({
|
||||
attention_to: '',
|
||||
organization_name: '',
|
||||
line_1: '',
|
||||
line_2: '',
|
||||
line_3: '',
|
||||
city: '',
|
||||
state_province: '',
|
||||
postal_code: '',
|
||||
country: '',
|
||||
timezone: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
notes: '',
|
||||
enable: true,
|
||||
hide: false,
|
||||
priority: false
|
||||
});
|
||||
// Form State (Runes)
|
||||
let formData = $state({
|
||||
attention_to: '',
|
||||
organization_name: '',
|
||||
line_1: '',
|
||||
line_2: '',
|
||||
line_3: '',
|
||||
city: '',
|
||||
state_province: '',
|
||||
postal_code: '',
|
||||
country: '',
|
||||
timezone: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
notes: '',
|
||||
enable: true,
|
||||
hide: false,
|
||||
priority: false
|
||||
});
|
||||
|
||||
// Reset form when address prop changes
|
||||
$effect(() => {
|
||||
formData.attention_to = address?.attention_to ?? '';
|
||||
formData.organization_name = address?.organization_name ?? '';
|
||||
formData.line_1 = address?.line_1 ?? '';
|
||||
formData.line_2 = address?.line_2 ?? '';
|
||||
formData.line_3 = address?.line_3 ?? '';
|
||||
formData.city = address?.city ?? '';
|
||||
formData.state_province = address?.state_province ?? '';
|
||||
formData.postal_code = address?.postal_code ?? '';
|
||||
formData.country = address?.country ?? '';
|
||||
formData.timezone = address?.timezone ?? '';
|
||||
formData.latitude = address?.latitude ?? '';
|
||||
formData.longitude = address?.longitude ?? '';
|
||||
formData.notes = address?.notes ?? '';
|
||||
formData.enable = address?.enable ?? true;
|
||||
formData.hide = address?.hide ?? false;
|
||||
formData.priority = address?.priority ?? false;
|
||||
});
|
||||
// Reset form when address prop changes
|
||||
$effect(() => {
|
||||
formData.attention_to = address?.attention_to ?? '';
|
||||
formData.organization_name = address?.organization_name ?? '';
|
||||
formData.line_1 = address?.line_1 ?? '';
|
||||
formData.line_2 = address?.line_2 ?? '';
|
||||
formData.line_3 = address?.line_3 ?? '';
|
||||
formData.city = address?.city ?? '';
|
||||
formData.state_province = address?.state_province ?? '';
|
||||
formData.postal_code = address?.postal_code ?? '';
|
||||
formData.country = address?.country ?? '';
|
||||
formData.timezone = address?.timezone ?? '';
|
||||
formData.latitude = address?.latitude ?? '';
|
||||
formData.longitude = address?.longitude ?? '';
|
||||
formData.notes = address?.notes ?? '';
|
||||
formData.enable = address?.enable ?? true;
|
||||
formData.hide = address?.hide ?? false;
|
||||
formData.priority = address?.priority ?? false;
|
||||
});
|
||||
|
||||
let is_loading = $state(false);
|
||||
let error_msg = $state('');
|
||||
let is_loading = $state(false);
|
||||
let error_msg = $state('');
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
is_loading = true;
|
||||
error_msg = '';
|
||||
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() === '') {
|
||||
// line_1 and city are likely required, but we'll trim them
|
||||
if (key === 'line_1' || key === 'city') {
|
||||
payload[key] = payload[key].trim();
|
||||
} else {
|
||||
payload[key] = null;
|
||||
}
|
||||
// Surgical Payload
|
||||
const payload: any = { ...formData };
|
||||
for (const key in payload) {
|
||||
if (typeof payload[key] === 'string' && payload[key].trim() === '') {
|
||||
// line_1 and city are likely required, but we'll trim them
|
||||
if (key === 'line_1' || key === 'city') {
|
||||
payload[key] = payload[key].trim();
|
||||
} else {
|
||||
payload[key] = null;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
let result;
|
||||
if (address?.address_id_random) {
|
||||
// Update existing
|
||||
result = await update_ae_obj__address({
|
||||
api_cfg: $ae_api,
|
||||
address_id: address.address_id_random,
|
||||
data_kv: payload,
|
||||
log_lvl: 1
|
||||
});
|
||||
} else {
|
||||
// Create new
|
||||
result = await create_ae_obj__address({
|
||||
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 address record.';
|
||||
}
|
||||
} catch (err: any) {
|
||||
error_msg = err.message || 'An error occurred while saving.';
|
||||
} finally {
|
||||
is_loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
let result;
|
||||
if (address?.address_id_random) {
|
||||
// Update existing
|
||||
result = await update_ae_obj__address({
|
||||
api_cfg: $ae_api,
|
||||
address_id: address.address_id_random,
|
||||
data_kv: payload,
|
||||
log_lvl: 1
|
||||
});
|
||||
} else {
|
||||
// Create new
|
||||
result = await create_ae_obj__address({
|
||||
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 address 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 preset-tonal-surface">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<form
|
||||
onsubmit={handleSubmit}
|
||||
class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
|
||||
<header
|
||||
class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<MapPin size={24} />
|
||||
{address ? 'Edit Address' : 'Create New Address'}
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
{#if onCancel}
|
||||
<button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-surface"
|
||||
onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -144,60 +156,130 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Location Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Location Details</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Location Details</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-attention-to">Attention To / Name</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-attention-to">Attention To / Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-attention-to"
|
||||
type="text"
|
||||
bind:value={formData.attention_to}
|
||||
placeholder="John Doe" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-org-name">Organization Name</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-org-name">Organization Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-org-name"
|
||||
type="text"
|
||||
bind:value={formData.organization_name}
|
||||
placeholder="Acme Corp" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-line-1">Address Line 1</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-line-1">Address Line 1</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-line-1"
|
||||
type="text"
|
||||
bind:value={formData.line_1}
|
||||
required
|
||||
placeholder="123 Main St" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-line-2">Line 2</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-line-2">Line 2</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-line-2"
|
||||
type="text"
|
||||
bind:value={formData.line_2}
|
||||
placeholder="Suite 100" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-line-3">Line 3</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-line-3">Line 3</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-line-3"
|
||||
type="text"
|
||||
bind:value={formData.line_3}
|
||||
placeholder="Floor 2" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Region Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Region & Code</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Region & Code</legend>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-city">City</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-city">City</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-city"
|
||||
type="text"
|
||||
bind:value={formData.city}
|
||||
required
|
||||
placeholder="Metropolis" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-state">State / Province</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-state">State / Province</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-state"
|
||||
type="text"
|
||||
bind:value={formData.state_province}
|
||||
placeholder="NY" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-postal">Postal Code</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-postal">Postal Code</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-postal"
|
||||
type="text"
|
||||
bind:value={formData.postal_code}
|
||||
placeholder="12345" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-country">Country (Code)</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-country">Country (Code)</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Globe size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-country" type="text" bind:value={formData.country} placeholder="USA" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="addr-country"
|
||||
type="text"
|
||||
bind:value={formData.country}
|
||||
placeholder="USA" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,29 +287,59 @@
|
||||
|
||||
<!-- Technical Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Technical & GIS</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Technical & GIS</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-timezone">Timezone</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-timezone">Timezone</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Clock size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-timezone" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="addr-timezone"
|
||||
type="text"
|
||||
bind:value={formData.timezone}
|
||||
placeholder="America/New_York" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-latitude">Latitude</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Navigation size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-latitude" type="text" bind:value={formData.latitude} placeholder="40.7128" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-latitude">Latitude</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim">
|
||||
<Navigation size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="addr-latitude"
|
||||
type="text"
|
||||
bind:value={formData.latitude}
|
||||
placeholder="40.7128" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-longitude">Longitude</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Navigation size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-longitude" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-longitude">Longitude</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim">
|
||||
<Navigation size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="addr-longitude"
|
||||
type="text"
|
||||
bind:value={formData.longitude}
|
||||
placeholder="-74.0060" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -235,32 +347,53 @@
|
||||
|
||||
<!-- Status Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
|
||||
<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 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.enable} />
|
||||
<span class="text-sm font-medium">Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.hide} />
|
||||
<span class="text-sm font-medium">Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.priority} />
|
||||
<span class="text-sm font-medium">Priority</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-notes">Internal Notes</label>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="addr-notes">Internal Notes</label>
|
||||
<textarea
|
||||
class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="addr-notes"
|
||||
rows="2"
|
||||
bind:value={formData.notes}
|
||||
placeholder="Notes about this address..."></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
|
||||
<button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{/if}
|
||||
|
||||
@@ -1,47 +1,56 @@
|
||||
<script lang="ts">
|
||||
// Imports
|
||||
// import type { key_val } from '$lib/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
// Imports
|
||||
// import type { key_val } from '$lib/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
|
||||
import { liveQuery } from 'dexie';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
import { Building2, ListOrdered, Mail, Unlink, User, UserCheck } from '@lucide/svelte';
|
||||
// import { core_func } from '$lib/ae_core_functions';
|
||||
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
|
||||
// import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
import { liveQuery } from 'dexie';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
import {
|
||||
Building2,
|
||||
ListOrdered,
|
||||
Mail,
|
||||
Unlink,
|
||||
User,
|
||||
UserCheck
|
||||
} from '@lucide/svelte';
|
||||
// import { core_func } from '$lib/ae_core_functions';
|
||||
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
|
||||
// import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
|
||||
interface Props {
|
||||
// Exports
|
||||
container_class_li?: string | Array<string>;
|
||||
person_id_random_li?: Array<string>;
|
||||
allow_basic?: boolean;
|
||||
allow_moderator?: boolean;
|
||||
show_user_fields?: boolean;
|
||||
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
|
||||
}
|
||||
interface Props {
|
||||
// Exports
|
||||
container_class_li?: string | Array<string>;
|
||||
person_id_random_li?: Array<string>;
|
||||
allow_basic?: boolean;
|
||||
allow_moderator?: boolean;
|
||||
show_user_fields?: boolean;
|
||||
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
|
||||
}
|
||||
|
||||
let {
|
||||
container_class_li = [],
|
||||
person_id_random_li = $bindable(['']),
|
||||
allow_basic = false,
|
||||
allow_moderator = false,
|
||||
show_user_fields = false,
|
||||
display_mode = 'default'
|
||||
}: Props = $props();
|
||||
let {
|
||||
container_class_li = [],
|
||||
person_id_random_li = $bindable(['']),
|
||||
allow_basic = false,
|
||||
allow_moderator = false,
|
||||
show_user_fields = false,
|
||||
display_mode = 'default'
|
||||
}: Props = $props();
|
||||
|
||||
// Variables
|
||||
// Variables
|
||||
|
||||
// *** Functions and Logic
|
||||
let lq_kv__person_obj_li = $derived(liveQuery(() => db_core.person.bulkGet(person_id_random_li)));
|
||||
// *** Functions and Logic
|
||||
let lq_kv__person_obj_li = $derived(
|
||||
liveQuery(() => db_core.person.bulkGet(person_id_random_li))
|
||||
);
|
||||
</script>
|
||||
|
||||
<section class="ae_comp person_obj_tbl container {container_class_li}">
|
||||
@@ -53,18 +62,19 @@
|
||||
{#if $lq_kv__person_obj_li.length}
|
||||
<span
|
||||
class="text-3xl font-bold bg-success-100 px-4 border rounded-lg border-success-200"
|
||||
title="Count {$lq_kv__person_obj_li.length ?? 'None'}"
|
||||
>
|
||||
title="Count {$lq_kv__person_obj_li.length ?? 'None'}">
|
||||
<ListOrdered size="1em" class="mx-4" />
|
||||
{$lq_kv__person_obj_li.length ?? 'None'}
|
||||
</span>
|
||||
{/if}
|
||||
</h2>
|
||||
|
||||
<table class="table table-auto table-striped w-full text-xs lg:text-sm">
|
||||
<table
|
||||
class="table table-auto table-striped w-full text-xs lg:text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-2">Name ({$lq_kv__person_obj_li?.length}×)</th>
|
||||
<th class="px-4 py-2"
|
||||
>Name ({$lq_kv__person_obj_li?.length}×)</th>
|
||||
<th class="px-4 py-2">Email</th>
|
||||
<th class="px-4 py-2">Affiliations</th>
|
||||
{#if show_user_fields}
|
||||
@@ -83,8 +93,7 @@
|
||||
href="/core/people/{person_obj?.person_id_random}"
|
||||
class="text-blue-500 underline hover:text-blue-800"
|
||||
title="View {person_obj?.full_name ??
|
||||
'no name'} (ID={person_obj?.person_id_random})"
|
||||
>
|
||||
'no name'} (ID={person_obj?.person_id_random})">
|
||||
<!-- {@html person_obj?.full_name ?? ae_snip.html__not_set} -->
|
||||
{@html person_obj?.full_name
|
||||
? person_obj?.full_name
|
||||
@@ -96,9 +105,9 @@
|
||||
{#if person_obj?.primary_email}
|
||||
<a
|
||||
href="mailto:{person_obj?.primary_email}"
|
||||
class="text-blue-500 underline hover:text-blue-800"
|
||||
>
|
||||
{@html person_obj?.primary_email ?? ae_snip.html__not_set}
|
||||
class="text-blue-500 underline hover:text-blue-800">
|
||||
{@html person_obj?.primary_email ??
|
||||
ae_snip.html__not_set}
|
||||
</a>
|
||||
{:else}
|
||||
{@html ae_snip.html__not_set}
|
||||
@@ -106,26 +115,33 @@
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<Building2 size="1em" />
|
||||
{@html person_obj?.affiliations ?? ae_snip.html__not_set}
|
||||
{@html person_obj?.affiliations ??
|
||||
ae_snip.html__not_set}
|
||||
</td>
|
||||
|
||||
{#if show_user_fields}
|
||||
<td class="px-4 py-2">
|
||||
{#if person_obj?.user_id_random}
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold flex items-center gap-1">
|
||||
<UserCheck size="1em" class="text-success-500" />
|
||||
<span
|
||||
class="font-bold flex items-center gap-1">
|
||||
<UserCheck
|
||||
size="1em"
|
||||
class="text-success-500" />
|
||||
<a
|
||||
href="/core/users/{person_obj?.user_id_random}"
|
||||
class="text-blue-500 underline hover:text-blue-800"
|
||||
>
|
||||
{@html person_obj?.username ?? '-- no username --'}
|
||||
class="text-blue-500 underline hover:text-blue-800">
|
||||
{@html person_obj?.username ??
|
||||
'-- no username --'}
|
||||
</a>
|
||||
</span>
|
||||
<span class="text-[10px] opacity-50 font-mono">{person_obj.user_id_random}</span>
|
||||
<span
|
||||
class="text-[10px] opacity-50 font-mono"
|
||||
>{person_obj.user_id_random}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="badge preset-tonal-warning">
|
||||
<span
|
||||
class="badge preset-tonal-warning">
|
||||
<Unlink size="1em" class="mr-1" />
|
||||
Not Linked
|
||||
</span>
|
||||
@@ -133,10 +149,21 @@
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#if person_obj?.user_super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
|
||||
{#if person_obj?.user_manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
|
||||
{#if person_obj?.user_administrator}<span class="badge preset-filled-primary text-[10px]">Admin</span>{/if}
|
||||
{#if !person_obj?.user_id_random}<span class="opacity-30">--</span>{/if}
|
||||
{#if person_obj?.user_super}<span
|
||||
class="badge preset-filled-error text-[10px]"
|
||||
>Super</span
|
||||
>{/if}
|
||||
{#if person_obj?.user_manager}<span
|
||||
class="badge preset-filled-warning text-[10px]"
|
||||
>Manager</span
|
||||
>{/if}
|
||||
{#if person_obj?.user_administrator}<span
|
||||
class="badge preset-filled-primary text-[10px]"
|
||||
>Admin</span
|
||||
>{/if}
|
||||
{#if !person_obj?.user_id_random}<span
|
||||
class="opacity-30">--</span
|
||||
>{/if}
|
||||
</div>
|
||||
</td>
|
||||
{/if}
|
||||
@@ -161,8 +188,8 @@
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.dim {
|
||||
opacity: 0.5;
|
||||
color: #999;
|
||||
}
|
||||
.dim {
|
||||
opacity: 0.5;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,67 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Activity, Contact, ExternalLink, ListFilter, Mail, Phone, Plus, Search, ShieldCheck, User, 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';
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Activity,
|
||||
Contact,
|
||||
ExternalLink,
|
||||
ListFilter,
|
||||
Mail,
|
||||
Phone,
|
||||
Plus,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
User,
|
||||
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 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);
|
||||
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);
|
||||
|
||||
async function load_contacts() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
contact_li = await load_ae_obj_li__contact({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_contacts();
|
||||
async function load_contacts() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
contact_li = await load_ae_obj_li__contact({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_contacts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Phone size={24} class="text-primary-500" />
|
||||
@@ -53,8 +70,7 @@
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={() => show_add_form = !show_add_form}
|
||||
>
|
||||
onclick={() => (show_add_form = !show_add_form)}>
|
||||
{#if show_add_form}
|
||||
<X size={16} class="mr-2" /> Cancel
|
||||
{:else}
|
||||
@@ -73,29 +89,36 @@
|
||||
goto(`/core/contacts/${new_con.contact_id_random}`);
|
||||
}
|
||||
}}
|
||||
onCancel={() => show_add_form = false}
|
||||
/>
|
||||
onCancel={() => (show_add_form = false)} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<div class="max-w-2xl space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
|
||||
<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">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Directory</span>
|
||||
<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="preset-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}>
|
||||
placeholder="Search by name, title, email, or phone..." />
|
||||
<button
|
||||
class="preset-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>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -104,53 +127,82 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-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>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Business and support contacts will appear here.</p>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
Business and support contacts will appear here.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<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 preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{filtered_li.length} entries</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as con (con.contact_id_random)}
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div
|
||||
class="card p-5 space-y-4 preset-tonal-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 ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span
|
||||
class="badge {con.enable
|
||||
? 'preset-filled-success'
|
||||
: 'preset-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 preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="avatar preset-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>
|
||||
<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
|
||||
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
|
||||
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 preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/contacts/{con.contact_id_random}">
|
||||
<a
|
||||
class="btn btn-sm preset-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>
|
||||
|
||||
@@ -1,56 +1,75 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__contact,
|
||||
update_ae_obj__contact,
|
||||
delete_ae_obj_id__contact
|
||||
} from '$lib/ae_core/ae_core__contact';
|
||||
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 { Activity, ArrowLeft, Contact, Edit, Eye, Globe, Info, Link2, Linkedin, Mail, Phone, Save, ShieldCheck, Trash2, UserRound } from '@lucide/svelte';
|
||||
import Contact_form from '../ae_comp__contact_form.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__contact,
|
||||
update_ae_obj__contact,
|
||||
delete_ae_obj_id__contact
|
||||
} from '$lib/ae_core/ae_core__contact';
|
||||
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 {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
Contact,
|
||||
Edit,
|
||||
Eye,
|
||||
Globe,
|
||||
Info,
|
||||
Link2,
|
||||
Linkedin,
|
||||
Mail,
|
||||
Phone,
|
||||
Save,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
UserRound
|
||||
} from '@lucide/svelte';
|
||||
import Contact_form from '../ae_comp__contact_form.svelte';
|
||||
|
||||
let contact_id = $derived($page.params.contact_id ?? '');
|
||||
let contact: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let is_editing = $state(false);
|
||||
let contact_id = $derived($page.params.contact_id ?? '');
|
||||
let contact: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let is_editing = $state(false);
|
||||
|
||||
async function load_data() {
|
||||
loading = true;
|
||||
contact = await load_ae_obj_id__contact({
|
||||
api_cfg: $ae_api,
|
||||
contact_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_data();
|
||||
async function load_data() {
|
||||
loading = true;
|
||||
contact = await load_ae_obj_id__contact({
|
||||
api_cfg: $ae_api,
|
||||
contact_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Permanently delete this contact?')) return;
|
||||
await delete_ae_obj_id__contact({
|
||||
api_cfg: $ae_api,
|
||||
contact_id,
|
||||
method: 'delete',
|
||||
log_lvl: 1
|
||||
});
|
||||
goto('/core/contacts');
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_data();
|
||||
});
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Permanently delete this contact?')) return;
|
||||
await delete_ae_obj_id__contact({
|
||||
api_cfg: $ae_api,
|
||||
contact_id,
|
||||
method: 'delete',
|
||||
log_lvl: 1
|
||||
});
|
||||
goto('/core/contacts');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<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">
|
||||
<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 preset-tonal-surface shadow-sm" href="/core/contacts">
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-surface shadow-sm"
|
||||
href="/core/contacts">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -58,20 +77,31 @@
|
||||
<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>
|
||||
<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 preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-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 preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-error font-bold shadow-sm"
|
||||
onclick={handle_delete}
|
||||
disabled={loading}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
@@ -79,54 +109,74 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if contact}
|
||||
{#if is_editing}
|
||||
<div class="animate-fade-in">
|
||||
<Contact_form
|
||||
{contact}
|
||||
<Contact_form
|
||||
{contact}
|
||||
onSave={(updated) => {
|
||||
contact = updated;
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
onCancel={() => (is_editing = false)} />
|
||||
</div>
|
||||
{:else}
|
||||
<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 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
<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" rel="noopener noreferrer" class="font-bold text-secondary-500 hover:underline flex items-center gap-2 truncate">
|
||||
{contact.website_url} <Link2 size={12} />
|
||||
<a
|
||||
href={contact.website_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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>
|
||||
@@ -135,36 +185,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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">
|
||||
<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>
|
||||
<p class="font-mono font-bold">
|
||||
{contact.phone_mobile ||
|
||||
contact.phone ||
|
||||
'--'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-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>
|
||||
<p class="font-mono font-bold">
|
||||
{contact.phone_office || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-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>
|
||||
<p class="font-bold truncate">
|
||||
{contact.linkedin_url || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<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
|
||||
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>
|
||||
@@ -172,40 +238,77 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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 ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
|
||||
<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
|
||||
? 'preset-filled-success'
|
||||
: 'preset-filled-error'} px-4 py-1 shadow-sm">
|
||||
{contact.enable ? 'ACTIVE' : 'DISABLED'}
|
||||
</span>
|
||||
</div>
|
||||
<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 ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<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
|
||||
? 'preset-filled-warning'
|
||||
: 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{contact.hide ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<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 ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<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
|
||||
? 'preset-filled-secondary'
|
||||
: 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{contact.priority ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-5 preset-tonal-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="card p-5 preset-tonal-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>
|
||||
<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>
|
||||
<p class="flex justify-between">
|
||||
<span>Updated:</span>
|
||||
<span
|
||||
>{new Date(
|
||||
contact.updated_on
|
||||
).toLocaleString()}</span>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,122 +1,144 @@
|
||||
<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 { Facebook, Globe, Instagram, Linkedin, Mail, Phone, Save, UserPlus, X } from '@lucide/svelte';
|
||||
interface Props {
|
||||
contact?: ae_Contact | null;
|
||||
onSave?: (contact: ae_Contact) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
/**
|
||||
* 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 {
|
||||
Facebook,
|
||||
Globe,
|
||||
Instagram,
|
||||
Linkedin,
|
||||
Mail,
|
||||
Phone,
|
||||
Save,
|
||||
UserPlus,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
interface Props {
|
||||
contact?: ae_Contact | null;
|
||||
onSave?: (contact: ae_Contact) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
let { contact = null, onSave, onCancel }: Props = $props();
|
||||
let { contact = null, onSave, onCancel }: Props = $props();
|
||||
|
||||
// Form State (Runes)
|
||||
let formData = $state({
|
||||
title: '',
|
||||
tagline: '',
|
||||
email: '',
|
||||
phone_mobile: '',
|
||||
phone_office: '',
|
||||
website_url: '',
|
||||
facebook_url: '',
|
||||
instagram_url: '',
|
||||
linkedin_url: '',
|
||||
notes: '',
|
||||
enable: true,
|
||||
hide: false,
|
||||
priority: false
|
||||
});
|
||||
// Form State (Runes)
|
||||
let formData = $state({
|
||||
title: '',
|
||||
tagline: '',
|
||||
email: '',
|
||||
phone_mobile: '',
|
||||
phone_office: '',
|
||||
website_url: '',
|
||||
facebook_url: '',
|
||||
instagram_url: '',
|
||||
linkedin_url: '',
|
||||
notes: '',
|
||||
enable: true,
|
||||
hide: false,
|
||||
priority: false
|
||||
});
|
||||
|
||||
// Reset form when contact prop changes
|
||||
$effect(() => {
|
||||
formData.title = contact?.title ?? '';
|
||||
formData.tagline = contact?.tagline ?? '';
|
||||
formData.email = contact?.email ?? '';
|
||||
formData.phone_mobile = contact?.phone_mobile ?? '';
|
||||
formData.phone_office = contact?.phone_office ?? '';
|
||||
formData.website_url = contact?.website_url ?? '';
|
||||
formData.facebook_url = contact?.facebook_url ?? '';
|
||||
formData.instagram_url = contact?.instagram_url ?? '';
|
||||
formData.linkedin_url = contact?.linkedin_url ?? '';
|
||||
formData.notes = contact?.notes ?? '';
|
||||
formData.enable = contact?.enable ?? true;
|
||||
formData.hide = contact?.hide ?? false;
|
||||
formData.priority = contact?.priority ?? false;
|
||||
});
|
||||
// Reset form when contact prop changes
|
||||
$effect(() => {
|
||||
formData.title = contact?.title ?? '';
|
||||
formData.tagline = contact?.tagline ?? '';
|
||||
formData.email = contact?.email ?? '';
|
||||
formData.phone_mobile = contact?.phone_mobile ?? '';
|
||||
formData.phone_office = contact?.phone_office ?? '';
|
||||
formData.website_url = contact?.website_url ?? '';
|
||||
formData.facebook_url = contact?.facebook_url ?? '';
|
||||
formData.instagram_url = contact?.instagram_url ?? '';
|
||||
formData.linkedin_url = contact?.linkedin_url ?? '';
|
||||
formData.notes = contact?.notes ?? '';
|
||||
formData.enable = contact?.enable ?? true;
|
||||
formData.hide = contact?.hide ?? false;
|
||||
formData.priority = contact?.priority ?? false;
|
||||
});
|
||||
|
||||
let is_loading = $state(false);
|
||||
let error_msg = $state('');
|
||||
let is_loading = $state(false);
|
||||
let error_msg = $state('');
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
is_loading = true;
|
||||
error_msg = '';
|
||||
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;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
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 preset-tonal-surface">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<form
|
||||
onsubmit={handleSubmit}
|
||||
class="card p-6 space-y-6 shadow-xl preset-tonal-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 preset-tonal-surface" onclick={onCancel}>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-surface"
|
||||
onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -138,82 +160,163 @@
|
||||
<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>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Identity & Branding</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-title">Title / Name</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" type="text" bind:value={formData.title} required placeholder="Business Office" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-title">Title / Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="contact-title"
|
||||
type="text"
|
||||
bind:value={formData.title}
|
||||
required
|
||||
placeholder="Business Office" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-tagline">Tagline</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-tagline">Tagline</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="contact-tagline"
|
||||
type="text"
|
||||
bind:value={formData.tagline}
|
||||
placeholder="Primary contact for business inquiries" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-email">Email Address</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-email">Email Address</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Mail size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-email" type="email" bind:value={formData.email} placeholder="contact@example.com" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="contact-email"
|
||||
type="email"
|
||||
bind:value={formData.email}
|
||||
placeholder="contact@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Communication Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Phone & Web</legend>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-phone-mobile">Mobile Phone</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-phone-mobile">Mobile Phone</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-mobile" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="contact-phone-mobile"
|
||||
type="tel"
|
||||
bind:value={formData.phone_mobile}
|
||||
placeholder="+1..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-phone-office">Office Phone</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-phone-office">Office Phone</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-office" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="contact-phone-office"
|
||||
type="tel"
|
||||
bind:value={formData.phone_office}
|
||||
placeholder="+1..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-website">Website URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-website">Website URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Globe size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-website" type="url" bind:value={formData.website_url} placeholder="https://..." />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="contact-website"
|
||||
type="url"
|
||||
bind:value={formData.website_url}
|
||||
placeholder="https://..." />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Social Media Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Social Media</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-linkedin">LinkedIn URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-linkedin">LinkedIn URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Linkedin size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-linkedin" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="contact-linkedin"
|
||||
type="url"
|
||||
bind:value={formData.linkedin_url}
|
||||
placeholder="https://linkedin.com/in/..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-facebook">Facebook URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Facebook size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-facebook" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-facebook">Facebook URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim">
|
||||
<Facebook size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="contact-facebook"
|
||||
type="url"
|
||||
bind:value={formData.facebook_url}
|
||||
placeholder="https://facebook.com/..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-instagram">Instagram URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Instagram size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-instagram" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-instagram">Instagram URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim">
|
||||
<Instagram size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="contact-instagram"
|
||||
type="url"
|
||||
bind:value={formData.instagram_url}
|
||||
placeholder="https://instagram.com/..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -221,32 +324,53 @@
|
||||
|
||||
<!-- Status Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
|
||||
<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 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.enable} />
|
||||
<span class="text-sm font-medium">Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.hide} />
|
||||
<span class="text-sm font-medium">Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.priority} />
|
||||
<span class="text-sm font-medium">Priority</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-notes">Internal Notes</label>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-notes">Internal Notes</label>
|
||||
<textarea
|
||||
class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="contact-notes"
|
||||
rows="2"
|
||||
bind:value={formData.notes}
|
||||
placeholder="Additional details..."></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
|
||||
<button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{/if}
|
||||
|
||||
@@ -1,74 +1,99 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Clock, Globe, Info, Landmark, List, ListFilter, MapPin, RefreshCcw, Star } from '@lucide/svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Clock,
|
||||
Globe,
|
||||
Info,
|
||||
Landmark,
|
||||
List,
|
||||
ListFilter,
|
||||
MapPin,
|
||||
RefreshCcw,
|
||||
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: [],
|
||||
subdivisions: []
|
||||
});
|
||||
let loading = $state(true);
|
||||
let tz_only_priority = $state(false);
|
||||
let lookups: any = $state({
|
||||
countries: [],
|
||||
time_zones: [],
|
||||
subdivisions: []
|
||||
});
|
||||
|
||||
async function load_lookups() {
|
||||
loading = true;
|
||||
try {
|
||||
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: '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
|
||||
})
|
||||
]);
|
||||
async function load_lookups() {
|
||||
loading = true;
|
||||
try {
|
||||
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: '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 - Subdivisions:', subdivisions);
|
||||
console.log('Lookup Results - Time Zones:', time_zones);
|
||||
console.log('Lookup Results - Countries:', countries);
|
||||
console.log('Lookup Results - Subdivisions:', subdivisions);
|
||||
console.log('Lookup Results - Time Zones:', time_zones);
|
||||
|
||||
lookups.countries = countries || [];
|
||||
lookups.subdivisions = subdivisions || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load lookups:', error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
lookups.countries = countries || [];
|
||||
lookups.subdivisions = subdivisions || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load lookups:', error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_lookups();
|
||||
});
|
||||
|
||||
// Handle TZ priority toggle
|
||||
function toggle_tz_priority() {
|
||||
tz_only_priority = !tz_only_priority;
|
||||
load_lookups();
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
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">
|
||||
<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">
|
||||
<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-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<List size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">System Lookups</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Global Reference Data</p>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
Global Reference Data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={load_lookups}
|
||||
disabled={loading}>
|
||||
{#if loading}
|
||||
<RefreshCcw size={16} class="mr-2 animate-spin" /> Loading...
|
||||
{:else}
|
||||
@@ -80,22 +105,29 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-6 animate-fade-in">
|
||||
<!-- 1. Countries -->
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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" />
|
||||
Country Reference
|
||||
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
|
||||
<span
|
||||
class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold"
|
||||
>{lookups.countries.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[400px] 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">
|
||||
<tr
|
||||
class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Name</th>
|
||||
<th class="text-center">ISO Alpha-2</th>
|
||||
</tr>
|
||||
@@ -103,8 +135,13 @@
|
||||
<tbody>
|
||||
{#each lookups.countries as c (c.alpha_2_code)}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{c.name || c.english_short_name}</td>
|
||||
<td class="text-center"><span class="badge preset-tonal-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
|
||||
<td class="font-bold"
|
||||
>{c.name || c.english_short_name}</td>
|
||||
<td class="text-center"
|
||||
><span
|
||||
class="badge preset-tonal-surface font-mono text-primary-500"
|
||||
>{c.alpha_2_code}</span
|
||||
></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -113,17 +150,23 @@
|
||||
</div>
|
||||
|
||||
<!-- 2. Subdivisions -->
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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">
|
||||
<MapPin size={20} class="text-primary-500" />
|
||||
Country Subdivisions (States/Provinces)
|
||||
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
|
||||
<span
|
||||
class="badge preset-tonal-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">
|
||||
<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">
|
||||
<tr
|
||||
class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Country</th>
|
||||
<th>Name</th>
|
||||
<th class="text-center">Code</th>
|
||||
@@ -132,9 +175,14 @@
|
||||
<tbody>
|
||||
{#each lookups.subdivisions as s, i (i)}
|
||||
<tr class="transition-colors">
|
||||
<td class="opacity-60">{s.country_alpha_2_code}</td>
|
||||
<td class="opacity-60"
|
||||
>{s.country_alpha_2_code}</td>
|
||||
<td class="font-bold">{s.name}</td>
|
||||
<td class="text-center"><span class="badge preset-tonal-surface font-mono">{s.code}</span></td>
|
||||
<td class="text-center"
|
||||
><span
|
||||
class="badge preset-tonal-surface font-mono"
|
||||
>{s.code}</span
|
||||
></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -143,27 +191,40 @@
|
||||
</div>
|
||||
|
||||
<!-- 3. Time Zones -->
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-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 preset-tonal-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
|
||||
<span
|
||||
class="badge preset-tonal-secondary text-[10px] uppercase font-bold"
|
||||
>{lookups.time_zones.length} Zones</span>
|
||||
</h3>
|
||||
<button
|
||||
class="btn btn-sm transition-all {tz_only_priority ? 'preset-filled-warning' : 'preset-tonal-surface'}"
|
||||
class="btn btn-sm transition-all {tz_only_priority
|
||||
? 'preset-filled-warning'
|
||||
: 'preset-tonal-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'}
|
||||
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">
|
||||
<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">
|
||||
<tr
|
||||
class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Zone Name</th>
|
||||
<th class="text-right">Offset (Hours)</th>
|
||||
</tr>
|
||||
@@ -172,7 +233,11 @@
|
||||
{#each lookups.time_zones as tz (tz.name)}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{tz.name}</td>
|
||||
<td class="text-right"><span class="badge preset-tonal-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
|
||||
<td class="text-right"
|
||||
><span
|
||||
class="badge preset-tonal-surface font-mono"
|
||||
>{tz.offset_seconds / 3600}h</span
|
||||
></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -181,9 +246,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
|
||||
<div
|
||||
class="card p-4 preset-tonal-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>
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,27 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { ListFilter, Plus, Users, X } from '@lucide/svelte';
|
||||
import { ae_loc, ae_sess, slct, ae_api } from '$lib/stores/ae_stores';
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import Comp_person_search from './ae_comp__person_search.svelte';
|
||||
import Comp_person_obj_tbl from '../ae_comp__person_obj_tbl.svelte';
|
||||
import Person_form from './ae_comp__person_form.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { ListFilter, Plus, Users, X } from '@lucide/svelte';
|
||||
import { ae_loc, ae_sess, slct, ae_api } from '$lib/stores/ae_stores';
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import Comp_person_search from './ae_comp__person_search.svelte';
|
||||
import Comp_person_obj_tbl from '../ae_comp__person_obj_tbl.svelte';
|
||||
import Person_form from './ae_comp__person_form.svelte';
|
||||
|
||||
let person_id_random_li: string[] = $state([]);
|
||||
let show_add_form = $state(false);
|
||||
let person_id_random_li: string[] = $state([]);
|
||||
let show_add_form = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
});
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Users size={24} class="text-primary-500" />
|
||||
@@ -29,10 +30,9 @@
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => show_add_form = !show_add_form}
|
||||
onclick={() => (show_add_form = !show_add_form)}
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
>
|
||||
class:hidden={!$ae_loc.edit_mode}>
|
||||
{#if show_add_form}
|
||||
<X size={16} class="mr-2" /> Cancel
|
||||
{:else}
|
||||
@@ -48,22 +48,25 @@
|
||||
show_add_form = false;
|
||||
goto(`/core/people/${new_person.person_id_random}`);
|
||||
}}
|
||||
onCancel={() => show_add_form = false}
|
||||
/>
|
||||
onCancel={() => (show_add_form = false)} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Comp_person_search on_results={(results) => {
|
||||
person_id_random_li = results.map(p => p.person_id_random);
|
||||
$ae_sess.person.show_report__person_li = true;
|
||||
}} />
|
||||
<Comp_person_search
|
||||
on_results={(results) => {
|
||||
person_id_random_li = results.map((p) => p.person_id_random);
|
||||
$ae_sess.person.show_report__person_li = true;
|
||||
}} />
|
||||
|
||||
{#if $ae_sess.person.show_report__person_li}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl space-y-4 border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl space-y-4 border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Search Results
|
||||
<span class="badge preset-tonal-secondary ml-auto">{person_id_random_li.length} found</span>
|
||||
Search Results
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{person_id_random_li.length} found</span>
|
||||
</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<Comp_person_obj_tbl
|
||||
|
||||
@@ -1,160 +1,176 @@
|
||||
<script lang="ts">
|
||||
/** @type {import('./$types').PageData} */
|
||||
// import { page } from '$app/stores';
|
||||
/** @type {import('./$types').PageData} */
|
||||
// import { page } from '$app/stores';
|
||||
|
||||
// Imports
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
// import { api } from '$lib/api';
|
||||
import Element_data_store from '$lib/elements/element_data_store.svelte';
|
||||
// Imports
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
// import { api } from '$lib/api';
|
||||
import Element_data_store from '$lib/elements/element_data_store.svelte';
|
||||
|
||||
import { liveQuery } from 'dexie';
|
||||
// import { core_func } from '$lib/ae_core_functions';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
// import { db_events } from "$lib/db_events";
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
// import { events_loc, events_sess, slct, events_trigger } from '$lib/stores/ae_events_stores';
|
||||
// import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
import { liveQuery } from 'dexie';
|
||||
// import { core_func } from '$lib/ae_core_functions';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
// import { db_events } from "$lib/db_events";
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
// import { events_loc, events_sess, slct, events_trigger } from '$lib/stores/ae_events_stores';
|
||||
// import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
|
||||
import Person_view from './../../person_view.svelte';
|
||||
import Person_form from './../ae_comp__person_form.svelte';
|
||||
import { load_ae_obj_li__user } from '$lib/ae_core/ae_core__user';
|
||||
import { update_ae_obj__person } from '$lib/ae_core/ae_core__person';
|
||||
import { qry_ae_obj_li__event } from '$lib/ae_events/ae_events__event';
|
||||
import { qry__post } from '$lib/ae_posts/ae_posts__post';
|
||||
import { qry__activity_log } from '$lib/ae_core/ae_core__activity_log';
|
||||
import { Activity, ArrowLeft, Calendar, Edit, Eye, HelpCircle, History, Link, LoaderCircle, MessageSquare, ShieldCheck, Unlink, User, UserPlus, Users } from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
import Person_view from './../../person_view.svelte';
|
||||
import Person_form from './../ae_comp__person_form.svelte';
|
||||
import { load_ae_obj_li__user } from '$lib/ae_core/ae_core__user';
|
||||
import { update_ae_obj__person } from '$lib/ae_core/ae_core__person';
|
||||
import { qry_ae_obj_li__event } from '$lib/ae_events/ae_events__event';
|
||||
import { qry__post } from '$lib/ae_posts/ae_posts__post';
|
||||
import { qry__activity_log } from '$lib/ae_core/ae_core__activity_log';
|
||||
import {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
Calendar,
|
||||
Edit,
|
||||
Eye,
|
||||
HelpCircle,
|
||||
History,
|
||||
Link,
|
||||
LoaderCircle,
|
||||
MessageSquare,
|
||||
ShieldCheck,
|
||||
Unlink,
|
||||
User,
|
||||
UserPlus,
|
||||
Users
|
||||
} from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
let { data }: Props = $props();
|
||||
|
||||
// Variables
|
||||
let ae_acct = $derived(data[data.account_id]);
|
||||
// Variables
|
||||
let ae_acct = $derived(data[data.account_id]);
|
||||
|
||||
$effect(() => {
|
||||
if (!ae_acct) return;
|
||||
untrack(() => {
|
||||
$slct.account_id = data.account_id;
|
||||
$ae_loc.url_origin = data.url.origin;
|
||||
$slct.person_id = ae_acct.slct.person_id;
|
||||
$slct.person_obj = ae_acct.slct.person_obj;
|
||||
});
|
||||
$effect(() => {
|
||||
if (!ae_acct) return;
|
||||
untrack(() => {
|
||||
$slct.account_id = data.account_id;
|
||||
$ae_loc.url_origin = data.url.origin;
|
||||
$slct.person_id = ae_acct.slct.person_id;
|
||||
$slct.person_obj = ae_acct.slct.person_obj;
|
||||
});
|
||||
});
|
||||
|
||||
let is_editing = $state(false);
|
||||
|
||||
let lq__person_obj = liveQuery(() => db_core.person.get($slct.person_id));
|
||||
$slct.lq__person_obj = lq__person_obj;
|
||||
|
||||
let available_users: any[] = $state([]);
|
||||
let loading_users = $state(false);
|
||||
let show_link_ui = $state(false);
|
||||
|
||||
let related_events: any[] = $state([]);
|
||||
let related_posts: any[] = $state([]);
|
||||
let related_activity_logs: any[] = $state([]);
|
||||
let loading_activity = $state(false);
|
||||
|
||||
async function load_activity() {
|
||||
if (!$slct.person_id) return;
|
||||
loading_activity = true;
|
||||
|
||||
// Load related data using search queries
|
||||
const [events, posts, logs] = await Promise.all([
|
||||
qry_ae_obj_li__event({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
qry_person_id: $slct.person_id,
|
||||
log_lvl: 1
|
||||
}),
|
||||
qry__post({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
qry_person_id: $slct.person_id,
|
||||
log_lvl: 1
|
||||
}),
|
||||
qry__activity_log({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
qry_person_id: $slct.person_id,
|
||||
limit: 10,
|
||||
log_lvl: 1
|
||||
})
|
||||
]);
|
||||
|
||||
related_events = events || [];
|
||||
related_posts = posts || [];
|
||||
related_activity_logs = logs || [];
|
||||
loading_activity = false;
|
||||
}
|
||||
|
||||
async function load_unlinked_users() {
|
||||
if (!$ae_loc.manager_access) return;
|
||||
loading_users = true;
|
||||
const all_users = await load_ae_obj_li__user({
|
||||
api_cfg: $ae_api,
|
||||
enabled: 'enabled',
|
||||
log_lvl: 1
|
||||
});
|
||||
// Filter users that don't have a person_id linked
|
||||
// NOTE: The backend might return person_id or person_id
|
||||
available_users = all_users.filter((u) => !u.person_id && !u.person_id);
|
||||
loading_users = false;
|
||||
}
|
||||
|
||||
async function handle_link_user(user_id: string) {
|
||||
if (!confirm('Link this person to this user account?')) return;
|
||||
|
||||
const result = await update_ae_obj__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $slct.person_id,
|
||||
data_kv: { user_id },
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
let is_editing = $state(false);
|
||||
|
||||
let lq__person_obj = liveQuery(() => db_core.person.get($slct.person_id));
|
||||
$slct.lq__person_obj = lq__person_obj;
|
||||
|
||||
let available_users: any[] = $state([]);
|
||||
let loading_users = $state(false);
|
||||
let show_link_ui = $state(false);
|
||||
|
||||
let related_events: any[] = $state([]);
|
||||
let related_posts: any[] = $state([]);
|
||||
let related_activity_logs: any[] = $state([]);
|
||||
let loading_activity = $state(false);
|
||||
|
||||
async function load_activity() {
|
||||
if (!$slct.person_id) return;
|
||||
loading_activity = true;
|
||||
|
||||
// Load related data using search queries
|
||||
const [events, posts, logs] = await Promise.all([
|
||||
qry_ae_obj_li__event({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
qry_person_id: $slct.person_id,
|
||||
log_lvl: 1
|
||||
}),
|
||||
qry__post({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
qry_person_id: $slct.person_id,
|
||||
log_lvl: 1
|
||||
}),
|
||||
qry__activity_log({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
qry_person_id: $slct.person_id,
|
||||
limit: 10,
|
||||
log_lvl: 1
|
||||
})
|
||||
]);
|
||||
|
||||
related_events = events || [];
|
||||
related_posts = posts || [];
|
||||
related_activity_logs = logs || [];
|
||||
loading_activity = false;
|
||||
if (result) {
|
||||
show_link_ui = false;
|
||||
available_users = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function load_unlinked_users() {
|
||||
if (!$ae_loc.manager_access) return;
|
||||
loading_users = true;
|
||||
const all_users = await load_ae_obj_li__user({
|
||||
api_cfg: $ae_api,
|
||||
enabled: 'enabled',
|
||||
log_lvl: 1
|
||||
});
|
||||
// Filter users that don't have a person_id linked
|
||||
// NOTE: The backend might return person_id or person_id
|
||||
available_users = all_users.filter(u => !u.person_id && !u.person_id);
|
||||
loading_users = false;
|
||||
}
|
||||
async function handle_unlink_user() {
|
||||
if (!confirm('Unlink this person from their user account?')) return;
|
||||
|
||||
async function handle_link_user(user_id: string) {
|
||||
if (!confirm('Link this person to this user account?')) return;
|
||||
|
||||
const result = await update_ae_obj__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $slct.person_id,
|
||||
data_kv: { user_id },
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
show_link_ui = false;
|
||||
available_users = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_unlink_user() {
|
||||
if (!confirm('Unlink this person from their user account?')) return;
|
||||
|
||||
const result = await update_ae_obj__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $slct.person_id,
|
||||
data_kv: { user_id: null },
|
||||
log_lvl: 1
|
||||
});
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_activity();
|
||||
const result = await update_ae_obj__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $slct.person_id,
|
||||
data_kv: { user_id: null },
|
||||
log_lvl: 1
|
||||
});
|
||||
}
|
||||
|
||||
if (!$ae_loc.person) {
|
||||
$ae_loc.person = {};
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
$ae_loc.person.show_content__person_page_help = false;
|
||||
load_activity();
|
||||
});
|
||||
|
||||
// *** Functions and Logic
|
||||
if (!$ae_loc.person) {
|
||||
$ae_loc.person = {};
|
||||
}
|
||||
$ae_loc.person.show_content__person_page_help = false;
|
||||
|
||||
// *** Functions and Logic
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -169,11 +185,11 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="ae_core__person md:container h-full mx-auto flex flex-col space-y-4 pt-0 pb-8">
|
||||
<section
|
||||
class="ae_core__person md:container h-full mx-auto flex flex-col space-y-4 pt-0 pb-8">
|
||||
<div
|
||||
class="core__person_view_menu {ae_snip.classes__core_menu}"
|
||||
class:border-gray-100={!$ae_loc.person.show_content__person_page_help}
|
||||
>
|
||||
class:border-gray-100={!$ae_loc.person.show_content__person_page_help}>
|
||||
<div>
|
||||
<a href="/core/people" class={ae_snip.classes__core_menu__button}>
|
||||
<ArrowLeft size="1em" class="mx-1" />
|
||||
@@ -183,9 +199,8 @@
|
||||
{#if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => is_editing = !is_editing}
|
||||
class="btn btn-sm preset-tonal-secondary mx-1"
|
||||
>
|
||||
onclick={() => (is_editing = !is_editing)}
|
||||
class="btn btn-sm preset-tonal-secondary mx-1">
|
||||
{#if is_editing}
|
||||
<Eye size={16} class="mr-2" /> View Mode
|
||||
{:else}
|
||||
@@ -201,8 +216,7 @@
|
||||
!$ae_loc.person.show_content__person_page_help;
|
||||
}}
|
||||
class={ae_snip.classes__core_menu__button}
|
||||
title="Help and information about the person page"
|
||||
>
|
||||
title="Help and information about the person page">
|
||||
<HelpCircle size="1em" class="mx-1" />
|
||||
{#if $ae_loc.person.show_content__person_page_help}
|
||||
Hide
|
||||
@@ -222,8 +236,7 @@
|
||||
class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
|
||||
show_edit={false}
|
||||
show_edit_btn={true}
|
||||
hide={!$ae_loc.person.show_content__person_page_help}
|
||||
/>
|
||||
hide={!$ae_loc.person.show_content__person_page_help} />
|
||||
|
||||
<div>
|
||||
<button
|
||||
@@ -234,8 +247,7 @@
|
||||
}}
|
||||
class="btn btn-sm mx-1 preset-tonal-error border border-error-500 hover:preset-filled-error-500"
|
||||
class:hidden={!$ae_loc.person.show_content__person_page_help}
|
||||
title="Help and information about the session search"
|
||||
>
|
||||
title="Help and information about the session search">
|
||||
<HelpCircle size="1em" class="mx-1" />
|
||||
{#if $ae_loc.person.show_content__person_page_help}
|
||||
Hide
|
||||
@@ -249,58 +261,88 @@
|
||||
|
||||
{#if $ae_loc.manager_access}
|
||||
<div class="card p-4 preset-tonal-surface space-y-4 mx-4">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
|
||||
<header
|
||||
class="flex justify-between items-center border-b border-surface-500/30 pb-2">
|
||||
<div class="flex items-center gap-2 font-bold">
|
||||
<ShieldCheck size={18} />
|
||||
<span>User Account Linking</span>
|
||||
</div>
|
||||
{#if $lq__person_obj?.user_id}
|
||||
<button class="btn btn-sm preset-tonal-error" onclick={handle_unlink_user}>
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-error"
|
||||
onclick={handle_unlink_user}>
|
||||
<Unlink size={14} class="mr-2" /> Unlink User
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-primary"
|
||||
onclick={() => { show_link_ui = !show_link_ui; if(show_link_ui) load_unlinked_users(); }}
|
||||
>
|
||||
<Link size={14} class="mr-2" /> {show_link_ui ? 'Cancel Linking' : 'Link to User'}
|
||||
onclick={() => {
|
||||
show_link_ui = !show_link_ui;
|
||||
if (show_link_ui) load_unlinked_users();
|
||||
}}>
|
||||
<Link size={14} class="mr-2" />
|
||||
{show_link_ui ? 'Cancel Linking' : 'Link to User'}
|
||||
</button>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if $lq__person_obj?.user_id}
|
||||
<div class="flex items-center gap-4 py-2">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
|
||||
<div
|
||||
class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm opacity-60 uppercase tracking-widest font-bold">Linked User ID</p>
|
||||
<p class="font-mono text-lg">{$lq__person_obj.user_id}</p>
|
||||
<p class="text-xs opacity-60">Username: {$lq__person_obj.username || '--'}</p>
|
||||
<p
|
||||
class="text-sm opacity-60 uppercase tracking-widest font-bold">
|
||||
Linked User ID
|
||||
</p>
|
||||
<p class="font-mono text-lg">
|
||||
{$lq__person_obj.user_id}
|
||||
</p>
|
||||
<p class="text-xs opacity-60">
|
||||
Username: {$lq__person_obj.username || '--'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if show_link_ui}
|
||||
<div class="space-y-4 py-2">
|
||||
<p class="text-sm opacity-80">Select a user account to link to this person. Only accounts without a linked person are shown.</p>
|
||||
<p class="text-sm opacity-80">
|
||||
Select a user account to link to this person. Only
|
||||
accounts without a linked person are shown.
|
||||
</p>
|
||||
{#if loading_users}
|
||||
<div class="placeholder animate-pulse h-20 w-full"></div>
|
||||
<div class="placeholder animate-pulse h-20 w-full">
|
||||
</div>
|
||||
{:else if available_users.length === 0}
|
||||
<p class="text-center py-4 italic opacity-60 border border-dashed border-surface-500/30">No unlinked user accounts found.</p>
|
||||
<p
|
||||
class="text-center py-4 italic opacity-60 border border-dashed border-surface-500/30">
|
||||
No unlinked user accounts found.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
{#each available_users as user (user.user_id)}
|
||||
<button
|
||||
class="card p-3 preset-tonal-primary hover:preset-filled-primary text-left transition-all flex flex-col gap-1"
|
||||
onclick={() => handle_link_user(user.user_id)}
|
||||
>
|
||||
<span class="font-bold flex items-center gap-2">
|
||||
onclick={() =>
|
||||
handle_link_user(user.user_id)}>
|
||||
<span
|
||||
class="font-bold flex items-center gap-2">
|
||||
<User size={14} />
|
||||
{user.username}
|
||||
</span>
|
||||
<span class="text-xs opacity-70 truncate">{user.email}</span>
|
||||
<span class="text-xs opacity-70 truncate"
|
||||
>{user.email}</span>
|
||||
<div class="flex gap-1 mt-1">
|
||||
{#if user.super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
|
||||
{#if user.manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
|
||||
{#if user.super}<span
|
||||
class="badge preset-filled-error text-[10px]"
|
||||
>Super</span
|
||||
>{/if}
|
||||
{#if user.manager}<span
|
||||
class="badge preset-filled-warning text-[10px]"
|
||||
>Manager</span
|
||||
>{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
@@ -310,14 +352,17 @@
|
||||
{:else}
|
||||
<div class="flex items-center gap-2 py-2 opacity-60">
|
||||
<Users size={20} />
|
||||
<p class="italic text-sm">This person is not currently linked to a user account.</p>
|
||||
<p class="italic text-sm">
|
||||
This person is not currently linked to a user account.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Activity & Content Section -->
|
||||
<div class="card p-4 preset-tonal-surface space-y-4 mx-4">
|
||||
<header class="flex items-center gap-2 font-bold border-b border-surface-500/30 pb-2">
|
||||
<header
|
||||
class="flex items-center gap-2 font-bold border-b border-surface-500/30 pb-2">
|
||||
<History size={18} />
|
||||
<span>Linked Activity & Content</span>
|
||||
</header>
|
||||
@@ -325,19 +370,29 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Related Events -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
|
||||
<h4
|
||||
class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
|
||||
<Calendar size={16} /> Related Events
|
||||
</h4>
|
||||
{#if loading_activity}
|
||||
<div class="placeholder animate-pulse h-20 w-full"></div>
|
||||
<div class="placeholder animate-pulse h-20 w-full">
|
||||
</div>
|
||||
{:else if related_events.length === 0}
|
||||
<p class="text-sm italic opacity-50">No related events found.</p>
|
||||
<p class="text-sm italic opacity-50">
|
||||
No related events found.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each related_events as ev (ev.event_id)}
|
||||
<a href="/events/{ev.event_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
|
||||
<span class="font-bold text-sm">{ev.name}</span>
|
||||
<span class="text-[10px] opacity-60">{new Date(ev.start_datetime).toLocaleDateString()}</span>
|
||||
<a
|
||||
href="/events/{ev.event_id}"
|
||||
class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
|
||||
<span class="font-bold text-sm"
|
||||
>{ev.name}</span>
|
||||
<span class="text-[10px] opacity-60"
|
||||
>{new Date(
|
||||
ev.start_datetime
|
||||
).toLocaleDateString()}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -346,21 +401,34 @@
|
||||
|
||||
<!-- Related Posts -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
|
||||
<h4
|
||||
class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
|
||||
<MessageSquare size={16} /> Related Posts
|
||||
</h4>
|
||||
{#if loading_activity}
|
||||
<div class="placeholder animate-pulse h-20 w-full"></div>
|
||||
<div class="placeholder animate-pulse h-20 w-full">
|
||||
</div>
|
||||
{:else if related_posts.length === 0}
|
||||
<p class="text-sm italic opacity-50">No related posts found.</p>
|
||||
<p class="text-sm italic opacity-50">
|
||||
No related posts found.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each related_posts as post (post.post_id)}
|
||||
<a href="/idaa/bb/{post.post_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
|
||||
<span class="font-bold text-sm">{post.title}</span>
|
||||
<div class="flex justify-between items-center text-[10px] opacity-60">
|
||||
<span>{new Date(post.created_on).toLocaleDateString()}</span>
|
||||
<span class="badge preset-tonal-surface scale-75">{post.post_comment_count || 0} comments</span>
|
||||
<a
|
||||
href="/idaa/bb/{post.post_id}"
|
||||
class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
|
||||
<span class="font-bold text-sm"
|
||||
>{post.title}</span>
|
||||
<div
|
||||
class="flex justify-between items-center text-[10px] opacity-60">
|
||||
<span
|
||||
>{new Date(
|
||||
post.created_on
|
||||
).toLocaleDateString()}</span>
|
||||
<span
|
||||
class="badge preset-tonal-surface scale-75"
|
||||
>{post.post_comment_count || 0} comments</span>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
@@ -370,27 +438,42 @@
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
|
||||
<h4
|
||||
class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
|
||||
<Activity size={16} /> Recent Activity
|
||||
</h4>
|
||||
{#if loading_activity}
|
||||
<div class="placeholder animate-pulse h-20 w-full"></div>
|
||||
<div class="placeholder animate-pulse h-20 w-full">
|
||||
</div>
|
||||
{:else if related_activity_logs.length === 0}
|
||||
<p class="text-sm italic opacity-50">No recent activity logs.</p>
|
||||
<p class="text-sm italic opacity-50">
|
||||
No recent activity logs.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each related_activity_logs as log, index (index)}
|
||||
<div class="card p-3 preset-tonal-surface flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<span class="badge preset-filled-surface text-[9px] uppercase tracking-tighter">{log.action}</span>
|
||||
<span class="text-[9px] opacity-50">{new Date(log.created_on).toLocaleDateString()}</span>
|
||||
<div
|
||||
class="card p-3 preset-tonal-surface flex flex-col gap-1">
|
||||
<div
|
||||
class="flex justify-between items-start gap-2">
|
||||
<span
|
||||
class="badge preset-filled-surface text-[9px] uppercase tracking-tighter"
|
||||
>{log.action}</span>
|
||||
<span class="text-[9px] opacity-50"
|
||||
>{new Date(
|
||||
log.created_on
|
||||
).toLocaleDateString()}</span>
|
||||
</div>
|
||||
{#if log.summary}
|
||||
<span class="text-xs opacity-80 line-clamp-1">{log.summary}</span>
|
||||
<span
|
||||
class="text-xs opacity-80 line-clamp-1"
|
||||
>{log.summary}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<a href="/core/activity_logs?person_id={$slct.person_id}" class="btn btn-sm preset-tonal-surface w-full text-[10px]">
|
||||
<a
|
||||
href="/core/activity_logs?person_id={$slct.person_id}"
|
||||
class="btn btn-sm preset-tonal-surface w-full text-[10px]">
|
||||
View All Activity
|
||||
</a>
|
||||
</div>
|
||||
@@ -412,11 +495,9 @@
|
||||
onSave={(updated) => {
|
||||
is_editing = false;
|
||||
}}
|
||||
onCancel={() => is_editing = false}
|
||||
/>
|
||||
onCancel={() => (is_editing = false)} />
|
||||
</div>
|
||||
{:else}
|
||||
<Person_view person_id={$slct.person_id} />
|
||||
{/if}
|
||||
|
||||
</section>
|
||||
|
||||
@@ -18,7 +18,7 @@ export async function load({ params, parent }) {
|
||||
// We specifically clone 'slct' because we will be mutating it below.
|
||||
const ae_acct = { ...data[account_id] };
|
||||
ae_acct.slct = { ...ae_acct.slct };
|
||||
|
||||
|
||||
// console.log(`ae_acct = `, ae_acct);
|
||||
|
||||
const person_id = params.person_id;
|
||||
@@ -36,7 +36,7 @@ export async function load({ params, parent }) {
|
||||
|
||||
if (browser) {
|
||||
// OPTIMIZATION: Fire the refresh in the background.
|
||||
// The Person View UI uses LiveQuery/Dexie and will update
|
||||
// The Person View UI uses LiveQuery/Dexie and will update
|
||||
// automatically once this background task finishes.
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: ae_acct.api,
|
||||
|
||||
@@ -1,147 +1,167 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Person Form Component
|
||||
* Standardized 2026-01-09 for Core UI Polish.
|
||||
* Uses unified ae_Person type and Svelte 5 Runes.
|
||||
*/
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import type { ae_Person } from '$lib/types/ae_types';
|
||||
import { Briefcase, Building, Link, Mail, Phone, Save, Tag, User, X } from '@lucide/svelte';
|
||||
interface Props {
|
||||
person?: ae_Person | null;
|
||||
onSave?: (person: ae_Person) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
/**
|
||||
* Person Form Component
|
||||
* Standardized 2026-01-09 for Core UI Polish.
|
||||
* Uses unified ae_Person type and Svelte 5 Runes.
|
||||
*/
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import type { ae_Person } from '$lib/types/ae_types';
|
||||
import {
|
||||
Briefcase,
|
||||
Building,
|
||||
Link,
|
||||
Mail,
|
||||
Phone,
|
||||
Save,
|
||||
Tag,
|
||||
User,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
interface Props {
|
||||
person?: ae_Person | null;
|
||||
onSave?: (person: ae_Person) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
let { person = null, onSave, onCancel }: Props = $props();
|
||||
let { person = null, onSave, onCancel }: Props = $props();
|
||||
|
||||
// Form State (Runes)
|
||||
let formData = $state({
|
||||
given_name: '',
|
||||
family_name: '',
|
||||
middle_name: '',
|
||||
prefix: '',
|
||||
suffix: '',
|
||||
nickname: '',
|
||||
professional_title: '',
|
||||
affiliations: '',
|
||||
primary_email: '',
|
||||
phone: '',
|
||||
tagline: '',
|
||||
notes: '',
|
||||
user_id_random: '',
|
||||
enable: true,
|
||||
hide: false,
|
||||
priority: false
|
||||
});
|
||||
// Form State (Runes)
|
||||
let formData = $state({
|
||||
given_name: '',
|
||||
family_name: '',
|
||||
middle_name: '',
|
||||
prefix: '',
|
||||
suffix: '',
|
||||
nickname: '',
|
||||
professional_title: '',
|
||||
affiliations: '',
|
||||
primary_email: '',
|
||||
phone: '',
|
||||
tagline: '',
|
||||
notes: '',
|
||||
user_id_random: '',
|
||||
enable: true,
|
||||
hide: false,
|
||||
priority: false
|
||||
});
|
||||
|
||||
// Reset form when person prop changes
|
||||
$effect(() => {
|
||||
formData.given_name = person?.given_name ?? '';
|
||||
formData.family_name = person?.family_name ?? '';
|
||||
formData.middle_name = person?.middle_name ?? '';
|
||||
formData.prefix = (person?.prefix ?? person?.title_names) ?? '';
|
||||
formData.suffix = (person?.suffix ?? person?.designations) ?? '';
|
||||
formData.nickname = person?.informal_name ?? '';
|
||||
formData.professional_title = person?.professional_title ?? '';
|
||||
formData.affiliations = person?.affiliations ?? '';
|
||||
formData.primary_email = person?.primary_email ?? '';
|
||||
formData.phone = person?.phone ?? '';
|
||||
formData.tagline = person?.tagline ?? '';
|
||||
formData.notes = person?.notes ?? '';
|
||||
formData.user_id_random = person?.user_id_random ?? '';
|
||||
formData.enable = person?.enable ?? true;
|
||||
formData.hide = person?.hide ?? false;
|
||||
formData.priority = person?.priority ?? false;
|
||||
});
|
||||
// Reset form when person prop changes
|
||||
$effect(() => {
|
||||
formData.given_name = person?.given_name ?? '';
|
||||
formData.family_name = person?.family_name ?? '';
|
||||
formData.middle_name = person?.middle_name ?? '';
|
||||
formData.prefix = person?.prefix ?? person?.title_names ?? '';
|
||||
formData.suffix = person?.suffix ?? person?.designations ?? '';
|
||||
formData.nickname = person?.informal_name ?? '';
|
||||
formData.professional_title = person?.professional_title ?? '';
|
||||
formData.affiliations = person?.affiliations ?? '';
|
||||
formData.primary_email = person?.primary_email ?? '';
|
||||
formData.phone = person?.phone ?? '';
|
||||
formData.tagline = person?.tagline ?? '';
|
||||
formData.notes = person?.notes ?? '';
|
||||
formData.user_id_random = person?.user_id_random ?? '';
|
||||
formData.enable = person?.enable ?? true;
|
||||
formData.hide = person?.hide ?? false;
|
||||
formData.priority = person?.priority ?? false;
|
||||
});
|
||||
|
||||
let is_loading = $state(false);
|
||||
let error_msg = $state('');
|
||||
let is_loading = $state(false);
|
||||
let error_msg = $state('');
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
is_loading = true;
|
||||
error_msg = '';
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
is_loading = true;
|
||||
error_msg = '';
|
||||
|
||||
// Clean payload: Map fields and handle optional values
|
||||
const payload: any = {
|
||||
prefix: formData.prefix.trim() || null,
|
||||
given_name: formData.given_name.trim(),
|
||||
family_name: formData.family_name.trim() || null,
|
||||
middle_name: formData.middle_name.trim() || null,
|
||||
informal_name: formData.nickname.trim() || null,
|
||||
// title_names: formData.prefix.trim() || null, // DO NOT USE - Scott 2026-01-09
|
||||
designations: formData.suffix.trim() || null,
|
||||
// NOTE:DO NOT USE Do note send the full_name field at this time - Scott 2026-01-09
|
||||
// full_name: `${formData.prefix ? formData.prefix + ' ' : ''}${formData.given_name} ${formData.family_name}${formData.suffix ? ', ' + formData.suffix : ''}`.trim(), // DO NOT USE - Scott 2026-01-09
|
||||
professional_title: formData.professional_title.trim() || null,
|
||||
affiliations: formData.affiliations.trim() || null,
|
||||
primary_email: formData.primary_email.trim() || null,
|
||||
tagline: formData.tagline.trim() || null,
|
||||
notes: formData.notes.trim() || null,
|
||||
user_id_random: formData.user_id_random.trim() || null,
|
||||
allow_auth_key: true,
|
||||
enable: formData.enable,
|
||||
hide: formData.hide,
|
||||
priority: formData.priority
|
||||
};
|
||||
// Clean payload: Map fields and handle optional values
|
||||
const payload: any = {
|
||||
prefix: formData.prefix.trim() || null,
|
||||
given_name: formData.given_name.trim(),
|
||||
family_name: formData.family_name.trim() || null,
|
||||
middle_name: formData.middle_name.trim() || null,
|
||||
informal_name: formData.nickname.trim() || null,
|
||||
// title_names: formData.prefix.trim() || null, // DO NOT USE - Scott 2026-01-09
|
||||
designations: formData.suffix.trim() || null,
|
||||
// NOTE:DO NOT USE Do note send the full_name field at this time - Scott 2026-01-09
|
||||
// full_name: `${formData.prefix ? formData.prefix + ' ' : ''}${formData.given_name} ${formData.family_name}${formData.suffix ? ', ' + formData.suffix : ''}`.trim(), // DO NOT USE - Scott 2026-01-09
|
||||
professional_title: formData.professional_title.trim() || null,
|
||||
affiliations: formData.affiliations.trim() || null,
|
||||
primary_email: formData.primary_email.trim() || null,
|
||||
tagline: formData.tagline.trim() || null,
|
||||
notes: formData.notes.trim() || null,
|
||||
user_id_random: formData.user_id_random.trim() || null,
|
||||
allow_auth_key: true,
|
||||
enable: formData.enable,
|
||||
hide: formData.hide,
|
||||
priority: formData.priority
|
||||
};
|
||||
|
||||
// Ensure strings are truly null if empty after trim
|
||||
for (const key in payload) {
|
||||
if (payload[key] === '') {
|
||||
if (key !== 'given_name' && key !== 'full_name') {
|
||||
payload[key] = null;
|
||||
}
|
||||
// Ensure strings are truly null if empty after trim
|
||||
for (const key in payload) {
|
||||
if (payload[key] === '') {
|
||||
if (key !== 'given_name' && key !== 'full_name') {
|
||||
payload[key] = null;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
let result;
|
||||
if (person?.person_id_random) {
|
||||
// Update existing
|
||||
result = await core_func.update_ae_obj__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: person.person_id_random,
|
||||
data_kv: payload,
|
||||
log_lvl: 1
|
||||
});
|
||||
} else {
|
||||
// Create new
|
||||
result = await core_func.create_ae_obj__person({
|
||||
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 person record. The server rejected the request (400).';
|
||||
}
|
||||
} catch (err: any) {
|
||||
error_msg = err.message || 'An error occurred while saving.';
|
||||
} finally {
|
||||
is_loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
let result;
|
||||
if (person?.person_id_random) {
|
||||
// Update existing
|
||||
result = await core_func.update_ae_obj__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: person.person_id_random,
|
||||
data_kv: payload,
|
||||
log_lvl: 1
|
||||
});
|
||||
} else {
|
||||
// Create new
|
||||
result = await core_func.create_ae_obj__person({
|
||||
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 person record. The server rejected the request (400).';
|
||||
}
|
||||
} 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 preset-tonal-surface">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<form
|
||||
onsubmit={handleSubmit}
|
||||
class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
|
||||
<header
|
||||
class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<User size={24} />
|
||||
{person ? 'Edit Person' : 'Create New Person'}
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
{#if onCancel}
|
||||
<button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-surface"
|
||||
onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -163,140 +183,259 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Name Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Identity</legend>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="space-y-1 col-span-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-prefix">Prefix</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-prefix" type="text" bind:value={formData.prefix} placeholder="Mr." />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-prefix">Prefix</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="person-prefix"
|
||||
type="text"
|
||||
bind:value={formData.prefix}
|
||||
placeholder="Mr." />
|
||||
</div>
|
||||
<div class="space-y-1 col-span-3">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-given-name">Given Name</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-given-name" type="text" bind:value={formData.given_name} required placeholder="Jane" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-given-name">Given Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="person-given-name"
|
||||
type="text"
|
||||
bind:value={formData.given_name}
|
||||
required
|
||||
placeholder="Jane" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="space-y-1 col-span-3">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-family-name">Family Name</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-family-name" type="text" bind:value={formData.family_name} required placeholder="Doe" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-family-name">Family Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="person-family-name"
|
||||
type="text"
|
||||
bind:value={formData.family_name}
|
||||
required
|
||||
placeholder="Doe" />
|
||||
</div>
|
||||
<div class="space-y-1 col-span-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-suffix">Suffix</label>
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-suffix" type="text" bind:value={formData.suffix} placeholder="PhD" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-suffix">Suffix</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="person-suffix"
|
||||
type="text"
|
||||
bind:value={formData.suffix}
|
||||
placeholder="PhD" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-middle-name">Middle Name / Informal Name (Nickname)</label>
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-middle-name"
|
||||
>Middle Name / Informal Name (Nickname)</label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-middle-name" type="text" bind:value={formData.middle_name} placeholder="Middle" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="person-middle-name"
|
||||
type="text"
|
||||
bind:value={formData.middle_name}
|
||||
placeholder="Middle" />
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
type="text"
|
||||
bind:value={formData.nickname}
|
||||
placeholder="Nickname" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Contact Information</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Contact Information</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-primary-email">Primary Email</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-primary-email">Primary Email</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Mail size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-primary-email" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="person-primary-email"
|
||||
type="email"
|
||||
bind:value={formData.primary_email}
|
||||
placeholder="jane.doe@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-phone">Phone Number</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-phone">Phone Number</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-phone" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="person-phone"
|
||||
type="tel"
|
||||
bind:value={formData.phone}
|
||||
placeholder="+1 (555) 000-0000" />
|
||||
</div>
|
||||
<small class="opacity-60 text-xs px-1">(Saved only locally until Contact created)</small>
|
||||
<small class="opacity-60 text-xs px-1"
|
||||
>(Saved only locally until Contact created)</small>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-tagline">Tagline</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-tagline">Tagline</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Tag size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-tagline" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="person-tagline"
|
||||
type="text"
|
||||
bind:value={formData.tagline}
|
||||
placeholder="Software Architect & Visionary" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Professional Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Professional</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Professional</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-professional-title">Professional Title</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-professional-title">Professional Title</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Briefcase size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-professional-title" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="person-professional-title"
|
||||
type="text"
|
||||
bind:value={formData.professional_title}
|
||||
placeholder="Senior Engineer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-affiliations">Affiliations</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-affiliations">Affiliations</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Building size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-affiliations" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
id="person-affiliations"
|
||||
type="text"
|
||||
bind:value={formData.affiliations}
|
||||
placeholder="One Sky IT, LLC" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Metadata Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status & Flags</legend>
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>Status & Flags</legend>
|
||||
|
||||
<div class="flex flex-wrap gap-4 pt-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.enable} />
|
||||
<span class="text-sm font-medium">Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.hide} />
|
||||
<span class="text-sm font-medium">Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.priority} />
|
||||
<span class="text-sm font-medium">Priority</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-notes">Notes (Internal)</label>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-notes" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-notes">Notes (Internal)</label>
|
||||
<textarea
|
||||
class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
id="person-notes"
|
||||
rows="3"
|
||||
bind:value={formData.notes}
|
||||
placeholder="Additional details..."></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{#if $ae_loc.manager_access}
|
||||
<!-- Admin/Linking Section -->
|
||||
<fieldset class="space-y-4 md:col-span-2 border-t border-surface-500/30 pt-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">System Linking (Managers Only)</legend>
|
||||
<fieldset
|
||||
class="space-y-4 md:col-span-2 border-t border-surface-500/30 pt-4">
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
>System Linking (Managers Only)</legend>
|
||||
|
||||
<div class="space-y-1 max-w-md">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-user-id-random">Linked User ID (Random)</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="person-user-id-random"
|
||||
>Linked User ID (Random)</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Link size={16} /></div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400 p-2"
|
||||
id="person-user-id-random"
|
||||
type="text"
|
||||
bind:value={formData.user_id_random}
|
||||
placeholder="e.g. AB12CD34"
|
||||
/>
|
||||
placeholder="e.g. AB12CD34" />
|
||||
</div>
|
||||
<small class="opacity-60 text-[10px] uppercase px-1 tracking-tighter">Enter the unique random ID of the user account to link to this person.</small>
|
||||
<small
|
||||
class="opacity-60 text-[10px] uppercase px-1 tracking-tighter"
|
||||
>Enter the unique random ID of the user account to link
|
||||
to this person.</small>
|
||||
</div>
|
||||
</fieldset>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
|
||||
<button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{/if}
|
||||
|
||||
@@ -1,53 +1,63 @@
|
||||
<script lang="ts">
|
||||
import { Filter, Plus, Search, SearchCode, User } from '@lucide/svelte';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { load_ae_obj_li__person } from '$lib/ae_core/ae_core__person';
|
||||
import { Filter, Plus, Search, SearchCode, User } from '@lucide/svelte';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { load_ae_obj_li__person } from '$lib/ae_core/ae_core__person';
|
||||
|
||||
interface Props {
|
||||
on_results: (results: any[]) => void;
|
||||
}
|
||||
interface Props {
|
||||
on_results: (results: any[]) => void;
|
||||
}
|
||||
|
||||
let { on_results }: Props = $props();
|
||||
let { on_results }: Props = $props();
|
||||
|
||||
let qry_str = $state('');
|
||||
let loading = $state(false);
|
||||
let qry_enabled = $state('enabled');
|
||||
let qry_hidden = $state('not_hidden');
|
||||
let qry_str = $state('');
|
||||
let loading = $state(false);
|
||||
let qry_enabled = $state('enabled');
|
||||
let qry_hidden = $state('not_hidden');
|
||||
|
||||
async function handle_search() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
async function handle_search() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
|
||||
// V3 search logic
|
||||
const results = await load_ae_obj_li__person({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
// qry_str: qry_str || null, // Assuming load_ae_obj_li__person supports qry_str in the future or we use search_ae_obj
|
||||
log_lvl: 1
|
||||
});
|
||||
// V3 search logic
|
||||
const results = await load_ae_obj_li__person({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
// qry_str: qry_str || null, // Assuming load_ae_obj_li__person supports qry_str in the future or we use search_ae_obj
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
// Filter locally for now if needed, or update the API wrapper to support search_query
|
||||
const filtered = qry_str
|
||||
? results.filter(p =>
|
||||
p.full_name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
p.primary_email?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
p.person_id_random?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: results;
|
||||
// Filter locally for now if needed, or update the API wrapper to support search_query
|
||||
const filtered = qry_str
|
||||
? results.filter(
|
||||
(p) =>
|
||||
p.full_name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
p.primary_email
|
||||
?.toLowerCase()
|
||||
.includes(qry_str.toLowerCase()) ||
|
||||
p.person_id_random
|
||||
?.toLowerCase()
|
||||
.includes(qry_str.toLowerCase())
|
||||
)
|
||||
: results;
|
||||
|
||||
on_results(filtered);
|
||||
loading = false;
|
||||
}
|
||||
on_results(filtered);
|
||||
loading = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search People</span>
|
||||
<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">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search People</span>
|
||||
<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
|
||||
@@ -55,9 +65,11 @@
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name, email, or ID..."
|
||||
onkeydown={(e) => e.key === 'Enter' && handle_search()}
|
||||
/>
|
||||
<button class="preset-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}>
|
||||
onkeydown={(e) => e.key === 'Enter' && handle_search()} />
|
||||
<button
|
||||
class="preset-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 text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -69,8 +81,13 @@
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Account Status</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_enabled}
|
||||
onchange={handle_search}>
|
||||
<option value="all">All Records</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
@@ -78,8 +95,13 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Visibility</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_hidden}
|
||||
onchange={handle_search}>
|
||||
<option value="all">All Visible</option>
|
||||
<option value="not_hidden">Publicly Visible</option>
|
||||
<option value="hidden">System Hidden</option>
|
||||
|
||||
@@ -1,86 +1,112 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
person_id: string;
|
||||
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
|
||||
log_lvl?: number;
|
||||
interface Props {
|
||||
person_id: string;
|
||||
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
|
||||
log_lvl?: number;
|
||||
}
|
||||
|
||||
let { person_id, display_mode = 'default', log_lvl = 0 }: Props = $props();
|
||||
|
||||
console.log(`ae_core person_view.svelte`);
|
||||
|
||||
import { liveQuery } from 'dexie';
|
||||
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
import {
|
||||
Archive,
|
||||
BookOpen,
|
||||
Building2,
|
||||
Check,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Fingerprint,
|
||||
IdCard,
|
||||
Key,
|
||||
LoaderCircle,
|
||||
Mail,
|
||||
Save,
|
||||
Star,
|
||||
Tag,
|
||||
ToggleLeft,
|
||||
ToggleRight,
|
||||
TriangleAlert,
|
||||
User,
|
||||
UserRound
|
||||
} from '@lucide/svelte';
|
||||
// import { db_events } from "$lib/db_events";
|
||||
// import { events_loc, events_sess, events_slct, events_trigger } from '$lib/stores/ae_events_stores';
|
||||
// import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
|
||||
let ae_placeholder_li: key_val = {};
|
||||
let ae_promises: key_val = $state({}); // Promise<any>;
|
||||
let ae_tmp: key_val = $state({});
|
||||
|
||||
$effect(() => {
|
||||
if (log_lvl) {
|
||||
console.log(`person_id:`, person_id);
|
||||
}
|
||||
});
|
||||
|
||||
let { person_id, display_mode = 'default', log_lvl = 0 }: Props = $props();
|
||||
let lq__person_obj = $derived(
|
||||
liveQuery(async () => {
|
||||
let results = await db_core.person.get(person_id);
|
||||
return results;
|
||||
})
|
||||
);
|
||||
|
||||
console.log(`ae_core person_view.svelte`);
|
||||
ae_tmp.value__data_json = null;
|
||||
$effect(() => {
|
||||
if ($lq__person_obj?.data_json && ae_tmp.value__data_json === null) {
|
||||
ae_tmp.value__data_json = JSON.stringify(
|
||||
$lq__person_obj.data_json,
|
||||
null,
|
||||
4
|
||||
);
|
||||
// ae_tmp.value__data_json = JSON.parse(JSON.stringify($lq__person_obj.data_json));
|
||||
// JSON.stringify(jsObj, null, 4);
|
||||
}
|
||||
});
|
||||
|
||||
import { liveQuery } from 'dexie';
|
||||
ae_tmp.valid__data_json = null;
|
||||
$effect(() => {
|
||||
if (ae_tmp.value__data_json && ae_tmp.value__data_json.length) {
|
||||
console.log(
|
||||
`ae_tmp.value__data_json.length:`,
|
||||
ae_tmp.value__data_json.length
|
||||
);
|
||||
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
import { Archive, BookOpen, Building2, Check, Eye, EyeOff, Fingerprint, IdCard, Key, LoaderCircle, Mail, Save, Star, Tag, ToggleLeft, ToggleRight, TriangleAlert, User, UserRound } from '@lucide/svelte';
|
||||
// import { db_events } from "$lib/db_events";
|
||||
// import { events_loc, events_sess, events_slct, events_trigger } from '$lib/stores/ae_events_stores';
|
||||
// import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
|
||||
let ae_placeholder_li: key_val = {};
|
||||
let ae_promises: key_val = $state({}); // Promise<any>;
|
||||
let ae_tmp: key_val = $state({});
|
||||
|
||||
|
||||
$effect(() => {
|
||||
if (log_lvl) {
|
||||
console.log(`person_id:`, person_id);
|
||||
try {
|
||||
JSON.parse(ae_tmp.value__data_json);
|
||||
ae_tmp.valid__data_json = true;
|
||||
} catch (e) {
|
||||
ae_tmp.valid__data_json = false;
|
||||
console.error(`JSON.parse error:`, e);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let lq__person_obj = $derived(
|
||||
liveQuery(async () => {
|
||||
let results = await db_core.person.get(person_id);
|
||||
return results;
|
||||
})
|
||||
);
|
||||
|
||||
ae_tmp.value__data_json = null;
|
||||
$effect(() => {
|
||||
if ($lq__person_obj?.data_json && ae_tmp.value__data_json === null) {
|
||||
ae_tmp.value__data_json = JSON.stringify($lq__person_obj.data_json, null, 4);
|
||||
// ae_tmp.value__data_json = JSON.parse(JSON.stringify($lq__person_obj.data_json));
|
||||
// JSON.stringify(jsObj, null, 4);
|
||||
}
|
||||
});
|
||||
|
||||
ae_tmp.valid__data_json = null;
|
||||
$effect(() => {
|
||||
if (ae_tmp.value__data_json && ae_tmp.value__data_json.length) {
|
||||
console.log(`ae_tmp.value__data_json.length:`, ae_tmp.value__data_json.length);
|
||||
|
||||
try {
|
||||
JSON.parse(ae_tmp.value__data_json);
|
||||
ae_tmp.valid__data_json = true;
|
||||
} catch (e) {
|
||||
ae_tmp.valid__data_json = false;
|
||||
console.error(`JSON.parse error:`, e);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// let tmp_agree = false;
|
||||
// let tmp_opt_out: key_val = {
|
||||
// audio: false,
|
||||
// video: false,
|
||||
// transcription_and_publication: false,
|
||||
// publication_in_app: false
|
||||
// };
|
||||
// let tmp_agree = false;
|
||||
// let tmp_opt_out: key_val = {
|
||||
// audio: false,
|
||||
// video: false,
|
||||
// transcription_and_publication: false,
|
||||
// publication_in_app: false
|
||||
// };
|
||||
</script>
|
||||
|
||||
{#if $lq__person_obj}
|
||||
@@ -100,8 +126,12 @@
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.external_id}
|
||||
allow_null={true}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<IdCard size="1em" />
|
||||
External ID:
|
||||
<span class="font-bold">
|
||||
@@ -117,12 +147,17 @@
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.external_sys_id}
|
||||
allow_null={true}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<Fingerprint size="1em" />
|
||||
External System ID:
|
||||
<span class="font-bold">
|
||||
{@html $lq__person_obj.external_sys_id ?? ae_snip.html__not_set}
|
||||
{@html $lq__person_obj.external_sys_id ??
|
||||
ae_snip.html__not_set}
|
||||
</span>
|
||||
</Element_ae_obj_field_editor>
|
||||
</li>
|
||||
@@ -136,8 +171,12 @@
|
||||
field_name={'given_name'}
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.given_name}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<span class="font-bold">
|
||||
{@html $lq__person_obj.given_name ?? ae_snip.html__not_set}
|
||||
</span>
|
||||
@@ -148,8 +187,12 @@
|
||||
field_name={'family_name'}
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.family_name}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<span class="font-bold">
|
||||
{@html $lq__person_obj.family_name ?? ae_snip.html__not_set}
|
||||
</span>
|
||||
@@ -163,17 +206,21 @@
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.primary_email}
|
||||
allow_null={true}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<Mail size="1em" />
|
||||
<span class="font-bold">
|
||||
{#if $lq__person_obj.primary_email}
|
||||
<a
|
||||
href="mailto:{$lq__person_obj?.primary_email}"
|
||||
class="text-blue-500 underline hover:text-blue-800"
|
||||
title="Person's primary email address"
|
||||
>
|
||||
{@html $lq__person_obj.primary_email ?? 'email' + ae_snip.html__not_set}
|
||||
title="Person's primary email address">
|
||||
{@html $lq__person_obj.primary_email ??
|
||||
'email' + ae_snip.html__not_set}
|
||||
</a>
|
||||
{:else}
|
||||
email {@html ae_snip.html__not_set}
|
||||
@@ -189,11 +236,16 @@
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.affiliations}
|
||||
allow_null={true}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<Building2 size="1em" />
|
||||
<span class="font-bold">
|
||||
{@html $lq__person_obj.affiliations ?? 'affiliations' + ae_snip.html__not_set}
|
||||
{@html $lq__person_obj.affiliations ??
|
||||
'affiliations' + ae_snip.html__not_set}
|
||||
</span>
|
||||
</Element_ae_obj_field_editor>
|
||||
</li>
|
||||
@@ -205,8 +257,12 @@
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.professional_title}
|
||||
allow_null={true}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<Tag size="1em" />
|
||||
<span class="font-bold">
|
||||
{@html $lq__person_obj.professional_title &&
|
||||
@@ -224,12 +280,17 @@
|
||||
field_type={'text'}
|
||||
current_value={$lq__person_obj.passcode}
|
||||
allow_null={true}
|
||||
on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
|
||||
>
|
||||
on_success={() =>
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
})}>
|
||||
<UserRound size="1em" />
|
||||
Passcode:
|
||||
<span class="font-bold">
|
||||
{@html $lq__person_obj.passcode ?? 'passcode' + ae_snip.html__not_set}
|
||||
{@html $lq__person_obj.passcode ??
|
||||
'passcode' + ae_snip.html__not_set}
|
||||
</span>
|
||||
</Element_ae_obj_field_editor>
|
||||
</li>
|
||||
@@ -237,16 +298,25 @@
|
||||
<li hidden={!$ae_loc.trusted_access}>
|
||||
<!-- Show/Hide -->
|
||||
{#if $ae_loc.trusted_access}
|
||||
<span class="text-sm">{$lq__person_obj?.hide ? 'Hidden' : 'Not Hidden'}</span>
|
||||
<span class="text-sm"
|
||||
>{$lq__person_obj?.hide ? 'Hidden' : 'Not Hidden'}</span>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { hide: !$lq__person_obj?.hide } });
|
||||
core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
|
||||
await api.update_ae_obj({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: 'person',
|
||||
obj_id: $lq__person_obj?.person_id_random,
|
||||
fields: { hide: !$lq__person_obj?.hide }
|
||||
});
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning"
|
||||
>
|
||||
class="btn btn-sm preset-tonal-warning">
|
||||
{#if $ae_loc.trusted_access}
|
||||
{#if $lq__person_obj?.hide}
|
||||
<Eye size="1em" class="m-1" /> Unhide?
|
||||
@@ -261,43 +331,61 @@
|
||||
|
||||
<!-- Enable/Disable -->
|
||||
{#if $ae_loc.trusted_access}
|
||||
<span class="text-sm">{$lq__person_obj?.enable ? 'Enabled' : 'Disabled'}</span>
|
||||
<span class="text-sm"
|
||||
>{$lq__person_obj?.enable ? 'Enabled' : 'Disabled'}</span>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { enable: !$lq__person_obj?.enable } });
|
||||
core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
|
||||
await api.update_ae_obj({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: 'person',
|
||||
obj_id: $lq__person_obj?.person_id_random,
|
||||
fields: { enable: !$lq__person_obj?.enable }
|
||||
});
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning"
|
||||
>
|
||||
class="btn btn-sm preset-tonal-warning">
|
||||
{#if $ae_loc.trusted_access}
|
||||
{#if $lq__person_obj?.enable}
|
||||
<ToggleRight size="1em" class="m-1" /> Disable?
|
||||
{:else}
|
||||
<ToggleLeft size="1em" class="m-1" /> Enable?
|
||||
{/if}
|
||||
{:else if $lq__person_obj?.enable}
|
||||
<ToggleRight size="1em" class="m-1" /> Disable
|
||||
{:else}
|
||||
{#if $lq__person_obj?.enable}
|
||||
<ToggleRight size="1em" class="m-1" /> Disable
|
||||
{:else}
|
||||
<ToggleLeft size="1em" class="m-1" /> Enable
|
||||
{/if}
|
||||
<ToggleLeft size="1em" class="m-1" /> Enable
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Priority/Not -->
|
||||
{#if $ae_loc.trusted_access}
|
||||
<span class="text-sm">{$lq__person_obj?.priority ? 'Priority' : 'Not Priority'}</span>
|
||||
<span class="text-sm"
|
||||
>{$lq__person_obj?.priority
|
||||
? 'Priority'
|
||||
: 'Not Priority'}</span>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { priority: !$lq__person_obj?.priority } });
|
||||
core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
|
||||
await api.update_ae_obj({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: 'person',
|
||||
obj_id: $lq__person_obj?.person_id_random,
|
||||
fields: { priority: !$lq__person_obj?.priority }
|
||||
});
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning"
|
||||
>
|
||||
class="btn btn-sm preset-tonal-warning">
|
||||
<Star size="1em" class="m-1" />
|
||||
{#if $ae_loc.trusted_access}
|
||||
{$lq__person_obj?.priority ? 'Not Priority?' : 'Priority?'}
|
||||
@@ -308,21 +396,38 @@
|
||||
|
||||
<!-- Allow Auth Key/Not -->
|
||||
{#if $ae_loc.trusted_access}
|
||||
<span class="text-sm">{$lq__person_obj?.allow_auth_key ? 'Allow Auth Key' : 'Not Allow Auth Key'}</span>
|
||||
<span class="text-sm"
|
||||
>{$lq__person_obj?.allow_auth_key
|
||||
? 'Allow Auth Key'
|
||||
: 'Not Allow Auth Key'}</span>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { allow_auth_key: !$lq__person_obj?.allow_auth_key } });
|
||||
core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
|
||||
await api.update_ae_obj({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: 'person',
|
||||
obj_id: $lq__person_obj?.person_id_random,
|
||||
fields: {
|
||||
allow_auth_key: !$lq__person_obj?.allow_auth_key
|
||||
}
|
||||
});
|
||||
core_func.load_ae_obj_id__person({
|
||||
api_cfg: $ae_api,
|
||||
person_id: $lq__person_obj?.person_id_random,
|
||||
log_lvl: 1
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning"
|
||||
>
|
||||
class="btn btn-sm preset-tonal-warning">
|
||||
<Key size="1em" class="m-1" />
|
||||
{#if $ae_loc.trusted_access}
|
||||
{$lq__person_obj?.allow_auth_key ? 'Not Allow Auth Key?' : 'Allow Auth Key?'}
|
||||
{$lq__person_obj?.allow_auth_key
|
||||
? 'Not Allow Auth Key?'
|
||||
: 'Allow Auth Key?'}
|
||||
{:else}
|
||||
{$lq__person_obj?.allow_auth_key ? 'Not Allow Auth Key' : 'Allow Auth Key'}
|
||||
{$lq__person_obj?.allow_auth_key
|
||||
? 'Not Allow Auth Key'
|
||||
: 'Allow Auth Key'}
|
||||
{/if}
|
||||
</button>
|
||||
</li>
|
||||
@@ -332,7 +437,9 @@
|
||||
<label for="person__data_json" class="label">
|
||||
<BookOpen size="1em" />
|
||||
Person JSON Data
|
||||
<span class="text-sm text-gray-500"> (no character limit) </span>
|
||||
<span class="text-sm text-gray-500">
|
||||
(no character limit)
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
@@ -348,8 +455,7 @@
|
||||
rows="8"
|
||||
cols="70"
|
||||
bind:value={ae_tmp.value__data_json}
|
||||
placeholder="Enter data_json here"
|
||||
></textarea>
|
||||
placeholder="Enter data_json here"></textarea>
|
||||
<!-- {/if} -->
|
||||
</div>
|
||||
|
||||
@@ -393,8 +499,7 @@
|
||||
// console.log(update_result);
|
||||
// return update_result;
|
||||
});
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{#await ae_promises.update__person_obj}
|
||||
<LoaderCircle size="1em" class="animate-spin mx-1" />
|
||||
{:then}
|
||||
|
||||
@@ -1,99 +1,127 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { load_ae_obj_li__site, create_ae_obj__site } from '$lib/ae_core/ae_core__site';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Calendar, ExternalLink, Globe, ListFilter, Plus, RefreshCcw, Search, ShieldCheck, X } from '@lucide/svelte';
|
||||
let site_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
load_ae_obj_li__site,
|
||||
create_ae_obj__site
|
||||
} from '$lib/ae_core/ae_core__site';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Calendar,
|
||||
ExternalLink,
|
||||
Globe,
|
||||
ListFilter,
|
||||
Plus,
|
||||
RefreshCcw,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
let site_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? site_li.filter(s =>
|
||||
s.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
s.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: site_li
|
||||
);
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? site_li.filter(
|
||||
(s) =>
|
||||
s.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
s.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: site_li
|
||||
);
|
||||
|
||||
async function load_sites() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
site_li = await load_ae_obj_li__site({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
async function load_sites() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
loading = true;
|
||||
site_li = await load_ae_obj_li__site({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
load_sites();
|
||||
onMount(() => {
|
||||
load_sites();
|
||||
});
|
||||
|
||||
async function handle_add_site() {
|
||||
const name = prompt('Enter new site name:');
|
||||
if (!name) return;
|
||||
|
||||
const code = prompt('Enter site code (optional):');
|
||||
|
||||
const new_site = await create_ae_obj__site({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
data_kv: {
|
||||
name,
|
||||
code: code || undefined,
|
||||
enable: true
|
||||
},
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
async function handle_add_site() {
|
||||
const name = prompt('Enter new site name:');
|
||||
if (!name) return;
|
||||
|
||||
const code = prompt('Enter site code (optional):');
|
||||
|
||||
const new_site = await create_ae_obj__site({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $ae_loc.account_id,
|
||||
data_kv: {
|
||||
name,
|
||||
code: code || undefined,
|
||||
enable: true
|
||||
},
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (new_site) {
|
||||
load_sites();
|
||||
}
|
||||
if (new_site) {
|
||||
load_sites();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<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">
|
||||
<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-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Globe size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Site Management</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Digital Properties & Domains</p>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
Digital Properties & Domains
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={handle_add_site}>
|
||||
<Plus size={16} class="mr-2" /> Add Site
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</span>
|
||||
<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">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Sites</span>
|
||||
<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 or code..."
|
||||
/>
|
||||
<button class="preset-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_sites} disabled={loading}>
|
||||
placeholder="Search by name or code..." />
|
||||
<button
|
||||
class="preset-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_sites}
|
||||
disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide">Refresh</span>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -101,8 +129,13 @@
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Status</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_enabled}
|
||||
onchange={load_sites}>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
@@ -110,8 +143,13 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Visibility</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_hidden}
|
||||
onchange={load_sites}>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
@@ -123,56 +161,88 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Globe size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Sites Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Sites for this account will appear here. Add your first site to get started.</p>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
Sites for this account will appear here. Add your first site to
|
||||
get started.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<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 Properties
|
||||
<span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{filtered_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as site (site.site_id_random)}
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div
|
||||
class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4 flex gap-1">
|
||||
{#if site.hide}
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
<span
|
||||
class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm"
|
||||
>Hidden</span>
|
||||
{/if}
|
||||
<span class="badge {site.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span
|
||||
class="badge {site.enable
|
||||
? 'preset-filled-success'
|
||||
: 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{site.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<Globe size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">{site.name}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">Code: {site.code || '--'}</p>
|
||||
<p class="font-black tracking-tight truncate">
|
||||
{site.name}
|
||||
</p>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">
|
||||
Code: {site.code || '--'}
|
||||
</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">
|
||||
<Calendar size={14} class="text-primary-500 shrink-0" />
|
||||
<span>Created: {new Date(site.created_on).toLocaleDateString()}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Calendar
|
||||
size={14}
|
||||
class="text-primary-500 shrink-0" />
|
||||
<span
|
||||
>Created: {new Date(
|
||||
site.created_on
|
||||
).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck size={14} class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate">{site.site_id_random}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck
|
||||
size={14}
|
||||
class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate"
|
||||
>{site.site_id_random}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
|
||||
<a
|
||||
class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
|
||||
href="/core/sites/{site.site_id_random}">
|
||||
Manage Site
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,125 +1,145 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__site,
|
||||
update_ae_obj__site,
|
||||
delete_ae_obj_id__site,
|
||||
load_ae_obj_li__site_domain,
|
||||
create_ae_obj__site_domain,
|
||||
update_ae_obj__site_domain,
|
||||
delete_ae_obj_id__site_domain
|
||||
} from '$lib/ae_core/ae_core__site';
|
||||
import { editable_fields__site } from '$lib/ae_core/ae_core__site.editable_fields';
|
||||
import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Activity, ArrowLeft, Database, ExternalLink, Globe, Info, Key, Plus, Save, Settings, Trash2 } from '@lucide/svelte';
|
||||
import AE_Comp_Site_Config_Editor from '$lib/ae_core/ae_comp__site_config_editor.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__site,
|
||||
update_ae_obj__site,
|
||||
delete_ae_obj_id__site,
|
||||
load_ae_obj_li__site_domain,
|
||||
create_ae_obj__site_domain,
|
||||
update_ae_obj__site_domain,
|
||||
delete_ae_obj_id__site_domain
|
||||
} from '$lib/ae_core/ae_core__site';
|
||||
import { editable_fields__site } from '$lib/ae_core/ae_core__site.editable_fields';
|
||||
import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
Database,
|
||||
ExternalLink,
|
||||
Globe,
|
||||
Info,
|
||||
Key,
|
||||
Plus,
|
||||
Save,
|
||||
Settings,
|
||||
Trash2
|
||||
} from '@lucide/svelte';
|
||||
import AE_Comp_Site_Config_Editor from '$lib/ae_core/ae_comp__site_config_editor.svelte';
|
||||
|
||||
let site_id = $derived($page.params.site_id ?? '');
|
||||
let site: any = $state(null);
|
||||
let domain_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
let site_id = $derived($page.params.site_id ?? '');
|
||||
let site: any = $state(null);
|
||||
let domain_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
|
||||
async function load_data() {
|
||||
loading = true;
|
||||
site = await load_ae_obj_id__site({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
domain_li = await load_ae_obj_li__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
async function load_data() {
|
||||
loading = true;
|
||||
site = await load_ae_obj_id__site({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
domain_li = await load_ae_obj_li__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_data();
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
async function handle_save_site() {
|
||||
saving = true;
|
||||
const data_kv: any = {};
|
||||
editable_fields__site.forEach((field) => {
|
||||
if (site[field] !== undefined) {
|
||||
data_kv[field] = site[field];
|
||||
}
|
||||
load_data();
|
||||
});
|
||||
|
||||
async function handle_save_site() {
|
||||
saving = true;
|
||||
const data_kv: any = {};
|
||||
editable_fields__site.forEach(field => {
|
||||
if (site[field] !== undefined) {
|
||||
data_kv[field] = site[field];
|
||||
}
|
||||
});
|
||||
// Ensure cfg_json is included explicitly
|
||||
data_kv.cfg_json = site.cfg_json;
|
||||
|
||||
// Ensure cfg_json is included explicitly
|
||||
data_kv.cfg_json = site.cfg_json;
|
||||
await update_ae_obj__site({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
saving = false;
|
||||
}
|
||||
|
||||
await update_ae_obj__site({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
saving = false;
|
||||
}
|
||||
async function handle_add_domain() {
|
||||
const fqdn = prompt('Enter new domain (e.g. example.com):');
|
||||
if (!fqdn) return;
|
||||
|
||||
async function handle_add_domain() {
|
||||
const fqdn = prompt('Enter new domain (e.g. example.com):');
|
||||
if (!fqdn) return;
|
||||
await create_ae_obj__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
data_kv: { fqdn, enable: true },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_data();
|
||||
}
|
||||
|
||||
await create_ae_obj__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
data_kv: { fqdn, enable: true },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_data();
|
||||
}
|
||||
async function handle_toggle_domain(dom: any) {
|
||||
await update_ae_obj__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
site_domain_id: dom.site_domain_id_random,
|
||||
data_kv: { enable: !dom.enable },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_data();
|
||||
}
|
||||
|
||||
async function handle_toggle_domain(dom: any) {
|
||||
await update_ae_obj__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
site_domain_id: dom.site_domain_id_random,
|
||||
data_kv: { enable: !dom.enable },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_data();
|
||||
}
|
||||
|
||||
async function handle_delete_domain(dom: any) {
|
||||
if (!confirm(`Remove domain ${dom.fqdn}?`)) return;
|
||||
await delete_ae_obj_id__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
site_domain_id: dom.site_domain_id_random,
|
||||
method: 'delete',
|
||||
log_lvl: 1
|
||||
});
|
||||
load_data();
|
||||
}
|
||||
async function handle_delete_domain(dom: any) {
|
||||
if (!confirm(`Remove domain ${dom.fqdn}?`)) return;
|
||||
await delete_ae_obj_id__site_domain({
|
||||
api_cfg: $ae_api,
|
||||
site_id,
|
||||
site_domain_id: dom.site_domain_id_random,
|
||||
method: 'delete',
|
||||
log_lvl: 1
|
||||
});
|
||||
load_data();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/sites">
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-surface shadow-sm"
|
||||
href="/core/sites">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Globe size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">{site?.name ?? 'Loading...'}</h1>
|
||||
<h1 class="h2 font-black tracking-tight">
|
||||
{site?.name ?? 'Loading...'}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={handle_save_site}
|
||||
disabled={loading || saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -131,60 +151,98 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if site}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Site Config -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Settings size={18} class="text-primary-500" /> Site Configuration
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Name</span>
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Site Name</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-3"
|
||||
type="text"
|
||||
bind:value={site.name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Code</span>
|
||||
<input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Site Code</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg font-mono p-3"
|
||||
type="text"
|
||||
bind:value={site.code} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Tagline</span>
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Tagline</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-3"
|
||||
type="text"
|
||||
bind:value={site.tagline} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Description</span>
|
||||
<textarea
|
||||
class="textarea preset-filled-surface rounded-lg p-3"
|
||||
rows="2"
|
||||
bind:value={site.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Site JSON Config -->
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Database size={18} class="text-warning-500" /> Site Settings (cfg_json)
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Database size={18} class="text-warning-500" /> Site Settings
|
||||
(cfg_json)
|
||||
</h3>
|
||||
<AE_Comp_Site_Config_Editor
|
||||
bind:cfg_json={site.cfg_json}
|
||||
on_save={handle_save_site}
|
||||
/>
|
||||
on_save={handle_save_site} />
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Key size={18} class="text-secondary-500" /> Access Control
|
||||
</h3>
|
||||
<div class="flex flex-col gap-4">
|
||||
<label class="flex items-center space-x-2 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={site.restrict_access} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Restrict Access</span>
|
||||
<label
|
||||
class="flex items-center space-x-2 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={site.restrict_access} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Restrict Access</span>
|
||||
</label>
|
||||
{#if site.restrict_access}
|
||||
<div class="space-y-1 max-w-md animate-fade-in">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Access Key</span>
|
||||
<input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Access Key</span>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg font-mono p-3"
|
||||
type="text"
|
||||
bind:value={site.access_key} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -193,38 +251,67 @@
|
||||
|
||||
<!-- Domains Management -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center border-b border-surface-500/30 pb-2">
|
||||
<h3 class="h4 font-bold flex items-center gap-2">
|
||||
<Globe size={18} class="text-tertiary-500" /> Site Domains
|
||||
</h3>
|
||||
<button class="btn btn-icon btn-sm preset-filled-secondary shadow-md" onclick={handle_add_domain} title="Add Domain">
|
||||
<button
|
||||
class="btn btn-icon btn-sm preset-filled-secondary shadow-md"
|
||||
onclick={handle_add_domain}
|
||||
title="Add Domain">
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if domain_li.length === 0}
|
||||
<p class="text-sm opacity-60 text-center py-8 bg-surface-500/5 rounded-lg border-2 border-dashed border-surface-500/20">No domains configured.</p>
|
||||
<p
|
||||
class="text-sm opacity-60 text-center py-8 bg-surface-500/5 rounded-lg border-2 border-dashed border-surface-500/20">
|
||||
No domains configured.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each domain_li as dom (dom.site_domain_id_random)}
|
||||
<div class="card p-3 preset-tonal-surface shadow-sm border border-surface-500/10 flex justify-between items-center group">
|
||||
<div
|
||||
class="card p-3 preset-tonal-surface shadow-sm border border-surface-500/10 flex justify-between items-center group">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-sm flex items-center gap-1">
|
||||
<span
|
||||
class="font-bold text-sm flex items-center gap-1">
|
||||
{dom.fqdn}
|
||||
<a href="https://{dom.fqdn}" target="_blank" rel="noopener noreferrer" class="opacity-30 group-hover:opacity-100 transition-opacity">
|
||||
<a
|
||||
href="https://{dom.fqdn}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="opacity-30 group-hover:opacity-100 transition-opacity">
|
||||
<ExternalLink size={12} />
|
||||
</a>
|
||||
</span>
|
||||
<span class="text-[10px] uppercase font-bold tracking-tighter opacity-50">
|
||||
Key: <code class="text-primary-500">{dom.access_key || '--'}</code> • {dom.enable ? 'Active' : 'Disabled'}
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-tighter opacity-50">
|
||||
Key: <code class="text-primary-500"
|
||||
>{dom.access_key || '--'}</code>
|
||||
• {dom.enable
|
||||
? 'Active'
|
||||
: 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button class="btn btn-icon btn-sm {dom.enable ? 'preset-tonal-success' : 'preset-tonal-error'}" onclick={() => handle_toggle_domain(dom)} title="Toggle Active">
|
||||
<button
|
||||
class="btn btn-icon btn-sm {dom.enable
|
||||
? 'preset-tonal-success'
|
||||
: 'preset-tonal-error'}"
|
||||
onclick={() =>
|
||||
handle_toggle_domain(dom)}
|
||||
title="Toggle Active">
|
||||
<Save size={14} />
|
||||
</button>
|
||||
<button class="btn btn-icon btn-sm preset-tonal-error" onclick={() => handle_delete_domain(dom)} title="Delete Domain">
|
||||
<button
|
||||
class="btn btn-icon btn-sm preset-tonal-error"
|
||||
onclick={() =>
|
||||
handle_delete_domain(dom)}
|
||||
title="Delete Domain">
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -234,18 +321,32 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Activity size={18} class="text-error-500" /> System Status
|
||||
</h3>
|
||||
<div class="space-y-4 py-2">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={site.enable} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Site Enabled</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={site.enable} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Site Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={site.hide} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Public</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={site.hide} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Hidden from Public</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,75 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { load_ae_obj_li__user, create_ae_obj__user } from '$lib/ae_core/ae_core__user';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Activity, Fingerprint, Globe, Landmark, ListFilter, Mail, Plus, Search, ShieldCheck, User, X } from '@lucide/svelte';
|
||||
let user_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_str = $state('');
|
||||
let qry_enabled = $state('all');
|
||||
let qry_account_scope = $state('all'); // 'all', 'account', 'global'
|
||||
let show_add_form = $state(false);
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
load_ae_obj_li__user,
|
||||
create_ae_obj__user
|
||||
} from '$lib/ae_core/ae_core__user';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Activity,
|
||||
Fingerprint,
|
||||
Globe,
|
||||
Landmark,
|
||||
ListFilter,
|
||||
Mail,
|
||||
Plus,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
User,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
let user_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_str = $state('');
|
||||
let qry_enabled = $state('all');
|
||||
let qry_account_scope = $state('all'); // 'all', 'account', 'global'
|
||||
let show_add_form = $state(false);
|
||||
|
||||
async function load_users() {
|
||||
loading = true;
|
||||
async function load_users() {
|
||||
loading = true;
|
||||
|
||||
let for_obj_id: string | null = $ae_loc.account_id;
|
||||
let include_global = true;
|
||||
let for_obj_id: string | null = $ae_loc.account_id;
|
||||
let include_global = true;
|
||||
|
||||
if (qry_account_scope === 'account') {
|
||||
include_global = false;
|
||||
} else if (qry_account_scope === 'global') {
|
||||
for_obj_id = null;
|
||||
include_global = true; // This will trigger the (account_id IS NULL) logic in the search if no qry_str
|
||||
}
|
||||
|
||||
user_li = await load_ae_obj_li__user({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: for_obj_id,
|
||||
include_global: include_global,
|
||||
qry_str: qry_str || null,
|
||||
enabled: qry_enabled as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
if (qry_account_scope === 'account') {
|
||||
include_global = false;
|
||||
} else if (qry_account_scope === 'global') {
|
||||
for_obj_id = null;
|
||||
include_global = true; // This will trigger the (account_id IS NULL) logic in the search if no qry_str
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_users();
|
||||
user_li = await load_ae_obj_li__user({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: for_obj_id,
|
||||
include_global: include_global,
|
||||
qry_str: qry_str || null,
|
||||
enabled: qry_enabled as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function handle_add_user() {
|
||||
const username = prompt('Enter new username:');
|
||||
if (!username) return;
|
||||
const email = prompt('Enter email address:');
|
||||
|
||||
// Link to account if scope is 'account' or 'all', otherwise create global user
|
||||
const account_id = qry_account_scope === 'global' ? undefined : $ae_loc.account_id;
|
||||
|
||||
await create_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
account_id: account_id,
|
||||
data_kv: { username, email, enable: true },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_users();
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_users();
|
||||
});
|
||||
|
||||
async function handle_add_user() {
|
||||
const username = prompt('Enter new username:');
|
||||
if (!username) return;
|
||||
const email = prompt('Enter email address:');
|
||||
|
||||
// Link to account if scope is 'account' or 'all', otherwise create global user
|
||||
const account_id =
|
||||
qry_account_scope === 'global' ? undefined : $ae_loc.account_id;
|
||||
|
||||
await create_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
account_id: account_id,
|
||||
data_kv: { username, email, enable: true },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_users();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<ShieldCheck size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">User Management</h1>
|
||||
</div>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={() => (show_add_form = !show_add_form)}>
|
||||
{#if show_add_form}
|
||||
<X size={16} class="mr-2" /> Cancel
|
||||
{:else}
|
||||
@@ -78,12 +97,17 @@
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</span>
|
||||
<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">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Users</span>
|
||||
<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
|
||||
@@ -91,13 +115,16 @@
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search username or email..."
|
||||
onkeydown={(e) => e.key === 'Enter' && load_users()}
|
||||
/>
|
||||
<button class="preset-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}>
|
||||
onkeydown={(e) => e.key === 'Enter' && load_users()} />
|
||||
<button
|
||||
class="preset-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 text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide">Go</span>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Go</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -105,8 +132,13 @@
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Scope</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Scope</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_account_scope}
|
||||
onchange={load_users}>
|
||||
<option value="all">All (Current + Global)</option>
|
||||
<option value="account">Account Only</option>
|
||||
<option value="global">Global Only</option>
|
||||
@@ -114,8 +146,13 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Status</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_enabled}
|
||||
onchange={load_users}>
|
||||
<option value="all">All</option>
|
||||
<option value="enabled">Enabled</option>
|
||||
<option value="not_enabled">Disabled</option>
|
||||
@@ -127,47 +164,67 @@
|
||||
|
||||
{#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 class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if user_li.length === 0}
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Fingerprint size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Users Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your search or scope filters.</p>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
Try adjusting your search or scope filters.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<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 preset-tonal-secondary ml-auto">{user_li.length} found</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{user_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each user_li as user (user.user_id_random)}
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
|
||||
<div
|
||||
class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
|
||||
<header class="flex justify-between items-start">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="avatar preset-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>
|
||||
<p class="font-black tracking-tight">{user.username}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50">{user.name || 'No Display Name'}</p>
|
||||
<p class="font-black tracking-tight">
|
||||
{user.username}
|
||||
</p>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold opacity-50">
|
||||
{user.name || 'No Display Name'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
{#if user.super}
|
||||
<span class="badge preset-filled-error text-[8px] uppercase font-bold">Super</span>
|
||||
<span
|
||||
class="badge preset-filled-error text-[8px] uppercase font-bold"
|
||||
>Super</span>
|
||||
{:else if user.manager}
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold">Manager</span>
|
||||
<span
|
||||
class="badge preset-filled-warning text-[8px] uppercase font-bold"
|
||||
>Manager</span>
|
||||
{/if}
|
||||
{#if !user.account_id && !user.account_id_random}
|
||||
<span class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<span
|
||||
class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<Globe size={8} /> Global
|
||||
</span>
|
||||
{:else}
|
||||
<span class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<span
|
||||
class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<Landmark size={8} /> Account
|
||||
</span>
|
||||
{/if}
|
||||
@@ -175,17 +232,25 @@
|
||||
</header>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<div
|
||||
class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<Mail size={14} class="text-primary-500" />
|
||||
<span class="truncate">{user.email || '--'}</span>
|
||||
<span class="truncate"
|
||||
>{user.email || '--'}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<Activity size={14} class="text-secondary-500" />
|
||||
<span class="font-mono">{user.user_id_random}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<Activity
|
||||
size={14}
|
||||
class="text-secondary-500" />
|
||||
<span class="font-mono"
|
||||
>{user.user_id_random}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/users/{user.user_id_random}">
|
||||
<a
|
||||
class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
|
||||
href="/core/users/{user.user_id_random}">
|
||||
Manage User
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,87 +1,120 @@
|
||||
<script lang="ts">
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { update_ae_obj__user, delete_ae_obj_id__user } from '$lib/ae_core/ae_core__user';
|
||||
import { editable_fields__user } from '$lib/ae_core/ae_core__user.editable_fields';
|
||||
import { Activity, ArrowLeft, CircleCheck, CircleX, Clock, Fingerprint, Key, Lock, Mail, Save, Settings, ShieldCheck, Trash2, User as UserIcon } from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
update_ae_obj__user,
|
||||
delete_ae_obj_id__user
|
||||
} from '$lib/ae_core/ae_core__user';
|
||||
import { editable_fields__user } from '$lib/ae_core/ae_core__user.editable_fields';
|
||||
import {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
CircleCheck,
|
||||
CircleX,
|
||||
Clock,
|
||||
Fingerprint,
|
||||
Key,
|
||||
Lock,
|
||||
Mail,
|
||||
Save,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
User as UserIcon
|
||||
} from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
let user = $state(untrack(() => data.user));
|
||||
let saving = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
user = data.user;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
}
|
||||
});
|
||||
|
||||
let { data }: Props = $props();
|
||||
let user = $state(untrack(() => data.user));
|
||||
let saving = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
user = data.user;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
const data_kv: any = {};
|
||||
editable_fields__user.forEach((field) => {
|
||||
if (user[field] !== undefined) {
|
||||
data_kv[field] = user[field];
|
||||
}
|
||||
});
|
||||
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
const data_kv: any = {};
|
||||
editable_fields__user.forEach(field => {
|
||||
if (user[field] !== undefined) {
|
||||
data_kv[field] = user[field];
|
||||
}
|
||||
});
|
||||
const result = await update_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
const result = await update_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
alert('User updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
if (result) {
|
||||
alert('User updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
}
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this user account?')) return;
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this user account?')) return;
|
||||
|
||||
const result = await delete_ae_obj_id__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
const result = await delete_ae_obj_id__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
goto('/core/users');
|
||||
}
|
||||
if (result) {
|
||||
goto('/core/users');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/users">
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-surface shadow-sm"
|
||||
href="/core/users">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
|
||||
<div
|
||||
class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
|
||||
<UserIcon size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">{user.username}</h1>
|
||||
<p class="text-[10px] uppercase font-bold tracking-widest opacity-50">UID: {user.user_id_random}</p>
|
||||
<h1 class="h2 font-black tracking-tight">
|
||||
{user.username}
|
||||
</h1>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold tracking-widest opacity-50">
|
||||
UID: {user.user_id_random}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-error font-bold shadow-lg"
|
||||
onclick={handle_delete}
|
||||
disabled={saving}>
|
||||
<Trash2 size={16} class="mr-2" /> Disable
|
||||
</button>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={handle_save}
|
||||
disabled={saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -95,61 +128,123 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Main Info -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<UserIcon size={18} class="text-primary-500" /> Basic Profile
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-display-name">Display Name</label>
|
||||
<input class="input preset-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="user-display-name">Display Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-2"
|
||||
id="user-display-name"
|
||||
type="text"
|
||||
bind:value={user.name}
|
||||
placeholder="Full Name" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-email">Email Address</label>
|
||||
<input class="input preset-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="user-email">Email Address</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-2"
|
||||
id="user-email"
|
||||
type="email"
|
||||
bind:value={user.email} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-username">Username</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
|
||||
<div class="input-group-shim !pl-4 !pr-0"><Fingerprint size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" id="user-username" type="text" bind:value={user.username} disabled />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="user-username">Username</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
|
||||
<div class="input-group-shim !pl-4 !pr-0">
|
||||
<Fingerprint size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2"
|
||||
id="user-username"
|
||||
type="text"
|
||||
bind:value={user.username}
|
||||
disabled />
|
||||
</div>
|
||||
<p class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">Username changes are currently restricted.</p>
|
||||
<p
|
||||
class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">
|
||||
Username changes are currently restricted.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<ShieldCheck size={18} class="text-secondary-500" /> System Permissions
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.super} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.super} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Super User</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Full system override access</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Super User</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Full system override access</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.manager} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.manager} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Manager</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Global account & user management</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Manager</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Global account & user management</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.administrator} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.administrator} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Administrator</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Account-level administrative access</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Administrator</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Account-level administrative access</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.verified} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.verified} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Verified User</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Identity confirmed by staff</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Verified User</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Identity confirmed by staff</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
@@ -158,63 +253,105 @@
|
||||
|
||||
<!-- Sidebar / Meta -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Activity size={18} class="text-tertiary-500" /> Account Status
|
||||
</h3>
|
||||
<div class="space-y-4 py-2">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.enable} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Login Enabled</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.enable} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Login Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.hide} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Lists</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.hide} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Hidden from Lists</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.allow_auth_key} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Allow Email Auth Key</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.allow_auth_key} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Allow Email Auth Key</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Lock size={18} class="text-surface-500" /> Linking Info
|
||||
</h3>
|
||||
<div class="space-y-3 text-xs">
|
||||
<div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span class="font-bold opacity-50 uppercase tracking-tighter">Linked Person</span>
|
||||
<div
|
||||
class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span
|
||||
class="font-bold opacity-50 uppercase tracking-tighter"
|
||||
>Linked Person</span>
|
||||
<span class="font-mono font-bold">
|
||||
{#if user.person_id_random}
|
||||
<a href="/core/people/{user.person_id_random}" class="text-primary-500 hover:underline">
|
||||
<a
|
||||
href="/core/people/{user.person_id_random}"
|
||||
class="text-primary-500 hover:underline">
|
||||
{user.person_id_random}
|
||||
</a>
|
||||
{:else}
|
||||
<span class="italic text-error-500">Unlinked</span>
|
||||
<span class="italic text-error-500"
|
||||
>Unlinked</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span class="font-bold opacity-50 uppercase tracking-tighter">Account Context</span>
|
||||
<span class="font-mono font-bold">{user.account_id_random || '--'}</span>
|
||||
<div
|
||||
class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span
|
||||
class="font-bold opacity-50 uppercase tracking-tighter"
|
||||
>Account Context</span>
|
||||
<span class="font-mono font-bold"
|
||||
>{user.account_id_random || '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Clock size={18} class="text-surface-500" /> Timestamps
|
||||
</h3>
|
||||
<div class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
|
||||
<div
|
||||
class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
|
||||
<div class="flex flex-col gap-1 opacity-60">
|
||||
<span>Created On</span>
|
||||
<span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.created_on).toLocaleString()}</span>
|
||||
<span
|
||||
class="text-xs text-surface-900 dark:text-surface-100"
|
||||
>{new Date(user.created_on).toLocaleString()}</span>
|
||||
</div>
|
||||
{#if user.updated_on}
|
||||
<div class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
|
||||
<div
|
||||
class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
|
||||
<span>Last Updated</span>
|
||||
<span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.updated_on).toLocaleString()}</span>
|
||||
<span
|
||||
class="text-xs text-surface-900 dark:text-surface-100"
|
||||
>{new Date(
|
||||
user.updated_on
|
||||
).toLocaleString()}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,133 +1,133 @@
|
||||
<script lang="ts">
|
||||
/** @type {import('./$types').LayoutProps} */
|
||||
let log_lvl: number = $state(0);
|
||||
/** @type {import('./$types').LayoutProps} */
|
||||
let log_lvl: number = $state(0);
|
||||
|
||||
// *** Import Svelte specific
|
||||
import { untrack } from 'svelte';
|
||||
// import { browser } from '$app/environment';
|
||||
import { goto } from '$app/navigation';
|
||||
// *** Import Svelte specific
|
||||
import { untrack } from 'svelte';
|
||||
// import { browser } from '$app/environment';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
// import * as icons from '@lucide/svelte';
|
||||
import {
|
||||
Brain,
|
||||
House,
|
||||
Library,
|
||||
RefreshCw,
|
||||
Satellite,
|
||||
ArrowUp,
|
||||
ArrowDown
|
||||
} from '@lucide/svelte';
|
||||
// *** Import other supporting libraries
|
||||
// import * as icons from '@lucide/svelte';
|
||||
import {
|
||||
Brain,
|
||||
House,
|
||||
Library,
|
||||
RefreshCw,
|
||||
Satellite,
|
||||
ArrowUp,
|
||||
ArrowDown
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import Element_data_store from '$lib/elements/element_data_store.svelte';
|
||||
import {
|
||||
events_loc,
|
||||
events_sess,
|
||||
events_slct,
|
||||
events_trigger,
|
||||
events_trig_kv
|
||||
} from '$lib/stores/ae_events_stores';
|
||||
// *** Import Aether specific variables and functions
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import Element_data_store from '$lib/elements/element_data_store.svelte';
|
||||
import {
|
||||
events_loc,
|
||||
events_sess,
|
||||
events_slct,
|
||||
events_trigger,
|
||||
events_trig_kv
|
||||
} from '$lib/stores/ae_events_stores';
|
||||
|
||||
interface Props {
|
||||
/** @type {import('./$types').LayoutData} */
|
||||
data: any;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
interface Props {
|
||||
/** @type {import('./$types').LayoutData} */
|
||||
data: any;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { data, children }: Props = $props();
|
||||
let { data, children }: Props = $props();
|
||||
|
||||
// Use effects for store initializations to prevent render-phase updates
|
||||
$effect(() => {
|
||||
// Use effects for store initializations to prevent render-phase updates
|
||||
$effect(() => {
|
||||
untrack(() => {
|
||||
$events_loc.qry__enabled = 'enabled';
|
||||
$events_loc.qry__hidden = 'not_hidden';
|
||||
$events_loc.qry__limit = 15;
|
||||
$events_loc.qry__offset = 0;
|
||||
});
|
||||
});
|
||||
|
||||
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
|
||||
let ae_acct = $derived(data[data.account_id]);
|
||||
|
||||
$effect(() => {
|
||||
if (ae_acct) {
|
||||
untrack(() => {
|
||||
$events_loc.qry__enabled = 'enabled';
|
||||
$events_loc.qry__hidden = 'not_hidden';
|
||||
$events_loc.qry__limit = 15;
|
||||
$events_loc.qry__offset = 0;
|
||||
$events_slct.event_id = ae_acct.slct.event_id;
|
||||
$events_slct.event_obj_li = ae_acct.slct.event_obj_li;
|
||||
});
|
||||
});
|
||||
|
||||
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
|
||||
let ae_acct = $derived(data[data.account_id]);
|
||||
|
||||
$effect(() => {
|
||||
if (ae_acct) {
|
||||
untrack(() => {
|
||||
$events_slct.event_id = ae_acct.slct.event_id;
|
||||
$events_slct.event_obj_li = ae_acct.slct.event_obj_li;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let ae_promises: key_val = {};
|
||||
|
||||
let nav_y_height = $state(0);
|
||||
|
||||
let box: any;
|
||||
let xLeft = $state(0);
|
||||
let xScroll = $state(0);
|
||||
let xWidth = $state(0);
|
||||
let yTop = $state(0);
|
||||
let yScroll = $state(0);
|
||||
let yHeight = $state(0);
|
||||
|
||||
let scroll_x = $state(0);
|
||||
let scroll_y = $state(0);
|
||||
|
||||
function parse_scroll() {
|
||||
// console.log(`parse_scroll() called`);
|
||||
xLeft = box.scrollLeft;
|
||||
xScroll = box.scrollWidth;
|
||||
xWidth = box.clientWidth;
|
||||
yTop = box.scrollTop;
|
||||
yHeight = box.clientHeight;
|
||||
yScroll = box.scrollHeight;
|
||||
// console.log(`parse_scroll() called: ${yTop}`);
|
||||
}
|
||||
});
|
||||
|
||||
function scroll_container() {
|
||||
return (
|
||||
document.getElementById('ae_main_content') ||
|
||||
document.documentElement ||
|
||||
document.body
|
||||
);
|
||||
}
|
||||
let ae_promises: key_val = {};
|
||||
|
||||
function clear_idb() {
|
||||
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
|
||||
indexedDB.deleteDatabase('ae_core_db');
|
||||
indexedDB.deleteDatabase('ae_events_db'); // Events module
|
||||
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
|
||||
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
|
||||
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
|
||||
}
|
||||
let nav_y_height = $state(0);
|
||||
|
||||
function clear_local() {
|
||||
// localStorage.removeItem('ae_loc');
|
||||
// localStorage.removeItem('ae_idaa_loc');
|
||||
// localStorage.removeItem('ae_journals_loc');
|
||||
// localStorage.removeItem('ae_events_loc');
|
||||
let box: any;
|
||||
let xLeft = $state(0);
|
||||
let xScroll = $state(0);
|
||||
let xWidth = $state(0);
|
||||
let yTop = $state(0);
|
||||
let yScroll = $state(0);
|
||||
let yHeight = $state(0);
|
||||
|
||||
$ae_loc.allow_access = false;
|
||||
$ae_loc.authenticated_access = false;
|
||||
$ae_loc.edit_mode = false;
|
||||
let scroll_x = $state(0);
|
||||
let scroll_y = $state(0);
|
||||
|
||||
// $ae_loc.ver = '';
|
||||
function parse_scroll() {
|
||||
// console.log(`parse_scroll() called`);
|
||||
xLeft = box.scrollLeft;
|
||||
xScroll = box.scrollWidth;
|
||||
xWidth = box.clientWidth;
|
||||
yTop = box.scrollTop;
|
||||
yHeight = box.clientHeight;
|
||||
yScroll = box.scrollHeight;
|
||||
// console.log(`parse_scroll() called: ${yTop}`);
|
||||
}
|
||||
|
||||
localStorage.clear();
|
||||
// window.localStorage.clear();
|
||||
}
|
||||
function scroll_container() {
|
||||
return (
|
||||
document.getElementById('ae_main_content') ||
|
||||
document.documentElement ||
|
||||
document.body
|
||||
);
|
||||
}
|
||||
|
||||
function clear_sess() {
|
||||
// sessionStorage.removeItem('ae_sess');
|
||||
// sessionStorage.removeItem('ae_idaa_sess');
|
||||
// sessionStorage.removeItem('ae_journals_sess');
|
||||
// sessionStorage.removeItem('ae_events_sess');
|
||||
function clear_idb() {
|
||||
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
|
||||
indexedDB.deleteDatabase('ae_core_db');
|
||||
indexedDB.deleteDatabase('ae_events_db'); // Events module
|
||||
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
|
||||
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
|
||||
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
|
||||
}
|
||||
|
||||
sessionStorage.clear();
|
||||
}
|
||||
function clear_local() {
|
||||
// localStorage.removeItem('ae_loc');
|
||||
// localStorage.removeItem('ae_idaa_loc');
|
||||
// localStorage.removeItem('ae_journals_loc');
|
||||
// localStorage.removeItem('ae_events_loc');
|
||||
|
||||
$ae_loc.allow_access = false;
|
||||
$ae_loc.authenticated_access = false;
|
||||
$ae_loc.edit_mode = false;
|
||||
|
||||
// $ae_loc.ver = '';
|
||||
|
||||
localStorage.clear();
|
||||
// window.localStorage.clear();
|
||||
}
|
||||
|
||||
function clear_sess() {
|
||||
// sessionStorage.removeItem('ae_sess');
|
||||
// sessionStorage.removeItem('ae_idaa_sess');
|
||||
// sessionStorage.removeItem('ae_journals_sess');
|
||||
// sessionStorage.removeItem('ae_events_sess');
|
||||
|
||||
sessionStorage.clear();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -137,15 +137,15 @@
|
||||
</svelte:head>
|
||||
|
||||
{#if $events_loc?.ver && $events_loc?.ver !== $events_sess?.ver}
|
||||
<div class="fixed inset-0 bg-pink-100/80 z-40">
|
||||
<div class="fixed inset-0 z-40 bg-pink-100/80">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
fixed top-16 left-0 right-0 z-50 p-4 m-8 sm:mx-16 md:mx-32
|
||||
btn btn-lg rounded-2xl
|
||||
preset-tonal-warning hover:preset-filled-success-200-800
|
||||
border-4 border-warning-300 dark:border-warning-700
|
||||
transition-all
|
||||
btn btn-lg preset-tonal-warning hover:preset-filled-success-200-800 border-warning-300 dark:border-warning-700 fixed top-16 right-0
|
||||
left-0 z-50 m-8
|
||||
rounded-2xl border-4
|
||||
p-4 transition-all sm:mx-16
|
||||
md:mx-32
|
||||
"
|
||||
onclick={async () => {
|
||||
// Clear the IndexedDB
|
||||
@@ -171,17 +171,22 @@
|
||||
|
||||
location.reload();
|
||||
}}
|
||||
title="A new version of One Sky IT's Aether Events module is available. Click to reload the page and use the latest version."
|
||||
>
|
||||
<RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
|
||||
<span class="m-4 sm:mx-8 text-wrap">
|
||||
title="A new version of One Sky IT's Aether Events module is available. Click to reload the page and use the latest version.">
|
||||
<RefreshCw
|
||||
size="1em"
|
||||
class="shrink-0 animate-spin"
|
||||
aria-hidden="true" />
|
||||
<span class="m-4 text-wrap sm:mx-8">
|
||||
New Events Module Version Available!<br />
|
||||
Click to Reload<br />
|
||||
<div class="italic text-base">
|
||||
<div class="text-base italic">
|
||||
You may need to sign in again.
|
||||
</div>
|
||||
</span>
|
||||
<RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
|
||||
<RefreshCw
|
||||
size="1em"
|
||||
class="shrink-0 animate-spin"
|
||||
aria-hidden="true" />
|
||||
|
||||
<!-- <span class="text-xs">
|
||||
$events_loc.ver=${$events_loc?.ver}<br>
|
||||
@@ -202,59 +207,54 @@
|
||||
class:iframe={$ae_loc?.iframe}
|
||||
class="
|
||||
ae_events
|
||||
min-h-full h-full min-w-full w-full max-w-7xl
|
||||
overflow-auto container
|
||||
flex flex-col gap-1
|
||||
m-auto
|
||||
container m-auto flex h-full min-h-full
|
||||
w-full max-w-7xl
|
||||
min-w-full flex-col gap-1
|
||||
overflow-auto
|
||||
|
||||
bg-gray-50 dark:bg-gray-900
|
||||
text-gray-800 dark:text-gray-200
|
||||
"
|
||||
>
|
||||
bg-gray-50 text-gray-800
|
||||
dark:bg-gray-900 dark:text-gray-200
|
||||
">
|
||||
{#if !$ae_sess?.disable_sys_nav && !$ae_loc?.iframe}
|
||||
<nav
|
||||
bind:clientHeight={nav_y_height}
|
||||
class:hidden={yTop > 600}
|
||||
class:opacity-0={yTop > 250}
|
||||
class="
|
||||
submenu
|
||||
print:hidden
|
||||
z-20
|
||||
hover:opacity-100
|
||||
absolute top-0 left-0 right-0
|
||||
w-full max-w-7xl
|
||||
min-h-12 md:min-h-20
|
||||
p-1 px-2 pb-2 m-auto
|
||||
submenu
|
||||
absolute
|
||||
top-0
|
||||
right-0
|
||||
left-0 z-20 m-auto flex
|
||||
min-h-12 w-full
|
||||
max-w-7xl flex-col
|
||||
items-center justify-between gap-1 rounded-b-lg
|
||||
|
||||
flex flex-col sm:flex-row sm:flex-wrap
|
||||
items-center justify-between
|
||||
gap-1
|
||||
border-b-2 bg-gray-200 p-1 px-2
|
||||
pb-2 transition-all
|
||||
duration-1000
|
||||
|
||||
border-b-2 rounded-b-lg
|
||||
hover:opacity-100 sm:flex-row
|
||||
|
||||
bg-gray-200 dark:bg-gray-800
|
||||
sm:flex-wrap md:min-h-20
|
||||
|
||||
transition-all duration-1000
|
||||
"
|
||||
>
|
||||
dark:bg-gray-800 print:hidden
|
||||
">
|
||||
<span class="justify-self-start">
|
||||
<!-- Be sure to explain what Æ (Aether) means in the title text or similar! -->
|
||||
<Satellite
|
||||
size="1.5em"
|
||||
class="mx-1 inline-block text-gray-500"
|
||||
/>
|
||||
class="mx-1 inline-block text-gray-500" />
|
||||
<abbr title="Aether - Events Module"> Æ Events </abbr>
|
||||
</span>
|
||||
{#if !$ae_sess?.disable_sys_header}
|
||||
<Element_data_store
|
||||
ds_code="hub__site__appshell_header"
|
||||
ds_type="html"
|
||||
/>
|
||||
ds_type="html" />
|
||||
{/if}
|
||||
<a
|
||||
href="/"
|
||||
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
|
||||
>
|
||||
class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-success-500 border">
|
||||
<House />
|
||||
<span class="hidden md:inline"> Home </span>
|
||||
</a>
|
||||
@@ -264,20 +264,27 @@
|
||||
<section
|
||||
class:iframe={$ae_loc?.iframe}
|
||||
class:pt-0={!!$ae_sess?.disable_sys_nav || $ae_loc?.iframe}
|
||||
class:pt-12={!$ae_sess?.disable_sys_nav && nav_y_height > 0 && nav_y_height <= 50}
|
||||
class:pt-20={!$ae_sess?.disable_sys_nav && nav_y_height > 50 && nav_y_height <= 100}
|
||||
class:pt-32={!$ae_sess?.disable_sys_nav && nav_y_height > 100 && nav_y_height <= 150}
|
||||
class:pt-40={!$ae_sess?.disable_sys_nav && nav_y_height > 150 && nav_y_height <= 200}
|
||||
class:pt-12={!$ae_sess?.disable_sys_nav &&
|
||||
nav_y_height > 0 &&
|
||||
nav_y_height <= 50}
|
||||
class:pt-20={!$ae_sess?.disable_sys_nav &&
|
||||
nav_y_height > 50 &&
|
||||
nav_y_height <= 100}
|
||||
class:pt-32={!$ae_sess?.disable_sys_nav &&
|
||||
nav_y_height > 100 &&
|
||||
nav_y_height <= 150}
|
||||
class:pt-40={!$ae_sess?.disable_sys_nav &&
|
||||
nav_y_height > 150 &&
|
||||
nav_y_height <= 200}
|
||||
class="
|
||||
main_content
|
||||
grow
|
||||
px-1 md:px-2 lg:px-4
|
||||
pb-[25vh]
|
||||
flex flex-col gap-1
|
||||
items-center
|
||||
flex
|
||||
grow flex-col items-center
|
||||
justify-start
|
||||
"
|
||||
>
|
||||
gap-1 px-1 pb-[25vh]
|
||||
md:px-2
|
||||
lg:px-4
|
||||
">
|
||||
<!-- Page Route Content -->
|
||||
{@render children?.()}
|
||||
</section>
|
||||
@@ -285,14 +292,13 @@
|
||||
<div
|
||||
class:hidden={yTop < 500}
|
||||
class="
|
||||
print:hidden
|
||||
z-20
|
||||
hover:opacity-100
|
||||
fixed bottom-40 right-1
|
||||
fixed
|
||||
right-1
|
||||
bottom-40
|
||||
z-20 flex flex-col
|
||||
|
||||
flex flex-col gap-1 items-end justify-end
|
||||
"
|
||||
>
|
||||
items-end justify-end gap-1 hover:opacity-100 print:hidden
|
||||
">
|
||||
<!-- Scroll to top button -->
|
||||
<button
|
||||
type="button"
|
||||
@@ -317,8 +323,7 @@
|
||||
|
||||
window.parent.postMessage({ scroll_to: 0 }, '*'); // This should be
|
||||
}}
|
||||
title="Scroll to top"
|
||||
>
|
||||
title="Scroll to top">
|
||||
<ArrowUp size="1em" aria-hidden="true" />
|
||||
Scroll to Top
|
||||
</button>
|
||||
@@ -346,8 +351,7 @@
|
||||
|
||||
window.parent.postMessage({ scroll_to: scroll_y }, '*');
|
||||
}}
|
||||
title="Scroll to bottom"
|
||||
>
|
||||
title="Scroll to bottom">
|
||||
<ArrowDown size="1em" aria-hidden="true" />
|
||||
Scroll to Bottom
|
||||
<!-- yTop={yTop} yScroll={yScroll} yHeight={yHeight} scroll_y={scroll_y} scrollTop={scroll_container().scrollTop} total={scroll_container().scrollTop + yHeight} -->
|
||||
@@ -360,32 +364,30 @@
|
||||
class:opacity-80={yTop < 250}
|
||||
class:opacity-0={yTop > 250}
|
||||
class="
|
||||
footer print:hidden z-20
|
||||
hover:opacity-100
|
||||
absolute bottom-0 left-0 right-0
|
||||
footer absolute right-0
|
||||
bottom-0
|
||||
left-0 z-20 m-auto flex
|
||||
w-full max-w-7xl
|
||||
p-1 m-auto
|
||||
flex-row flex-wrap
|
||||
|
||||
flex flex-row flex-wrap
|
||||
items-center justify-between
|
||||
sm:flex-row md:items-center md:justify-between
|
||||
gap-1
|
||||
items-center justify-between gap-1
|
||||
rounded-t-lg border-t-2
|
||||
border-gray-200 bg-gray-200 p-1
|
||||
text-xs
|
||||
|
||||
border-t-2 border-gray-200 dark:border-gray-600
|
||||
rounded-t-lg
|
||||
bg-gray-200 dark:bg-gray-800
|
||||
transition-all duration-1000 hover:text-base
|
||||
hover:opacity-100
|
||||
sm:flex-row md:items-center
|
||||
|
||||
text-xs hover:text-base
|
||||
md:justify-between dark:border-gray-600
|
||||
|
||||
transition-all duration-1000
|
||||
dark:bg-gray-800 print:hidden
|
||||
"
|
||||
class:ae_debug={$ae_loc.debug}
|
||||
>
|
||||
class:ae_debug={$ae_loc.debug}>
|
||||
<Element_data_store
|
||||
ds_code="hub__site__appshell_footer"
|
||||
ds_type="html"
|
||||
class_li="grow flex flex-row justify-between"
|
||||
/>
|
||||
class_li="grow flex flex-row justify-between" />
|
||||
</footer>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user