From 21ad9d900cbbda951bb90b5a27dc46c7c8967c38 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 25 Jun 2024 11:37:03 -0400
Subject: [PATCH] Adding the ability to quickly edit most fields. Other general
 clean up.

---
 src/lib/ae_events__event_presentation.ts      |   2 +-
 src/lib/ae_events__event_presenter.ts         |   8 +-
 src/lib/ae_events__event_session.ts           |   2 +-
 src/lib/element_ae_crud.svelte                |  49 +++--
 .../session/[slug]/+page.svelte               | 141 ++++++++++---
 .../session/[slug]/presenter_view.svelte      | 188 ++++++++++++++++--
 6 files changed, 321 insertions(+), 69 deletions(-)

diff --git a/src/lib/ae_events__event_presentation.ts b/src/lib/ae_events__event_presentation.ts
index 8e29f65f..4a654890 100644
--- a/src/lib/ae_events__event_presentation.ts
+++ b/src/lib/ae_events__event_presentation.ts
@@ -87,7 +87,7 @@ export async function handle_load_ae_obj_li__event_presentation(
         use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
         enabled: enabled,
         hidden: hidden,
-        order_by_li: {'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
         limit: limit,
         offset: offset,
         params_json: params_json,
diff --git a/src/lib/ae_events__event_presenter.ts b/src/lib/ae_events__event_presenter.ts
index 12cf9ada..2429fad0 100644
--- a/src/lib/ae_events__event_presenter.ts
+++ b/src/lib/ae_events__event_presenter.ts
@@ -87,7 +87,7 @@ export async function handle_load_ae_obj_li__event_presenter(
         use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
         enabled: enabled,
         hidden: hidden,
-        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'given_name': 'ASC', 'family_name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
         limit: limit,
         offset: offset,
         params_json: params_json,
@@ -177,13 +177,13 @@ export async function handle_update_ae_obj__event_presenter(
         {
             api_cfg,
             event_presenter_id,
-            data,
+            data_kv,
             params={},
             log_lvl=0
         }: {
             api_cfg: any,
             event_presenter_id: string,
-            data: any,
+            data_kv: any,
             params?: key_val,
             log_lvl?: number
         }
@@ -194,7 +194,7 @@ export async function handle_update_ae_obj__event_presenter(
         api_cfg: api_cfg,
         obj_type: 'event_presenter',
         obj_id: event_presenter_id, // NOTE: This is the FQDN, not normally the ID.
-        fields: data,
+        fields: data_kv,
         key: api_cfg.api_crud_super_key,
         params: params,
         return_obj: true,
diff --git a/src/lib/ae_events__event_session.ts b/src/lib/ae_events__event_session.ts
index ef448bde..fe15127e 100644
--- a/src/lib/ae_events__event_session.ts
+++ b/src/lib/ae_events__event_session.ts
@@ -88,7 +88,7 @@ export async function handle_load_ae_obj_li__event_session(
         use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
         enabled: enabled,
         hidden: hidden,
-        order_by_li: {'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
         limit: limit,
         offset: offset,
         params_json: params_json,
diff --git a/src/lib/element_ae_crud.svelte b/src/lib/element_ae_crud.svelte
index 5c5c592f..f8c3e9a5 100644
--- a/src/lib/element_ae_crud.svelte
+++ b/src/lib/element_ae_crud.svelte
@@ -33,7 +33,7 @@ export let textarea_rows: number = 5;
 export let hide_edit_btn = false;
 export let outline_element = false;
 export let show_crud = false;
-export let btn_label = '<span class="fas fa-check"></span> Save'; // PATCH
+export let btn_label = '<span class="fas fa-check mx-1"></span> Save'; // PATCH
 
 // export let show_field_name = true;
 // export let show_original_value = true;
@@ -142,7 +142,7 @@ async function handle_obj_field_patch(new_field_value: any) {
         <slot></slot>
 
         <button
-            class="btn btn-sm field_show_btn"
+            class="btn btn-sm variant-soft-warning hover:variant-ghost-error field_show_btn"
             class:hide_edit_btn
             class:show_crud
             on:dblclick={() => {
@@ -156,7 +156,7 @@ async function handle_obj_field_patch(new_field_value: any) {
 
     <span class="field_editing_wrapper">
         <button
-            class="btn btn-sm btn_default field_hide_btn"
+            class="btn btn-sm variant-soft-tertiary hover:variant-ghost-tertiary m-1"
             class:show_crud
             on:click={() => {
                 show_crud = false;
@@ -173,27 +173,39 @@ async function handle_obj_field_patch(new_field_value: any) {
             <!-- <input type="button" bind:value={field_value}> -->
             {field_value}
         {:else if field_type == 'text'}
-            <input bind:value={field_value}>
+            <input
+                bind:value={field_value}
+                class="input w-fit"
+                >
         {:else if field_type == 'textarea'}
-            <textarea bind:value={field_value} cols={textarea_cols} rows={textarea_rows}></textarea>
+            <textarea
+                bind:value={field_value}
+                cols={textarea_cols}
+                rows={textarea_rows}
+                class="textarea"
+                ></textarea>
         {:else}
-            <input bind:value={field_value}>
+            <input
+                bind:value={field_value}
+                class="input w-fit"
+                >
         {/if}
         {#if allow_null}
             <button
-                class="btn btn-sm btn_warning null_value_btn"
+                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning m-1"
                 on:click={async () => {
                     field_value = null;
                 }}
                 title="Set value to NULL"
                 >
-                {@html '&#0;'} NULL
+                &Oslash;
+                NULL
             </button>
         {/if}
         </span>
 
         <button
-            class="btn btn-md btn_primary field_patch_btn"
+            class="btn btn-md variant-soft-primary hover:variant-ghost-primary m-1"
             class:show_crud
             on:click={async () => {
                 handle_obj_field_patch(field_value);
@@ -219,9 +231,9 @@ async function handle_obj_field_patch(new_field_value: any) {
 
 
 <style>
-.ae_crud .field_editing_wrapper {
-    font-size: em;
-}
+/* .ae_crud .field_editing_wrapper {
+    font-size: 1em;
+} */
 
 
 /* BEGIN: Svelte CRUD (update) component  */
@@ -256,10 +268,11 @@ async function handle_obj_field_patch(new_field_value: any) {
     margin: 0;
     padding: 0;
 
-    color: hsla(0,0%,50%,.8);
+    /* color: hsla(0,0%,50%,.8); */
+    opacity: .25;
 
     /* NOTE: transition when hover ends */
-    transition-property: background-color, border-color, color, height, width;
+    transition-property: opacity, background-color, border-color, color, height, width;
     transition-delay: 1.00s; /* no delay */
     transition-duration: .55s;
     transition-timing-function: linear;
@@ -267,10 +280,12 @@ async function handle_obj_field_patch(new_field_value: any) {
 
 .ae_crud .field_viewing_wrapper:hover .field_show_btn {
     /* outline: solid thin hsla(0,50%,50%,.9); */
-    color: hsla(0,50%,50%,.9);
+    /* color: hsla(0,50%,50%,.9); */
+
+    opacity: 1;
 
     /* NOTE: transition when hover starts */
-    transition-property: background-color, border-color, color, height, width;
+    transition-property: opacity, background-color, border-color, color, height, width;
     transition-delay: .25s; /* no delay */
     transition-duration: .50s;
     transition-timing-function: linear;
@@ -330,7 +345,7 @@ async function handle_obj_field_patch(new_field_value: any) {
     transition-duration: .25s;
     transition-timing-function: linear;
 
-    position: absolute;
+    /* position: absolute; */
     /* position: fixed; */
     /* position: relative; */
     /* top: 1em; */
diff --git a/src/routes/events_pres_mgmt/session/[slug]/+page.svelte b/src/routes/events_pres_mgmt/session/[slug]/+page.svelte
index ac7860b3..52604917 100644
--- a/src/routes/events_pres_mgmt/session/[slug]/+page.svelte
+++ b/src/routes/events_pres_mgmt/session/[slug]/+page.svelte
@@ -521,7 +521,50 @@ function send_sign_in_poc_email(
         {/if}
     </li>
     <li>
-        <strong class="text-sm">Date time:</strong> {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'datetime_long')} - {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, 'datetime_long')}
+        <strong class="text-sm">Date time:</strong>
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'event_session'}
+            object_id={$lq__event_session_obj?.event_session_id_random}
+            field_name={'start_datetime'}
+            field_type={'datetime'}
+            field_value={$lq__event_session_obj.start_datetime}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={true}
+            class_li={''}
+            on:ae_crud_updated={e => {
+                console.log(`ae_crud_updated:`, e.detail);
+
+                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
+            }}
+            >
+            {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'datetime_long')}
+        </Element_ae_crud>
+        -
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'event_session'}
+            object_id={$lq__event_session_obj?.event_session_id_random}
+            field_name={'end_datetime'}
+            field_type={'datetime'}
+            field_value={$lq__event_session_obj.end_datetime}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={true}
+            class_li={''}
+            on:ae_crud_updated={e => {
+                console.log(`ae_crud_updated:`, e.detail);
+
+                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
+            }}
+            >
+            {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, 'datetime_long')}
+        </Element_ae_crud>
     </li>
     <li>
         <strong class="text-sm">Location/Room:</strong> {$lq__event_session_obj.event_location_name ? $lq__event_session_obj.event_location_name : '-- not set --'}
@@ -709,31 +752,48 @@ function send_sign_in_poc_email(
 
     <li>
     <div>
-    <strong class="text-sm">
-    Session description:
-    </strong>
-    <button
-        type="button"
-        on:click={() => {
-            console.log('Show/Hide Description');
-            $events_loc.pres_mgmt.show_content__session_description = !$events_loc.pres_mgmt.show_content__session_description;
-        }}
-        class="btn btn-sm variant-soft-surface hover:variant-filled-surface text-xs"
+    <Element_ae_crud
+        api_cfg={$ae_api}
+        object_type={'event_session'}
+        object_id={$lq__event_session_obj?.event_session_id_random}
+        field_name={'description'}
+        field_type={'textarea'}
+        field_value={$lq__event_session_obj.description}
+        allow_null={false}
+        hide_edit_btn={!$ae_loc.trusted_access}
+        outline_element={false}
+        show_crud={false}
+        display_inline={false}
+        textarea_rows={15}
+        class_li={''}
         >
-        {#if $events_loc.pres_mgmt.show_content__session_description}
-            <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>
-    </div>
+        <strong class="text-sm">
+        Session description:
+        </strong>
 
-    <pre
-        class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
-        class:hidden={!$events_loc.pres_mgmt.show_content__session_description}
-        >{$lq__event_session_obj.description}</pre>
+        <button
+            type="button"
+            on:click={() => {
+                console.log('Show/Hide Description');
+                $events_loc.pres_mgmt.show_content__session_description = !$events_loc.pres_mgmt.show_content__session_description;
+            }}
+            class="btn btn-sm variant-soft-surface hover:variant-filled-surface text-xs"
+            >
+            {#if $events_loc.pres_mgmt.show_content__session_description}
+                <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_loc.pres_mgmt.show_content__session_description}
+            >{$lq__event_session_obj.description}</pre>
+    </Element_ae_crud>
+    </div>
     </li>
 
 </ul>
@@ -1105,6 +1165,21 @@ function send_sign_in_poc_email(
             </h4>
 
             <div>
+            <Element_ae_crud
+                api_cfg={$ae_api}
+                object_type={'event_presentation'}
+                object_id={event_presentation_obj.event_presentation_id_random}
+                field_name={'description'}
+                field_type={'textarea'}
+                field_value={event_presentation_obj.description}
+                allow_null={false}
+                hide_edit_btn={!$ae_loc.trusted_access}
+                outline_element={false}
+                show_crud={false}
+                display_inline={false}
+                textarea_rows={15}
+                class_li={''}
+                >
             {#if event_presentation_obj.description}
                 <strong class="text-sm">
                 Description:
@@ -1143,8 +1218,10 @@ function send_sign_in_poc_email(
                     No description provided.
                 </div>
             {/if}
+            </Element_ae_crud>
             </div>
 
+
             <!-- Show presenters for this presentation -->
             {#await event_presentation_obj.event_presenter_li}
                 <p>Loading...</p>
@@ -1323,10 +1400,10 @@ function send_sign_in_poc_email(
                             {/if} -->
 
                             <div class="float-right space-2 flex flex-row items-center">
-                                {#if $ae_loc.administrator_access }
+                                {#if $ae_loc.administrator_access && !event_presenter_obj.person_id_random}
                                 <button
                                     type="button"
-                                    on:click={() => {
+                                    on:click={async () => {
                                         console.log('Add Person');
 
                                         let person_data = {
@@ -1336,17 +1413,27 @@ function send_sign_in_poc_email(
                                             family_name: 'Presenter',
                                             primary_email: 'test+newpres@oneskyit.com',
                                             code: 'new_presenter',
+                                            // Random number between 100000 and 999999
+                                            passcode: Math.floor(Math.random() * 900000) + 100000,
                                             enable: true,
                                         }
 
-                                        core_func.handle_create_ae_obj__person({
+                                        let new_person_obj = await core_func.handle_create_ae_obj__person({
                                             api_cfg: $ae_api,
                                             // user_id: $ae_loc.user_id,
                                             data_kv: person_data,
                                             log_lvl: 1,
                                         })
 
+                                        console.log('new_person_obj:', new_person_obj);
+
                                         // We then need to update the event_presenter with the new person_id.
+                                        events_func.handle_update_ae_obj__event_presenter({
+                                            api_cfg: $ae_api,
+                                            event_presenter_id: event_presenter_obj.event_presenter_id_random,
+                                            data_kv: {person_id_random: new_person_obj.person_id_random},
+                                            log_lvl: 1,
+                                        })
                                     }}
                                     class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
                                     >
diff --git a/src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte b/src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
index 8557978b..13ddf2e1 100644
--- a/src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
+++ b/src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
@@ -339,7 +339,24 @@ async function handle_delete__event_file({event_file_id}) {
 </h2>
 
 <section class="p-2">
-<h3 class="h4">Title: "{$events_slct.presentation_obj.name}"</h3>
+<h3 class="h4">
+    <Element_ae_crud
+        api_cfg={$ae_api}
+        object_type={'event_presentation'}
+        object_id={$events_slct.presentation_obj.event_presentation_id_random}
+        field_name={'name'}
+        field_type={'text'}
+        field_value={$events_slct.presentation_obj.name}
+        allow_null={false}
+        hide_edit_btn={!$ae_loc.trusted_access}
+        outline_element={false}
+        show_crud={false}
+        display_inline={true}
+        class_li={''}
+        >
+        Title: "{$events_slct.presentation_obj.name}"
+    </Element_ae_crud>
+</h3>
 
 <h3 class="h4">Presenter:</h3>
 <ul
@@ -347,29 +364,162 @@ async function handle_delete__event_file({event_file_id}) {
     >
     <li>
         <span class="fas fa-user"></span>
-        {$events_slct.presenter_obj.full_name}
+        <!-- {#if !$events_sess.pres_mgmt.show_edit__event_presenter_name}
+            {$events_slct.presenter_obj.full_name}
+        {:else} -->
+        <!-- <div
+            hidden={!$events_sess.pres_mgmt.show_edit__event_presenter_name}
+            > -->
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'event_presenter'}
+            object_id={$events_slct.presenter_obj.event_presenter_id_random}
+            field_name={'given_name'}
+            field_type={'text'}
+            field_value={$events_slct.presenter_obj.given_name}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={true}
+            class_li={''}
+            >
+            {$events_slct.presenter_obj.given_name}
+        </Element_ae_crud>
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'event_presenter'}
+            object_id={$events_slct.presenter_obj.event_presenter_id_random}
+            field_name={'family_name'}
+            field_type={'text'}
+            field_value={$events_slct.presenter_obj.family_name}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={true}
+            class_li={''}
+            >
+            {$events_slct.presenter_obj.family_name}
+        </Element_ae_crud>
+        <!-- </div> -->
+        <!-- {/if} -->
+
+        <!-- <button
+            on:click={() => {
+                console.log('*** Edit button clicked ***');
+                $events_sess.pres_mgmt.show_edit__event_presenter_name = !$events_sess.pres_mgmt.show_edit__event_presenter_name;
+            }}
+            class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
+            >
+            <span class="fas fa-edit mx-1"></span>
+            Edit
+        </button> -->
     </li>
     <li>
-        <span class="fas fa-envelope"></span>
-        <a
-            href="mailto:{$events_slct.presenter_obj.email}"
-            class="text-blue-500"
-            >{$events_slct.presenter_obj.email}</a>
-    </li>
-    <!-- <li>
-        <span class="fas fa-phone"></span>
-        {$events_slct.presenter_obj.phone}
-    </li> -->
-    <li>
-        <span class="fas fa-building"></span>
-        {$events_slct.presenter_obj.affiliations}
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'event_presenter'}
+            object_id={$events_slct.presenter_obj.event_presenter_id_random}
+            field_name={'email'}
+            field_type={'text'}
+            field_value={$events_slct.presenter_obj.email}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={false}
+            class_li={''}
+            >
+            <span class="fas fa-envelope"></span>
+            <a
+                href="mailto:{$events_slct.presenter_obj.email}"
+                class="text-blue-500"
+                >{$events_slct.presenter_obj.email}</a>
+        </Element_ae_crud>
+
+        {#if $events_slct.presenter_obj.person_primary_email != $events_slct.presenter_obj.email}
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'person'}
+            object_id={$events_slct.presenter_obj.person_id_random}
+            field_name={'primary_email'}
+            field_type={'text'}
+            field_value={$events_slct.presenter_obj.person_primary_email}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={false}
+            class_li={''}
+            >
+            <span class="fas fa-envelope"></span>
+            <a
+                href="mailto:{$events_slct.presenter_obj.person_primary_email}"
+                class="text-blue-500"
+                >{$events_slct.presenter_obj.person_primary_email}</a>
+        </Element_ae_crud>
+        {/if}
+
     </li>
     <li>
-        <span class="fas fa-user-tag"></span>
-        {$events_slct.presenter_obj.professional_title ?? '-- not set --'}
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'event_presenter'}
+            object_id={$events_slct.presenter_obj.event_presenter_id_random}
+            field_name={'affiliations'}
+            field_type={'text'}
+            field_value={$events_slct.presenter_obj.affiliations}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={false}
+            class_li={''}
+            >
+            <span class="fas fa-building"></span>
+            {$events_slct.presenter_obj.affiliations ?? '-- affiliations not set --'}
+        </Element_ae_crud>
     </li>
     <li>
-        <span class="fas fa-user-secret"></span>
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'event_presenter'}
+            object_id={$events_slct.presenter_obj.event_presenter_id_random}
+            field_name={'professional_title'}
+            field_type={'text'}
+            field_value={$events_slct.presenter_obj.professional_title}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={false}
+            class_li={''}
+            >
+            <span class="fas fa-user-tag"></span>
+            {$events_slct.presenter_obj.professional_title && $events_slct.presenter_obj.professional_title.length ? $events_slct.presenter_obj.professional_title : '-- professional title not set --'}
+        </Element_ae_crud>
+    </li>
+    <li>
+        <Element_ae_crud
+            api_cfg={$ae_api}
+            object_type={'person'}
+            object_id={$events_slct.presenter_obj.person_id_random}
+            field_name={'passcode'}
+            field_type={'text'}
+            field_value={$events_slct.presenter_obj.person_passcode}
+            allow_null={true}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={false}
+            class_li={''}
+            >
+            <span class="fas fa-user-secret"></span>
+            {$events_slct.presenter_obj.person_passcode ?? '-- passcode not set --'} (your passcode)
+        </Element_ae_crud>
+
+        <!-- <span class="fas fa-user-secret"></span>
         {$events_slct.presenter_obj.person_passcode} (your passcode)
 
         <button
@@ -380,7 +530,7 @@ async function handle_delete__event_file({event_file_id}) {
             <span class="fas fa-edit">
             </span>
             Edit
-        </button>
+        </button> -->
     </li>
 </ul>