More work on using the new Element_ae_crud_v2 component
This commit is contained in:
Scott Idem
@@ -489,9 +489,11 @@ let events_session_data_struct: key_val = {
|
||||
show__session_poc_profile: false,
|
||||
show_modal__session_poc_agree: false,
|
||||
|
||||
hide__edit_location: {},
|
||||
// hide__edit_location: {},
|
||||
show__edit_location: {},
|
||||
|
||||
show__edit_poc_person: {},
|
||||
|
||||
status_rpt: {
|
||||
recent_files: null,
|
||||
presenters_agree: null,
|
||||
|
||||
@@ -22,7 +22,7 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv }
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
import Comp_event_session_obj_li from '../../ae_comp__event_session_obj_li_wrapper.svelte';
|
||||
import Element_ae_crud from '$lib/element_ae_crud.svelte';
|
||||
import Element_ae_crud_v2 from '$lib/element_ae_crud_v2.svelte';
|
||||
import Comp_event_device_obj_li from './../device/ae_comp__event_device_obj_li_wrapper.svelte';
|
||||
|
||||
// if (log_lvl) {
|
||||
@@ -121,38 +121,34 @@ if (!$events_loc.pres_mgmt?.location_kv) {
|
||||
|
||||
<h4 class="h5 rounded-md p-2 bg-gray-200 flex flex-row gap-1 items-center justify-between">
|
||||
<span>
|
||||
<Element_ae_crud
|
||||
<Element_ae_crud_v2
|
||||
api_cfg={$ae_api}
|
||||
|
||||
object_type={'event_location'}
|
||||
object_id={event_location_obj?.event_location_id_random}
|
||||
object_reload={true}
|
||||
|
||||
field_name={'name'}
|
||||
field_type={'text'}
|
||||
field_value={event_location_obj?.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={true}
|
||||
class_li={''}
|
||||
on:ae_crud_updated={e => {
|
||||
console.log(`ae_crud_updated:`, e.detail);
|
||||
|
||||
events_func.load_ae_obj_id__event_location({
|
||||
api_cfg: $ae_api, event_location_id: event_location_obj.event_location_id_random, log_lvl: 1
|
||||
})
|
||||
.then(function (load_results) {
|
||||
})
|
||||
.then(function (load_results) {
|
||||
// $events_trigger = 'load__event_location_obj_id';
|
||||
// $events_trig_kv['event_location_id'] = event_location_obj.event_location_id_random;
|
||||
});
|
||||
}}
|
||||
current_field_value={event_location_obj?.name}
|
||||
|
||||
allow_null={false}
|
||||
|
||||
hide_element={!$ae_loc.edit_mode}
|
||||
hide_edit_btn={false}
|
||||
|
||||
outline_element={false}
|
||||
display_block={false}
|
||||
display_absolute_edit={false}
|
||||
|
||||
class_li={'m-1'}
|
||||
>
|
||||
<!-- <strong class="text-sm">Name/Title:</strong> -->
|
||||
<span class="fas fa-map-marker-alt m-1 text-neutral-800/80"></span>
|
||||
"{event_location_obj?.name ?? '-- not set --'}"
|
||||
</Element_ae_crud>
|
||||
</Element_ae_crud_v2>
|
||||
|
||||
<!-- "{event_location_obj.name}" -->
|
||||
{#if event_location_obj?.code && !$events_loc.pres_mgmt?.hide__location_code}
|
||||
<span class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
|
||||
@@ -234,7 +230,7 @@ if (!$events_loc.pres_mgmt?.location_kv) {
|
||||
<div
|
||||
class:hidden={!$events_loc.pres_mgmt.show_content__location_description}
|
||||
>
|
||||
<Element_ae_crud
|
||||
<!-- <Element_ae_crud
|
||||
api_cfg={$ae_api}
|
||||
object_type={'event_location'}
|
||||
object_id={event_location_obj?.event_location_id_random}
|
||||
@@ -295,15 +291,73 @@ if (!$events_loc.pres_mgmt?.location_kv) {
|
||||
{:else}
|
||||
{@html ae_snip.html__not_set}
|
||||
{/if}
|
||||
<!-- {:else}
|
||||
<div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
|
||||
class:hidden={!$ae_loc.administrator_access}
|
||||
</Element_ae_crud> -->
|
||||
|
||||
<Element_ae_crud_v2
|
||||
api_cfg={$ae_api}
|
||||
|
||||
object_type={'event_location'}
|
||||
object_id={event_location_obj?.event_location_id_random}
|
||||
object_reload={true}
|
||||
|
||||
field_name={'description'}
|
||||
field_type={'textarea'}
|
||||
|
||||
current_field_value={event_location_obj?.description}
|
||||
|
||||
allow_null={true}
|
||||
|
||||
hide_element={!$ae_loc.edit_mode}
|
||||
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
|
||||
|
||||
outline_element={false}
|
||||
display_block={false}
|
||||
display_absolute_edit={false}
|
||||
|
||||
textarea_rows={15}
|
||||
|
||||
class_li={'m-1'}
|
||||
>
|
||||
<strong class="text-sm">
|
||||
Description:
|
||||
</strong>
|
||||
|
||||
{#if event_location_obj?.description}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Show/Hide Description');
|
||||
if ($events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id_random) {
|
||||
$events_sess.pres_mgmt.show_content__location_description = null;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_location_id = null;
|
||||
} else {
|
||||
$events_sess.pres_mgmt.show_content__location_description = event_location_obj.event_location_id_random;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_location_id = event_location_obj.event_location_id_random;
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
|
||||
>
|
||||
<span class="fas fa-exclamation-triangle mx-1"></span>
|
||||
No description provided.
|
||||
</div>
|
||||
{/if} -->
|
||||
</Element_ae_crud>
|
||||
{#if $events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id_random}
|
||||
<span class="fas fa-eye-slash mx-1"></span>
|
||||
<span>Hide Description</span>
|
||||
{:else}
|
||||
<span class="fas fa-eye mx-1"></span>
|
||||
<span>Show</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<pre
|
||||
class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
|
||||
class:hidden={$events_sess.pres_mgmt.show_content__location_description !== event_location_obj.event_location_id_random}
|
||||
>{event_location_obj.description}</pre>
|
||||
{:else}
|
||||
{@html ae_snip.html__not_set}
|
||||
{/if}
|
||||
</Element_ae_crud_v2>
|
||||
</div>
|
||||
|
||||
{#if !$events_loc.pres_mgmt.show_content__location_devices_sessions || $events_loc.pres_mgmt.show_content__location_devices_sessions == 'default' || $events_loc.pres_mgmt.show_content__location_devices_sessions == 'sessions'}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user