More work on using the new Element_ae_crud_v2 component

This commit is contained in:
Scott Idem
2025-09-30 13:11:52 -04:00
parent 99fe486842
commit f96a14107a
3 changed files with 157 additions and 176 deletions

View File

@@ -36,7 +36,6 @@ let {
// *** Import Svelte specific
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
import Element_ae_crud_v2 from '$lib/element_ae_crud_v2.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
import Comp_event_presenter_obj_li from '../events/[event_id]/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
@@ -309,9 +308,7 @@ let trigger_reload_session_id: string = $state('');
</a>
{/if}
{#if $ae_loc.edit_mode}
<!-- $slct.location_obj_kv -->
<!-- bind:patch_complete={trigger_reload_session_id} -->
{#if $ae_loc.edit_mode && $ae_loc.trusted_access}
<Element_ae_crud_v2
api_cfg={$ae_api}
@@ -339,32 +336,13 @@ let trigger_reload_session_id: string = $state('');
class_li={'m-1'}
>
</Element_ae_crud_v2>
{/if}
{#if $events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random]}
<!-- {#await $slct.event_location_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span>
{/await}
<button
type="button"
onclick={() => {
console.log('Cancel editing the location for the session.');
ae_tmp.event_location_id = null;
ae_tmp.show__edit_event_location = false;
$events_sess.pres_mgmt.show__edit_location[session_obj?.event_session_id_random] = 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> -->
<!-- Nothing here -->
{:else if $ae_loc.edit_mode}
<button
@@ -393,9 +371,8 @@ let trigger_reload_session_id: string = $state('');
});
$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);
console.log(`$slct.event_location_obj_kv = `, $slct.event_location_obj_kv);
return load_results;
})
.finally(function () {
@@ -450,145 +427,93 @@ let trigger_reload_session_id: string = $state('');
{@html ae_snip.html__not_set}
{/if}
{#if 1==3 && $ae_loc.administrator_access}
{#if session_obj?.event_session_id_random == $events_slct.event_session_id && ae_tmp[$events_slct.event_session_id] && ae_tmp[$events_slct.event_session_id].show__edit_poc_person}
<Element_ae_crud
trigger_patch={ae_triggers.update_person_poc}
{#if $ae_loc.edit_mode && $ae_loc.administrator_access }
<Element_ae_crud_v2
api_cfg={$ae_api}
trigger_patch={ae_triggers.update_person_poc}
object_type={'event_session'}
object_id={$events_slct?.event_session_id}
object_id={session_obj?.event_session_id_random}
object_reload={true}
field_name={'poc_person_id_random'}
field_type={'button'}
field_value={ae_tmp[$events_slct.event_session_id].poc_person_id}
allow_null={false}
field_type={'select'}
current_field_value={session_obj?.poc_person_id_random}
allow_null={true}
select_option_kv={$slct.person_obj_kv}
hide_element={!$ae_loc.edit_mode}
hide_edit_btn={true}
bind:show_edit_form={$events_sess.pres_mgmt.show__edit_poc_person[session_obj?.event_session_id_random]}
outline_element={false}
show_crud={false}
display_inline={true}
display_block={false}
display_absolute_edit={true}
class_li={'m-1'}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_session({
api_cfg: $ae_api,
event_session_id: $events_slct?.event_session_id,
log_lvl: 1
})
.then(function (load_results) {
ae_tmp[$events_slct.event_session_id].poc_person_id = null;
ae_tmp[$events_slct.event_session_id].show__edit_poc_person = false;
$events_slct.event_session_id = null;
$events_slct.event_obj = null;
// Careful with the trigger_patch. It will keep firing if not reset.
ae_triggers.update_person_poc = false;
// Maybe reload page?
// window.location.reload();
});
}}
>
{#await $slct.person_obj_li}
<span class="fas fa-spinner fa-spin mx-1"></span>
{:then person_obj_li}
{#if person_obj_li && person_obj_li.length > 0}
<label class="text-sm">PoC:
<select
bind:value={ae_tmp[$events_slct.event_session_id].poc_person_id}
class="select min-w-fit max-w-md text-sm"
>
<option value="">-- Select a person --</option>
{#each person_obj_li as person_obj}
<option
value={person_obj.person_id_random}
selected={person_obj.person_id_random == $events_slct?.event_session_obj?.poc_person_id_random}
>
{person_obj.full_name}
({person_obj.primary_email})
<!-- (ID: {person_obj.person_id_random}) -->
</option>
{/each}
</select>
</label>
</Element_ae_crud_v2>
<button
type="button"
disabled={ae_tmp[$events_slct.event_session_id].poc_person_id == $events_slct?.event_session_obj?.poc_person_id_random}
onclick={() => {
console.log('Save the POC person for the session.');
let person_id = ae_tmp[$events_slct.event_session_id].poc_person_id;
console.log('Selected person ID:', person_id);
ae_triggers.update_person_poc = true;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-save mx-1"></span>
Save
</button>
{/if}
{/await}
</Element_ae_crud>
{/if}
{#if ae_tmp[$events_slct.event_session_id] && ae_tmp[$events_slct.event_session_id].show__edit_poc_person}
<button
type="button"
onclick={() => {
console.log('Cancel the POC person for the session.');
ae_tmp[$events_slct.event_session_id].poc_person_id = null;
ae_tmp[$events_slct.event_session_id].show__edit_poc_person = false;
$events_slct.event_session_id = null;
$events_slct.event_obj = null;
}}
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>
{:else}
<button
type="button"
onclick={() => {
console.log('Edit the POC person for the session.');
// let params = {
// qry__limit: 300,
// }
ondblclick={() => {
console.log('Edit the POC person for the session. Get the list of people first.');
$slct.person_obj_li = 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,
// params: params
limit: 500,
log_lvl: log_lvl
})
.then(function (load_results) {
console.log(`Loaded person_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 person_id_random as the key. We also need to set the option text value to: full_name (primary_email)
if (load_results) {
let person_obj_li = load_results;
let person_obj_kv: key_val = {};
person_obj_kv[''] = '-- Select a person --';
person_obj_li.forEach((person_obj) => {
let option_text = `${person_obj.full_name} (${person_obj.primary_email})`;
person_obj_kv[person_obj.person_id_random] = option_text;
});
$slct.person_obj_kv = person_obj_kv;
}
console.log(`$slct.person_obj_kv = `, $slct.person_obj_kv);
return load_results;
})
.finally(function () {
console.log(`Finally...`);
ae_tmp.poc_person_id = session_obj?.poc_person_id_random;
ae_tmp.show__edit_event_poc_person = true;
$events_sess.pres_mgmt.show__edit_poc_person[session_obj?.event_session_id_random] = true;
});
$events_slct.event_session_id = session_obj?.event_session_id_random;
ae_tmp[$events_slct.event_session_id] = {
poc_person_id: session_obj?.poc_person_id_random,
show__edit_poc_person: true,
};
// }
// ae_tmp[$events_slct.event_session_id].poc_person_id = $events_slct?.event_session_obj?.poc_person_id_random;
// ae_tmp[$events_slct.event_session_id].show__edit_poc_person = true;
}}
class="btn btn-sm ae_btn_warning"
class:hidden={!$ae_loc.edit_mode}
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 mx-1"></span>
Edit
<span class="fas fa-edit m-0.75"></span>
<!-- group-hover:inline -->
<span class="hidden">Edit</span>
</button>
{/if}
{/if} <!-- $ae_loc.trusted_access -->
</span> <!-- flex flex-col items-center md:flex-row md:items-start -->
</td>