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>