Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure Core management into linkable routes and add common layout navigation

Browse Source 
- Renamed person route to people for consistency
- Refactored /core dashboard to use standard <a> links
- Added common management <nav> to core layout
- Replaced goto() with standard links across all list and detail pages
- Fixed 500 error caused by broken import path and strict layout data
This commit is contained in:
Scott Idem
2026-01-06 15:33:08 -05:00
parent 5d2186e8ca
commit a0f04726e0
14 changed files with 135 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/routes/core/+layout.svelte
View File

@@ -1,102 +1,43 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 0;
// *** Import Svelte specific
// import { goto } from '$app/navigation';
// import type { Writable } from 'svelte/store';
// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import {
events_loc,
events_slct,
events_trigger,
events_trig_kv
} from '$lib/stores/ae_events_stores';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
interface SubmenuItem {
name: string;
href: string;
title: string;
access?: 'trusted' | 'administrator' | 'manager'; // Assuming these are the access levels
disable?: boolean;
hide?: boolean;
}
interface LayoutData {
submenu: SubmenuItem[]; // Assuming submenu is an array of SubmenuItem
// Add other properties of data if needed
}
import { Building, Globe, Users, ShieldCheck, List, LayoutDashboard } from 'lucide-svelte';
interface Props {
data: LayoutData; // Use the specific interface
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
$events_loc.qry__enabled = 'enabled';
$events_loc.qry__hidden = 'not_hidden';
$events_loc.qry__limit = 15;
$events_loc.qry__offset = 0;
if (log_lvl) {
console.log(`$slct.account_id = `, $slct.account_id);
}
// let ae_acct = data[$slct.account_id];
// if (log_lvl) {
// console.log(`ae_acct = `, ae_acct);
// }
</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">
{#if $ae_loc?.manager_access === 'test-new-submenu'}
<section class="submenu flex flex-row justify-center" class:hidden={$ae_loc.iframe}>
<span class=" preset-tonal-secondary px-4 py-2">
{#each Object.entries(data.submenu) as [key, item]: SubmenuItem}
<!-- <a href="/settings/{item.slug}">{item.title}</a> -->
<!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
{#if item.disable}
<!-- <button
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
disabled={item.disable}
on:click={() => {
// goto(item.href, { });
}}
>
{item.name}
</button> -->
{:else}
<!-- <a
href={item.href}
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
class:disabled={item.disable}
>
{item.name}
</a> -->
{/if}
{/each}
</span>
</section>
<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">
<a href="/core" class="btn btn-sm variant-soft-surface">
<LayoutDashboard size={14} class="mr-1" /> Dashboard
</a>
<a href="/core/accounts" class="btn btn-sm variant-soft-primary">
<Building size={14} class="mr-1" /> Accounts
</a>
<a href="/core/sites" class="btn btn-sm variant-soft-secondary">
<Globe size={14} class="mr-1" /> Sites
</a>
<a href="/core/users" class="btn btn-sm variant-soft-error">
<ShieldCheck size={14} class="mr-1" /> Users
</a>
<a href="/core/people" class="btn btn-sm variant-soft-warning">
<Users size={14} class="mr-1" /> People
</a>
<a href="/core/lookups" class="btn btn-sm variant-soft-surface">
<List size={14} class="mr-1" /> Lookups
</a>
</nav>
{/if}
<section class="main_content grow px-1 md:px-2 pb-28">
<!-- <div class="container m-auto"> -->
{@render children?.()}
<!-- </div> -->
</section>
</div>
</div>

89
src/routes/core/+page.svelte
View File

@@ -1,10 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { Building, Globe, Users, ShieldCheck, List, Plus } from 'lucide-svelte';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import Comp_person_obj_tbl from './ae_comp__person_obj_tbl.svelte';
import Comp_person_search from './person/ae_comp__person_search.svelte';
import { Building, Globe, Users, ShieldCheck, List } from 'lucide-svelte';
import { ae_loc, slct } from '$lib/stores/ae_stores';
interface Props {
data: any;
@@ -14,8 +10,6 @@
// Quickly save the data passed from the parent(s)
$slct.account_id = data.account_id;
let person_id_random_li: string[] = $state([]);
</script>
<section class="ae_core md:container mx-auto p-4 space-y-6">
@@ -35,9 +29,9 @@
<h3 class="h4">Accounts</h3>
</div>
<p class="text-sm opacity-80 text-balance">Manage client accounts and high-level system settings.</p>
<button class="btn variant-filled-primary w-full" onclick={() => goto('/core/accounts')}>
<a class="btn variant-filled-primary w-full" href="/core/accounts">
Manage Accounts
</button>
</a>
</div>
<!-- Site Management Card -->
@@ -47,9 +41,9 @@
<h3 class="h4">Sites</h3>
</div>
<p class="text-sm opacity-80 text-balance">Configure sites and domains associated with the active account.</p>
<button class="btn variant-filled-secondary w-full" onclick={() => goto('/core/sites')}>
<a class="btn variant-filled-secondary w-full" href="/core/sites">
Manage Sites
</button>
</a>
</div>
<!-- User Management Card -->
@@ -59,51 +53,21 @@
<h3 class="h4">Users</h3>
</div>
<p class="text-sm opacity-80 text-balance">Manage system access, permissions, and user credentials.</p>
<button class="btn variant-filled-error w-full" onclick={() => goto('/core/users')}>
<a class="btn variant-filled-error w-full" href="/core/users">
Manage Users
</button>
</a>
</div>
<!-- Person Management Card -->
<div class="card p-4 space-y-4 variant-soft-warning md:col-span-2 lg:col-span-1">
<div class="flex justify-between items-center">
<div class="flex items-center gap-2">
<Users size={20} />
<h3 class="h4">People</h3>
</div>
<button
type="button"
onclick={async () => {
if (!confirm(`Add a new person to ${$ae_loc.account_name}?`)) return;
let person_data = {
account_id_random: $slct.account_id,
source_code: 'manual:SK-core',
given_name: 'New',
family_name: 'Person',
enable: true
};
let new_person_obj = await core_func.create_ae_obj__person({
api_cfg: $ae_api,
data_kv: person_data,
log_lvl: 1
});
if (new_person_obj && confirm(`Person created. View details?`)) {
goto(`/core/person/${new_person_obj.person_id_random}`);
}
}}
class="btn variant-filled-warning btn-sm"
class:hidden={!$ae_loc.edit_mode}
>
<Plus size={16} class="mr-1" /> Add
</button>
<div class="card p-4 space-y-4 variant-soft-warning">
<div class="flex items-center gap-2">
<Users size={20} />
<h3 class="h4">People</h3>
</div>
<p class="text-sm opacity-80">Search and manage person records.</p>
<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;
}} />
<p class="text-sm opacity-80 text-balance">Search and manage person records and their user linking.</p>
<a class="btn variant-filled-warning w-full" href="/core/people">
Manage People
</a>
</div>
<!-- Lookups Card -->
@@ -113,26 +77,9 @@
<h3 class="h4">Lookups</h3>
</div>
<p class="text-sm opacity-80 text-balance">View system lookup tables (countries, time zones, etc).</p>
<button class="btn variant-filled-surface w-full" onclick={() => goto('/core/lookups')}>
<a class="btn variant-filled-surface w-full" href="/core/lookups">
View Lookups
</button>
</a>
</div>
</div>
<!-- Show people results -->
{#if $ae_sess.person.show_report__person_li}
<div class="space-y-4">
<div class="flex justify-between items-center">
<h3 class="h4">Search Results ({person_id_random_li.length})</h3>
<button class="btn btn-sm variant-soft" onclick={() => $ae_sess.person.show_report__person_li = false}>Clear</button>
</div>
<div class="card p-4 variant-soft">
<Comp_person_obj_tbl
bind:person_id_random_li
show_user_fields={$ae_loc.administrator_access}
></Comp_person_obj_tbl>
</div>
</div>
{/if}
</section>

8
src/routes/core/+page.ts
View File

@@ -0,0 +1,8 @@
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ parent }) => {
const parentData = await parent();
return {
account_id: parentData.account_id
};
};

4
src/routes/core/accounts/+page.svelte
View File

@@ -117,9 +117,9 @@
{/if}
</td>
<td class="text-right">
<button class="btn btn-sm variant-soft-primary" onclick={() => goto(`/core/accounts/${acct.account_id_random}`)}>
<a class="btn btn-sm variant-soft-primary" href="/core/accounts/{acct.account_id_random}">
Manage
</button>
</a>
</td>
</tr>
{/each}

4
src/routes/core/accounts/[account_id]/+page.svelte
View File

@@ -72,9 +72,9 @@
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<div class="flex items-center gap-4">
<button class="btn btn-sm variant-soft" onclick={() => goto('/core/accounts')}>
<a class="btn btn-sm variant-soft" href="/core/accounts">
<ArrowLeft size={16} />
</button>
</a>
<div class="flex items-center gap-2">
<Building size={24} />
<h1 class="h2">{account?.name ?? 'Loading Account...'}</h1>

4
src/routes/core/ae_comp__person_obj_tbl.svelte
View File

@@ -79,7 +79,7 @@
<td class="px-4 py-2">
<span class="fas fa-user"></span>
<a
href="/core/person/{person_obj?.person_id_random}"
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})"
@@ -113,7 +113,7 @@
{#if person_obj?.user_id_random}
<span class="fas fa-user"></span>
<a
href="/core/user/{person_obj?.user_id_random}"
href="/core/users/{person_obj?.user_id_random}"
class="text-blue-500 underline hover:text-blue-800"
>
{@html person_obj?.username ?? ae_snip.html__not_set}

67
src/routes/core/people/+page.svelte Normal file
View File

@@ -0,0 +1,67 @@
<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { ae_loc, ae_sess, slct, ae_api } from '$lib/stores/ae_stores';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { Users, Plus } from 'lucide-svelte';
import Comp_person_search from './ae_comp__person_search.svelte';
import Comp_person_obj_tbl from '../ae_comp__person_obj_tbl.svelte';
let person_id_random_li: string[] = $state([]);
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">
<div class="flex items-center gap-2">
<Users size={24} />
<h1 class="h2">People Management</h1>
</div>
<button
type="button"
onclick={async () => {
if (!confirm(`Add a new person to ${$ae_loc.account_name}?`)) return;
let person_data = {
account_id_random: $slct.account_id,
source_code: 'manual:SK-core',
given_name: 'New',
family_name: 'Person',
enable: true
};
let new_person_obj = await core_func.create_ae_obj__person({
api_cfg: $ae_api,
data_kv: person_data,
log_lvl: 1
});
if (new_person_obj && confirm(`Person created. View details?`)) {
goto(`/core/people/${new_person_obj.person_id_random}`);
}
}}
class="btn variant-filled-primary"
class:hidden={!$ae_loc.edit_mode}
>
<Plus size={16} class="mr-2" /> Add Person
</button>
</header>
<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-4 variant-soft space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Results ({person_id_random_li.length})</h3>
<Comp_person_obj_tbl
bind:person_id_random_li
show_user_fields={$ae_loc.administrator_access}
></Comp_person_obj_tbl>
</div>
{/if}
</div>

5
src/routes/core/people/+page.ts Normal file
View File

@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ parent }) => {
return {};
};

