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

2
src/lib/ae_events__event_presentation.ts
View File

@@ -87,7 +87,7 @@ export async function handle_load_ae_obj_li__event_presentation(
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
enabled: enabled,
hidden: hidden,
order_by_li: {'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
limit: limit,
offset: offset,
params_json: params_json,

8
src/lib/ae_events__event_presenter.ts
View File

@@ -87,7 +87,7 @@ export async function handle_load_ae_obj_li__event_presenter(
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
enabled: enabled,
hidden: hidden,
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'given_name': 'ASC', 'family_name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
limit: limit,
offset: offset,
params_json: params_json,
@@ -177,13 +177,13 @@ export async function handle_update_ae_obj__event_presenter(
{
api_cfg,
event_presenter_id,
data,
data_kv,
params={},
log_lvl=0
}: {
api_cfg: any,
event_presenter_id: string,
data: any,
data_kv: any,
params?: key_val,
log_lvl?: number
}
@@ -194,7 +194,7 @@ export async function handle_update_ae_obj__event_presenter(
api_cfg: api_cfg,
obj_type: 'event_presenter',
obj_id: event_presenter_id, // NOTE: This is the FQDN, not normally the ID.
fields: data,
fields: data_kv,
key: api_cfg.api_crud_super_key,
params: params,
return_obj: true,

2
src/lib/ae_events__event_session.ts
View File

@@ -88,7 +88,7 @@ export async function handle_load_ae_obj_li__event_session(
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
enabled: enabled,
hidden: hidden,
order_by_li: {'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'start_datetime': 'ASC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
limit: limit,
offset: offset,
params_json: params_json,

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; */

141
src/routes/events_pres_mgmt/session/[slug]/+page.svelte
View File

@@ -521,7 +521,50 @@ function send_sign_in_poc_email(
{/if}
</li>
<li>
<strong class="text-sm">Date time:</strong> {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'datetime_long')} - {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, 'datetime_long')}
<strong class="text-sm">Date time:</strong>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_session'}
object_id={$lq__event_session_obj?.event_session_id_random}
field_name={'start_datetime'}
field_type={'datetime'}
field_value={$lq__event_session_obj.start_datetime}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
}}
>
{ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'datetime_long')}
</Element_ae_crud>
-
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_session'}
object_id={$lq__event_session_obj?.event_session_id_random}
field_name={'end_datetime'}
field_type={'datetime'}
field_value={$lq__event_session_obj.end_datetime}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
}}
>
{ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, 'datetime_long')}
</Element_ae_crud>
</li>
<li>
<strong class="text-sm">Location/Room:</strong> {$lq__event_session_obj.event_location_name ? $lq__event_session_obj.event_location_name : '-- not set --'}
@@ -709,31 +752,48 @@ function send_sign_in_poc_email(
<li>
<div>
<strong class="text-sm">
Session description:
</strong>
<button
type="button"
on:click={() => {
console.log('Show/Hide Description');
$events_loc.pres_mgmt.show_content__session_description = !$events_loc.pres_mgmt.show_content__session_description;
}}
class="btn btn-sm variant-soft-surface hover:variant-filled-surface text-xs"
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_session'}
object_id={$lq__event_session_obj?.event_session_id_random}
field_name={'description'}
field_type={'textarea'}
field_value={$lq__event_session_obj.description}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
textarea_rows={15}
class_li={''}
>
{#if $events_loc.pres_mgmt.show_content__session_description}
<span class="fas fa-eye-slash mx-1"></span>
<span>Hide Description</span>
{:else}
<span class="fas fa-eye mx-1"></span>
<span>Show</span>
{/if}
</button>
</div>
<strong class="text-sm">
Session description:
</strong>
<pre
class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
class:hidden={!$events_loc.pres_mgmt.show_content__session_description}
>{$lq__event_session_obj.description}</pre>
<button
type="button"
on:click={() => {
console.log('Show/Hide Description');
$events_loc.pres_mgmt.show_content__session_description = !$events_loc.pres_mgmt.show_content__session_description;
}}
class="btn btn-sm variant-soft-surface hover:variant-filled-surface text-xs"
>
{#if $events_loc.pres_mgmt.show_content__session_description}
<span class="fas fa-eye-slash mx-1"></span>
<span>Hide Description</span>
{:else}
<span class="fas fa-eye mx-1"></span>
<span>Show</span>
{/if}
</button>
<pre
class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
class:hidden={!$events_loc.pres_mgmt.show_content__session_description}
>{$lq__event_session_obj.description}</pre>
</Element_ae_crud>
</div>
</li>
</ul>
@@ -1105,6 +1165,21 @@ function send_sign_in_poc_email(
</h4>
<div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj.event_presentation_id_random}
field_name={'description'}
field_type={'textarea'}
field_value={event_presentation_obj.description}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
textarea_rows={15}
class_li={''}
>
{#if event_presentation_obj.description}
<strong class="text-sm">
Description:
@@ -1143,8 +1218,10 @@ function send_sign_in_poc_email(
No description provided.
</div>
{/if}
</Element_ae_crud>
</div>
<!-- Show presenters for this presentation -->
{#await event_presentation_obj.event_presenter_li}
<p>Loading...</p>
@@ -1323,10 +1400,10 @@ function send_sign_in_poc_email(
{/if} -->
<div class="float-right space-2 flex flex-row items-center">
{#if $ae_loc.administrator_access }
{#if $ae_loc.administrator_access && !event_presenter_obj.person_id_random}
<button
type="button"
on:click={() => {
on:click={async () => {
console.log('Add Person');
let person_data = {
@@ -1336,17 +1413,27 @@ function send_sign_in_poc_email(
family_name: 'Presenter',
primary_email: 'test+newpres@oneskyit.com',
code: 'new_presenter',
// Random number between 100000 and 999999
passcode: Math.floor(Math.random() * 900000) + 100000,
enable: true,
}
core_func.handle_create_ae_obj__person({
let new_person_obj = await core_func.handle_create_ae_obj__person({
api_cfg: $ae_api,
// user_id: $ae_loc.user_id,
data_kv: person_data,
log_lvl: 1,
})
console.log('new_person_obj:', new_person_obj);
// We then need to update the event_presenter with the new person_id.
events_func.handle_update_ae_obj__event_presenter({
api_cfg: $ae_api,
event_presenter_id: event_presenter_obj.event_presenter_id_random,
data_kv: {person_id_random: new_person_obj.person_id_random},
log_lvl: 1,
})
}}
class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
>

188
src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
View File

@@ -339,7 +339,24 @@ async function handle_delete__event_file({event_file_id}) {
</h2>
<section class="p-2">
<h3 class="h4">Title: "{$events_slct.presentation_obj.name}"</h3>
<h3 class="h4">
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={$events_slct.presentation_obj.event_presentation_id_random}
field_name={'name'}
field_type={'text'}
field_value={$events_slct.presentation_obj.name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
>
Title: "{$events_slct.presentation_obj.name}"
</Element_ae_crud>
</h3>
<h3 class="h4">Presenter:</h3>
<ul
@@ -347,29 +364,162 @@ async function handle_delete__event_file({event_file_id}) {
>
<li>
<span class="fas fa-user"></span>
{$events_slct.presenter_obj.full_name}
<!-- {#if !$events_sess.pres_mgmt.show_edit__event_presenter_name}
{$events_slct.presenter_obj.full_name}
{:else} -->
<!-- <div
hidden={!$events_sess.pres_mgmt.show_edit__event_presenter_name}
> -->
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
field_name={'given_name'}
field_type={'text'}
field_value={$events_slct.presenter_obj.given_name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
>
{$events_slct.presenter_obj.given_name}
</Element_ae_crud>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
field_name={'family_name'}
field_type={'text'}
field_value={$events_slct.presenter_obj.family_name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
>
{$events_slct.presenter_obj.family_name}
</Element_ae_crud>
<!-- </div> -->
<!-- {/if} -->
<!-- <button
on:click={() => {
console.log('*** Edit button clicked ***');
$events_sess.pres_mgmt.show_edit__event_presenter_name = !$events_sess.pres_mgmt.show_edit__event_presenter_name;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-edit mx-1"></span>
Edit
</button> -->
</li>
<li>
<span class="fas fa-envelope"></span>
<a
href="mailto:{$events_slct.presenter_obj.email}"
class="text-blue-500"
>{$events_slct.presenter_obj.email}</a>
</li>
<!-- <li>
<span class="fas fa-phone"></span>
{$events_slct.presenter_obj.phone}
</li> -->
<li>
<span class="fas fa-building"></span>
{$events_slct.presenter_obj.affiliations}
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
field_name={'email'}
field_type={'text'}
field_value={$events_slct.presenter_obj.email}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
>
<span class="fas fa-envelope"></span>
<a
href="mailto:{$events_slct.presenter_obj.email}"
class="text-blue-500"
>{$events_slct.presenter_obj.email}</a>
</Element_ae_crud>
{#if $events_slct.presenter_obj.person_primary_email != $events_slct.presenter_obj.email}
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$events_slct.presenter_obj.person_id_random}
field_name={'primary_email'}
field_type={'text'}
field_value={$events_slct.presenter_obj.person_primary_email}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
>
<span class="fas fa-envelope"></span>
<a
href="mailto:{$events_slct.presenter_obj.person_primary_email}"
class="text-blue-500"
>{$events_slct.presenter_obj.person_primary_email}</a>
</Element_ae_crud>
{/if}
</li>
<li>
<span class="fas fa-user-tag"></span>
{$events_slct.presenter_obj.professional_title ?? '-- not set --'}
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
field_name={'affiliations'}
field_type={'text'}
field_value={$events_slct.presenter_obj.affiliations}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
>
<span class="fas fa-building"></span>
{$events_slct.presenter_obj.affiliations ?? '-- affiliations not set --'}
</Element_ae_crud>
</li>
<li>
<span class="fas fa-user-secret"></span>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
field_name={'professional_title'}
field_type={'text'}
field_value={$events_slct.presenter_obj.professional_title}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
>
<span class="fas fa-user-tag"></span>
{$events_slct.presenter_obj.professional_title && $events_slct.presenter_obj.professional_title.length ? $events_slct.presenter_obj.professional_title : '-- professional title not set --'}
</Element_ae_crud>
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$events_slct.presenter_obj.person_id_random}
field_name={'passcode'}
field_type={'text'}
field_value={$events_slct.presenter_obj.person_passcode}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
>
<span class="fas fa-user-secret"></span>
{$events_slct.presenter_obj.person_passcode ?? '-- passcode not set --'} (your passcode)
</Element_ae_crud>
<!-- <span class="fas fa-user-secret"></span>
{$events_slct.presenter_obj.person_passcode} (your passcode)
<button
@@ -380,7 +530,7 @@ async function handle_delete__event_file({event_file_id}) {
<span class="fas fa-edit">
</span>
Edit
</button>
</button> -->
</li>
</ul>