Now using the new new new, not mine, Modal element.

src/lib/element_data_store_v2.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { browser } from '$app/environment';
-import { onMount } from 'svelte';
-// import type { Writable } from 'svelte/store';
-// import { localStorageStore } from '@skeletonlabs/skeleton';
+
+import { liveQuery } from "dexie"; // Use this in the future???
+import { Modal } from 'flowbite-svelte';
 
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/ae_stores';
@@ -40,7 +40,7 @@ let ae_promises: key_val = {};
 // let ae_triggers: key_val = {};
 
 let ds_get_results: Promise<any>|key_val;
-let ds_loading_status: string = 'starting...';
+export let ds_loading_status: string = 'starting';
 let ds_submit_results: Promise<any>|key_val;
 
 let val_json: key_val;
@@ -75,13 +75,13 @@ if (browser && try_cache && localStorage.getItem(`ae_ds__${ds_code}`)) {
     if (log_lvl) {
         console.log(`ae_e_data_store: Found cached data for ${ds_code}`);
     }
-    ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
+    ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`) ?? '{}');
     if (log_lvl) {
         console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`, ae_ds_tmp);
     }
 } else {
     ae_ds_tmp = ds_code_obj;
-    ds_loading_status = '-- loading --';
+    ds_loading_status = 'loading';
 }
 
 $ae_sess.ds.submit_status = null;
@@ -181,7 +181,7 @@ async function load_data_store(
             }
 
             ds_loaded = true;
-            ds_loading_status = '-- loaded --';
+            ds_loading_status = 'loaded';
 
             // Set the loaded_on datetime to the current time for reference later. This will be used to determine if the data store is stale.
             ae_ds_tmp.loaded_on = new Date().toISOString();