0
src/routes/core/person/[person_id]/+page.svelte → src/routes/core/people/[person_id]/+page.svelte
View File

0
src/routes/core/person/[person_id]/+page.ts → src/routes/core/people/[person_id]/+page.ts
View File

0
src/routes/core/person/ae_comp__person_search.svelte → src/routes/core/people/ae_comp__person_search.svelte
View File

4
src/routes/core/sites/+page.svelte
View File

@@ -120,9 +120,9 @@
{/if}
</td>
<td class="text-right">
<button class="btn btn-sm variant-soft-primary" onclick={() => goto(`/core/sites/${site.site_id_random}`)}>
<a class="btn btn-sm variant-soft-primary" href="/core/sites/{site.site_id_random}">
Manage
</button>
</a>
</td>
</tr>
{/each}

4
src/routes/core/sites/[site_id]/+page.svelte
View File

@@ -105,9 +105,9 @@
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<div class="flex items-center gap-4">
<button class="btn btn-sm variant-soft" onclick={() => goto('/core/sites')}>
<a class="btn btn-sm variant-soft" href="/core/sites">
<ArrowLeft size={16} />
</button>
</a>
<div class="flex items-center gap-2">
<Globe size={24} />
<h1 class="h2">{site?.name ?? 'Loading Site...'}</h1>

4
src/routes/core/users/+page.svelte
View File

@@ -103,9 +103,9 @@
<span>{user.email || '--'}</span>
</div>
</div>
<button class="btn btn-sm variant-filled-primary w-full" onclick={() => goto(`/core/users/${user.user_id_random}`)}>
<a class="btn btn-sm variant-filled-primary w-full" href="/core/users/{user.user_id_random}">
Edit User
</button>
</a>
</div>
{/each}
</div>