From b0f2e2ccdfd6aca763c146cc052b82480583d43e Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 22 Mar 2024 19:16:14 -0400
Subject: [PATCH] Done for the day

---
 src/lib/ae_events_functions.ts                |  33 +
 src/lib/element_ae_crud.svelte                | 366 +++++++++++
 src/lib/element_input_v2.svelte               | 574 ++++++++++++++++++
 .../exhibit/[slug]/leads_list.svelte          |  32 +-
 .../exhibit/[slug]/leads_manage.svelte        | 180 +++++-
 .../exhibit/[slug]/leads_view_lead.svelte     | 198 +++++-
 6 files changed, 1357 insertions(+), 26 deletions(-)
 create mode 100644 src/lib/element_ae_crud.svelte
 create mode 100644 src/lib/element_input_v2.svelte

diff --git a/src/lib/ae_events_functions.ts b/src/lib/ae_events_functions.ts
index 750268db..bccc8d48 100644
--- a/src/lib/ae_events_functions.ts
+++ b/src/lib/ae_events_functions.ts
@@ -346,6 +346,38 @@ async function handle_load_ae_obj_li__exhibit({api_cfg, event_id, params={}, try
 // }
 
 
+async function handle_load_ae_obj_id__exhibit_tracking({api_cfg, exhibit_tracking_id, try_cache=false}) {
+    console.log(`*** handle_load_ae_obj_id__exhibit_tracking() *** exhibit_tracking_id=${exhibit_tracking_id}`);
+
+    let params = {};
+
+    // $events_sess.exhibits.status_load__exhibit_tracking_obj = 'loading';
+    ae_promises.load__event_exhibit_tracking_obj = await api.get_ae_obj_id_crud({
+        api_cfg: api_cfg,
+        obj_type: 'event_exhibit_tracking',
+        obj_id: exhibit_tracking_id, // NOTE: This is the FQDN, not normally the ID.
+        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
+        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
+        params: params,
+        log_lvl: 0
+        })
+    .then(function (exhibit_tracking_obj_get_result) {
+        if (exhibit_tracking_obj_get_result) {
+            // This is expecting a list
+            handle_db_save_ae_obj_li__exhibitor_tracking({obj_type: 'event_exhibit_tracking', obj_li: [exhibit_tracking_obj_get_result]});
+            return exhibit_tracking_obj_get_result;
+        } else {
+            console.log('No results returned.');
+            return null;
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_promises.load__event_exhibit_tracking_obj;
+}
+
 
 // Updated 2024-03-19
 async function handle_load_ae_obj_li__exhibit_tracking({api_cfg, exhibit_id, params={}, try_cache=true}: {api_cfg: any, exhibit_id: any, params: any, try_cache?: boolean}) {
@@ -655,6 +687,7 @@ let export_obj = {
     handle_search__event_badge: handle_search__event_badge,
     handle_load_ae_obj_id__exhibit: handle_load_ae_obj_id__exhibit,
     handle_load_ae_obj_li__exhibit: handle_load_ae_obj_li__exhibit,
+    handle_load_ae_obj_id__exhibit_tracking: handle_load_ae_obj_id__exhibit_tracking,
     handle_load_ae_obj_li__exhibit_tracking: handle_load_ae_obj_li__exhibit_tracking,
     handle_create_ae_obj__exhibit_tracking: handle_create_ae_obj__exhibit_tracking,
 };
diff --git a/src/lib/element_ae_crud.svelte b/src/lib/element_ae_crud.svelte
new file mode 100644
index 00000000..0055c519
--- /dev/null
+++ b/src/lib/element_ae_crud.svelte
@@ -0,0 +1,366 @@
+<script lang="ts">
+// *** Import Svelte core
+import { createEventDispatcher, onMount } from 'svelte';
+
+// *** Import Aether core variables and functions
+import type { key_val } from '$lib/ae_stores';
+import { api } from '$lib/api';
+// 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/Exposed variables and functions for component
+export let log_lvl: number = 0;
+export let trigger_patch: any = null;
+export let api_cfg: object = {'api_crud_super_key': null};
+export let api_crud_super_key: null|string = api_cfg.api_crud_super_key;
+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_value: any;
+export let allow_null: boolean = false;
+export let display_inline: boolean = false;
+
+export let textarea_cols: number = 80;
+export let textarea_rows: number = 5;
+
+// export let input_field_template: null|object = null;
+
+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 show_field_name = true;
+export let show_original_value = true;
+export let trim_string = false;
+export let remove_breaks = false;
+
+export let class_li: string = '';
+
+// *** Set initial variables
+let ae_promises: key_val = {}; // Promise<any>;
+let patch_result: Promise<any>|key_val;
+
+let original_field_value = field_value;
+
+const dispatch = createEventDispatcher();
+
+
+onMount(() => {
+    // console.log('** Element Mounted: ** Element AE CRUD');
+    if (log_lvl) {
+        console.log(`Element AE CRUD: Object Type: ${object_type}; Object ID: ${object_id}; Field Name: ${field_name}; Field Value: ${field_value}`); // ; Super Key: ${api_crud_super_key}
+    }
+});
+
+
+$: if (trigger_patch) {
+    console.log('AE CRUD: Patch triggered!');
+    // console.log(trigger_patch);
+    trigger_patch = null;
+    handle_obj_field_patch(field_value);
+}
+
+
+
+// Updated 2024-03-22
+async function handle_obj_field_patch(new_field_value: any) {
+    console.log('*** handle_obj_field_patch() ***');
+
+    patch_result = 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 = api.update_ae_obj_id_crud({
+        api_cfg: api_cfg,
+        obj_type: object_type,
+        obj_id: object_id,
+        field_name: field_name,
+        field_value: new_field_value,
+        // fields: data,
+        key: api_crud_super_key,
+        // jwt: null,
+        // params: params,
+        // data: patch_data,
+        log_lvl: 2
+        })
+    .then(function (results) {
+        console.log('PATCH Promise', results);
+
+        if (results) {
+            console.log(`Patched - Field Name: ${field_name} with new Field Value: ${new_field_value}; Original Field Value: ${original_field_value}`);
+            patch_result = 'PATCH complete';
+        } else {
+            console.log(`Not Patched - Field Name: ${field_name} with new Field Value: ${new_field_value}; Original Field Value: ${original_field_value}`);
+            patch_result = 'PATCH failed';
+            return false;
+        }
+
+        dispatch(
+            'ae_crud_updated',
+            {
+                'type': object_type,
+                'id': object_id,
+                'field_name': field_name,
+                'field_value': new_field_value,
+                'original_value': original_field_value,
+            }
+        );
+        return true;
+    })
+    .catch(function (error) {
+        console.log('Something went wrong patching the record.');
+        console.log(error);
+        return false;
+    })
+    .finally(function () {
+        console.log('PATCH Promise finally');
+    });
+
+    return ae_promises.api_update__ae_obj;
+}
+</script>
+
+
+<div class="{class_li} ae_crud" class:show_crud class:display_inline class:outline_element>
+    <span class="field_viewing_wrapper">
+        <slot></slot>
+
+        <button
+            class="btn btn-sm field_show_btn"
+            class:hide_edit_btn
+            class:show_crud
+            on:dblclick={() => {
+                show_crud = true;
+            }}
+            title="Double click to edit"
+            >
+            <span class="fas fa-edit"></span>
+        </button>
+    </span>
+
+    <span class="field_editing_wrapper">
+        <button
+            class="btn btn-sm btn_default field_hide_btn"
+            class:show_crud
+            on:click={() => {
+                show_crud = false;
+            }}
+            title="Close field editing"
+            >
+            <span class="fas fa-window-close"></span>
+        </button>
+
+        <span class="field_value" 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 == 'text'}
+            <input bind:value={field_value}>
+        {:else if field_type == 'textarea'}
+            <textarea bind:value={field_value} cols={textarea_cols} rows={textarea_rows}></textarea>
+        {:else}
+            <input bind:value={field_value}>
+        {/if}
+        {#if allow_null}
+            <button
+                class="btn btn-sm btn_warning null_value_btn"
+                on:click={async () => {
+                    field_value = null;
+                }}
+                title="Set value to NULL"
+                >
+                {@html '&#0;'} NULL
+            </button>
+        {/if}
+        </span>
+
+        <button
+            class="btn btn-md btn_primary field_patch_btn"
+            class:show_crud
+            on:click={async () => {
+                handle_obj_field_patch(field_value);
+            }}
+            title="Save new field value"
+            >
+            {@html btn_label}
+        </button>
+
+        <div class="field_patch_result" class:show_crud>
+            {#await ae_promises.api_update__ae_obj}
+                <div>Processing...</div>
+            {:then}
+                {#if patch_result}
+                    <div>{patch_result}</div>
+                {:else}
+                    <!-- <div>Nothing to show yet...</div> -->
+                {/if}
+            {/await}
+        </div>
+    </span>
+</div>
+
+
+<style>
+.ae_crud .field_editing_wrapper {
+    font-size: em;
+}
+
+
+/* BEGIN: Svelte CRUD (update) component  */
+.ae_crud {
+    /* margin: 0; */
+    /* padding: 0; */
+}
+
+.ae_crud.display_inline {
+    /* outline: solid thin red; */
+    display: inline;
+}
+
+.ae_crud.show_crud .field_viewing_wrapper .field_show_btn {
+    display: none;
+}
+
+.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 .field_show_btn.hide_edit_btn {
+    display: none;
+}
+
+.ae_crud .field_viewing_wrapper .field_show_btn {
+    margin: 0;
+    padding: 0;
+
+    color: hsla(0,0%,50%,.8);
+
+    /* NOTE: transition when hover ends */
+    transition-property: 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 .field_show_btn {
+    /* outline: solid thin hsla(0,50%,50%,.9); */
+    color: hsla(0,50%,50%,.9);
+
+    /* NOTE: transition when hover starts */
+    transition-property: 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; */
+
+    display: none;
+    /* 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;
+
+    /* font-size: 1em; */
+    /* line-height: 1em; */
+
+    height: 1em;
+    width: 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;
+
+}
+
+.ae_crud.show_crud .field_editing_wrapper {
+    display: block;
+    contain: content;
+
+    /* 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%;
+
+    width: auto;
+    /* width: 100%; */
+    max-width: 100%;
+
+    /* NOTE: transition when hover starts */
+    transition-property: background-color, border-color, height, width;
+    transition-delay: .25s; /* no delay */
+    transition-duration: .25s;
+    transition-timing-function: linear;
+
+    position: absolute;
+    /* position: fixed; */
+    /* position: relative; */
+    /* top: 1em; */
+    /* left: 1em; */
+    /* right: 1em; */
+    /* bottom: 1em; */
+
+    z-index: 1;
+
+    padding: .5em;
+}
+
+.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%,.3);
+
+    padding: .25em;
+
+    position: initial;
+
+    z-index: 0;
+}
+
+.ae_crud textarea {
+    height: auto;
+}
+/* END: Svelte CRUD (update) component  */
+</style>
diff --git a/src/lib/element_input_v2.svelte b/src/lib/element_input_v2.svelte
new file mode 100644
index 00000000..cbdaea00
--- /dev/null
+++ b/src/lib/element_input_v2.svelte
@@ -0,0 +1,574 @@
+<script lang="ts">
+import { createEventDispatcher, onMount } from 'svelte';
+
+import util from './utilities.js';
+
+// import Select_element_lu from './element_select_lu.svelte';
+
+
+/* *** BEGIN *** Core input settings */
+
+export let id_random: string = ''; // OSIT Aether specific
+export let obj_type: string = ''; // OSIT Aether specific
+export let obj_prop_name: string = ''; // OSIT Aether specific
+
+
+export let use_name_prefix: boolean = false;
+export let name: string = (use_name_prefix ? `${obj_type}__${obj_prop_name}` : obj_prop_name);
+// console.log(name);
+export let id: string = `${obj_type}__${obj_prop_name}--${id_random}`; // Same as the value for "for"
+// console.log(id);
+
+export let value: null|boolean|number|string = null; // The current value of the property
+console.log(`Input name=${name} value=${value}`);
+export let default_value: null|boolean|number|string = null; // The default value for when value is ''
+// console.log('Default Value:', default_value);
+export let original_value: null|boolean|number|string = value; // The original value
+console.log('Original Value', original_value);
+export let data_type: string = typeof value; // boolean, number, string, json
+console.log('Data Type:', data_type);
+
+// hidden, text, email, date, number, select, checkbox, radio, textarea, etc
+export let type: string = 'text'; // Input type
+
+let set_input_type = (node) => {
+    node.type = 'text';
+};
+let input_element_type_list = ['checkbox', 'date', 'email', 'hidden', 'number', 'text'];
+if (input_element_type_list.includes(type)) {
+    set_input_type = (node) => {
+        node.type = type;
+    };
+} else {
+
+}
+
+console.log(`Input name=${name} value=${value} type=${type}`);
+
+export let disabled: boolean = false; // attribute format: disabled
+export let readonly: boolean = false; // attribute format: readonly="readonly"
+export let required: boolean = false; // attribute format: required="required"
+export let pattern: null|string = null;
+export let focus: boolean = false;
+
+/* *** END *** Core input settings */
+
+
+/* *** BEGIN *** Container content, layout, and behavior */
+
+// Input element specific label and placeholder
+export let label: string = '';
+export let label_date: string = 'Date';
+export let label_time: string = 'Time';
+
+export let placeholder: string = label;
+
+// Input description for container
+export let description: string = ''; // Description
+
+// Layout and style
+export let content_layout: string = ''; // Default empty is label wrap first, label_start, label_end, floating_input
+
+export let class_li: string[] = []; // Classes for the input element
+export let style: string = ''; // Style for the input element
+export let display: string = ''; // Default empty is inline. inline, block, inline-block, break (break after)
+
+export let label_class_li: string[] = [];
+export let label_style: string = '';
+export let label_display: string = ''; // Default empty is inline. inline, block, inline-block, break (break after)
+export let label_location: string = 'start'; // start, end
+
+export let description_location: string = 'end'; // start, end
+
+export let container_class_li: string[] = []; // Classes for the container element
+export let container_style: string = '';
+export let container_display: string = ''; // Default empty is div block. inline, block, inline-block, break (break after)
+
+export let multipart_class_li: string[] = [];
+
+export let input_mode: null|string = null; // This is for special/custom modes like a rich text editor or search.
+console.log(`Input input_mode=${input_mode}`);
+
+/* *** END *** Container content, layout, and behavior */
+
+
+/* *** BEGIN *** Input type specific */
+
+// For checkbox, radio, and select option
+export let option_li: any[] = []; // For checkbox, radio, and select inputs. Not specific to select options. List of key value pairs.
+export let option_none: boolean = false; // If set to true then it will add an option using the select_option_none_text value
+export let option_none_text: string = '-- Not Selected --'; // If set to true then it will add an option using the select_option_none_text value
+
+// For textarea
+export let size: number = null;
+export let rows: number = 3;
+export let cols: number = 80;
+if (type == 'textarea') {
+    console.log(`Input textarea size=${size} rows=${rows} cols=${cols}`);
+}
+
+// For custom date_time. Not "date" or "time" input type only.
+export let date_time_tz: null|string = null;
+let value_datetime = null;
+let value_date = null;
+let value_time = null;
+
+if (type == 'date_time' && value) {
+    console.log(`date_time value: ${value}`);
+    value_datetime = new Date(value+'Z'); // Append the Z so it knows it is UTC (YYY-MM-DDTHH:mm:ssZ)
+    console.log(value_datetime);
+
+    value_datetime = util.iso_datetime_formatter(value_datetime,'datetime_iso');
+    value_date = util.iso_datetime_formatter(value_datetime,'date_iso');
+    value_time = util.iso_datetime_formatter(value_datetime,'time_iso');
+    // value_date = value_datetime.toLocaleDateString();
+    // value_date = value_datetime.toISOString();
+    // value_time = value_datetime.toLocaleTimeString();
+    // value_time = value_datetime.toISOString();
+} else if (type == 'date_time') {
+    console.log('No datetime value passed');
+}
+if (type == 'date_time') {
+    console.log(`Input date_time value_datetime=${value_datetime} value_date=${value_date} value_time=${value_time} date_time_tz=${date_time_tz}`);
+}
+
+/* *** END *** Input type specific */
+
+
+/* THIS NEEDS TO BE CLEANED UP */
+let multipart_style;
+let label_begin;
+let checkbox_none;
+let checked;
+let checkbox_none_text;
+let checkbox_li;
+let radio_option_class_li;
+let radio_none;
+let radio_none_text;
+let radio_li;
+let value_new_line;
+let select_option_none;
+let select_option_li_lu_name;
+let select_option_li;
+let select_option_none_text;
+/* ^^^ THIS NEEDS TO BE CLEANED UP ^^^ */
+
+
+const dispatch = createEventDispatcher();
+
+// type Input = {
+//   name: string;
+//   value: number;
+// };
+// let input: Input;
+
+/*
+ * container_element: span, div, section
+ * container_class_li: []
+ * content_layout: inline, break, bs_floating
+ * content_order: label_value_description, value_label_description, label_description_value
+ * label_class_li: []
+ * class_li: []
+ * start_desc: string
+ * end_desc: string
+ *
+*/
+
+onMount(() => {
+    console.log(`** Element Mounted: ** Element Input v2: ${obj_type} ${obj_prop_name}; type=${data_type}; value=${value}`);
+
+    if (input_mode == 'editor_basic_200') {
+        rich_editor();
+    }
+});
+
+// $: if (value) {
+//     console.log(`input name=${name} value=${value}`);
+//     console.log(typeof value);
+// } else if (typeof value === 'undefined') {
+//     console.log(`input name=${name} value=undefined; resetting to ''`);
+//     value = '';
+// }
+
+$: if (disabled) { disabled=true; } // else { disabled=false; }
+$: if (readonly) { readonly=true; } // else { readonly=false; }
+$: if (required) { required=true; } // else { required=true; }
+
+$: if (data_type) {
+    console.log(`Input value data_type=${data_type}`);
+} else if (data_type == 'json') {
+    console.log(`Need to convert JSON object to string.`);
+    if (typeof value === 'object') {
+        value = JSON.stringify(value);
+        console.log(`Value as data type (${data_type}): ${value}`);
+    } else {
+        console.log('Value is not an object type')
+        console.log(typeof value);
+    }
+}
+
+// // input_mode options: null or '' assume 'text', 'none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', and 'search'
+// $: if (input_mode === null || input_mode == '') {
+//     input_mode = 'text';
+// } else if (input_mode == 'json') {
+// } else if (input_mode == 'editor_basic_200') {
+// }
+// console.log(`input_mode=${input_mode}`);
+
+$: if (container_display == '' || container_display == 'block') {
+    console.log(`input name=${name} container_display=${container_display}`);
+    // NOTE: Using a div will be displayed as block by default
+} else if (container_display == 'inline') {
+    console.log(`input name=${name} container_display=${container_display}`);
+    container_class_li.push('container_inline');
+    container_style = 'display: inline;'
+} else if (container_display == 'inline-block') {
+    console.log(`input name=${name} container_display=${container_display}`);
+    container_class_li.push('container_inline_block');
+    container_style = 'display: inline-block;'
+} else if (typeof container_display === 'undefined') {
+    console.log(`input name=${name} container_display=${container_display}`);
+}
+
+$: if (content_layout == '' || content_layout == 'label_begin') {
+    console.log(`input name=${name} content_layout=${content_layout}`);
+    // label_begin = true;
+} else if (content_layout == 'label_end') {
+    console.log(`input name=${name} content_layout=${content_layout}`);
+    // label_begin = false;
+} else if (content_layout == 'floating_input') {
+    console.log(`input name=${name} content_layout=${content_layout}`);
+    // label_begin = false;
+
+    if (type != 'date_time') {
+        container_class_li.push('form-floating'); // set the container class list
+    } else {
+        multipart_class_li.push('form-floating'); // set the container with multi input parts class list
+    }
+
+    if (type === 'select') {
+        class_li.push('form-select'); // set the select class list
+    } else {
+        console.log('Make form-control???');
+        class_li.push('form-control'); // set the input, select, textarea class list
+    }
+
+    if (type === 'textarea') {
+        let estimate_row_rem = rows + 5.5;
+        style = `height: calc(2px + ${estimate_row_rem}rem);`;
+    }
+} else if (typeof content_layout === 'undefined') {
+    console.log(`input name=${name} content_layout=${content_layout}`);
+}
+
+// function handle_oninput_dispatch() {
+//     console.log(input);
+//     dispatch('oninput', {
+//         name: input.name,
+//         value: input.value,
+//     });
+// }
+
+function handle_oninput_dispatch(event) {
+    console.log(event.target);
+    console.log(value);
+    dispatch('oninput', {
+        name: event.target.name,
+        value: event.target.value,
+    });
+}
+
+
+function rich_editor() {
+    console.log('*** rich_editor() ***');
+
+
+    // let test_element = $('.editor_basic_200');
+    // console.log(test_element);
+
+    // let textarea_element = document.querySelector('.editor_basic_200');
+
+    // let toolbar_element = document.querySelector('.quilljs_toolbar');
+    // console.log(toolbar_element);
+
+    let editor_element = document.querySelector('.quilljs_editor');
+    console.log(editor_element);
+
+    // var editor = new Quill(editor_element, {
+    //     modules: {
+    //         'multi-cursor': true,
+    //         'toolbar': { container: '#quilljs_toolbar' },
+    //         // 'link-tooltip': true,
+    //     },
+    //     placeholder: 'Text goes here',
+    //     theme: 'snow'
+    // });
+
+    var editor = new Quill(editor_element, {
+        modules: {
+            'multi-cursor': true,
+            toolbar: [
+                [{
+                    header: [1, 2, false]
+                }],
+                ['bold', 'italic', 'underline'],
+                ['image', 'code-block']
+            ]
+            // 'link-tooltip': true,
+        },
+        placeholder: 'Text goes here',
+        theme: 'snow'
+    });
+
+
+
+    /*
+    textarea_element.summernote(
+    {
+        tabsize: 4,
+        height: 200,
+        toolbar: [
+            ['cleaner',['cleaner']], // The Button
+            ['edit', ['undo', 'redo']],
+            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
+            ['color', ['forecolor']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['insert', ['link']],
+            ['view', ['codeview', 'help']]
+        ],
+        cleaner:{
+            action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
+            newline: '<br>', // Summernote's default is to use '<p><br></p>'
+            notStyle: '', // Position of Notification
+            icon: '<i class="fas fa-paste"></i>',
+            keepHtml: true, // Remove all Html formats
+            keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>'], // If keepHtml is true, remove all tags except these
+            keepClasses: false, // Remove Classes
+            badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
+            badAttributes: ['style', 'start'], // Remove attributes from remaining tags
+            limitChars: false, // 0/false|# 0/false disables option
+            limitDisplay: 'none', // none|text|html|both
+            limitStop: false // true/false
+        }
+    });
+    */
+}
+</script>
+
+<div class="element element_input {container_class_li.join(' ')}" style={container_style}>
+
+{#if type === 'email' || type === 'date' || type === 'number' || type === 'tel'  || type === 'text' || type === 'time' || type === 'url' }
+    {#if (content_layout == 'label_start' && label)}
+        <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+    {/if}
+
+    <input {id} {name} class={class_li.join(' ')} {style} use:set_input_type {placeholder} {size} {pattern} {readonly} {disabled} {required} inputmode={input_mode} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} use:util.set_focus={focus} on:input={handle_oninput_dispatch} bind:value={value} />
+
+    {#if (content_layout != 'label_start' && label)}
+        <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+    {/if}
+
+    <span>{description}</span>
+
+{:else if type === 'date_time' }
+    {#if (content_layout == 'label_start' && label)}
+        <span class={label_class_li.join(' ')} style={label_style}>{label}</span>
+        <!-- <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label> -->
+    {/if}
+
+    <div class="element_input multipart {multipart_class_li.join(' ')}" style={multipart_style}>
+        {#if label_begin}
+            <label for={`${id}_date`} class={label_class_li.join(' ')} style={label_style}>{label_date}</label>
+        {/if}
+
+        <input id={id+'_date'} name={name+'_date'} {style} class={class_li.join(' ')} type="date" value={value_date} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch} />
+
+        {#if !label_begin}
+            <label for={`${id}_date`} class={label_class_li.join(' ')} style={label_style}>{label_date}</label>
+        {/if}
+    </div>
+
+    <div class="element_input multipart {multipart_class_li.join(' ')}" style={multipart_style}>
+        {#if label_begin}
+            <label for={`${id}_time`} class={label_class_li.join(' ')} style={label_style}>{label_time}</label>
+        {/if}
+
+        <input id={id+'_time'} name={name+'_time'} {style} class={class_li.join(' ')} type="time" value={value_time} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch} />
+
+        {#if !label_begin}
+            <label for={`${id}_time`} class={label_class_li.join(' ')} style={label_style}>{label_time}</label>
+        {/if}
+    </div>
+
+
+    {#if (content_layout != 'label_start' && label)}
+        <span class={label_class_li.join(' ')} style={label_style}>{label}</span>
+        <!-- <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label> -->
+    {/if}
+
+    <span>{description}</span>
+
+{:else if type === 'checkbox' }
+    {#if checkbox_none}
+        {#if !value}
+            {checked='checked'}
+        {/if}
+        <label>{checkbox_none_text}
+        <input {name} type="checkbox" value="" {readonly} {disabled} {required} {checked} on:input={handle_oninput_dispatch} />
+        </label>
+    {/if}
+    {#if checkbox_li.length}
+        {#if (content_layout == 'label_start' && label)}
+            <span class="input_container_label label_begin">{label}</span>
+        {/if}
+
+        {#each Object.entries(checkbox_li) as [li_key, li_value]}
+            {#if li_key.toString() === value.toString() }
+                <label>{li_value}
+                    <input {name} type="checkbox" value="{li_key}" checked on:input={handle_oninput_dispatch}>
+                </label>
+            {:else}
+                <label>{li_value}
+                    <input {name} type="checkbox" value="{li_key}" on:input={handle_oninput_dispatch}>
+                </label>
+            {/if}
+        {/each}
+
+        {#if (content_layout != 'label_start' && label)}
+            <span class="input_container_label label_end">{label}</span>
+        {/if}
+    {:else}
+        {#if label_begin}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+        {/if}
+
+        <input {id} {name} class={class_li.join(' ')} {style} type="checkbox" {value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} {checked} on:input={handle_oninput_dispatch} />
+    {/if}
+
+    <span>{description}</span>
+
+{:else if type === 'radio' }
+    {#if radio_none}
+        {#if !value}
+            {checked='checked'}
+        {/if}
+        <label class={radio_option_class_li.join(' ')}>{@html radio_none_text}
+        <input {name} type="radio" value="" {readonly} {disabled} {required} {checked} on:input={handle_oninput_dispatch} />
+        </label>
+    {/if}
+    {#if radio_li}
+        {#if (content_layout == 'label_start' && label)}
+            <span class="input_container_label label_begin">{label}:</span>
+        {/if}
+
+        <span class="input_container_radio_options">
+        {#each Object.entries(radio_li) as [li_key, li_value]}
+            {#if value === null} <!-- If null then no option should be selected. -->
+                <label>{@html li_value}
+                    <input {name} type="radio" bind:group={value} value="{li_key}" on:input={handle_oninput_dispatch}>
+                </label>
+            {:else if ( li_key.toString() === value.toString() || (li_key == 'true' && value == true) || (li_key == 'false' && value == false) ) }
+                <label>{@html li_value}
+                    <input {name} type="radio" bind:group={value} value="{li_key}" checked on:input={handle_oninput_dispatch}> Z
+                </label>
+            {:else}
+                <label>{@html li_value}
+                    <input {name} type="radio" bind:group={value} value="{li_key}" on:input={handle_oninput_dispatch}>
+                </label>
+            {/if}
+
+            <!-- <label>{@html li_value}
+                <input {name} type="radio" bind:group={value} value="{li_key}" on:input={handle_oninput_dispatch}>
+            </label> -->
+        {/each}
+        </span>
+
+        {#if !label_begin}
+            <span class="input_container_label label_end">{label}:</span>
+        {/if}
+    {:else}
+        {#if label_begin}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>{@html label}</label>
+        {/if}
+
+        <input {id} {name} class={class_li.join(' ')} {style} type="radio" {value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} {checked} on:input={handle_oninput_dispatch} />
+
+        {#if !label_begin}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>{@html label}</label>
+        {/if}
+    {/if}
+
+    <span>{description}</span>
+
+{:else if type === 'textarea'}
+    {#if label_begin}
+        <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+    {/if}
+
+    {#if value_new_line}<br>{/if}
+    <textarea {id} {name} class={class_li.join(' ')} {style} bind:value={value} {placeholder} {readonly} {disabled} {required} {rows} {cols} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch}></textarea>
+    <!-- rows="" cols="" maxlength="" -->
+
+    {#if !label_begin}
+        <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+    {/if}
+
+    <span>{description}</span>
+
+{:else if type === 'hidden'}
+    <input {id} {name} class={class_li.join(' ')} type="hidden" bind:value={value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} />
+
+{:else if type === 'select'}
+    {#if label_begin}
+        <label for={id} class={label_class_li.join(' ')} style={label_style}>
+            {label}
+            <!-- {#if value} <span class="label_select_value">{value}</span>{/if} -->
+        </label>
+    {/if}
+
+    <select {id} {name} class={class_li.join(' ')} {style} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch}>
+        {#if select_option_none}
+            <option value="">{select_option_none_text}</option>
+        {/if}
+        {#if select_option_li_lu_name}
+            <!-- <Select_element_lu lu_list_name={select_option_li_lu_name} params={select_option_li_lu_params} value_field_name={select_option_lu_value_field_name} text_field_name={select_option_lu_text_field_name} slct_value={value} /> -->
+        {:else}
+            {#each Object.entries(select_option_li) as [li_key, li_value]}
+                {#if value === null} <!-- If null then no option should be selected. -->
+                    <option value="{li_key}">
+                        {li_value}
+                    </option>
+                {:else if li_key.toString() === value.toString() }
+                    <option value="{li_key}" selected>
+                        {li_value}
+                    </option>
+                {:else}
+                    <option value="{li_key}">
+                        {li_value}
+                    </option>
+                {/if}
+            {/each}
+        {/if}
+    </select>
+
+    {#if !label_begin}
+        <label for={id} class={label_class_li.join(' ')} style={label_style}>
+            {label}
+            {#if value} <span class="label_select_value">{value}</span>{/if}
+        </label>
+    {/if}
+
+    <span>{description}</span>
+{/if}
+
+<slot name="more_html">
+</slot>
+
+</div>
+
+
+<style>
+.container_inline {
+    display: inline;
+}
+</style>
\ No newline at end of file
diff --git a/src/routes/events_leads/exhibit/[slug]/leads_list.svelte b/src/routes/events_leads/exhibit/[slug]/leads_list.svelte
index 8b150d86..6320db2a 100644
--- a/src/routes/events_leads/exhibit/[slug]/leads_list.svelte
+++ b/src/routes/events_leads/exhibit/[slug]/leads_list.svelte
@@ -28,37 +28,49 @@ let event_exhibit_obj = liveQuery(
 //         .where('event_exhibit_id_random')
 //         .equals($events_slct.exhibit_id)
 //         // .above(0)
-//         .sortBy('created_on') // Use sortBy() instead of orderBy(). toArray() is also not needed???
+//         .sortBy('created_on')
 //         // .orderBy('name')
 //         // .offset(10).limit(5)
 //         // .toArray()
 // );
 
-
 // Testing examples:
+// Use sortBy() instead of orderBy()
+// toArray() is also not needed???
+
 // .where({event_exhibit_id_random: $events_slct.exhibit_id, enable: true, hide: false})
 // .where({event_exhibit_id_random: $events_slct.exhibit_id})
 // .where('event_exhibit_id_random').equals($events_slct.exhibit_id)
 // .and('enable').equals(true)
 // .reverse()
-// .sortBy('updated_on') // Use sortBy() instead of orderBy().
-
+// .sortBy('updated_on')
 // .reverse()
-// .sortBy('created_on') // Use sortBy() instead of orderBy(). toArray() is also not needed???
+// .sortBy('created_on')
 // .toArray()
+// .sortBy('created_on')
+// .reverse()
+// .sortBy('priority') // , 'sort', 'created_on', 'updated_on')
 
+// () => db_events.exhibits.toArray()
 
 // Version 2: This needs work...
 // This is using Dexie JS as a wrapper for IndexedDB
 // This should only show exhibit_tracking objects that are enabled and not hidden.
-// The final results should be sorted by priority, sort, created_on DESC, updated_on DESC
-let event_exhibit_tracking_obj_li = liveQuery(
-    // () => db_events.exhibits.toArray()
+// The final results should be sorted by: priority DESC, sort ASC, created_on DESC, updated_on DESC
+$: event_exhibit_tracking_obj_li = liveQuery(
     () => db_events.exhibit_tracking
         .where({event_exhibit_id_random: $events_slct.exhibit_id})
-        // .and('enable').equals(true)
+        .and((x) => (x.enable === true && x.hide === false))
         .reverse()
-        .sortBy('created_on') // Use sortBy() instead of orderBy().
+        .sortBy('priority')
+        // .orderBy("priority")
+        // .orderBy("sort")
+        // .orderBy("created_on", "desc")
+        // .orderBy("updated_on", "desc")
+        // .sortBy('priority') // Initial sort
+        // .thenBy('created_on', 'desc')
+        // .thenBy('sort')      // Secondary sort
+        // .thenBy('updated_on', 'desc')
 );
 
 
diff --git a/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte b/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte
index 279287e6..30b9db96 100644
--- a/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte
+++ b/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte
@@ -1,19 +1,32 @@
 <script lang="ts">
-// export let data;
-// console.log(`ae_events_leads exhibit [slug] leads_manage.svelte data:`, data);
+console.log(`ae_events_leads exhibit [slug] leads_manage.svelte`);
 
+import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils';
 import { liveQuery } from "dexie";
 import { db_events } from "$lib/db_events";
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
 
-// let param_slug_event_exhibit_id = data.params.slug;
+import Element_ae_crud from '$lib/element_ae_crud.svelte';
 
-let event_exhibit_obj = liveQuery(
+// These will likely be used for patch/update triggers. Maybe delete?
+let ae_triggers: key_val = {};
+
+$: event_exhibit_obj = liveQuery(
     () => db_events.exhibits.get($events_slct.exhibit_id)
 );
 
+// Quickly reload the data for this AE object from the API/DB
+// WARNING: This is triggered with every change to the parent object: $events_slct. This needs to be dealt with here and in other locations.
+$: if ($events_slct.exhibit_id) {
+    console.log(`Reloading exhibit object:`, $events_slct.exhibit_id);
+    events_func.handle_load_ae_obj_id__exhibit({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id});
+
+    // $events_slct.exhibit_obj = $event_exhibit_obj;
+}
+
 
 // Updated 2022-04-22
 export let get_event_exhibit_tracking_export = async function get_event_exhibit_tracking_export({event_exhibit_id, file_type='CSV', return_file=true, filename=null, auto_download=false, params={}, log_lvl=0}) {
@@ -111,6 +124,165 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
 {/if}
 
 
+{#if $ae_loc.administrator_access}
+<!-- Priority (paid) means this exhibit has paid for their license(s). They will also appear at the top of lists. -->
+<Element_ae_crud
+    trigger_patch={ae_triggers.priority}
+    api_cfg={$ae_api}
+    object_type={'event_exhibit'}
+    object_id={$event_exhibit_obj?.event_exhibit_id_random}
+    field_name={'priority'}
+    field_type={'button'}
+    field_value={$events_slct.exhibit_obj.priority}
+    allow_null={false}
+    hide_edit_btn={true}
+    outline_element={false}
+    show_crud={false}
+    display_inline={true}
+    class_li={'m-1'}
+    on:ae_crud_updated={e => {
+        console.log(`ae_crud_updated event:`, e.detail);
+        events_func.handle_load_ae_obj_id__exhibit({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id});
+    }}
+    >
+    {@html ($event_exhibit_obj?.priority ? '<span class="fas fa-hand-holding-usd m-1"></span> Paid' : '<span class="fas fa-search-dollar m-1"></span> Not Paid')}
+    <button
+        type="button"
+        on:click={() => {
+            $events_slct.exhibit_obj.priority = !$event_exhibit_obj?.priority;
+            ae_triggers.priority = true;
+        }}
+        class="btn btn-sm variant-soft-warning"
+        >
+        {@html ($event_exhibit_obj?.priority ? '<span class="fas fa-sync m-1"></span> Not paid?' : '<span class="fa fa-sync m-1"></span> Mark as paid?')}
+    </button>
+</Element_ae_crud>
+
+
+<!-- Field for license_max. A number between 0 and 10. -->
+<Element_ae_crud
+    trigger_patch={ae_triggers.license_max}
+    api_cfg={$ae_api}
+    object_type={'event_exhibit'}
+    object_id={$event_exhibit_obj?.event_exhibit_id_random}
+    field_name={'license_max'}
+    field_type={'text'}
+    field_value={$events_slct.exhibit_obj.license_max}
+    allow_null={false}
+    hide_edit_btn={true}
+    outline_element={false}
+    show_crud={false}
+    display_inline={true}
+    class_li={'m-1'}
+    on:ae_crud_updated={e => {
+        console.log(`ae_crud_updated event:`, e.detail);
+        events_func.handle_load_ae_obj_id__exhibit({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id});
+    }}
+    >
+    Max licenses:
+    {@html ($events_slct.exhibit_obj?.license_max ? `<span class="fas fa-users m-1"></span> ${$events_slct.exhibit_obj.license_max}` : '<span class="fas fa-users m-1"></span> 0')}
+    <input
+        type="number" min="0" max="10" step="1"
+        bind:value={$events_slct.exhibit_obj.license_max}
+
+        class="input w-16 m-1"
+        />
+    <button
+        type="button"
+        on:click={() => {
+            // $events_slct.exhibit_obj.license_max = 0;
+            ae_triggers.license_max = true;
+        }}
+        class="btn btn-sm variant-soft-warning"
+        >
+        <span class="fas fa-save m-1"></span>
+        Save
+</Element_ae_crud>
+
+<!-- Field for leads_device_sm_qty. A number between 0 and 10. -->
+<Element_ae_crud
+    trigger_patch={ae_triggers.leads_device_sm_qty}
+    api_cfg={$ae_api}
+    object_type={'event_exhibit'}
+    object_id={$event_exhibit_obj?.event_exhibit_id_random}
+    field_name={'leads_device_sm_qty'}
+    field_type={'text'}
+    field_value={$events_slct.exhibit_obj.leads_device_sm_qty}
+    allow_null={false}
+    hide_edit_btn={true}
+    outline_element={false}
+    show_crud={false}
+    display_inline={true}
+    class_li={'m-1'}
+    on:ae_crud_updated={e => {
+        console.log(`ae_crud_updated event:`, e.detail);
+        events_func.handle_load_ae_obj_id__exhibit({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id});
+    }}
+    >
+    Small devices:
+    {@html ($events_slct.exhibit_obj?.leads_device_sm_qty ? `<span class="fas fa-mobile-alt m-1"></span> ${$events_slct.exhibit_obj.leads_device_sm_qty}` : '<span class="fas fa-mobile-alt m-1"></span> 0')}
+    <input
+        type="number" min="0" max="10" step="1"
+        bind:value={$events_slct.exhibit_obj.leads_device_sm_qty}
+
+        class="input w-16 m-1"
+        />
+    <button
+        type="button"
+        on:click={() => {
+            // $events_slct.exhibit_obj.leads_device_sm_qty = 0;
+            ae_triggers.leads_device_sm_qty = true;
+        }}
+        class="btn btn-sm variant-soft-warning"
+        >
+        <span class="fas fa-save m-1"></span>
+        Save
+</Element_ae_crud>
+
+<!-- Field for leads_device_lg_qty. A number between 0 and 10. -->
+<Element_ae_crud
+    trigger_patch={ae_triggers.leads_device_lg_qty}
+    api_cfg={$ae_api}
+    object_type={'event_exhibit'}
+    object_id={$event_exhibit_obj?.event_exhibit_id_random}
+    field_name={'leads_device_lg_qty'}
+    field_type={'text'}
+    field_value={$events_slct.exhibit_obj.leads_device_lg_qty}
+    allow_null={false}
+    hide_edit_btn={true}
+    outline_element={false}
+    show_crud={false}
+    display_inline={true}
+    class_li={'m-1'}
+    on:ae_crud_updated={e => {
+        console.log(`ae_crud_updated event:`, e.detail);
+        events_func.handle_load_ae_obj_id__exhibit({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id});
+    }}
+    >
+    Large devices:
+    {@html ($events_slct.exhibit_obj?.leads_device_lg_qty ? `<span class="fas fa-tablet-alt m-1"></span> ${$events_slct.exhibit_obj.leads_device_lg_qty}` : '<span class="fas fa-tablet-alt m-1"></span> 0')}
+    <input
+        type="number" min="0" max="10" step="1"
+        bind:value={$events_slct.exhibit_obj.leads_device_lg_qty}
+
+        class="input w-16 m-1"
+        />
+    <button
+        type="button"
+        on:click={() => {
+            // $events_slct.exhibit_obj.leads_device_lg_qty = 0;
+            ae_triggers.leads_device_lg_qty = true;
+        }}
+        class="btn btn-sm variant-soft-warning"
+        >
+        <span class="fas fa-save m-1"></span>
+        Save
+</Element_ae_crud>
+
+
+{/if}
+
+
 {#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
 
 
diff --git a/src/routes/events_leads/exhibit/[slug]/leads_view_lead.svelte b/src/routes/events_leads/exhibit/[slug]/leads_view_lead.svelte
index 217d6efb..0c293a03 100644
--- a/src/routes/events_leads/exhibit/[slug]/leads_view_lead.svelte
+++ b/src/routes/events_leads/exhibit/[slug]/leads_view_lead.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 console.log(`ae_events_leads exhibit [slug] leads_view.svelte`);
 
+import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils';
 import { liveQuery } from "dexie";
 import { db_events } from "$lib/db_events";
@@ -8,6 +9,10 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { events_func } from '$lib/ae_events_functions';
 
+import Element_ae_crud from '$lib/element_ae_crud.svelte';
+
+// These will likely be used for patch/update triggers. Maybe delete?
+let ae_triggers: key_val = {};
 
 $: event_exhibit_obj = liveQuery(
     () => db_events.exhibits.get($events_slct.exhibit_id)
@@ -17,6 +22,12 @@ $: event_exhibit_tracking_obj = liveQuery(
     () => db_events.exhibit_tracking.get($events_slct.exhibit_tracking_id)
 );
 
+// Quickly reload the data for this AE object from the API/DB
+$: if ($events_slct.exhibit_tracking_id) {
+    console.log(`Reloading exhibit_tracking object:`, $events_slct.exhibit_tracking_id);
+    events_func.handle_load_ae_obj_id__exhibit_tracking({api_cfg: $ae_api, exhibit_tracking_id: $events_slct.exhibit_tracking_id});
+}
+
 
 function handle_submit_form_lead_update() {
 
@@ -45,7 +56,15 @@ function handle_submit_form_lead_update() {
             "
         >
         <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
-            <h2 class="h3">Lead: {$event_exhibit_tracking_obj?.event_badge_full_name} ({$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random})</h2>
+            <h2 class="h3">Lead:
+                {@html ($event_exhibit_tracking_obj?.priority ? '<span class="fas fa-star m-1"></span>' : '<span class="far fa-star m-1 hidden"></span>')}
+
+                {$event_exhibit_tracking_obj?.event_badge_full_name}
+                <span class="text-xs text-slate-500">
+                ID:
+                {$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
+                </span>
+            </h2>
 
             <div class="popover__actions">
                 <button
@@ -110,6 +129,94 @@ function handle_submit_form_lead_update() {
 {/if}
 </div> <!-- .readonly_values -->
 
+
+<div class="
+    flex flex-row wrap gap-1
+    items-center justify-evenly
+    content-evenly
+    w-full
+    "
+    >
+
+<!-- Priority (star) means this should be sorted at the top of lists. -->
+<Element_ae_crud
+    trigger_patch={ae_triggers.priority}
+    api_cfg={$ae_api}
+    object_type={'event_exhibit_tracking'}
+    object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
+    field_name={'priority'}
+    field_type={'button'}
+    field_value={$events_slct.exhibit_tracking_obj.priority}
+    allow_null={false}
+    hide_edit_btn={true}
+    outline_element={false}
+    show_crud={false}
+    display_inline={true}
+    class_li={'m-1'}
+    on:ae_crud_updated={e => {
+        console.log(`ae_crud_updated event:`, e.detail);
+        events_func.handle_load_ae_obj_id__exhibit_tracking({api_cfg: $ae_api, exhibit_tracking_id: $events_slct.exhibit_tracking_id});
+    }}
+    >
+    {@html ($event_exhibit_tracking_obj?.priority ? '<span class="fas fa-star m-1"></span> Stared' : '<span class="far fa-star m-1"></span> Not Stared')}
+    <button
+        type="button"
+        on:click={() => {
+            $events_slct.exhibit_tracking_obj.priority = !$event_exhibit_tracking_obj?.priority;
+            ae_triggers.priority = true;
+        }}
+        class="btn btn-sm variant-soft-warning"
+        >
+        {@html ($event_exhibit_tracking_obj?.priority ? '<span class="fas fa-sync m-1"></span> Remove?' : '<span class="fa fa-sync m-1"></span> Star?')}
+    </button>
+</Element_ae_crud>
+
+<!-- Sort (rank) is a rank from 1 to 5 with 1 being the highest ranked. This should be a group of 5 buttons in a row. Use Tailwind CSS. -->
+<Element_ae_crud
+    trigger_patch={ae_triggers.sort}
+    api_cfg={$ae_api}
+    object_type={'event_exhibit_tracking'}
+    object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
+    field_name={'sort'}
+    field_type={'button'}
+    field_value={$events_slct.exhibit_tracking_obj.sort}
+    allow_null={false}
+    hide_edit_btn={true}
+    outline_element={false}
+    show_crud={false}
+    display_inline={true}
+    class_li={'m-1'}
+    on:ae_crud_updated={e => {
+        console.log(`ae_crud_updated event:`, e.detail);
+        events_func.handle_load_ae_obj_id__exhibit_tracking({api_cfg: $ae_api, exhibit_tracking_id: $events_slct.exhibit_tracking_id});
+    }}
+    >
+    {@html ($event_exhibit_tracking_obj?.sort ? '<span class="fas fa-sort-numeric-up m-1"></span> Ranked' : '<span class="fas fa-sort-numeric-down m-1"></span> Not Ranked')}
+    <select
+        name="sort"
+        class="select max-w-48 m-1"
+        bind:value={$events_slct.exhibit_tracking_obj.sort}
+        on:change={() => {
+            // Not using the Dexie liveQuery for this. It's not working as expected. When you bind to the value it is sometimes undefined.
+            // $event_exhibit_tracking_obj.sort = $events_slct.exhibit_tracking_obj.sort;
+            // console.log(`Sort changed:`, $events_slct.exhibit_tracking_obj?.sort);
+            ae_triggers.sort = true;
+        }}
+        >
+        <option value="">-- Not Selected --</option>
+        <option value={1}>1 - Highest</option>
+        <option value={2}>2</option>
+        <option value={3}>3 - Neutral</option>
+        <option value={4}>4</option>
+        <option value={5}>5 - Lowest</option>
+    </select>
+
+
+</Element_ae_crud>
+
+</div>
+
+
 <form
     id="form__lead_update"
     class="form"
@@ -135,7 +242,7 @@ function handle_submit_form_lead_update() {
         /> -->
 
     <!-- This checkbox is to mark this lead as priority/important. -->
-    <div class="event_lead__priority">
+    <!-- <div class="event_lead__priority">
     <label for="event_lead__priority" class="label">Priority:
     <input
         id="event_lead__priority"
@@ -146,24 +253,25 @@ function handle_submit_form_lead_update() {
         class="checkbox m-1"
         />
     </label>
-    </div>
+    </div> -->
 
     <!-- This is a selection list for ranking options from "-- Not Selected --", "1 - Highest", "2", "3- Neutral", "4", "5 - Lowest". -->
-    <div class="event_lead__sort">
+    <!-- <div class="event_lead__sort">
     <label for="event_lead__sort" class="label">Rank:
     <select
         id="event_lead__sort"
         name="sort"
         class="select max-w-48 m-1"
+        value={$event_exhibit_tracking_obj?.sort}
         >
         <option value="" selected>-- Not Selected --</option>
-        <option value="1">1 - Highest</option>
-        <option value="2">2</option>
-        <option value="3">3 - Neutral</option>
-        <option value="4">4</option>
-        <option value="5">5 - Lowest</option>
+        <option value={1}>1 - Highest</option>
+        <option value={2}>2</option>
+        <option value={3}>3 - Neutral</option>
+        <option value={4}>4</option>
+        <option value={5}>5 - Lowest</option>
     </select>
-    </div>
+    </div> -->
 
     <!-- These are notes by the exhibit staff about this lead -->
     <div class="event_lead__exhibitor_notes">
@@ -171,8 +279,10 @@ function handle_submit_form_lead_update() {
         <textarea
             id="exhibitor_notes"
             name="exhibitor_notes"
+            cols="70"
+            rows="10"
             placeholder="Staff notes"
-            class="textarea min-w-96 m-1"
+            class="textarea my-1"
             >{$event_exhibit_tracking_obj?.exhibitor_notes}</textarea>
         </label>
     </div>
@@ -186,7 +296,7 @@ function handle_submit_form_lead_update() {
 
         <div class="custom_questions">
             <fieldset id="custom_questions">
-            <label for="custom_questions">Custom Questions:</label>
+            <legend class="legend">Custom Questions:</legend>
 
             {#each $event_exhibit_obj?.leads_custom_questions_json as leads_custom_question, question_index}
             <div>
@@ -255,6 +365,70 @@ function handle_submit_form_lead_update() {
     <span class="fas fa-save mx-1"></span>
     Save
     </button>
+
+    <Element_ae_crud
+        trigger_patch={ae_triggers.hide}
+        api_cfg={$ae_api}
+        object_type={'event_exhibit_tracking'}
+        object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
+        field_name={'hide'}
+        field_type={'button'}
+        field_value={$events_slct.exhibit_tracking_obj.hide}
+        allow_null={false}
+        hide_edit_btn={true}
+        outline_element={false}
+        show_crud={false}
+        display_inline={true}
+        class_li={'m-1'}
+        on:ae_crud_updated={e => {
+            console.log(`ae_crud_updated event:`, e.detail);
+            events_func.handle_load_ae_obj_id__exhibit_tracking({api_cfg: $ae_api, exhibit_tracking_id: $events_slct.exhibit_tracking_id});
+        }}
+        >
+        {($event_exhibit_tracking_obj?.hide ? 'Hidden' : 'Not Hidden')}
+        <button
+            on:click={() => {
+                $events_slct.exhibit_tracking_obj.hide = !$event_exhibit_tracking_obj?.hide;
+                ae_triggers.hide = true;
+            }}
+            class="btn btn-sm variant-soft-warning"
+            >
+            {@html ($event_exhibit_tracking_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide' : '<span class="fas fa-eye-slash m-1"></span> Hide')}
+        </button>
+    </Element_ae_crud>
+
+    <Element_ae_crud
+        trigger_patch={ae_triggers.enable}
+        api_cfg={$ae_api}
+        object_type={'event_exhibit_tracking'}
+        object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
+        field_name={'enable'}
+        field_type={'button'}
+        field_value={$events_slct.exhibit_tracking_obj.enable}
+        allow_null={false}
+        hide_edit_btn={true}
+        outline_element={false}
+        show_crud={false}
+        display_inline={true}
+        class_li={'m-1'}
+        on:ae_crud_updated={e => {
+            console.log(`ae_crud_updated event:`, e.detail);
+            events_func.handle_load_ae_obj_id__exhibit_tracking({api_cfg: $ae_api, exhibit_tracking_id: $events_slct.exhibit_tracking_id});
+        }}
+        >
+        {($event_exhibit_tracking_obj?.enable ? 'Enabled' : 'Not Enabled')}
+        <button
+            on:click={() => {
+                $events_slct.exhibit_tracking_obj.enable = !$event_exhibit_tracking_obj?.enable;
+                ae_triggers.enable = true;
+            }}
+            class="btn btn-sm variant-soft-success"
+            >
+            {@html ($event_exhibit_tracking_obj?.enable ? '<span class="fas fa-toggle-on m-1"></span> Disable' : '<span class="fas fa-toggle-off m-1"></span> Enable')}
+        </button>
+    </Element_ae_crud>
+
+
     </div>