From 24ba3940f8d5905b032a54d01cc6b220c30a3ea3 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 29 Sep 2025 14:06:47 -0400
Subject: [PATCH] Work on updating the custom CRUD element.

---
 src/lib/element_ae_crud_v2.svelte             | 532 ++++++++++++++++++
 .../ae_comp__event_session_obj_li.svelte      | 145 +++++
 2 files changed, 677 insertions(+)
 create mode 100644 src/lib/element_ae_crud_v2.svelte

diff --git a/src/lib/element_ae_crud_v2.svelte b/src/lib/element_ae_crud_v2.svelte
new file mode 100644
index 00000000..d7b889d9
--- /dev/null
+++ b/src/lib/element_ae_crud_v2.svelte
@@ -0,0 +1,532 @@
+<script lang="ts">
+interface Props {
+    log_lvl?: number;
+    api_cfg?: key_val;
+    // export let api_crud_super_key: null|string = api_cfg.api_crud_super_key;
+
+    trigger_patch?: any;
+    patch_status?: string; // '', processing, complete, error
+    patch_complete?: boolean|null; // null = not started, true = complete/success, false = error
+    patch_result?: boolean|null|key_val; // Result of the patch operation
+
+    object_type: string;
+    object_id: string;
+
+    field_name: string;
+    field_type?: string; // button, text, textarea, template (older method), select (in progress method)
+
+    previous_field_value?: any;
+    current_field_value?: any;
+    new_field_value?: any;
+
+    allow_null?: boolean;
+    select_option_li?: 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.
+
+    edit_label?: string;
+    display_inline?: boolean;
+    display_block_edit?: boolean;
+    textarea_cols?: number;
+    textarea_rows?: number;
+
+    // export let input_field_template: null|object = null;
+
+    hide_element?: boolean;
+    hide_edit_btn?: boolean;
+    hide_edit_form?: boolean;
+
+    outline_element?: boolean;
+
+    btn_label?: any; // '<span class="fas fa-check mx-1"></span> Save'; // PATCH
+    // export let remove_breaks = false;
+    class_li?: string;
+    children?: import('svelte').Snippet;
+}
+
+let {
+    log_lvl = 0,
+    api_cfg = {'api_crud_super_key': null},
+
+    trigger_patch = null,
+    patch_status = '',
+    patch_complete = null,
+    patch_result = null,
+
+    object_type,
+    object_id,
+
+    field_name,
+    field_type = 'text',
+
+    previous_field_value = $bindable(null),
+    current_field_value = null,
+    new_field_value = $bindable(null),
+
+    allow_null = false,
+    select_option_li = $bindable({}),
+    val_empty_is_null = false, // If the value is empty (''), it will be set to null.
+
+    edit_label = 'Edit',
+    display_inline = false,
+    display_block_edit = false,
+    textarea_cols = 80,
+    textarea_rows = 5,
+
+    hide_element = $bindable(false),
+    hide_edit_btn = false,
+    hide_edit_form = true,
+
+    outline_element = $bindable(false),
+
+    btn_label = null,
+    class_li = '',
+    children
+}: Props = $props();
+
+// *** Import Svelte core
+import { browser } from '$app/environment';
+
+// *** Import Aether core variables and functions
+import type { key_val } from '$lib/ae_stores';
+// import { api } from '$lib/api';
+import { core_func } from '$lib/ae_core/ae_core_functions';
+// import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+
+// *** Import Aether core components
+// *** Import Aether module variables and functions
+// *** Import Aether module components
+
+// export let show_field_name = true;
+// export let show_original_value = true;
+// export let trim_string = false;
+
+
+// *** Set initial variables
+let ae_promises: key_val = $state({}); // Promise<any>;
+// let patch_result: null|Promise<any>|key_val|string = $state();
+
+
+$effect(() => {
+    if (browser) {
+        if (log_lvl) {
+            console.log(`Element AE CRUD: Object Type: ${object_type}; Object ID: ${object_id}; Field Name: ${field_name}; New Field Value: ${new_field_value} (Current: ${current_field_value})`);
+            // ; Super Key: ${api_crud_super_key}
+        }
+
+    }
+
+    if (trigger_patch === true) {
+        if (log_lvl) {
+            console.log('AE CRUD: Patch triggered by trigger_patch = true');
+        }
+        trigger_patch = null;
+        handle_obj_field_patch(new_field_value);
+
+        // if (new_field_value !== current_field_value) {
+        //     if (log_lvl > 1) {
+        //         console.log(`AE CRUD: field_value changed from ${current_field_value} to ${new_field_value}`);
+        //     }
+        // }
+    }
+});
+
+
+// Updated 2024-03-22
+async function handle_obj_field_patch(new_field_value: any) {
+    if (log_lvl) {
+        console.log(`AE CRUD: Patching Object Type: ${object_type}; Object ID: ${object_id}; Field Name: ${field_name}; New Field Value: ${new_field_value}; Current Field Value: ${current_field_value}`);
+        // ; Super Key: ${api_crud_super_key}
+    }
+
+    patch_status = 'Processing...';
+    patch_complete = null;
+    patch_result = null;
+
+    // This was added to help with a select option list. If the value is empty (''), it will be set to null.
+    if (val_empty_is_null && new_field_value == '') {
+        new_field_value = null;
+    }
+
+    // NOTE: Is this needed? The field_name, field_value, and fields parameters for update_ae_obj_id_crud() already take care of the data portion. They are added to data_list object as part of the JSON request.
+    // NOTE: Currently this only handles one field and value at a time. This may need to be changed in the future to use the "fields" parameter as well.
+    // let patch_data = {}
+
+    // if (remove_breaks) {
+    //     patch_data['field_value'] = field_value.replace(/(\r\n|\n|\r)/gm, "");
+    // } else {
+    //     patch_data['field_value'] = field_value;
+    // }
+
+    // patch_data[field_name] = field_value;
+    // console.log(patch_data);
+
+    // let params = {};
+
+    ae_promises.api_update__ae_obj = core_func.handle_update_ae_obj_id_crud({
+        api_cfg: api_cfg,
+        object_type: object_type,
+        object_id: object_id,
+        field_name: field_name,
+        new_field_value: new_field_value,
+        params: {},
+        try_cache: false,
+        log_lvl: 0
+        })
+    .then(function (results) {
+        console.log('Field PATCH Promise', results);
+
+        if (results) {
+            console.log(`Patched - Field Name: ${field_name} with New Field Value: ${new_field_value}; Original Field Value: ${current_field_value}`);
+            patch_status = 'PATCH complete';
+            current_field_value = new_field_value;
+        } else {
+            console.log(`Not Patched - Field Name: ${field_name} with New Field Value: ${new_field_value}; Original Field Value: ${current_field_value}`);
+            patch_status = 'PATCH failed';
+            return false;
+        }
+        return true;
+    })
+    .catch(function (error) {
+        patch_status = 'Error during PATCH';
+        console.log('Something went wrong patching the record.');
+        console.log(error);
+        return false;
+    })
+    .finally(function () {
+        console.log('Field PATCH Promise finally');
+        if (patch_status != 'PATCH complete') {
+            patch_status = 'Error during PATCH';
+            patch_complete = false;
+            patch_result = false;
+        } else {
+            patch_complete = true;
+            patch_result = {
+                    'type': object_type,
+                    'id': object_id,
+                    'field_name': field_name,
+                    'field_value': new_field_value,
+                    'original_value': current_field_value,
+                }
+        }
+    });
+
+    return ae_promises.api_update__ae_obj;
+}
+
+
+</script>
+
+
+<!-- relative -->
+<div
+    class="{class_li} ae_crud
+        font-normal
+        transition-all duration-300 ease-in-out
+
+        "
+    class:hidden={hide_element}
+    class:inline={display_inline}
+    class:outline_element
+    >
+
+    {@render children?.()}
+
+    <span
+        class="field_viewing_wrapper
+            "
+        >
+        <!-- {@render children?.()} -->
+
+        <button
+            type="button"
+            class:hidden={hide_edit_btn}
+            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
+                inline
+                "
+            ondblclick={() => {
+                hide_edit_btn = true;
+                hide_edit_form = false;
+            }}
+            title="Double click to edit property"
+            >
+            <span class="fas fa-edit m-0 p-0"></span>
+            <span class="hidden">Edit</span>
+        </button>
+    </span>
+
+    <!-- class:display_block={display_block} -->
+    <div
+        class:hidden={hide_edit_form}
+
+        class="field_editing_wrapper
+            min-w-content w-100 max-w-full
+            "
+        >
+        <!-- <span class="grow flex flex-row items-center justify-between"> -->
+            <span class="hidden">
+            {edit_label}
+            </span>
+
+            <button
+                type="button"
+                class="btn btn-md ae_btn_surface_outlined m-1"
+                onclick={() => {
+                    hide_edit_btn = false;
+                    hide_edit_form = true;
+                }}
+                title="Close field editing. This does not save any changes."
+                >
+                <span class="fas fa-window-close"></span>
+                <span class="hidden sm:inline">Close</span>
+            </button>
+        <!-- </span> -->
+
+        <span
+            class="field_value grow min-w-content max-w-full"
+
+            >
+        {#if field_type == 'template'}
+            <!-- <Element_input_v2 {...input_field_template} bind:value={field_value} /> -->
+        {:else if field_type == 'button'}
+            <!-- <input type="button" bind:value={field_value}> -->
+            {new_field_value}
+        {:else if field_type == 'select'}
+            <select
+                bind:value={new_field_value}
+                class="select"
+                >
+                {#if select_option_li && Object.keys(select_option_li).length == 0}
+                    <option value="">-- not set --</option>
+                {:else if select_option_li && Object.keys(select_option_li).length > 0}
+                    {#each Object.keys(select_option_li) as option}
+                        <option value={option}>{select_option_li[option]}</option>
+                    {/each}
+                {:else}
+                    <option value="">-- no list --</option>
+                {/if}
+            </select>
+
+        {:else if field_type == 'text'}
+            <input
+                bind:value={new_field_value}
+                class="input ae_btn_surface min-w-64 w-96 max-w-full"
+                >
+        {:else if field_type == 'textarea'}
+            <textarea
+                bind:value={new_field_value}
+                cols={textarea_cols}
+                rows={textarea_rows}
+                class="textarea"
+                ></textarea>
+        {:else}
+            <input
+                bind:value={new_field_value}
+                class="input w-fit"
+                >
+        {/if}
+        {#if allow_null}
+            <button
+                class="btn btn-sm ae_btn_warning m-1"
+                onclick={() => {
+                    new_field_value = null;
+                }}
+                title="Set value to NULL"
+                >
+                Ø
+                NULL
+            </button>
+        {/if}
+        </span>
+
+        <button
+            class="btn btn-lg ae_btn_warning_outlined m-1"
+
+            disabled={new_field_value == current_field_value}
+            onclick={async () => {
+                handle_obj_field_patch(new_field_value);
+            }}
+            title="Save new field value"
+            >
+            {#if new_field_value == current_field_value}
+                {#if (btn_label)}
+                    {@html btn_label}
+                {:else}
+                    <span class="fas fa-check mx-1"></span>
+                    <span>Save</span>
+                {/if}
+                <!-- <span>{patch_result}</span> -->
+            {:else}
+                {#if (btn_label)}
+                    {@html btn_label}
+                {:else}
+                    <span class="fas fa-save mx-1"></span>
+                    <span>Save</span>
+                {/if}
+            {/if}
+
+        </button>
+
+        <div
+            class="field_patch_result"
+            class:hidden={!patch_status}
+            >
+            {#await ae_promises.api_update__ae_obj}
+                <span class="fas fa-spinner fa-spin mx-1"></span>
+                <span>Processing...</span>
+            {:then}
+                {#if patch_status}
+                    <span class="fas fa-check mx-1"></span>
+                    <span>{patch_status}</span>
+                {:else}
+                    <!-- <div>Nothing to show yet...</div> -->
+                {/if}
+            {/await}
+        </div>
+    </div>
+
+</div>
+
+
+<style>
+
+.ae_crud.outline_element .field_viewing_wrapper {
+    outline: dotted thin hsla(0,50%,50%,0);
+    transition: outline 3s 1s;
+}
+.ae_crud.outline_element .field_viewing_wrapper:hover {
+    outline: dashed thin hsla(0,50%,50%,.9);
+    transition: outline 1s .5s;
+}
+
+
+
+.ae_crud .field_viewing_wrapper {
+    margin: 0;
+    padding: 0;
+
+    /* color: hsla(0,0%,50%,.8); */
+    opacity: .25;
+
+    /* NOTE: transition when hover ends */
+    transition-property: opacity, background-color, border-color, color, height, width;
+    transition-delay: 1.00s; /* no delay */
+    transition-duration: .55s;
+    transition-timing-function: linear;
+}
+
+.ae_crud .field_viewing_wrapper:hover {
+    /* outline: solid thin hsla(0,50%,50%,.9); */
+    /* color: hsla(0,50%,50%,.9); */
+
+    opacity: 1;
+
+    /* NOTE: transition when hover starts */
+    transition-property: opacity, background-color, border-color, color, height, width;
+    transition-delay: .25s; /* no delay */
+    transition-duration: .50s;
+    transition-timing-function: linear;
+}
+
+.ae_crud .field_editing_wrapper {
+    /* outline: dashed thin pink; */
+
+
+    /* position: relative; */
+
+    /* contain: layout; */
+    /* contain: size; */
+    /* contain: none; */
+    contain: content;
+
+    box-shadow: .5em .5em .75em .75em hsla(0,0%,0%,0.5);
+
+    /* color: hsla(0,0%,50%,.8); */
+    /* background-color: hsla(0,0%,50%,.5); */
+    /* border: dashed thin transparent; */
+
+    /* background-color: yellow; */
+    background-color: hsla(60,50%,80%,.95);
+    border: solid thin hsla(0,50%,50%,.50);
+    border-radius: .5em;
+
+    height: auto;
+    /* height: 100%; */
+    max-height: 100%;
+
+    min-width: fit-content;
+    width: auto;
+    max-width: 100%;
+
+    /* font-size: 1em; */
+    /* line-height: 1em; */
+
+    /* NOTE: transition when hover ends */
+    transition-property: background-color, border-color, color, height, width;
+    transition-delay: .75s; /* short delay */
+    transition-duration: .50s;
+    transition-timing-function: linear;
+
+    z-index: 1;
+
+    padding: .5em;
+
+}
+
+
+
+
+.ae_crud.show_crud.display_inline .field_editing_wrapper:hover {
+    background-color: hsla(60,60%,90%,.80);
+    z-index: 55;
+}
+
+.ae_crud.show_crud.display_inline .field_editing_wrapper {
+    /* display: block; */
+    display: inline-block;
+    /* display: inline; */
+
+    box-shadow: initial;
+    background-color: hsla(60,50%,80%,.40);
+
+    padding: .25em;
+
+    position: initial;
+
+    z-index: 0;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: .5em;
+
+    width: 30%;
+}
+
+.ae_crud.show_crud.display_inline .field_editing_wrapper.display_block_edit {
+    /* display: block; */
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: .5em;
+
+    flex-grow: 1;
+
+    height: auto;
+    width: 100%;
+}
+
+.ae_crud textarea {
+    height: auto;
+}
+/* END: Svelte CRUD (update) component  */
+</style>
diff --git a/src/routes/events/ae_comp__event_session_obj_li.svelte b/src/routes/events/ae_comp__event_session_obj_li.svelte
index 3eefaca2..4d82a1bb 100644
--- a/src/routes/events/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events/ae_comp__event_session_obj_li.svelte
@@ -35,6 +35,7 @@ let {
 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';
 import Element_manage_event_file_li from '$lib/element_manage_event_file_li_direct.svelte';
@@ -265,6 +266,150 @@ let ae_triggers: key_val = $state({});
                 <!-- {@html session_obj?.event_location_name ? session_obj?.event_location_name : ae_snip.html__not_set} -->
             </a>
         {/if}
+
+        {#if $ae_loc.edit_mode}
+        <Element_ae_crud_v2
+            api_cfg={$ae_api}
+
+            trigger_patch={ae_triggers.update_location}
+
+            object_type={'event_session'}
+            object_id={session_obj?.event_session_id_random}
+            field_name={'event_location_id_random'}
+            field_type={'button'}
+
+            current_field_value={session_obj?.event_location_id_random}
+
+            allow_null={true}
+
+            hide_element={!$ae_loc.edit_mode}
+            hide_edit_btn={false}
+            hide_edit_form={true}
+
+            outline_element={false}
+            display_inline={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}
+
+                {#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}
+
+                {/if} -->
+                {/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;
+                    }}
+                    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 location for the session.');
+
+                        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 = 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;
+                        })
+                        .finally(function () {
+                            console.log(`Finally...`);
+                            ae_tmp.event_location_id = session_obj?.event_location_id_random;
+                            ae_tmp.show__edit_event_location = true;
+                        });
+                    }}
+                    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>
+
+            {/if}
+
+
     </td>
 
     <td