feat: migration to Svelte 5
This commit is contained in:
Scott Idem
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { run, preventDefault } from 'svelte/legacy';
|
||||
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
// import { liveQuery } from "dexie"; // Use this in the future???
|
||||
@@ -9,46 +11,71 @@
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
|
||||
export let log_lvl: number = 0;
|
||||
export let expire_minutes: number = 15;
|
||||
export let mount_reload_sec: number = 0;
|
||||
|
||||
export let ds_code: string;
|
||||
export let ds_name: null | string = null;
|
||||
export let ds_type: string = 'text';
|
||||
export let for_type: null | string = null;
|
||||
export let for_id: null | string = null;
|
||||
console.log(
|
||||
`ae_e_data_store ${ds_code} account_id=${$ae_loc.account_id} for_type=${for_type} for_id=${for_id}`
|
||||
);
|
||||
|
||||
// export let store: string = 'local';
|
||||
// export let display: string = 'block'; // Avoid; Use class list instead
|
||||
export let class_li: string = ''; // : string[] = [];
|
||||
export let try_cache: boolean = true;
|
||||
|
||||
|
||||
export let hide: boolean = false; // Hide the entire element
|
||||
export let show_edit: boolean = false;
|
||||
export let show_edit_btn: boolean = false; // You must still be at least an admin (vs a manager).
|
||||
export let show_view: boolean = true;
|
||||
// export let show_delete_btn: boolean = false;
|
||||
|
||||
|
||||
export let ds_loaded: boolean = false;
|
||||
|
||||
export let debug: boolean = false;
|
||||
|
||||
let ae_promises: key_val = {};
|
||||
// let ae_tmp: key_val = {};
|
||||
// let ae_triggers: key_val = {};
|
||||
|
||||
let ds_get_results: Promise<any> | key_val;
|
||||
export let ds_loading_status: string = 'starting';
|
||||
let ds_submit_results: Promise<any> | key_val;
|
||||
let ds_get_results: Promise<any> | key_val = $state();
|
||||
let ds_submit_results: Promise<any> | key_val = $state();
|
||||
|
||||
let val_json: key_val;
|
||||
let val_html: key_val;
|
||||
let val_md: key_val;
|
||||
export let val_sql: null | key_val = null;
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
expire_minutes?: number;
|
||||
mount_reload_sec?: number;
|
||||
ds_code: string;
|
||||
ds_name?: null | string;
|
||||
ds_type?: string;
|
||||
for_type?: null | string;
|
||||
for_id?: null | string;
|
||||
// export let display: string = 'block'; // Avoid; Use class list instead
|
||||
class_li?: string; // : string[] = [];
|
||||
try_cache?: boolean;
|
||||
hide?: boolean; // Hide the entire element
|
||||
show_edit?: boolean;
|
||||
show_edit_btn?: boolean; // You must still be at least an admin (vs a manager).
|
||||
show_view?: boolean;
|
||||
// export let show_delete_btn: boolean = false;
|
||||
ds_loaded?: boolean;
|
||||
debug?: boolean;
|
||||
ds_loading_status?: string;
|
||||
val_sql?: null | key_val;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = 0,
|
||||
expire_minutes = 15,
|
||||
mount_reload_sec = 0,
|
||||
ds_code,
|
||||
ds_name = null,
|
||||
ds_type = 'text',
|
||||
for_type = null,
|
||||
for_id = null,
|
||||
class_li = '',
|
||||
try_cache = true,
|
||||
hide = false,
|
||||
show_edit = $bindable(false),
|
||||
show_edit_btn = false,
|
||||
show_view = $bindable(true),
|
||||
ds_loaded = $bindable(false),
|
||||
debug = false,
|
||||
ds_loading_status = $bindable('starting'),
|
||||
val_sql = $bindable(null)
|
||||
}: Props = $props();
|
||||
let val_text: string;
|
||||
|
||||
let ds_code_obj = {
|
||||
@@ -70,7 +97,7 @@
|
||||
chk_account_id: null
|
||||
};
|
||||
|
||||
let ae_ds_tmp: key_val;
|
||||
let ae_ds_tmp: key_val = $state();
|
||||
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}`);
|
||||
@@ -91,7 +118,7 @@
|
||||
$ae_sess.ds.create_status = null;
|
||||
$ae_sess.ds.update_status = null;
|
||||
|
||||
let trigger: null | string = null;
|
||||
let trigger: null | string = $state(null);
|
||||
|
||||
// This is a quick check to make sure the data store is not stale. If it is, then we need to trigger a reload.
|
||||
if (
|
||||
@@ -139,23 +166,6 @@
|
||||
}, random_ms);
|
||||
}
|
||||
|
||||
$: if (trigger == 'load__ds__code' && ds_code && ds_type) {
|
||||
if (log_lvl) {
|
||||
console.log(
|
||||
`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`
|
||||
);
|
||||
}
|
||||
|
||||
trigger = null;
|
||||
|
||||
load_data_store({
|
||||
code: ds_code,
|
||||
type: ds_type,
|
||||
for_type: for_type,
|
||||
for_id: for_id,
|
||||
try_cache: try_cache
|
||||
});
|
||||
}
|
||||
|
||||
async function load_data_store({
|
||||
code,
|
||||
@@ -497,6 +507,25 @@
|
||||
|
||||
return ae_promises.update__data_store_obj;
|
||||
}
|
||||
run(() => {
|
||||
if (trigger == 'load__ds__code' && ds_code && ds_type) {
|
||||
if (log_lvl) {
|
||||
console.log(
|
||||
`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`
|
||||
);
|
||||
}
|
||||
|
||||
trigger = null;
|
||||
|
||||
load_data_store({
|
||||
code: ds_code,
|
||||
type: ds_type,
|
||||
for_type: for_type,
|
||||
for_id: for_id,
|
||||
try_cache: try_cache
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ae__elem__data_store relative {class_li}" class:hidden={hide}>
|
||||
@@ -538,7 +567,7 @@
|
||||
max-w-6xl
|
||||
"
|
||||
>
|
||||
<form class="flex flex-col gap-1" on:submit|preventDefault={handle_submit_form}>
|
||||
<form class="flex flex-col gap-1" onsubmit={preventDefault(handle_submit_form)}>
|
||||
<input type="hidden" name="ds_id_random" value={ae_ds_tmp.id} />
|
||||
|
||||
<div class="flex flex-row gap-1">
|
||||
@@ -682,7 +711,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="btn preset-tonal-warning"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
if (confirm('Are you sure you want to delete this data store?')) {
|
||||
trigger = 'delete__ds__code';
|
||||
// $slct_trigger = 'delete__ds__code';
|
||||
@@ -711,7 +740,7 @@
|
||||
type="submit"
|
||||
class="btn preset-tonal-primary border border-primary-500"
|
||||
disabled={ds_submit_results instanceof Promise && !ds_submit_results}
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
trigger = 'save__ds__code';
|
||||
// $slct_trigger = 'save__ds__code';
|
||||
}}
|
||||
@@ -742,22 +771,24 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<div class="text-center w-full">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
{#snippet footer()}
|
||||
|
||||
<div class="text-center w-full">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Close modal edit data store.');
|
||||
show_edit = false;
|
||||
show_view = true;
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
|
||||
>
|
||||
<span class="fas fa-times mx-1"></span>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
|
||||
>
|
||||
<span class="fas fa-times mx-1"></span>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<!-- </section> -->
|
||||
@@ -807,7 +838,7 @@
|
||||
($ae_loc.manager_access && $ae_loc.edit_mode) ||
|
||||
(show_edit_btn && $ae_loc.administrator_access && $ae_loc.edit_mode)
|
||||
)}
|
||||
on:dblclick={() => {
|
||||
ondblclick={() => {
|
||||
trigger = 'load__ds__code';
|
||||
show_edit = true;
|
||||
show_view = false;
|
||||
|
||||
Reference in New Issue
Block a user