Making things work better. Adding CRUD select option list.

2024-06-25 14:05:03 -04:00
parent 21ad9d900c
commit a62ea7dc8d
5 changed files with 128 additions and 108 deletions
--- a/src/lib/ae_core__person.ts
+++ b/src/lib/ae_core__person.ts
@@ -83,7 +83,7 @@ export function handle_db_save_ae_obj_li__person(
                    person_id_random: obj.person_id_random,

                    external_id: obj.external_id,
-                    // code: obj.code,
+                    code: obj.code,

                    account_id: obj.account_id_random,

@@ -91,6 +91,7 @@ export function handle_db_save_ae_obj_li__person(
                    person_profile_id_random: obj.person_profile_id_random, // The new table person_profile will be used soon...

                    user_id: obj.user_id_random,
+                    user_id_random: obj.user_id_random,

                    pronouns: obj.pronouns,
                    informal_name: obj.informal_name,
--- a/src/lib/db_core.ts
+++ b/src/lib/db_core.ts
@@ -8,54 +8,56 @@ export interface Person {
    id: string;
    // id_random: string;
    person_id: string;
-    person_id_random: string;
+    person_id_random?: string;

-    external_id: string;
-    code: string;
+    external_id?: string;
+    code?: string;

    account_id: string;
+    account_id_random?: string;

-    person_profile_id: null|string;
-    person_profile_id_random: null|string; // The new table person_profile will be used soon...
+    person_profile_id?: null|string;
+    person_profile_id_random?: null|string; // The new table person_profile will be used soon...

-    user_id_random: string;
+    user_id?: string;
+    user_id_random?: string;

-    pronouns: null|string;
-    informal_name: null|string;
-    title_names: null|string;
+    pronouns?: null|string;
+    informal_name?: null|string;
+    title_names?: null|string;
    given_name: string;
-    middle_name: null|string;
+    middle_name?: null|string;
    family_name: null|string;
-    designations: null|string;
+    designations?: null|string;

-    professional_title: null|string;
+    professional_title?: null|string;

-    full_name: string;
+    full_name?: string;

-    affiliations: null|string;
+    affiliations?: null|string;

-    primary_email: string;
+    primary_email?: string;

-    biography: null|string;
+    biography?: null|string;

-    agree: null|boolean;
-    comments: null|string;
+    agree?: null|boolean;
+    comments?: null|string;

-    passcode: null|string;
+    passcode?: null|string;

-    data_json: null|string;
+    data_json?: null|string;

    enable: null|boolean;
-    hide: null|boolean;
-    priority: null|boolean
-    sort: null|number;
-    group: null|string;
-    notes: null|string;
+    hide?: null|boolean;
+    priority?: null|boolean
+    sort?: null|number;
+    group?: null|string;
+    notes?: null|string;
    created_on: Date;
-    updated_on: null|Date;
+    updated_on?: null|Date;

    // Additional fields for convenience (database views)
-    username: null|string;
+    username?: null|string;
 }


--- a/src/lib/element_ae_crud.svelte
+++ b/src/lib/element_ae_crud.svelte
@@ -20,10 +20,12 @@ export let api_cfg: key_val = {'api_crud_super_key': null};
 export let object_type: string;
 export let object_id: string;
 export let field_name: string;
-export let field_type: string = 'text'; // text, textarea, template (older method)
+export let field_type: string = 'text'; // button, text, textarea, template (older method), select (in progress method)
 export let field_value: any;
 export let allow_null: boolean = false;
+export let select_option_li: key_val = {};
 export let display_inline: boolean = false;
+export let display_block_edit: boolean = false;

 export let textarea_cols: number = 80;
 export let textarea_rows: number = 5;
@@ -154,9 +156,12 @@ async function handle_obj_field_patch(new_field_value: any) {
        </button>
    </span>

-    <span class="field_editing_wrapper">
+    <div
+        class:display_block_edit
+        class="field_editing_wrapper flex flex-row items-center justify-center min-w-content w-100 max-w-full"
+        >
        <button
-            class="btn btn-sm variant-soft-tertiary hover:variant-ghost-tertiary m-1"
+            class="btn btn-md variant-glass-tertiary hover:variant-ghost-tertiary m-1 transition-all"
            class:show_crud
            on:click={() => {
                show_crud = false;
@@ -164,18 +169,36 @@ async function handle_obj_field_patch(new_field_value: any) {
            title="Close field editing"
            >
            <span class="fas fa-window-close"></span>
+            <span class="hidden md:inline">Close</span>
        </button>

-        <span class="field_value" class:show_crud>
+        <span
+            class="field_value grow min-w-content max-w-full"
+            class:show_crud
+            >
        {#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}> -->
            {field_value}
+        {:else if field_type == 'select'}
+            <select
+                bind:value={field_value}
+                class="select"
+                >
+                {#if select_option_li && Object.keys(select_option_li).length == 0}
+                    <option value="">-- not set --</option>
+                {:else}
+                    {#each Object.keys(select_option_li) as option}
+                        <option value={option}>{select_option_li[option]}</option>
+                    {/each}
+                {/if}
+            </select>
+
        {:else if field_type == 'text'}
            <input
                bind:value={field_value}
-                class="input w-fit"
+                class="input min-w-64 w-96 max-w-full"
                >
        {:else if field_type == 'textarea'}
            <textarea
@@ -205,7 +228,7 @@ async function handle_obj_field_patch(new_field_value: any) {
        </span>

        <button
-            class="btn btn-md variant-soft-primary hover:variant-ghost-primary m-1"
+            class="btn btn-lg variant-glass-primary hover:variant-ghost-primary m-1"
            class:show_crud
            on:click={async () => {
                handle_obj_field_patch(field_value);
@@ -226,7 +249,7 @@ async function handle_obj_field_patch(new_field_value: any) {
                {/if}
            {/await}
        </div>
-    </span>
+    </div>
 </div>


@@ -323,6 +346,7 @@ async function handle_obj_field_patch(new_field_value: any) {
 }

 .ae_crud.show_crud .field_editing_wrapper {
+    /* display: initial; */
    display: block;
    contain: content;

@@ -335,8 +359,8 @@ async function handle_obj_field_patch(new_field_value: any) {
    /* height: 100%; */
    max-height: 100%;

+    min-width: fit-content;
    width: auto;
-    /* width: 100%; */
    max-width: 100%;

    /* NOTE: transition when hover starts */
@@ -371,6 +395,25 @@ async function handle_obj_field_patch(new_field_value: any) {
    position: initial;

    z-index: 0;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: .5em;
+
+    width: 30%;
+}
+
+.ae_crud.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;
+
+    width: 100%;
 }

 .ae_crud textarea {
--- a/src/routes/events_pres_mgmt/session/[slug]/+page.svelte
+++ b/src/routes/events_pres_mgmt/session/[slug]/+page.svelte
@@ -232,6 +232,9 @@ onMount(() => {
 function presenter_sign_in() {
    console.log('Presenter sign in with URL values');

+    $ae_loc.authenticated_access = true;
+    $ae_loc.access_type = 'authenticated';
+
    $events_loc.auth__person.id = $events_sess.auth__entered_key; // person_id
    $events_loc.auth__person.entered_key = $events_sess.auth__entered_key; // also person_id in this case
    $events_loc.auth__person.email = 'test@example.com';
@@ -250,6 +253,9 @@ function presenter_sign_in() {
 function session_sign_in() {
    console.log('Session sign in with URL values');

+    $ae_loc.authenticated_access = true;
+    $ae_loc.access_type = 'authenticated';
+
    $events_loc.auth__person.id = $events_sess.auth__entered_key; // person_id
    $events_loc.auth__person.entered_key = $events_sess.auth__entered_key; // also person_id in this case
    $events_loc.auth__person.email = 'test@example.com';
@@ -266,6 +272,9 @@ function session_sign_in() {
 }

 function sign_out() {
+    $ae_loc.authenticated_access = false;
+    $ae_loc.access_type = 'anonymous';
+
    $events_loc.auth__person = {
        id: null,
        email: null,
@@ -428,97 +437,61 @@ function send_sign_in_poc_email(
    class="space-y-2 px-4"
    >
    <li>
-        <strong class="text-sm">Name/Title:</strong> {$lq__event_session_obj.name}
-        <span class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
-            title="Session code {$lq__event_session_obj.code}"
-            >
-            <span class="fas fa-barcode"></span>
-            {$lq__event_session_obj.code}
-        </span>
-
-        {#if $ae_loc.trusted_access}
        <Element_ae_crud
-            trigger_patch={ae_triggers.update_event_session}
            api_cfg={$ae_api}
            object_type={'event_session'}
            object_id={$lq__event_session_obj?.event_session_id_random}
            field_name={'name'}
            field_type={'text'}
-            field_value={ae_tmp.name}
+            field_value={$lq__event_session_obj?.name}
            allow_null={false}
-            hide_edit_btn={true}
+            hide_edit_btn={!$ae_loc.trusted_access}
            outline_element={false}
            show_crud={false}
            display_inline={true}
-            class_li={'m-1'}
+            display_block_edit={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})
                .then(function (load_results) {
-                    ae_tmp.name = null;
-                    ae_tmp.show__edit_name = false;
-
-                    // Maybe reload page?
-                    // window.location.reload();
                });
            }}
            >
-            {#if ae_tmp?.show__edit_name}
-            <input
-                type="text"
-                bind:value={ae_tmp.name}
-                class="input min-w-fit max-w-md text-sm"
-                />
-            <button
-                type="button"
-                disabled={ae_tmp.name == $lq__event_session_obj?.name}
-                on:click={() => {
-                    console.log('Save the session name.');
-
-                    let name = ae_tmp.name;
-                    console.log('New session name:', name);
-
-                    ae_triggers.update_event_session = true;
-                }}
-                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
-                >
-                <span class="fas fa-save mx-1"></span>
-                Save
-            </button>
-            {/if}
-
-            {#if ae_tmp.show__edit_name}
-            <button
-                type="button"
-                on:click={() => {
-                    console.log('Cancel the session name.');
-
-                    ae_tmp.name = null;
-                    ae_tmp.show__edit_name = false;
-                }}
-                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
-                >
-                <span class="fas fa-times mx-1"></span>
-                Cancel
-            </button>
-            {:else}
-            <button
-                type="button"
-                on:click={() => {
-                    console.log('Edit the session name.');
-
-                    ae_tmp.name = $lq__event_session_obj?.name;
-                    ae_tmp.show__edit_name = true;
-                }}
-                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
-                >
-                <span class="fas fa-edit mx-1"></span>
-                Edit
-            </button>
-            {/if}
+            <strong class="text-sm">Name/Title:</strong> {$lq__event_session_obj.name}
+        </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={'code'}
+            field_type={'text'}
+            field_value={$lq__event_session_obj?.code}
+            allow_null={false}
+            hide_edit_btn={!$ae_loc.trusted_access}
+            outline_element={false}
+            show_crud={false}
+            display_inline={true}
+            display_block_edit={false}
+            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})
+                .then(function (load_results) {
+                });
+            }}
+            >
+            <span class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
+                title="Session code {$lq__event_session_obj.code}"
+                >
+                <strong class="text-sm">code:</strong>
+                <span class="fas fa-barcode"></span>
+                {$lq__event_session_obj.code}
+            </span>
        </Element_ae_crud>
-        {/if}
    </li>
    <li>
        <strong class="text-sm">Date time:</strong>
--- a/src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
+++ b/src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
@@ -382,6 +382,7 @@ async function handle_delete__event_file({event_file_id}) {
            outline_element={false}
            show_crud={false}
            display_inline={true}
+            display_block_edit={false}
            class_li={''}
            >
            {$events_slct.presenter_obj.given_name}