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

Improve Person management and implement User linking

Browse Source 
- Created Comp_person_search component for dashboard integration
- Improved reactivity in person results table using derived liveQuery
- Implemented User Account Linking UI in Person detail page
- Added logic to filter and link unlinked users to person records
- Modernized Core Dashboard with person search integration
This commit is contained in:
Scott Idem
2026-01-06 14:59:31 -05:00
parent c77a9ef3dd
commit 5d2186e8ca
4 changed files with 237 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,49 +1,21 @@
<script lang="ts">
// console.log(`ae_core root +page.svelte data:`, data);
// import { onMount } from 'svelte';
import { goto, invalidate, pushState, replaceState } 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_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
import Comp_person_obj_tbl from './ae_comp__person_obj_tbl.svelte';
// import { liveQuery } from "dexie";
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 { db_core } from "$lib/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 { 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';
interface Props {
/** @type {import('./$types').PageData} */
data: any;
}
let { data }: Props = $props();
// import { events_loc, events_sess, events_slct, events_trigger } from '$lib/stores/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
// Quickly save the data passed from the parent(s)
$slct.account_id = data.account_id;
console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
console.log(`ae_acct = `, ae_acct);
let person_id_random_li: string[] = $state([]);
// let load_obj_li_results: Promise<any>|key_val;
// let search_submit_results: Promise<any>|key_val;
</script>
<section class="ae_core md:container mx-auto p-4 space-y-6">
@@ -93,39 +65,12 @@
</div>
<!-- Person Management Card -->
<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 text-balance">View and manage person records and their associated user accounts.</p>
<div class="flex gap-2">
<button
type="button"
onclick={() => {
let person_results = core_func
.load_ae_obj_li__person({
api_cfg: $ae_api,
for_obj_type: 'account',
for_obj_id: $slct.account_id,
limit: $ae_loc.person.qry_limit__people,
log_lvl: 1
})
.then(function (load_results) {
if (load_results) {
$slct.person_id_random_li = load_results;
person_id_random_li = load_results.map((p: any) => p.person_id_random);
}
return load_results;
})
.finally(() => {
$ae_sess.person.show_report__person_li = true;
});
}}
class="btn variant-filled-warning flex-1"
>
List People
</button>
<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 () => {
@@ -146,12 +91,19 @@
goto(`/core/person/${new_person_obj.person_id_random}`);
}
}}
class="btn variant-filled-warning btn-icon"
class="btn variant-filled-warning btn-sm"
class:hidden={!$ae_loc.edit_mode}
>
<Plus size={16} />
<Plus size={16} class="mr-1" /> Add
</button>
</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;
}} />
</div>
<!-- Lookups Card -->
@@ -167,72 +119,20 @@
</div>
</div>
<!-- Show people for this account -->
{#if $ae_sess.person.show_report__person_li && person_id_random_li?.length > 0}
<h3 class="h4 text-center">Person Records</h3>
<label class="text-sm" for="qry_limit__people"
>Max results:
<select
id="qry_limit__people"
bind:value={$ae_loc.person.qry_limit__people}
onchange={() => {
core_func
.load_ae_obj_li__person({
api_cfg: $ae_api,
for_obj_type: 'account',
for_obj_id: $slct.account_id,
enabled: 'enabled',
hidden: 'not_hidden',
limit: $ae_loc.person.qry_limit__people,
// params: {
// 'qry__enabled': 'enabled',
// 'qry__hidden': 'not_hidden',
// 'qry__limit': $ae_loc.person.qry_limit__people,},
log_lvl: 1
})
.then(function (load_results) {
console.log(`Loaded person_obj_li:`, load_results);
if (load_results) {
$slct.person_id_random_li = load_results;
person_id_random_li = [];
let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
for (let i = 0; i < $slct.person_id_random_li.length; i++) {
let person_obj = $slct.person_id_random_li[i];
let person_id_random = person_obj.person_id_random;
tmp_li.push(person_id_random);
}
person_id_random_li = tmp_li;
}
return load_results;
});
}}
class="select max-w-20 text-sm"
>
<option value={25}>25</option>
<option value={50}>50</option>
<option value={75}>75</option>
<option value={100}>100</option>
<option value={150}>150</option>
<option value={200}>200</option>
<option value={250}>250</option>
<option value={500}>500</option>
<option value={750}>750</option>
<option value={1000}>1000</option>
</select>
</label>
<div class="outline">
<!-- Count: {person_id_random_li?.length} -->
<Comp_person_obj_tbl
bind:person_id_random_li
show_user_fields={$ae_loc.administrator_access}
></Comp_person_obj_tbl>
<!-- 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>
</section>

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

@@ -40,11 +40,7 @@
// Variables
// *** Functions and Logic
// let lq__person_obj = liveQuery(
// () => db_core.person.get($events_slct.person_id)
// );
let lq_kv__person_obj_li = liveQuery(() => db_core.person.bulkGet(person_id_random_li));
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}">

