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

More work on new CRUD element. Now able to update the session location in the list.

Browse Source
This commit is contained in:
Scott Idem
2025-09-29 18:58:54 -04:00
parent 22d7c4728d
commit 0c01eed5c8
3 changed files with 194 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/ae_events_stores.ts
View File

@@ -489,6 +489,7 @@ let events_session_data_struct: key_val = {
show__session_poc_profile: false, show__session_poc_profile: false,
show_modal__session_poc_agree: false, show_modal__session_poc_agree: false,
hide__edit_location: {},
show__edit_location: {}, show__edit_location: {},
status_rpt: { status_rpt: {

116
src/lib/element_ae_crud_v2.svelte
View File

@@ -6,7 +6,7 @@ interface Props {
trigger_patch?: any; trigger_patch?: any;
patch_status?: string; // '', processing, complete, error patch_status?: string; // '', processing, complete, error
patch_complete?: boolean|null; // null = not started, true = complete/success, false = error patch_complete?: boolean|null|string; // null = not started, true = complete/success, false = error
patch_result?: boolean|null|key_val; // Result of the patch operation patch_result?: boolean|null|key_val; // Result of the patch operation
object_type: string; object_type: string;
@@ -20,12 +20,14 @@ interface Props {
new_field_value?: any; new_field_value?: any;
allow_null?: boolean; allow_null?: boolean;
select_option_li?: key_val; select_option_kv?: key_val;
val_empty_is_null?: boolean; // This was added to help with a select option list. If the value is empty (''), it will be set to null. val_empty_is_null?: boolean; // This was added to help with a select option list. If the value is empty (''), it will be set to null.
edit_label?: string; edit_label?: string;
display_inline?: boolean; display_block?: boolean; // If true, the element will be displayed as a block element.
display_block_edit?: boolean; // display_inline?: boolean;
display_absolute_edit?: boolean; // If true, the edit form will be displayed in the top right corner of the element.
// display_block_edit?: boolean;
textarea_cols?: number; textarea_cols?: number;
textarea_rows?: number; textarea_rows?: number;
@@ -33,7 +35,8 @@ interface Props {
hide_element?: boolean; hide_element?: boolean;
hide_edit_btn?: boolean; hide_edit_btn?: boolean;
hide_edit_form?: boolean; // hide_edit_form?: boolean;
show_edit_form?: boolean;
outline_element?: boolean; outline_element?: boolean;
@@ -49,7 +52,7 @@ let {
trigger_patch = null, trigger_patch = null,
patch_status = '', patch_status = '',
patch_complete = null, patch_complete = $bindable(null), // null = not started, true = complete/success, false = error
patch_result = null, patch_result = null,
object_type, object_type,
@@ -60,21 +63,24 @@ let {
previous_field_value = $bindable(null), previous_field_value = $bindable(null),
current_field_value = null, current_field_value = null,
new_field_value = $bindable(null), new_field_value = current_field_value,
allow_null = false, allow_null = false,
select_option_li = $bindable({}), select_option_kv = $bindable({}),
val_empty_is_null = false, // If the value is empty (''), it will be set to null. val_empty_is_null = false, // If the value is empty (''), it will be set to null.
edit_label = 'Edit', edit_label = 'Edit',
display_inline = false, display_block = false,
display_block_edit = false, // display_inline = false,
display_absolute_edit = false,
// display_block_edit = false,
textarea_cols = 80, textarea_cols = 80,
textarea_rows = 5, textarea_rows = 5,
hide_element = $bindable(false), hide_element = $bindable(false),
hide_edit_btn = false, hide_edit_btn = false,
hide_edit_form = true, // hide_edit_form = $bindable(true),
show_edit_form = $bindable(),
outline_element = $bindable(false), outline_element = $bindable(false),
@@ -113,6 +119,12 @@ $effect(() => {
// ; Super Key: ${api_crud_super_key} // ; Super Key: ${api_crud_super_key}
} }
}
if (select_option_kv) {
console.log(select_option_kv);
} }
if (trigger_patch === true) { if (trigger_patch === true) {
@@ -199,7 +211,8 @@ async function handle_obj_field_patch(new_field_value: any) {
patch_complete = false; patch_complete = false;
patch_result = false; patch_result = false;
} else { } else {
patch_complete = true; // patch_complete = true;
patch_complete = object_id; // Return the object ID that was patched
patch_result = { patch_result = {
'type': object_type, 'type': object_type,
'id': object_id, 'id': object_id,
@@ -222,10 +235,13 @@ async function handle_obj_field_patch(new_field_value: any) {
class="{class_li} ae_crud class="{class_li} ae_crud
font-normal font-normal
transition-all duration-300 ease-in-out transition-all duration-300 ease-in-out
relative
z-20
" "
class:hidden={hide_element} class:hidden={hide_element}
class:inline={display_inline} class:block={display_block}
class:inline-block={!display_block}
class:outline_element class:outline_element
> >
@@ -239,7 +255,7 @@ async function handle_obj_field_patch(new_field_value: any) {
<button <button
type="button" type="button"
class:hidden={hide_edit_btn} class:hidden={show_edit_form || hide_edit_btn}
class=" class="
btn btn-icon btn btn-icon
text-xs text-xs
@@ -248,11 +264,11 @@ async function handle_obj_field_patch(new_field_value: any) {
preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400 preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
opacity-50 hover:opacity-100 opacity-50 hover:opacity-100
transition-all transition-all
inline
" "
ondblclick={() => { ondblclick={() => {
hide_edit_btn = true; // hide_edit_btn = true;
hide_edit_form = false; // hide_edit_form = false;
show_edit_form = true;
}} }}
title="Double click to edit property" title="Double click to edit property"
> >
@@ -263,14 +279,31 @@ async function handle_obj_field_patch(new_field_value: any) {
<!-- class:display_block={display_block} --> <!-- class:display_block={display_block} -->
<div <div
class:hidden={hide_edit_form} class:hidden={!show_edit_form}
class:absolute={display_absolute_edit}
class:top-0={display_absolute_edit}
class:right-0={display_absolute_edit}
class="field_editing_wrapper
min-w-content w-100 max-w-full class:drop-shadow-2xl={display_absolute_edit}
class="field_editing_wrapper_v2
border-2 border-dashed hover:border-solid
border-pink-400 dark:border-pink-600
rounded-md
min-w-fit w-full max-w-fit
z-20
p-1 m-0
bg-pink-50/90 dark:bg-pink-900/90
hover:bg-pink-50 hover:dark:bg-pink-900
flex flex-col md:flex-row flex-wrap gap-1
items-center justify-center
space-y-2
transition-all duration-300 ease-in-out
" "
> >
<!-- <span class="grow flex flex-row items-center justify-between"> --> <span class="grow flex flex-row items-center justify-between">
<span class="hidden"> <span class="hidden md:inline font-semibold text-lg">
{edit_label} {edit_label}
</span> </span>
@@ -278,18 +311,23 @@ async function handle_obj_field_patch(new_field_value: any) {
type="button" type="button"
class="btn btn-md ae_btn_surface_outlined m-1" class="btn btn-md ae_btn_surface_outlined m-1"
onclick={() => { onclick={() => {
hide_edit_btn = false; // hide_edit_btn = false;
hide_edit_form = true; // hide_edit_form = true;
show_edit_form = false;
}} }}
title="Close field editing. This does not save any changes." title="Close field editing. This does not save any changes."
> >
<span class="fas fa-window-close"></span> <span class="fas fa-window-close"></span>
<span class="hidden sm:inline">Close</span> <span class="hidden sm:inline">Close</span>
</button> </button>
<!-- </span> --> </span>
<span <span
class="field_value grow min-w-content max-w-full" class="field_value
grow
min-w-fit w-full max-w-fit
flex flex-row flex-wrap items-center justify-center gap-1
"
> >
{#if field_type == 'template'} {#if field_type == 'template'}
@@ -300,13 +338,18 @@ async function handle_obj_field_patch(new_field_value: any) {
{:else if field_type == 'select'} {:else if field_type == 'select'}
<select <select
bind:value={new_field_value} bind:value={new_field_value}
class="select" class="
select
p-1
min-w-fit w-full
border border-gray-300 dark:border-gray-600
"
> >
{#if select_option_li && Object.keys(select_option_li).length == 0} {#if select_option_kv && Object.keys(select_option_kv).length == 0}
<option value="">-- not set --</option> <option value="">-- not set --</option>
{:else if select_option_li && Object.keys(select_option_li).length > 0} {:else if select_option_kv && Object.keys(select_option_kv).length > 0}
{#each Object.keys(select_option_li) as option} {#each Object.keys(select_option_kv) as option}
<option value={option}>{select_option_li[option]}</option> <option value={option}>{select_option_kv[option]}</option>
{/each} {/each}
{:else} {:else}
<option value="">-- no list --</option> <option value="">-- no list --</option>
@@ -346,15 +389,18 @@ async function handle_obj_field_patch(new_field_value: any) {
</span> </span>
<button <button
class="btn btn-lg ae_btn_warning_outlined m-1" class="
ae_btn_warning_outlined
disabled={new_field_value == current_field_value} btn btn-lg
m-1
"
disabled={new_field_value === current_field_value}
onclick={async () => { onclick={async () => {
handle_obj_field_patch(new_field_value); handle_obj_field_patch(new_field_value);
}} }}
title="Save new field value" title="Save new field value"
> >
{#if new_field_value == current_field_value} {#if new_field_value === current_field_value}
{#if (btn_label)} {#if (btn_label)}
{@html btn_label} {@html btn_label}
{:else} {:else}

222
src/routes/events/ae_comp__event_session_obj_li.svelte
View File

@@ -60,8 +60,39 @@ import { events_func } from '$lib/ae_events_functions';
// let ae_promises: key_val = {}; // let ae_promises: key_val = {};
let ae_tmp: key_val = $state({}); let ae_tmp: key_val = $state({});
let ae_triggers: key_val = $state({}); let ae_triggers: key_val = $state({});
let trigger_reload_session_id: string = $state('');
// *** Functions and Logic // *** Functions and Logic
$effect(() => {
// if (ae_triggers.session_obj_id_reload) {
// console.log(`ae_triggers.session_obj_id_reload changed: ${ae_triggers.session_obj_id_reload}`);
// reload_session_id(ae_triggers.session_obj_id_reload);
// }
if (trigger_reload_session_id) {
console.log(`trigger_reload_session_id changed: ${trigger_reload_session_id}`);
reload_event_session_id(trigger_reload_session_id);
trigger_reload_session_id = '';
}
});
function reload_event_session_id(event_session_id_random: string) {
console.log(`Reloading session ID: ${event_session_id_random}`);
events_func.load_ae_obj_id__event_session({
api_cfg: $ae_api,
event_session_id: event_session_id_random,
log_lvl: log_lvl
})
.then(function (load_results) {
console.log(`Loaded session:`, load_results);
});
}
</script> </script>
<!-- xs:max-w-sm lg:max-w-100 --> <!-- xs:max-w-sm lg:max-w-100 -->
@@ -268,152 +299,123 @@ let ae_triggers: key_val = $state({});
{/if} {/if}
{#if $ae_loc.edit_mode} {#if $ae_loc.edit_mode}
<!-- $slct.location_obj_kv -->
<Element_ae_crud_v2 <Element_ae_crud_v2
api_cfg={$ae_api} api_cfg={$ae_api}
trigger_patch={ae_triggers.update_location} trigger_patch={ae_triggers.update_location}
bind:patch_complete={trigger_reload_session_id}
object_type={'event_session'} object_type={'event_session'}
object_id={session_obj?.event_session_id_random} object_id={session_obj?.event_session_id_random}
field_name={'event_location_id_random'} field_name={'event_location_id_random'}
field_type={'button'} field_type={'select'}
current_field_value={session_obj?.event_location_id_random} current_field_value={session_obj?.event_location_id_random}
allow_null={true} allow_null={true}
select_option_li={$slct.location_obj_kv} select_option_kv={$slct.event_location_obj_kv}
hide_element={!$ae_loc.edit_mode} hide_element={!$ae_loc.edit_mode}
hide_edit_btn={true} hide_edit_btn={true}
hide_edit_form={$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] !== true} bind:show_edit_form={$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random]}
outline_element={false} outline_element={false}
display_inline={true} display_block={false}
display_absolute_edit={true}
class_li={'m-1'} class_li={'m-1'}
> >
{#await $slct.location_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then location_obj_li}
{#if location_obj_li && location_obj_li.length > 0}
<label class="text-sm">Location:
<select
bind:value={ae_tmp[session_obj.event_session_id_random].event_location_id_random}
class="select min-w-fit max-w-md text-sm"
>
<option value="">-- No location --</option>
{#each location_obj_li as location_obj}
<option
value={location_obj.event_location_id_random}
selected={location_obj.event_location_id_random == session_obj?.event_location_id_random}
>
{location_obj.name}
({location_obj.event_location_id_random})
</option>
{/each}
</select>
</label>
<button
type="button"
disabled={ae_tmp[session_obj.event_session_id_random].event_location_id_random == session_obj?.event_location_id_random}
onclick={() => {
console.log('Save the location for the session.');
let location_id = ae_tmp[session_obj.event_session_id_random].event_location_id_random;
console.log('Selected location ID:', location_id);
ae_triggers.update_location = true;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning
"
>
<span class="fas fa-save mx-1"></span>
Save
</button>
{/if}
{/await}
</Element_ae_crud_v2> </Element_ae_crud_v2>
{/if} {/if}
{#if ae_tmp?.show__edit_location} {#if $events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random]}
{#await $slct.event_location_obj_li} <!-- {#await $slct.event_location_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span> <span class="fas fa-spinner fa-spin mx-1"></span>
{:then event_location_obj_li} {/await}
<!-- {#if event_location_obj_li && event_location_obj_li.length > 0}
{/if} --> <button
{/await} type="button"
onclick={() => {
console.log('Cancel editing the location for the session.');
<button ae_tmp.event_location_id = null;
type="button" ae_tmp.show__edit_event_location = false;
onclick={() => {
console.log('Cancel editing the location for the session.');
ae_tmp.event_location_id = null; $events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] = false;
ae_tmp.show__edit_event_location = false; }}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-times mx-1"></span>
Cancel
</button> -->
$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] = false; {:else if $ae_loc.edit_mode}
}} <button
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500" type="button"
> ondblclick={() => {
<span class="fas fa-times mx-1"></span> console.log('Edit the location for the session.');
Cancel
</button>
{:else} let params = {
<button qry__limit: 50,
type="button" }
onclick={() => {
console.log('Edit the location for the session.');
let params = { // $slct.event_location_obj_li = await core_func.load_ae_obj_li__event_location({api_cfg: $ae_api, account_id: $slct.account_id, params: params});
qry__limit: 50,
}
// $slct.event_location_obj_li = await core_func.load_ae_obj_li__event_location({api_cfg: $ae_api, account_id: $slct.account_id, params: params}); $slct.event_location_obj_li = events_func.load_ae_obj_li__event_location({
api_cfg: $ae_api,
$slct.event_location_obj_li = events_func.load_ae_obj_li__event_location({ for_obj_type: 'event',
api_cfg: $ae_api, for_obj_id: session_obj?.event_id_random,
for_obj_type: 'event', params: params,
for_obj_id: session_obj?.event_id_random, log_lvl: log_lvl
params: params,
log_lvl: log_lvl
})
.then(function (load_results) {
console.log(`Loaded event_location_obj_li:`, load_results);
// We need to make this ready for the select option list. Convert the list to a key value pair with the event_location_id_random as the key. We also need to set the option text value to: name (room)
if (load_results) {
let event_location_obj_li = load_results;
let event_location_obj_kv = {}; //: key_val = {};
event_location_obj_kv[''] = '-- Select a location --';
event_location_obj_li.forEach((event_location_obj) => {
let option_text = `${event_location_obj.name} (${event_location_obj.code})`;
event_location_obj_kv[event_location_obj.event_location_id_random] = option_text;
});
$slct.event_location_obj_kv = event_location_obj_kv;
}
// $slct.event_location_obj_kv = $slct.event_location_obj_kv;
console.log(`$slct.event_location_obj_kv = `, $slct.event_location_obj_kv);
return load_results;
}) })
.finally(function () { .then(function (load_results) {
console.log(`Finally...`); console.log(`Loaded event_location_obj_li:`, load_results);
ae_tmp.event_location_id = session_obj?.event_location_id_random;
ae_tmp.show__edit_event_location = true;
$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] = true; // We need to make this ready for the select option list. Convert the list to a key value pair with the event_location_id_random as the key. We also need to set the option text value to: name (room)
if (load_results) {
let event_location_obj_li = load_results;
let event_location_obj_kv = {}; //: key_val = {};
event_location_obj_kv[''] = '-- Select a location --';
event_location_obj_li.forEach((event_location_obj) => {
let option_text = `${event_location_obj.name} (${event_location_obj.code})`;
event_location_obj_kv[event_location_obj.event_location_id_random] = option_text;
});
$slct.event_location_obj_kv = event_location_obj_kv;
}
// $slct.event_location_obj_kv = $slct.event_location_obj_kv;
console.log(`$slct.event_location_obj_kv = `, $slct.event_location_obj_kv);
}); return load_results;
}} })
class="btn btn-sm preset-tonal-warning group" .finally(function () {
> console.log(`Finally...`);
<span class="fas fa-edit m-0.75"></span> ae_tmp.event_location_id = session_obj?.event_location_id_random;
<span class="hidden group-hover:inline">Edit</span> ae_tmp.show__edit_event_location = true;
</button>
{/if} $events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] = true;
});
}}
class="
btn btn-icon
text-xs
m-0 px-0.5
preset-tonal-warning hover:preset-tonal-error
preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
opacity-50 hover:opacity-100
transition-all
"
>
<span class="fas fa-edit m-0.75"></span>
<!-- group-hover:inline -->
<span class="hidden">Edit</span>
</button>
{/if}
</td> </td>