More work on using the new Element_ae_crud_v2 component

src/lib/ae_events_stores.ts

@@ -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,

src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte

@@ -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({
+                current_field_value={event_location_obj?.name}
-                        api_cfg: $ae_api, event_location_id: event_location_obj.event_location_id_random, log_lvl: 1
+
-                    })
+                allow_null={false}
-                    .then(function (load_results) {
+
-                    })
+                hide_element={!$ae_loc.edit_mode}
-                    .then(function (load_results) {
+                hide_edit_btn={false}
-                        // $events_trigger = 'load__event_location_obj_id';
+
-                        // $events_trig_kv['event_location_id'] = event_location_obj.event_location_id_random;
+                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}
+            </Element_ae_crud> -->
-                <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_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>
+                    {#if $events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id_random}
-                    No description provided.
+                        <span class="fas fa-eye-slash mx-1"></span>
-                </div>
+                        <span>Hide Description</span>
-            {/if} -->
+                    {:else}
-            </Element_ae_crud>
+                        <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'}

src/routes/events/ae_comp__event_session_obj_li.svelte

@@ -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}
+        {#if $ae_loc.edit_mode && $ae_loc.trusted_access}
-        <!-- $slct.location_obj_kv -->
-        <!-- bind:patch_complete={trigger_reload_session_id} -->
         <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}
+            <!-- Nothing here -->
-                <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> -->
 
         {: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}
+        {#if $ae_loc.edit_mode && $ae_loc.administrator_access }
-        <Element_ae_crud
+        <Element_ae_crud_v2
-            trigger_patch={ae_triggers.update_person_poc}
             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_type={'select'}
-            field_value={ae_tmp[$events_slct.event_session_id].poc_person_id}
+
-            allow_null={false}
+            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_block={false}
-            display_inline={true}
+            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}
+        </Element_ae_crud_v2>
-                <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>
 
-                <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={() => {
+            ondblclick={() => {
-                console.log('Cancel the POC person for the session.');
+                console.log('Edit the POC person for the session. Get the list of people first.');
-
-                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,
-                // }
 
                 $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,
+                    limit: 500,
-                    // params: params
+                    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="
-            class:hidden={!$ae_loc.edit_mode}
+                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>
+            <span class="fas fa-edit m-0.75"></span>
-            Edit
+            <!-- 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>