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

Now with new button toggles and edit for JSON data!

Browse Source
This commit is contained in:
Scott Idem
2024-07-24 18:06:10 -04:00
parent 98849427d9
commit 274b599ff1
9 changed files with 498 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -125,16 +125,21 @@ let person_id_random_li: string[] = [];
type="button"
on:click={async () => {
console.log('Add Person');
if (!confirm(`Add a new person to the account?\n${$ae_loc.account_name}\nID: ${$slct.account_id}`)) {
return;
}
let person_data = {
account_id_random: $slct.account_id,
// user_id_random: user_obj.user_id_random,
source_code: 'manual:SK',
source_code: 'manual:SK-core',
given_name: 'New',
family_name: 'Person',
professional_title: 'Temp Prof Title',
affiliations: 'Temp Org',
primary_email: 'tmp+person@oneskyit.com',
// professional_title: 'Temp Prof Title',
// affiliations: 'Temp Org',
// primary_email: 'tmp+person@oneskyit.com',
// allow_auth_key: false,
auth_key: Math.floor(Math.random() * 90000000) + 10000000,
// Random number between 100000 and 999999
passcode: Math.floor(Math.random() * 900000) + 100000,
enable: true,
@@ -149,10 +154,9 @@ let person_id_random_li: string[] = [];
console.log('new_person_obj:', new_person_obj);
if (confirm(`Person created: ${new_person_obj.full_name} (${new_person_obj.primary_email})`)) {
if (confirm(`Person created:\n${new_person_obj.full_name} (${new_person_obj.primary_email ?? 'no email'})\nID: ${new_person_obj.person_id_random}\n\nView this person?`)) {
// window.location.reload();
// invalidateAll();
// goto(`/core/person/${new_person_obj.person_id_random}`);
goto(`/core/person/${new_person_obj.person_id_random}`, { replaceState: true });
// pushState(`/core/person/${new_person_obj.person_id_random}`, { replace: true });
// replaceState(`/core/person/${new_person_obj.person_id_random}`);

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

@@ -64,21 +64,25 @@ let lq_kv__person_obj_li = liveQuery(
href="/core/person/{person_obj?.person_id_random}"
class="text-blue-500 underline hover:text-blue-800"
>
{person_obj?.full_name}
{@html person_obj?.full_name ?? ae_snip.html__not_set}
</a>
</td>
<td class="px-4 py-2">
<span class="fas fa-envelope"></span>
{#if person_obj?.primary_email}
<a
href="mailto:{person_obj?.primary_email}"
class="text-blue-500 underline hover:text-blue-800"
>
{person_obj?.primary_email}
{@html person_obj?.primary_email ?? ae_snip.html__not_set}
</a>
{:else}
{@html ae_snip.html__not_set}
{/if}
</td>
<td class="px-4 py-2">
<span class="fas fa-building"></span>
{person_obj?.affiliations}
{@html person_obj?.affiliations ?? ae_snip.html__not_set}
</td>
{#if show_user_fields}
@@ -89,7 +93,7 @@ let lq_kv__person_obj_li = liveQuery(
href="/core/user/{person_obj?.user_id_random}"
class="text-blue-500 underline hover:text-blue-800"
>
{person_obj?.username ?? '-- not set --'}
{@html person_obj?.username ?? 'username'+ae_snip.html__not_set}
</a>
{:else}
{@html ae_snip.html__not_set}

316
src/routes/core/person_view.svelte
View File

@@ -12,10 +12,9 @@ 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 { ae_snip, 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';
@@ -28,6 +27,7 @@ export let display_mode: string = 'default'; // 'default', 'compact', 'minimal',
let ae_placeholder_li: key_val = {};
let ae_promises: key_val = {}; // Promise<any>;
let ae_tmp: key_val = {};
ae_tmp.value__hide = null;
let ae_triggers: key_val = {};
@@ -36,10 +36,12 @@ 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));
// }
ae_tmp.value__data_json = null;
$: 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);
}
// $events_slct.person_obj = $lq__person_obj;
@@ -64,9 +66,9 @@ onMount(() => {
{#if $lq__person_obj}
<h2 class="h3">
Presenter Details for:<br>
Person Details for:<br>
<strong>
{$lq__person_obj.full_name}
"{$lq__person_obj.full_name}"
</strong>
</h2>
@@ -103,7 +105,7 @@ onMount(() => {
<span class="fas fa-id-card"></span>
External ID:
<span class="font-bold">
{$lq__person_obj.external_id ?? '-- external_id not set --'}
{@html $lq__person_obj.external_id ?? ae_snip.html__not_set}
</span>
</Element_ae_crud>
</li>
@@ -119,7 +121,7 @@ onMount(() => {
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}
hide_edit_btn={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
@@ -134,10 +136,10 @@ onMount(() => {
});
}}
>
<span class="fas fa-id-card"></span>
<span class="fas fa-fingerprint"></span>
External System ID:
<span class="font-bold">
{$lq__person_obj.external_sys_id ?? '-- external_sys_id not set --'}
{@html $lq__person_obj.external_sys_id ?? ae_snip.html__not_set}
</span>
</Element_ae_crud>
</li>
@@ -170,7 +172,7 @@ onMount(() => {
}}
>
<span class="font-bold">
{$lq__person_obj.given_name}
{@html $lq__person_obj.given_name ?? ae_snip.html__not_set}
</span>
</Element_ae_crud>
<Element_ae_crud
@@ -197,7 +199,7 @@ onMount(() => {
}}
>
<span class="font-bold">
{$lq__person_obj.family_name}
{@html $lq__person_obj.family_name ?? ae_snip.html__not_set}
</span>
</Element_ae_crud>
</li>
@@ -227,13 +229,17 @@ onMount(() => {
>
<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>
{#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}'
</a>
{:else}
email {@html ae_snip.html__not_set}
{/if}
</span>
</Element_ae_crud>
</li>
@@ -263,7 +269,7 @@ onMount(() => {
>
<span class="fas fa-building"></span>
<span class="font-bold">
{$lq__person_obj.affiliations ?? '-- affiliations not set --'}
{@html $lq__person_obj.affiliations ?? 'affiliations'+ae_snip.html__not_set}
</span>
</Element_ae_crud>
</li>
@@ -293,7 +299,7 @@ onMount(() => {
>
<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 --'}
{@html $lq__person_obj.professional_title && $lq__person_obj.professional_title.length ? $lq__person_obj.professional_title : 'professional title'+ae_snip.html__not_set}
</span>
</Element_ae_crud>
</li>
@@ -327,9 +333,271 @@ onMount(() => {
<span
class="font-bold"
>
{$lq__person_obj.passcode ?? '-- passcode not set --'}
{@html $lq__person_obj.passcode ?? 'passcode'+ae_snip.html__not_set}
</span>
</Element_ae_crud>
</li>
<li
hidden={!$ae_loc.trusted_access}
>
<!-- Show/Hide -->
<Element_ae_crud
trigger_patch={ae_triggers.hide}
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj?.person_id_random}
field_name={'hide'}
field_type={'button'}
field_value={ae_tmp.value__hide}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={'m-1'}
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();
});
}}
>
{#if $ae_loc.trusted_access}
{($lq__person_obj?.hide ? 'Hidden' : 'Not Hidden')}
{/if}
<button
on:click={() => {
ae_tmp.value__hide = !$lq__person_obj?.hide;
// $events_slct.exhibit_tracking_obj.hide = !$lq__person_obj?.hide;
ae_triggers.hide = true;
}}
class="btn btn-sm variant-soft-warning"
>
{#if $ae_loc.trusted_access}
{@html ($lq__person_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')}
{:else}
<!-- Users see this as the "Archive" option button -->
{@html ($lq__person_obj?.hide ? '<span class="fas fa-archive m-1"></span> Unarchive' : '<span class="fas fa-archive m-1"></span> Archive')}
{/if}
</button>
</Element_ae_crud>
<!-- Enable/Disable -->
<Element_ae_crud
trigger_patch={ae_triggers.enable}
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj?.person_id_random}
field_name={'enable'}
field_type={'button'}
field_value={ae_tmp.value__enable}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={'m-1'}
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();
});
}}
>
{#if $ae_loc.trusted_access}
{($lq__person_obj?.enable ? 'Enabled' : 'Disabled')}
{/if}
<button
on:click={() => {
ae_tmp.value__enable = !$lq__person_obj?.enable;
// $events_slct.exhibit_tracking_obj.hide = !$lq__person_obj?.hide;
ae_triggers.enable = true;
}}
class="btn btn-sm variant-soft-warning"
>
{#if $ae_loc.trusted_access}
{@html ($lq__person_obj?.enable ? '<span class="fas fa-toggle-on m-1"></span> Disable?' : '<span class="fas fa-toggle-off m-1"></span> Enable?')}
{:else}
<!-- Users see this as the "Archive" option button -->
{@html ($lq__person_obj?.enable ? '<span class="fas fa-toggle-on m-1"></span> Disable' : '<span class="fas fa-toggle-off m-1"></span> Enable')}
{/if}
</button>
</Element_ae_crud>
<!-- Priority/Not -->
<Element_ae_crud
trigger_patch={ae_triggers.priority}
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj?.person_id_random}
field_name={'priority'}
field_type={'button'}
field_value={ae_tmp.value__priority}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={'m-1'}
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();
});
}}
>
{#if $ae_loc.trusted_access}
{($lq__person_obj?.priority ? 'Priority' : 'Not Priority')}
{/if}
<button
on:click={() => {
ae_tmp.value__priority = !$lq__person_obj?.priority;
// $events_slct.exhibit_tracking_obj.hide = !$lq__person_obj?.hide;
ae_triggers.priority = true;
}}
class="btn btn-sm variant-soft-warning"
>
{#if $ae_loc.trusted_access}
{@html ($lq__person_obj?.priority ? '<span class="fas fa-star m-1"></span> Not Priority?' : '<span class="fas fa-star m-1"></span> Priority?')}
{:else}
<!-- Users see this as the "Archive" option button -->
{@html ($lq__person_obj?.priority ? '<span class="fas fa-star m-1"></span> Not Priority' : '<span class="fas fa-star m-1"></span> Priority')}
{/if}
</button>
</Element_ae_crud>
<!-- Allow Auth Key/Not -->
<Element_ae_crud
trigger_patch={ae_triggers.allow_auth_key}
api_cfg={$ae_api}
object_type={'person'}
object_id={$lq__person_obj?.person_id_random}
field_name={'allow_auth_key'}
field_type={'button'}
field_value={ae_tmp.value__allow_auth_key}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={'m-1'}
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();
});
}}
>
{#if $ae_loc.trusted_access}
{($lq__person_obj?.allow_auth_key ? 'Allow Auth Key' : 'Not Allow Auth Key')}
{/if}
<button
on:click={() => {
ae_tmp.value__allow_auth_key = !$lq__person_obj?.allow_auth_key;
// $events_slct.exhibit_tracking_obj.hide = !$lq__person_obj?.hide;
ae_triggers.allow_auth_key = true;
}}
class="btn btn-sm variant-soft-warning"
>
{#if $ae_loc.trusted_access}
{@html ($lq__person_obj?.allow_auth_key ? '<span class="fas fa-key m-1"></span> Not Allow Auth Key?' : '<span class="fas fa-key m-1"></span> Allow Auth Key?')}
{:else}
<!-- Users see this as the "Archive" option button -->
{@html ($lq__person_obj?.allow_auth_key ? '<span class="fas fa-key m-1"></span> Not Allow Auth Key' : '<span class="fas fa-key m-1"></span> Allow Auth Key')}
{/if}
</button>
</Element_ae_crud>
</li>
<li>
<div class="label person__data_json space-y-4">
<label for="person__data_json" class="label">
<span class="fas fa-book"></span>
Person JSON Data
<span class="text-sm text-gray-500">
(no character limit)
</span>
</label>
<textarea
name="data_json"
id="person__data_json"
disabled={!$ae_loc.administrator_access}
class="textarea ae_value person__data_json font-mono"
class:variant-glass-error={(ae_tmp.value__data_json && ae_tmp.value__data_json.length >600 ? true : false)}
required
rows="8" cols="70"
bind:value={ae_tmp.value__data_json}
placeholder="Enter data_json here"></textarea>
<!-- {/if} -->
</div>
<p>JSON length: {(ae_tmp.value__data_json ? ae_util.number_w_commas(ae_tmp.value__data_json.length) : 0)} characters</p>
<div class="flex flex-wrap gap-2 p-1">
<button
type="button"
class="btn btn-md variant-glass-primary hover:variant-filled-primary"
disabled={(ae_tmp.value__data_json == $lq__person_obj.data_json)}
on:click={() => {
console.log('*** Save button clicked ***');
// We need to parse the JSON string into an object. In the future this should be dynamic and allow for basic key_val object.
let data_json_obj = JSON.parse(ae_tmp.value__data_json);
let person_data = {
'data_json': data_json_obj,
};
ae_promises.update__person_obj = core_func.handle_update_ae_obj__person({
api_cfg: $ae_api,
person_id: $lq__person_obj.person_id_random,
data_kv: person_data,
log_lvl: 0,
})
.then(function (update_result) {
// console.log(update_result);
// return update_result;
});
}}
>
{#await ae_promises.update__person_obj}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then}
{#if (ae_tmp.value__data_json == $lq__person_obj.data_json)}
<span class="fas fa-check mx-1"></span>
{:else}
<span class="fas fa-save mx-1"></span>
{/if}
{/await}
Save JSON
</button>
</div>
</li>
</ul>