125
src/routes/core/person/[person_id]/+page.svelte
View File

@@ -26,22 +26,19 @@
// import { events_func } from '$lib/ae_events_functions';
import Person_view from './../../person_view.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 { Users, Link, Unlink, UserPlus, ShieldCheck, User } from 'lucide-svelte';
interface Props {
// console.log($page.params.slug);
data: any;
}
let { data }: Props = $props();
// Exports
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
// Variables
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
$slct.account_id = data.account_id;
// console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);
$ae_loc.url_origin = data.url.origin;
@@ -53,6 +50,51 @@
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);
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_random
available_users = all_users.filter(u => !u.person_id_random && !u.person_id);
loading_users = false;
}
async function handle_link_user(user_id_random: 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_random },
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_random: null },
log_lvl: 1
});
}
if (!$ae_loc.person) {
$ae_loc.person = {};
}
@@ -137,6 +179,75 @@
</div>
</div>
{#if $ae_loc.manager_access}
<div class="card p-4 variant-soft-surface space-y-4 mx-4">
<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_random}
<button class="btn btn-sm variant-soft-error" onclick={handle_unlink_user}>
<Unlink size={14} class="mr-2" /> Unlink User
</button>
{:else}
<button
class="btn btn-sm variant-soft-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'}
</button>
{/if}
</header>
{#if $lq__person_obj?.user_id_random}
<div class="flex items-center gap-4 py-2">
<div class="avatar variant-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_random}</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>
{#if loading_users}
<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>
{:else}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
{#each available_users as user}
<button
class="card p-3 variant-soft-primary hover:variant-filled-primary text-left transition-all flex flex-col gap-1"
onclick={() => handle_link_user(user.user_id_random)}
>
<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>
<div class="flex gap-1 mt-1">
{#if user.super}<span class="badge variant-filled-error text-[10px]">Super</span>{/if}
{#if user.manager}<span class="badge variant-filled-warning text-[10px]">Manager</span>{/if}
</div>
</button>
{/each}
</div>
{/if}
</div>
{: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>
</div>
{/if}
</div>
{/if}
{#if !$lq__person_obj}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>

81
src/routes/core/person/ae_comp__person_search.svelte Normal file
View File

@@ -0,0 +1,81 @@
<script lang="ts">
import { Search, Plus, Filter, 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;
}
let { on_results }: Props = $props();
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;
// 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_v3
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;
on_results(filtered);
loading = false;
}
</script>
<div class="card p-4 variant-soft-surface space-y-4">
<div class="flex flex-wrap gap-4 items-end">
<label class="label flex-1 min-w-[200px]">
<span>Search People</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
<div class="input-group-shim"><Search size={16} /></div>
<input
type="search"
bind:value={qry_str}
placeholder="Name, email, or ID..."
onkeydown={(e) => e.key === 'Enter' && handle_search()}
/>
<button class="variant-filled-primary" onclick={handle_search} disabled={loading}>
{loading ? '...' : 'Search'}
</button>
</div>
</label>
<label class="label">
<span>Enabled</span>
<select class="select w-32" bind:value={qry_enabled} onchange={handle_search}>
<option value="all">All</option>
<option value="enabled">Enabled</option>
<option value="not_enabled">Disabled</option>
</select>
</label>
<label class="label">
<span>Hidden</span>
<select class="select w-32" bind:value={qry_hidden} onchange={handle_search}>
<option value="all">All</option>
<option value="not_hidden">Visible</option>
<option value="hidden">Hidden</option>
</select>
</label>
</div>
</div>