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

Work on new core person list, view, and edit

Browse Source
This commit is contained in:
Scott Idem
2024-07-17 14:59:15 -04:00
parent ad1e42010a
commit 625169a321
14 changed files with 1360 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
src/routes/core/person_view.svelte Normal file
View File

@@ -0,0 +1,336 @@
<script lang="ts">
console.log(`ae_core person_view.svelte`);
import { createEventDispatcher, onMount } from 'svelte';
// import { clipboard, FileDropzone } from '@skeletonlabs/skeleton';
import { liveQuery } from "dexie";
const dispatch = createEventDispatcher();
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/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.svelte';
// import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
import { core_func } from '$lib/ae_core_functions';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { db_core } from "$lib/db_core";
// import { db_events } from "$lib/db_events";
// import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
// Exports
export let person_id: string;
export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
let ae_placeholder_li: key_val = {};
let ae_promises: key_val = {}; // Promise<any>;
let ae_tmp: key_val = {};
let ae_triggers: key_val = {};
console.log(`person_id:`, person_id);
let lq__person_obj = liveQuery(
async () => await db_core.person.get(person_id)
);
// ae_tmp.biography = null;
// $: if ($lq__person_obj?.biography && ae_tmp.biography === null) {
// ae_tmp.biography = JSON.parse(JSON.stringify($lq__person_obj.biography));
// }
// $events_slct.person_obj = $lq__person_obj;
// $events_sess.pres_mgmt.disable_submit__opt_out = false;
// let tmp_agree = false;
// let tmp_opt_out: key_val = {
// audio: false,
// video: false,
// transcription_and_publication: false,
// publication_in_app: false
// };
onMount(() => {
console.log('ae_core: person_view.svelte');
console.log(`person_id:`, person_id);
});
</script>
{#if $lq__person_obj}
<h2 class="h3">
Presenter Details for:<br>
<strong>
{$lq__person_obj.full_name}
</strong>
</h2>
<ul
class="space-y-2 px-4"
>
<li
class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'external_id'}
field_type={'text'}
field_value={$lq__person_obj.external_id}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-id-card"></span>
External ID:
<span class="font-bold">
{$lq__person_obj.external_id ?? '-- external_id not set --'}
</span>
</Element_ae_crud>
</li>
<li
class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'external_sys_id'}
field_type={'text'}
field_value={$lq__person_obj.external_sys_id}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-id-card"></span>
External System ID:
<span class="font-bold">
{$lq__person_obj.external_sys_id ?? '-- external_sys_id not set --'}
</span>
</Element_ae_crud>
</li>
<li>
<span class="fas fa-user"></span>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'given_name'}
field_type={'text'}
field_value={$lq__person_obj.given_name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="font-bold">
{$lq__person_obj.given_name}
</span>
</Element_ae_crud>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'family_name'}
field_type={'text'}
field_value={$lq__person_obj.family_name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="font-bold">
{$lq__person_obj.family_name}
</span>
</Element_ae_crud>
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'primary_email'}
field_type={'email'}
field_value={$lq__person_obj.primary_email}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-envelope"></span>
<span class="font-bold">
<a
href="mailto:{$lq__person_obj?.primary_email}"
class="text-blue-500 underline hover:text-blue-800"
title="Person's primary email address"
>
{$lq__person_obj.primary_email}
</a>
</span>
</Element_ae_crud>
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'affiliations'}
field_type={'text'}
field_value={$lq__person_obj.affiliations}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-building"></span>
<span class="font-bold">
{$lq__person_obj.affiliations ?? '-- affiliations not set --'}
</span>
</Element_ae_crud>
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'professional_title'}
field_type={'text'}
field_value={$lq__person_obj.professional_title}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-user-tag"></span>
<span class="font-bold">
{$lq__person_obj.professional_title && $lq__person_obj.professional_title.length ? $lq__person_obj.professional_title : '-- professional title not set --'}
</span>
</Element_ae_crud>
</li>
<li
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj.person_id_random}
field_name={'passcode'}
field_type={'text'}
field_value={$lq__person_obj.passcode}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
core_func.handle_load_ae_obj_id__person({api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-user-secret"></span>
Passcode:
<span
class="font-bold"
>
{$lq__person_obj.passcode ?? '-- passcode not set --'}
</span>
</Element_ae_crud>
</ul>
{/if}