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

Adding the ability to quickly edit most fields. Other general clean up.

Browse Source
This commit is contained in:
Scott Idem
2024-06-25 11:37:03 -04:00
parent 4ad51b8e0b
commit 21ad9d900c
6 changed files with 321 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/lib/element_ae_crud.svelte
View File

@@ -33,7 +33,7 @@ export let textarea_rows: number = 5;
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 btn_label = '<span class="fas fa-check mx-1"></span> Save'; // PATCH
// export let show_field_name = true;
// export let show_original_value = true;
@@ -142,7 +142,7 @@ async function handle_obj_field_patch(new_field_value: any) {
<slot></slot>
<button
class="btn btn-sm field_show_btn"
class="btn btn-sm variant-soft-warning hover:variant-ghost-error field_show_btn"
class:hide_edit_btn
class:show_crud
on:dblclick={() => {
@@ -156,7 +156,7 @@ async function handle_obj_field_patch(new_field_value: any) {
<span class="field_editing_wrapper">
<button
class="btn btn-sm btn_default field_hide_btn"
class="btn btn-sm variant-soft-tertiary hover:variant-ghost-tertiary m-1"
class:show_crud
on:click={() => {
show_crud = false;
@@ -173,27 +173,39 @@ async function handle_obj_field_patch(new_field_value: any) {
<!-- <input type="button" bind:value={field_value}> -->
{field_value}
{:else if field_type == 'text'}
<input bind:value={field_value}>
<input
bind:value={field_value}
class="input w-fit"
>
{:else if field_type == 'textarea'}
<textarea bind:value={field_value} cols={textarea_cols} rows={textarea_rows}></textarea>
<textarea
bind:value={field_value}
cols={textarea_cols}
rows={textarea_rows}
class="textarea"
></textarea>
{:else}
<input bind:value={field_value}>
<input
bind:value={field_value}
class="input w-fit"
>
{/if}
{#if allow_null}
<button
class="btn btn-sm btn_warning null_value_btn"
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning m-1"
on:click={async () => {
field_value = null;
}}
title="Set value to NULL"
>
{@html '&#0;'} NULL
&Oslash;
NULL
</button>
{/if}
</span>
<button
class="btn btn-md btn_primary field_patch_btn"
class="btn btn-md variant-soft-primary hover:variant-ghost-primary m-1"
class:show_crud
on:click={async () => {
handle_obj_field_patch(field_value);
@@ -219,9 +231,9 @@ async function handle_obj_field_patch(new_field_value: any) {
<style>
.ae_crud .field_editing_wrapper {
font-size: em;
}
/* .ae_crud .field_editing_wrapper {
font-size: 1em;
} */
/* BEGIN: Svelte CRUD (update) component */
@@ -256,10 +268,11 @@ async function handle_obj_field_patch(new_field_value: any) {
margin: 0;
padding: 0;
color: hsla(0,0%,50%,.8);
/* color: hsla(0,0%,50%,.8); */
opacity: .25;
/* NOTE: transition when hover ends */
transition-property: background-color, border-color, color, height, width;
transition-property: opacity, background-color, border-color, color, height, width;
transition-delay: 1.00s; /* no delay */
transition-duration: .55s;
transition-timing-function: linear;
@@ -267,10 +280,12 @@ async function handle_obj_field_patch(new_field_value: any) {
.ae_crud .field_viewing_wrapper:hover .field_show_btn {
/* outline: solid thin hsla(0,50%,50%,.9); */
color: hsla(0,50%,50%,.9);
/* color: hsla(0,50%,50%,.9); */
opacity: 1;
/* NOTE: transition when hover starts */
transition-property: background-color, border-color, color, height, width;
transition-property: opacity, background-color, border-color, color, height, width;
transition-delay: .25s; /* no delay */
transition-duration: .50s;
transition-timing-function: linear;
@@ -330,7 +345,7 @@ async function handle_obj_field_patch(new_field_value: any) {
transition-duration: .25s;
transition-timing-function: linear;
position: absolute;
/* position: absolute; */
/* position: fixed; */
/* position: relative; */
/* top: 1em; */