Making things work better. Adding CRUD select option list.

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,

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;
 }
 
 

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 {