More work on new CRUD element. Now able to update the session location in the list.
This commit is contained in:
Scott Idem
@@ -60,8 +60,39 @@ import { events_func } from '$lib/ae_events_functions';
|
||||
// let ae_promises: key_val = {};
|
||||
let ae_tmp: key_val = $state({});
|
||||
let ae_triggers: key_val = $state({});
|
||||
let trigger_reload_session_id: string = $state('');
|
||||
|
||||
// *** 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>
|
||||
|
||||
<!-- xs:max-w-sm lg:max-w-100 -->
|
||||
@@ -268,152 +299,123 @@ let ae_triggers: key_val = $state({});
|
||||
{/if}
|
||||
|
||||
{#if $ae_loc.edit_mode}
|
||||
<!-- $slct.location_obj_kv -->
|
||||
<Element_ae_crud_v2
|
||||
api_cfg={$ae_api}
|
||||
|
||||
trigger_patch={ae_triggers.update_location}
|
||||
bind:patch_complete={trigger_reload_session_id}
|
||||
|
||||
object_type={'event_session'}
|
||||
object_id={session_obj?.event_session_id_random}
|
||||
field_name={'event_location_id_random'}
|
||||
field_type={'button'}
|
||||
field_type={'select'}
|
||||
|
||||
current_field_value={session_obj?.event_location_id_random}
|
||||
|
||||
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_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}
|
||||
display_inline={true}
|
||||
display_block={false}
|
||||
display_absolute_edit={true}
|
||||
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>
|
||||
{/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}
|
||||
<span class="fas fa-spinner fa-spin mx-1"></span>
|
||||
{:then event_location_obj_li}
|
||||
<!-- {#if event_location_obj_li && event_location_obj_li.length > 0}
|
||||
<!-- {#await $slct.event_location_obj_li}
|
||||
<span class="fas fa-spinner fa-spin mx-1"></span>
|
||||
{/await}
|
||||
|
||||
{/if} -->
|
||||
{/await}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Cancel editing the location for the session.');
|
||||
|
||||
<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;
|
||||
|
||||
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> -->
|
||||
|
||||
$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>
|
||||
{:else if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
ondblclick={() => {
|
||||
console.log('Edit the location for the session.');
|
||||
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Edit the location for the session.');
|
||||
let params = {
|
||||
qry__limit: 50,
|
||||
}
|
||||
|
||||
let 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 = 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,
|
||||
for_obj_type: 'event',
|
||||
for_obj_id: session_obj?.event_id_random,
|
||||
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;
|
||||
$slct.event_location_obj_li = events_func.load_ae_obj_li__event_location({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_type: 'event',
|
||||
for_obj_id: session_obj?.event_id_random,
|
||||
params: params,
|
||||
log_lvl: log_lvl
|
||||
})
|
||||
.finally(function () {
|
||||
console.log(`Finally...`);
|
||||
ae_tmp.event_location_id = session_obj?.event_location_id_random;
|
||||
ae_tmp.show__edit_event_location = true;
|
||||
.then(function (load_results) {
|
||||
console.log(`Loaded event_location_obj_li:`, load_results);
|
||||
|
||||
$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);
|
||||
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning group"
|
||||
>
|
||||
<span class="fas fa-edit m-0.75"></span>
|
||||
<span class="hidden group-hover:inline">Edit</span>
|
||||
</button>
|
||||
return load_results;
|
||||
})
|
||||
.finally(function () {
|
||||
console.log(`Finally...`);
|
||||
ae_tmp.event_location_id = session_obj?.event_location_id_random;
|
||||
ae_tmp.show__edit_event_location = true;
|
||||
|
||||
{/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>
|
||||
|
||||
Reference in New Issue
Block a user