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

More work on new CRUD element. Now able to update the session location in the list.

Browse Source
This commit is contained in:
Scott Idem
2025-09-29 18:58:54 -04:00
parent 22d7c4728d
commit 0c01eed5c8
3 changed files with 194 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/ae_events_stores.ts
View File

@@ -489,6 +489,7 @@ let events_session_data_struct: key_val = {
show__session_poc_profile: false,
show_modal__session_poc_agree: false,
hide__edit_location: {},
show__edit_location: {},
status_rpt: {

116
src/lib/element_ae_crud_v2.svelte
View File

@@ -6,7 +6,7 @@ interface Props {
trigger_patch?: any;
patch_status?: string; // '', processing, complete, error
patch_complete?: boolean|null; // null = not started, true = complete/success, false = error
patch_complete?: boolean|null|string; // null = not started, true = complete/success, false = error
patch_result?: boolean|null|key_val; // Result of the patch operation
object_type: string;
@@ -20,12 +20,14 @@ interface Props {
new_field_value?: any;
allow_null?: boolean;
select_option_li?: key_val;
select_option_kv?: 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;
display_block?: boolean; // If true, the element will be displayed as a block element.
// display_inline?: boolean;
display_absolute_edit?: boolean; // If true, the edit form will be displayed in the top right corner of the element.
// display_block_edit?: boolean;
textarea_cols?: number;
textarea_rows?: number;
@@ -33,7 +35,8 @@ interface Props {
hide_element?: boolean;
hide_edit_btn?: boolean;
hide_edit_form?: boolean;
// hide_edit_form?: boolean;
show_edit_form?: boolean;
outline_element?: boolean;
@@ -49,7 +52,7 @@ let {
trigger_patch = null,
patch_status = '',
patch_complete = null,
patch_complete = $bindable(null), // null = not started, true = complete/success, false = error
patch_result = null,
object_type,
@@ -60,21 +63,24 @@ let {
previous_field_value = $bindable(null),
current_field_value = null,
new_field_value = $bindable(null),
new_field_value = current_field_value,
allow_null = false,
select_option_li = $bindable({}),
select_option_kv = $bindable({}),
val_empty_is_null = false, // If the value is empty (''), it will be set to null.
edit_label = 'Edit',
display_inline = false,
display_block_edit = false,
display_block = false,
// display_inline = false,
display_absolute_edit = false,
// display_block_edit = false,
textarea_cols = 80,
textarea_rows = 5,
hide_element = $bindable(false),
hide_edit_btn = false,
hide_edit_form = true,
// hide_edit_form = $bindable(true),
show_edit_form = $bindable(),
outline_element = $bindable(false),
@@ -113,6 +119,12 @@ $effect(() => {
// ; Super Key: ${api_crud_super_key}
}
}
if (select_option_kv) {
console.log(select_option_kv);
}
if (trigger_patch === true) {
@@ -199,7 +211,8 @@ async function handle_obj_field_patch(new_field_value: any) {
patch_complete = false;
patch_result = false;
} else {
patch_complete = true;
// patch_complete = true;
patch_complete = object_id; // Return the object ID that was patched
patch_result = {
'type': object_type,
'id': object_id,
@@ -222,10 +235,13 @@ async function handle_obj_field_patch(new_field_value: any) {
class="{class_li} ae_crud
font-normal
transition-all duration-300 ease-in-out
relative
z-20
"
class:hidden={hide_element}
class:inline={display_inline}
class:block={display_block}
class:inline-block={!display_block}
class:outline_element
>
@@ -239,7 +255,7 @@ async function handle_obj_field_patch(new_field_value: any) {
<button
type="button"
class:hidden={hide_edit_btn}
class:hidden={show_edit_form || hide_edit_btn}
class="
btn btn-icon
text-xs
@@ -248,11 +264,11 @@ async function handle_obj_field_patch(new_field_value: any) {
preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
opacity-50 hover:opacity-100
transition-all
inline
"
ondblclick={() => {
hide_edit_btn = true;
hide_edit_form = false;
// hide_edit_btn = true;
// hide_edit_form = false;
show_edit_form = true;
}}
title="Double click to edit property"
>
@@ -263,14 +279,31 @@ async function handle_obj_field_patch(new_field_value: any) {
<!-- class:display_block={display_block} -->
<div
class:hidden={hide_edit_form}
class:hidden={!show_edit_form}
class:absolute={display_absolute_edit}
class:top-0={display_absolute_edit}
class:right-0={display_absolute_edit}
class="field_editing_wrapper
min-w-content w-100 max-w-full
class:drop-shadow-2xl={display_absolute_edit}
class="field_editing_wrapper_v2
border-2 border-dashed hover:border-solid
border-pink-400 dark:border-pink-600
rounded-md
min-w-fit w-full max-w-fit
z-20
p-1 m-0
bg-pink-50/90 dark:bg-pink-900/90
hover:bg-pink-50 hover:dark:bg-pink-900
flex flex-col md:flex-row flex-wrap gap-1
items-center justify-center
space-y-2
transition-all duration-300 ease-in-out
"
>
<!-- <span class="grow flex flex-row items-center justify-between"> -->
<span class="hidden">
<span class="grow flex flex-row items-center justify-between">
<span class="hidden md:inline font-semibold text-lg">
{edit_label}
</span>
@@ -278,18 +311,23 @@ async function handle_obj_field_patch(new_field_value: any) {
type="button"
class="btn btn-md ae_btn_surface_outlined m-1"
onclick={() => {
hide_edit_btn = false;
hide_edit_form = true;
// hide_edit_btn = false;
// hide_edit_form = true;
show_edit_form = false;
}}
title="Close field editing. This does not save any changes."
>
<span class="fas fa-window-close"></span>
<span class="hidden sm:inline">Close</span>
</button>
<!-- </span> -->
</span>
<span
class="field_value grow min-w-content max-w-full"
class="field_value
grow
min-w-fit w-full max-w-fit
flex flex-row flex-wrap items-center justify-center gap-1
"
>
{#if field_type == 'template'}
@@ -300,13 +338,18 @@ async function handle_obj_field_patch(new_field_value: any) {
{:else if field_type == 'select'}
<select
bind:value={new_field_value}
class="select"
class="
select
p-1
min-w-fit w-full
border border-gray-300 dark:border-gray-600
"
>
{#if select_option_li && Object.keys(select_option_li).length == 0}
{#if select_option_kv && Object.keys(select_option_kv).length == 0}
<option value="">-- not set --</option>
{:else if select_option_li && Object.keys(select_option_li).length > 0}
{#each Object.keys(select_option_li) as option}
<option value={option}>{select_option_li[option]}</option>
{:else if select_option_kv && Object.keys(select_option_kv).length > 0}
{#each Object.keys(select_option_kv) as option}
<option value={option}>{select_option_kv[option]}</option>
{/each}
{:else}
<option value="">-- no list --</option>
@@ -346,15 +389,18 @@ async function handle_obj_field_patch(new_field_value: any) {
</span>
<button
class="btn btn-lg ae_btn_warning_outlined m-1"
disabled={new_field_value == current_field_value}
class="
ae_btn_warning_outlined
btn btn-lg
m-1
"
disabled={new_field_value === current_field_value}
onclick={async () => {
handle_obj_field_patch(new_field_value);
}}
title="Save new field value"
>
{#if new_field_value == current_field_value}
{#if new_field_value === current_field_value}
{#if (btn_label)}
{@html btn_label}
{:else}