Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migration to Svelte 5

Browse Source
This commit is contained in:
Scott Idem
2025-11-19 12:38:03 -05:00
parent d99e9ee1b0
commit f25b9ccd8f
46 changed files with 9578 additions and 9095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/lib/elements/element_ae_crud.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
// *** Import Svelte core
import { createEventDispatcher, onMount } from 'svelte';
@@ -13,45 +15,77 @@
// *** 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: key_val = { 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'; // 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 val_empty_is_null: boolean = false; // This was added to help with a select option list. If the value is empty (''), it will be set to null.
export let edit_label: string = 'Edit';
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;
// 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 = null; // '<span class="fas fa-check mx-1"></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 = '';
interface Props {
// *** Export/Exposed variables and functions for component
log_lvl?: number;
trigger_patch?: any;
api_cfg?: key_val;
// export let api_crud_super_key: null|string = api_cfg.api_crud_super_key;
object_type: string;
object_id: string;
field_name: string;
field_type?: string; // button, text, textarea, template (older method), select (in progress method)
field_value: any;
allow_null?: boolean;
select_option_li?: key_val;
val_empty_is_null?: boolean; // This was added to help with a select option list. If the value is empty (''), it will be set to null.
edit_label?: string;
display_inline?: boolean;
display_block_edit?: boolean;
textarea_cols?: number;
textarea_rows?: number;
// export let input_field_template: null|object = null;
hide_edit_btn?: boolean;
outline_element?: boolean;
show_crud?: boolean;
btn_label?: any; // '<span class="fas fa-check mx-1"></span> Save'; // PATCH
// export let remove_breaks = false;
class_li?: string;
children?: import('svelte').Snippet;
}
let {
log_lvl = 0,
trigger_patch = $bindable(null),
api_cfg = { api_crud_super_key: null },
object_type,
object_id,
field_name,
field_type = 'text',
field_value = $bindable(),
allow_null = false,
select_option_li = {},
val_empty_is_null = false,
edit_label = 'Edit',
display_inline = false,
display_block_edit = false,
textarea_cols = 80,
textarea_rows = 5,
hide_edit_btn = false,
outline_element = false,
show_crud = $bindable(false),
btn_label = null,
class_li = '',
children
}: Props = $props();
// *** Set initial variables
let ae_promises: key_val = {}; // Promise<any>;
let patch_result: null | Promise<any> | key_val | string;
let ae_promises: key_val = $state({}); // Promise<any>;
let patch_result: null | Promise<any> | key_val | string = $state();
let original_field_value = field_value;
let original_field_value = $state(field_value);
const dispatch = createEventDispatcher();
@@ -64,11 +98,6 @@
}
});
$: if (trigger_patch == true) {
console.log('AE CRUD: Patch triggered!');
trigger_patch = null;
handle_obj_field_patch(field_value);
}
// Updated 2024-03-22
async function handle_obj_field_patch(new_field_value: any) {
@@ -144,17 +173,24 @@
return ae_promises.api_update__ae_obj;
}
run(() => {
if (trigger_patch == true) {
console.log('AE CRUD: Patch triggered!');
trigger_patch = null;
handle_obj_field_patch(field_value);
}
});
</script>
<div class="{class_li} ae_crud" class:show_crud class:display_inline class:outline_element>
<span class="field_viewing_wrapper">
<slot></slot>
{@render children?.()}
<button
class="btn btn-sm font-normal preset-tonal-warning hover:preset-tonal-error border border-error-500 field_show_btn"
class:hide_edit_btn
class:show_crud
on:dblclick={() => {
ondblclick={() => {
show_crud = true;
}}
title="Double click to edit property"
@@ -176,7 +212,7 @@
<button
class="btn btn-md font-normal ae_btn_surface_outlined m-1"
class:show_crud
on:click={() => {
onclick={() => {
show_crud = false;
}}
title="Close field editing"
@@ -222,7 +258,7 @@
{#if allow_null}
<button
class="btn btn-sm ae_btn_warning m-1"
on:click={() => {
onclick={() => {
field_value = null;
}}
title="Set value to NULL"
@@ -236,7 +272,7 @@
class="btn btn-lg ae_btn_warning_outlined m-1"
class:show_crud
disabled={field_value == original_field_value}
on:click={async () => {
onclick={async () => {
handle_obj_field_patch(field_value);
}}
title="Save new field value"

16
src/lib/elements/element_codemirror_editor.svelte
View File

@@ -3,10 +3,14 @@
import { browser } from '$app/environment';
import { ensureCodeMirrorModules } from './codemirror_modules';
export let content: string = '';
export let placeholder: string = 'Start typing...';
interface Props {
content?: string;
placeholder?: string;
}
let editor_container: HTMLDivElement;
let { content = $bindable(''), placeholder = 'Start typing...' }: Props = $props();
let editor_container: HTMLDivElement = $state();
let editor_view: any;
let cm: any; // Declare cm at the top level
@@ -141,15 +145,15 @@
<div class="toolbar p-1 bg-gray-100 border-b">
<button
type="button"
on:click={() => wrapSelection('**')}
onclick={() => wrapSelection('**')}
class="px-2 py-1 rounded hover:bg-gray-200"><b>B</b></button
>
<button
type="button"
on:click={() => wrapSelection('*')}
onclick={() => wrapSelection('*')}
class="px-2 py-1 rounded hover:bg-gray-200"><i>I</i></button
>
<button type="button" on:click={insertList} class="px-2 py-1 rounded hover:bg-gray-200"
<button type="button" onclick={insertList} class="px-2 py-1 rounded hover:bg-gray-200"
>List</button
>
</div>

10
src/lib/elements/element_codemirror_editor_wrapper.svelte
View File

@@ -2,9 +2,13 @@
import ElementCodemirrorEditor from './element_codemirror_editor.svelte';
import { browser } from '$app/environment';
export let html_text: string = '';
export let placeholder: string = 'Type your text here...';
export let classes: string = '';
interface Props {
html_text?: string;
placeholder?: string;
classes?: string;
}
let { html_text = $bindable(''), placeholder = 'Type your text here...', classes = '' }: Props = $props();
</script>
<div class="block w-full h-full {classes}">

120
src/lib/elements/element_data_store.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { onMount } from 'svelte';
import { api } from '$lib/api/api';
@@ -6,42 +8,25 @@
import { ae_util } from '$lib/ae_utils/ae_utils';
import type { key_val } from '$lib/stores/ae_stores';
export let expire_minutes: number = 10;
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} for_type=${for_type} for_id=${for_id} account_id=${$ae_loc.account_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 = true;
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 = {}; // Promise<any>;
let ds_get_results: Promise<any> | key_val;
let ds_get_results: Promise<any> | key_val = $state();
let ds_loading_status: string = 'starting...';
let ds_submit_results: Promise<any> | key_val;
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;
let val_text: string;
let ds_code_obj = {
@@ -63,7 +48,7 @@
chk_account_id: null
};
let ae_ds_tmp: key_val;
let ae_ds_tmp: key_val = $state();
if (browser && localStorage.getItem(`ae_ds__${ds_code}`)) {
ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
} else {
@@ -84,13 +69,54 @@
$ae_sess.ds.create_status = null;
$ae_sess.ds.update_status = null;
let trigger: null | string = null;
let trigger: null | string = $state(null);
// $: if (ae_ds_tmp) {
// console.log(`ae_e_data_store ae_ds_loc = `, ae_ds_tmp);
// }
import { browser } from '$app/environment';
interface Props {
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 store: string = 'local';
display?: string; // 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;
show_view?: boolean;
// export let show_delete_btn: boolean = false;
ds_loaded?: boolean;
debug?: boolean;
val_sql?: null | key_val;
}
let {
expire_minutes = 10,
mount_reload_sec = 0,
ds_code,
ds_name = null,
ds_type = 'text',
for_type = null,
for_id = null,
display = 'block',
class_li = '',
try_cache = true,
hide = false,
show_edit = $bindable(false),
show_edit_btn = true,
show_view = $bindable(true),
ds_loaded = $bindable(false),
debug = false,
val_sql = $bindable(null)
}: Props = $props();
let ae_ds_loc_test: any;
if (browser) {
@@ -152,24 +178,6 @@
}
});
// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
// console.log(`ae_ ds_code_li = `, ds_code_li);
$: if (trigger == 'load__ds__code' && ds_code && ds_type) {
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,
@@ -476,6 +484,26 @@
return ae_promises.update__data_store_obj;
}
// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
// console.log(`ae_ ds_code_li = `, ds_code_li);
run(() => {
if (trigger == 'load__ds__code' && ds_code && ds_type) {
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:hide>
@@ -503,7 +531,7 @@
<section class="edit z-50">
<form
class="ae__elem__data_store__form"
on:submit|preventDefault={handle_submit_form}
onsubmit={preventDefault(handle_submit_form)}
>
<input type="hidden" name="ds_id_random" value={ae_ds_tmp.id} />
@@ -637,7 +665,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';
@@ -653,7 +681,7 @@
<button
type="button"
class="btn preset-tonal-primary"
on:click={() => {
onclick={() => {
show_edit = false;
show_view = true;
}}
@@ -666,7 +694,7 @@
type="submit"
class="btn preset-tonal-primary"
disabled={ds_submit_results instanceof Promise && !ds_submit_results}
on:click={() => {
onclick={() => {
trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
@@ -740,7 +768,7 @@
class="ae_btn_edit__ds btn hover:preset-tonal-warning text-xs absolute top-0 right-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200 m-1 p-1"
class:opacity-5={!$ae_loc.manager_access}
class:hidden={!show_edit_btn || !$ae_loc.trusted_access}
on:dblclick={() => {
ondblclick={() => {
trigger = 'load__ds__code';
show_edit = true;
show_view = false;

145
src/lib/elements/element_data_store_v2.svelte
View File

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

98
src/lib/elements/element_input_file.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { createEventDispatcher, onMount, tick } from 'svelte';
import type { key_val } from '$lib/stores/ae_stores';
@@ -7,52 +9,50 @@
import { check_hosted_file_obj_w_hash } from '$lib/ae_core/core__check_hosted_file_obj_w_hash';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/stores/ae_stores';
export let element_id = 'svelte_input_file_element';
export let input_name = 'file_list';
export let container_class_li: string[] = [];
export let input_class_li: string[] = ['file_drop_area'];
export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', '', 'text-sm'];
export let multiple: boolean = true;
export let required: boolean = true;
export let accept: string =
'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh';
export let untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'];
export let legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'];
export let use_selected_file_table = true;
export let file_list_status: null | string = null;
export let processed_file_list: any[] = [];
const dispatch = createEventDispatcher();
export let input_file_list: any = null;
let input_file_list_processed: any[] = [];
interface Props {
element_id?: string;
input_name?: string;
container_class_li?: string[];
input_class_li?: string[];
table_class_li?: string[];
multiple?: boolean;
required?: boolean;
accept?: string;
untrusted_extension_list?: any;
legacy_extension_list?: any;
use_selected_file_table?: boolean;
file_list_status?: null | string;
processed_file_list?: any[];
input_file_list?: any;
}
let {
element_id = 'svelte_input_file_element',
input_name = 'file_list',
container_class_li = [],
input_class_li = ['file_drop_area'],
table_class_li = ['table', 'table-sm', 'table-striped', '', 'text-sm'],
multiple = true,
required = true,
accept = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh',
untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'],
legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'],
use_selected_file_table = true,
file_list_status = $bindable(null),
processed_file_list = $bindable([]),
input_file_list = $bindable(null)
}: Props = $props();
let input_file_list_processed: any[] = $state([]);
onMount(() => {
console.log('** Element Mounted: ** Element Input File');
});
$: if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
input_file_list_processed = result; // Includes file hash
dispatch('input_file_list_updated', {
element_id: element_id,
input_file_list: input_file_list,
input_file_list_processed: result // Includes file hash
});
});
}
async function process_file_list(file_list) {
console.log('*** process_file_list() ***');
@@ -309,6 +309,28 @@
return true;
}
run(() => {
if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
input_file_list_processed = result; // Includes file hash
dispatch('input_file_list_updated', {
element_id: element_id,
input_file_list: input_file_list,
input_file_list_processed: result // Includes file hash
});
});
}
});
</script>
<div
@@ -370,9 +392,9 @@
<tr>
<td class="file_remove">
<button
on:click|preventDefault={() => {
onclick={preventDefault(() => {
remove_file_from_filelist(file_index);
}}
})}
class="btn btn-md preset-tonal-warning hover:preset-filled-secondary-500 m-1"
title="Remove file from upload list"
>

94
src/lib/elements/element_input_files_tbl.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { createEventDispatcher, onMount, tick } from 'svelte';
import type { key_val } from '$lib/stores/ae_stores';
@@ -7,17 +9,31 @@
import { check_hosted_file_obj_w_hash } from '$lib/ae_core/core__check_hosted_file_obj_w_hash';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/stores/ae_stores';
// export let element_id = 'svelte_input_file_element';
export let container_class_li: string[] = [];
export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', '', 'text-sm'];
export let untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'];
export let legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'];
export let use_selected_file_table = true;
export let input_file_list: any = null;
export let file_list_status: null | string = null;
export let processed_file_list: any[] = [];
interface Props {
// export let element_id = 'svelte_input_file_element';
container_class_li?: string[];
table_class_li?: string[];
untrusted_extension_list?: any;
legacy_extension_list?: any;
use_selected_file_table?: boolean;
input_file_list?: any;
file_list_status?: null | string;
processed_file_list?: any[];
}
let {
container_class_li = [],
table_class_li = ['table', 'table-sm', 'table-striped', '', 'text-sm'],
untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'],
legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'],
use_selected_file_table = true,
input_file_list = $bindable(null),
file_list_status = $bindable(null),
processed_file_list = $bindable([])
}: Props = $props();
// const dispatch = createEventDispatcher();
@@ -27,33 +43,6 @@
console.log('** Element Mounted: ** Element Input File');
});
$: if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
processed_file_list = [];
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
// input_file_list_processed = result; // Includes file hash
// dispatch(
// 'input_file_list_updated',
// {
// element_id: element_id,
// input_file_list: input_file_list,
// input_file_list_processed: result, // Includes file hash
// }
// );
});
} else {
processed_file_list = [];
file_list_status = 'none';
}
async function process_file_list(file_list) {
console.log('*** process_file_list() ***');
@@ -310,6 +299,35 @@
return true;
}
run(() => {
if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
processed_file_list = [];
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
// input_file_list_processed = result; // Includes file hash
// dispatch(
// 'input_file_list_updated',
// {
// element_id: element_id,
// input_file_list: input_file_list,
// input_file_list_processed: result, // Includes file hash
// }
// );
});
} else {
processed_file_list = [];
file_list_status = 'none';
}
});
</script>
<div
@@ -346,9 +364,9 @@
<tr>
<td class="file_remove">
<button
on:click|preventDefault={() => {
onclick={preventDefault(() => {
remove_file_from_filelist(file_index);
}}
})}
class="btn btn-md preset-tonal-warning hover:preset-filled-secondary-500 m-1"
title="Remove file from upload list"
>

344
src/lib/elements/element_input_v2.svelte
View File

@@ -1,37 +1,28 @@
<script lang="ts">
import { run } from 'svelte/legacy';
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) => {
let set_input_type = $state((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) => {
@@ -42,71 +33,142 @@
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;
interface Props {
/* *** BEGIN *** Core input settings */
id_random?: string; // OSIT Aether specific
obj_type?: string; // OSIT Aether specific
obj_prop_name?: string; // OSIT Aether specific
use_name_prefix?: boolean;
name?: string;
// console.log(name);
id?: string; // Same as the value for "for"
// console.log(id);
value?: null | boolean | number | string; // The current value of the property
default_value?: null | boolean | number | string; // The default value for when value is ''
// console.log('Default Value:', default_value);
original_value?: null | boolean | number | string; // The original value
data_type?: string; // boolean, number, string, json
// hidden, text, email, date, number, select, checkbox, radio, textarea, etc
type?: string; // Input type
disabled?: boolean; // attribute format: disabled
readonly?: boolean; // attribute format: readonly="readonly"
required?: boolean; // attribute format: required="required"
pattern?: null | string;
focus?: boolean;
// Input element specific label and placeholder
label?: string;
label_date?: string;
label_time?: string;
placeholder?: string;
// Input description for container
description?: string; // Description
// Layout and style
content_layout?: string; // Default empty is label wrap first, label_start, label_end, floating_input
class_li?: string[]; // Classes for the input element
style?: string; // Style for the input element
display?: string; // Default empty is inline. inline, block, inline-block, break (break after)
label_class_li?: string[];
label_style?: string;
label_display?: string; // Default empty is inline. inline, block, inline-block, break (break after)
label_location?: string; // start, end
description_location?: string; // start, end
container_class_li?: string[]; // Classes for the container element
container_style?: string;
container_display?: string; // Default empty is div block. inline, block, inline-block, break (break after)
multipart_class_li?: string[];
input_mode?: null | string; // This is for special/custom modes like a rich text editor or search.
// For checkbox, radio, and select option
option_li?: any[]; // For checkbox, radio, and select inputs. Not specific to select options. List of key value pairs.
option_none?: boolean; // If set to true then it will add an option using the select_option_none_text value
option_none_text?: string; // If set to true then it will add an option using the select_option_none_text value
// For textarea
size?: number;
rows?: number;
cols?: number;
// For custom date_time. Not "date" or "time" input type only.
date_time_tz?: null | string;
more_html?: import('svelte').Snippet;
}
let {
id_random = '',
obj_type = '',
obj_prop_name = '',
use_name_prefix = false,
name = use_name_prefix ? `${obj_type}__${obj_prop_name}` : obj_prop_name,
id = `${obj_type}__${obj_prop_name}--${id_random}`,
value = $bindable(null),
default_value = null,
original_value = value,
data_type = typeof value,
type = 'text',
disabled = $bindable(false),
readonly = $bindable(false),
required = $bindable(false),
pattern = null,
focus = false,
label = '',
label_date = 'Date',
label_time = 'Time',
placeholder = label,
description = '',
content_layout = '',
class_li = [],
style = $bindable(''),
display = '',
label_class_li = [],
label_style = '',
label_display = '',
label_location = 'start',
description_location = 'end',
container_class_li = [],
container_style = $bindable(''),
container_display = '',
multipart_class_li = [],
input_mode = null,
option_li = [],
option_none = false,
option_none_text = '-- Not Selected --',
size = null,
rows = 3,
cols = 80,
date_time_tz = null,
more_html
}: Props = $props();
let value_datetime = null;
let value_date = null;
let value_time = null;
let value_date = $state(null);
let value_time = $state(null);
if (type == 'date_time' && value) {
console.log(`date_time value: ${value}`);
@@ -135,7 +197,7 @@
let multipart_style;
let label_begin;
let checkbox_none;
let checked;
let checked = $state();
let checkbox_none_text;
let checkbox_li;
let radio_option_class_li;
@@ -187,28 +249,36 @@
// 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);
run(() => {
if (disabled) {
disabled = true;
}
}
}); // else { disabled=false; }
run(() => {
if (readonly) {
readonly = true;
}
}); // else { readonly=false; }
run(() => {
if (required) {
required = true;
}
}); // else { required=true; }
run(() => {
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 == '') {
@@ -218,51 +288,55 @@
// }
// 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
run(() => {
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 (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
}
run(() => {
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 === 'textarea') {
let estimate_row_rem = rows + 5.5;
style = `height: calc(2px + ${estimate_row_rem}rem);`;
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}`);
}
} else if (typeof content_layout === 'undefined') {
console.log(`input name=${name} content_layout=${content_layout}`);
}
});
// function handle_oninput_dispatch() {
// console.log(input);
@@ -379,7 +453,7 @@
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
use:util.set_focus={focus}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
bind:value
/>
@@ -415,7 +489,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{#if !label_begin}
@@ -446,7 +520,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{#if !label_begin}
@@ -477,7 +551,7 @@
{disabled}
{required}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -495,7 +569,7 @@
type="checkbox"
value={li_key}
checked
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{:else}
@@ -505,7 +579,7 @@
{name}
type="checkbox"
value={li_key}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -534,7 +608,7 @@
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{/if}
@@ -554,7 +628,7 @@
{disabled}
{required}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -574,7 +648,7 @@
type="radio"
bind:group={value}
value={li_key}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{:else if li_key.toString() === value.toString() || (li_key == 'true' && value == true) || (li_key == 'false' && value == false)}
@@ -586,7 +660,7 @@
bind:group={value}
value={li_key}
checked
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/> Z
</label>
{:else}
@@ -597,7 +671,7 @@
type="radio"
bind:group={value}
value={li_key}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -633,7 +707,7 @@
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{#if !label_begin}
@@ -665,7 +739,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
></textarea>
<!-- rows="" cols="" maxlength="" -->
@@ -708,7 +782,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
>
{#if select_option_none}
<option value="">{select_option_none_text}</option>
@@ -746,7 +820,7 @@
<span>{description}</span>
{/if}
<slot name="more_html"></slot>
{@render more_html?.()}
</div>
<style>

26
src/lib/elements/element_obj_tbl_row.svelte
View File

@@ -9,13 +9,17 @@
// import { slct_obj_id, slct_obj_li_type, slct_obj_type } from '../admin/stores_admin.js';
// Should these slct_* be exported???
let slct_obj_id = null;
let slct_obj_id = $state(null);
let slct_obj_li_type = null;
let slct_obj_type = null;
let slct_obj_type = $state(null);
export let row_header: boolean = false;
export let primary_obj_li_type: string = slct_obj_li_type; // account, person, user, event, event_session, membership_person
export let obj = null;
interface Props {
row_header?: boolean;
primary_obj_li_type?: string; // account, person, user, event, event_session, membership_person
obj?: any;
}
let { row_header = false, primary_obj_li_type = $bindable(slct_obj_li_type), obj = null }: Props = $props();
console.log(obj);
console.log(typeof obj);
@@ -60,7 +64,7 @@
<th
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() =>
onclick={() =>
(primary_obj_li_type = obj_prop_name.replace('_id_random', ''))}
>
{ae_util.set_obj_prop_display_name({
@@ -72,11 +76,11 @@
<td
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() => {
onclick={() => {
slct_obj_type = obj_prop_name.replace('_id_random', '');
slct_obj_id = obj_prop_value;
}}
on:keypress={() => {
onkeypress={() => {
slct_obj_type = obj_prop_name.replace('_id_random', '');
slct_obj_id = obj_prop_value;
}}
@@ -105,7 +109,7 @@
<th
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() =>
onclick={() =>
(primary_obj_li_type = obj_prop_name.replaceAll('[URL]', ''))}
>
{ae_util.set_obj_prop_display_name({
@@ -117,11 +121,11 @@
<td
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() => {
onclick={() => {
slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
slct_obj_id = obj_prop_value;
}}
on:keypress={() => {
onkeypress={() => {
slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
slct_obj_id = obj_prop_value;
}}

44
src/lib/elements/element_sql_qry.svelte
View File

@@ -14,22 +14,38 @@
// *** Import Aether module components
// *** Export/Exposed variables and functions for component
export let api_cfg: any;
export let show_textarea = true;
export let button_label = 'Run SQL!';
export let show_record_count = true;
export let remove_breaks = false;
export let run_on_load = false;
export let sql_statement: string;
export let sql_data = null;
export let as_list = false;
export let log_lvl: number = 0;
interface Props {
// *** Export/Exposed variables and functions for component
api_cfg: any;
show_textarea?: boolean;
button_label?: string;
show_record_count?: boolean;
remove_breaks?: boolean;
run_on_load?: boolean;
sql_statement: string;
sql_data?: any;
as_list?: boolean;
log_lvl?: number;
}
let {
api_cfg,
show_textarea = true,
button_label = 'Run SQL!',
show_record_count = true,
remove_breaks = false,
run_on_load = false,
sql_statement = $bindable(),
sql_data = null,
as_list = false,
log_lvl = 0
}: Props = $props();
// *** Set initial variables
let ae_promises: key_val = {};
let sql_qry_result: any = null;
let ae_promises: key_val = $state({});
let sql_qry_result: any = $state(null);
onMount(() => {
console.log('** Element Mounted: ** Element SQL Query');
@@ -106,7 +122,7 @@
<div class="text-center">
<button
type="button"
on:click={async () => {
onclick={async () => {
sql_qry_result = await handle_run_sql(sql_statement, sql_data, as_list, log_lvl);
}}
class="btn btn-md preset-tonal-primary hover:preset-tonal-primary border border-primary-500"