@@ -216,7 +216,7 @@ async function load_data_store(
             }
         } else {
             ds_loaded = false;
-            ds_loading_status = '-- not found --';
+            ds_loading_status = 'not found';
         }
     })
     .then(function () {
@@ -232,7 +232,7 @@ async function load_data_store(
     .catch(function (error) {
         console.log(`Something went wrong. for code ${code}`);
         console.log(error);
-        ds_loading_status = '-- error --';
+        ds_loading_status = 'error';
         return false;
     });
     // .finally(function (ds_val_result) {
@@ -395,10 +395,15 @@ async function handle_submit_form(event: any) {
 }
 
 
-async function handle_create__data_store({
-        obj_type,
-        data
-        }) {
+async function handle_create__data_store(
+        {
+            obj_type,
+            data
+        } : {
+            obj_type: string,
+            data: key_val
+        }
+    ) {
     console.log('*** handle_create__data_store() ***');
 
     $ae_sess.ds.create_status = 'starting';
@@ -430,11 +435,17 @@ async function handle_create__data_store({
 }
 
 
-async function handle_update__data_store({
-        obj_type,
-        obj_id,
-        data
-        }) {
+async function handle_update__data_store(
+        {
+            obj_type,
+            obj_id,
+            data
+        } : {
+            obj_type: string,
+            obj_id: string,
+            data: key_val
+        }
+    ) {
     console.log('*** handle_update__data_store() ***');
 
     $ae_sess.ds.update_status = 'starting';
@@ -496,10 +507,20 @@ async function handle_update__data_store({
 
 {/if}
 
-{#if show_edit}
-    <section class="edit z-50">
+<!-- {#if show_edit} -->
+    <!-- <section class="edit z-50"> -->
+
+    <!-- Main modal -->
+    <Modal
+        title="{ae_ds_tmp.name} - {ae_ds_tmp.code}"
+        bind:open={show_edit}
+        autoclose={false}
+        size="xl"
+        class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
+        >
+
     <form
-        class="ae__elem__data_store__form"
+        class="flex flex-col gap-1"
         on:submit|preventDefault={handle_submit_form}
         >
 
@@ -509,199 +530,230 @@ async function handle_update__data_store({
         value={ae_ds_tmp.id}
         />
 
-    {#if $ae_loc.trusted_access}
-        <label for="ds_use_account_id" class="label text-xs inline">Use Account ID
-        <input
-            type="checkbox"
-            name="ds_use_account_id"
-            class="checkbox"
-            value="true"
-            checked={ae_ds_tmp.account_id ? true : false}
-            />
-        </label>
-    {/if}
-    {#if $ae_loc.manager_access}
-        <input
-            type="text"
-            name="ds_account_id"
-            class="input max-w-48 text-xs"
-            placeholder="Account ID"
-            value={ae_ds_tmp.account_id}
-            />
-
-        <input
-            type="text"
-            name="ds_code"
-            class="input text-xs"
-            placeholder="Data store code"
-            value={ae_ds_tmp.code}
-            required
-            />
-    {/if}
-    {#if $ae_loc.trusted_access}
-        <input
-            type="text"
-            name="ds_name"
-            class="input text-xs"
-            placeholder="Data store name"
-            value={ae_ds_tmp.name}
-            required
-            />
-    {/if}
-    {#if $ae_loc.manager_access}
-        <input
-            type="text"
-            name="ds_type"
-            class="input max-w-48 text-xs"
-            placeholder="Data store type (html, json, md, sql, text)"
-            value={ae_ds_tmp.type}
-            required
-            />
-        <input
-            type="text"
-            name="ds_for_type"
-            class="input max-w-48 text-xs"
-            placeholder="Data store For Type"
-            value={ae_ds_tmp.for_type}
-            />
-        <input
-            type="text"
-            name="ds_for_id"
-            class="input max-w-48 text-xs"
-            placeholder="Data store For ID"
-            value={ae_ds_tmp.for_id}
-            />
-        <input
-            type="text"
-            name="ds_access_read"
-            class="input max-w-48 text-xs"
-            placeholder="Access read"
-            value={ae_ds_tmp.access_read}
-            />
-        <input
-            type="text"
-            name="ds_access_write"
-            class="input max-w-48 text-xs"
-            placeholder="Access write"
-            value={ae_ds_tmp.access_write}
-            />
-        <input
-            type="text"
-            name="ds_access_delete"
-            class="input max-w-48 text-xs"
-            placeholder="Access delete"
-            value={ae_ds_tmp.access_delete}
-            />
-    {:else}
-        Code: {ae_ds_tmp.code}
-        <!-- Name: {ae_ds_tmp.name} -->
-        Type: {ae_ds_tmp.type}
-    {/if}
-
-    <!-- Handle HTML type -->
-    {#if ae_ds_tmp.type == 'html' || ae_ds_tmp.type == null}
-    <textarea
-        name="ds_value"
-        class="textarea type_html font-mono text-sm"
-        cols="75"
-        rows="25"
-        placeholder="Enter the HTML here"
-        >{ae_ds_tmp.type == 'html' && ae_ds_tmp.html ? ae_ds_tmp.html : ''}</textarea>
-    <!-- Handle SQL type -->
-    {:else if ae_ds_tmp.type == 'sql'}
-    <textarea
-        name="ds_value"
-        class="textarea type_sql font-mono text-sm"
-        cols="75"
-        rows="25"
-        placeholder="Enter the SQL here"
-        >{ae_ds_tmp.type == 'sql' && ae_ds_tmp.text ? ae_ds_tmp.text : ''}</textarea>
-
-    <!-- Handle text type -->
-    {:else if ae_ds_tmp.type == 'text'}
-    <textarea
-        name="ds_value"
-        class="textarea type_text"
-        cols="70"
-        rows="10"
-        placeholder="Enter the text here"
-        >{ae_ds_tmp.type == 'text' ? ae_ds_tmp.text : ''}</textarea>
-    {/if}
-    <div class="flex gap-1 justify-center justify-evenly items-center p-1">
-
-    <button
-        type="button"
-        class="btn variant-soft-warning"
-        on:click={() => {
-            if (confirm('Are you sure you want to delete this data store?')) {
-                trigger = 'delete__ds__code';
-                // $slct_trigger = 'delete__ds__code';
-            }
-            show_edit = false;
-            show_view = true;
-        }}
-        >
-        <span class="fas fa-trash mx-1"></span>
-        Delete
-    </button>
-
-    <button
-        type="button"
-        class="btn variant-soft-primary"
-        on:click={() => {
-            show_edit = false;
-            show_view = true;
-        }}
-        >
-        <span class="fas fa-times mx-1"></span>
-        Close
-    </button>
-
-    <button
-        type="submit"
-        class="btn variant-soft-primary"
-        disabled={ds_submit_results instanceof Promise && !ds_submit_results}
-        on:click={() => {
-            trigger = 'save__ds__code';
-            // $slct_trigger = 'save__ds__code';
-        }}
-        >
-        <span class="fas fa-save mx-1"></span>
-        Save
-    </button>
-
-    {#await ds_submit_results}
-        <div class="modal-loading">
-            <span class="fas fa-spinner fa-spin"></span>
-            <span class="loading-text">
-                Saving...
-            </span>
-        </div>
-    {:then ds_submit_results}
-        {#if ds_submit_results}
-        <div>
-            <span class="fas fa-check text-green-500"></span>
-            <span class="saved-text">
-                Saved
-            </span>
-        </div>
+    <div class="flex flex-row gap-1">
+        {#if $ae_loc.trusted_access}
+            <label for="ds_use_account_id" class="label text-xs inline">Use Account ID
+            <input
+                type="checkbox"
+                name="ds_use_account_id"
+                class="checkbox"
+                value="true"
+                checked={ae_ds_tmp.account_id ? true : false}
+                />
+            </label>
         {/if}
-    {/await}
+        {#if $ae_loc.manager_access}
+            <input
+                type="text"
+                name="ds_account_id"
+                class="input max-w-48 text-xs"
+                placeholder="Account ID"
+                value={ae_ds_tmp.account_id}
+                />
 
-    <div
-        class="ae_debug"
-        class:hidden={!debug && $ae_loc.debug != 'debug'}
-        >
-    submit: {$ae_sess.ds.submit_status}
-    create: {$ae_sess.ds.create_status}
-    update: {$ae_sess.ds.update_status}
+            <input
+                type="text"
+                name="ds_code"
+                class="input text-xs"
+                placeholder="Data store code"
+                value={ae_ds_tmp.code}
+                required
+                />
+        {/if}
     </div>
 
+    <div class="flex flex-row gap-1">
+        {#if $ae_loc.trusted_access}
+            <input
+                type="text"
+                name="ds_name"
+                class="input text-xs"
+                placeholder="Data store name"
+                value={ae_ds_tmp.name}
+                required
+                />
+        {/if}
+    </div>
+
+    <div class="flex flex-row gap-1">
+        {#if $ae_loc.manager_access}
+            <input
+                type="text"
+                name="ds_type"
+                class="input max-w-48 text-xs"
+                placeholder="Data store type (html, json, md, sql, text)"
+                value={ae_ds_tmp.type}
+                required
+                />
+            <input
+                type="text"
+                name="ds_for_type"
+                class="input max-w-48 text-xs"
+                placeholder="Data store For Type"
+                value={ae_ds_tmp.for_type}
+                />
+            <input
+                type="text"
+                name="ds_for_id"
+                class="input max-w-48 text-xs"
+                placeholder="Data store For ID"
+                value={ae_ds_tmp.for_id}
+                />
+            <input
+                type="text"
+                name="ds_access_read"
+                class="input max-w-48 text-xs"
+                placeholder="Access read"
+                value={ae_ds_tmp.access_read}
+                />
+            <input
+                type="text"
+                name="ds_access_write"
+                class="input max-w-48 text-xs"
+                placeholder="Access write"
+                value={ae_ds_tmp.access_write}
+                />
+            <input
+                type="text"
+                name="ds_access_delete"
+                class="input max-w-48 text-xs"
+                placeholder="Access delete"
+                value={ae_ds_tmp.access_delete}
+                />
+        {:else}
+            Code: {ae_ds_tmp.code}
+            <!-- Name: {ae_ds_tmp.name} -->
+            Type: {ae_ds_tmp.type}
+        {/if}
+    </div>
+
+    <div class="">
+        <!-- Handle HTML type -->
+        {#if ae_ds_tmp.type == 'html' || ae_ds_tmp.type == null}
+        <textarea
+            name="ds_value"
+            class="textarea type_html font-mono text-sm"
+            cols="75"
+            rows="25"
+            placeholder="Enter the HTML here"
+            >{ae_ds_tmp.type == 'html' && ae_ds_tmp.html ? ae_ds_tmp.html : ''}</textarea>
+        <!-- Handle SQL type -->
+        {:else if ae_ds_tmp.type == 'sql'}
+        <textarea
+            name="ds_value"
+            class="textarea type_sql font-mono text-sm"
+            cols="75"
+            rows="25"
+            placeholder="Enter the SQL here"
+            >{ae_ds_tmp.type == 'sql' && ae_ds_tmp.text ? ae_ds_tmp.text : ''}</textarea>
+
+        <!-- Handle text type -->
+        {:else if ae_ds_tmp.type == 'text'}
+        <textarea
+            name="ds_value"
+            class="textarea type_text"
+            cols="70"
+            rows="10"
+            placeholder="Enter the text here"
+            >{ae_ds_tmp.type == 'text' ? ae_ds_tmp.text : ''}</textarea>
+        {/if}
+    </div>
+
+    <div class="flex flex-row gap-1 justify-center justify-evenly items-center">
+
+        <button
+            type="button"
+            class="btn variant-soft-warning"
+            on:click={() => {
+                if (confirm('Are you sure you want to delete this data store?')) {
+                    trigger = 'delete__ds__code';
+                    // $slct_trigger = 'delete__ds__code';
+                }
+                show_edit = false;
+                show_view = true;
+            }}
+            >
+            <span class="fas fa-trash mx-1"></span>
+            Delete
+        </button>
+
+        <!-- <button
+            type="button"
+            class="btn variant-soft-primary"
+            on:click={() => {
+                show_edit = false;
+                show_view = true;
+            }}
+            >
+            <span class="fas fa-times mx-1"></span>
+            Close
+        </button> -->
+
+        <button
+            type="submit"
+            class="btn variant-ghost-primary"
+            disabled={ds_submit_results instanceof Promise && !ds_submit_results}
+            on:click={() => {
+                trigger = 'save__ds__code';
+                // $slct_trigger = 'save__ds__code';
+            }}
+            >
+            <span class="fas fa-save mx-1"></span>
+            Save
+        </button>
+
+        {#await ds_submit_results}
+            <div class="modal-loading">
+                <span class="fas fa-spinner fa-spin"></span>
+                <span class="loading-text">
+                    Saving...
+                </span>
+            </div>
+        {:then ds_submit_results}
+            {#if ds_submit_results}
+            <div>
+                <span class="fas fa-check text-green-500"></span>
+                <span class="saved-text">
+                    Saved
+                </span>
+            </div>
+            {/if}
+        {/await}
+
+        <div
+            class="ae_debug"
+            class:hidden={!debug && $ae_loc.debug != 'debug'}
+            >
+        submit: {$ae_sess.ds.submit_status}
+        create: {$ae_sess.ds.create_status}
+        update: {$ae_sess.ds.update_status}
+        </div>
+
     </div>
 
     </form>
-    </section>
-{/if}
+
+    <svelte:fragment slot="footer">
+        <div class="text-center w-full">
+            <button
+                type="button"
+                on:click={() => {
+                    console.log('Close modal edit data store.');
+                    show_edit = false;
+                    show_view = true;
+                }}
+                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
+                >
+                <span class="fas fa-times mx-1"></span>
+                Close
+            </button>
+        </div>
+    </svelte:fragment>
+
+    </Modal>
+
+    <!-- </section> -->
+<!-- {/if} -->
 
 <!-- {#if mode == 'view'} -->
 
@@ -784,6 +836,7 @@ async function handle_update__data_store({
 } */
 
 /* The section.edit should be above the rest of the content and centered on the page */
+/*
 section.edit {
     position: fixed;
     top: 50%;
@@ -797,6 +850,7 @@ section.edit {
 
     min-width: 80%;
 }
+*/
 
 .hide {
     display: none;