Finalish clean up for IDAA BB Posts

This commit is contained in:
Scott Idem
2025-07-07 15:25:47 -04:00
parent cc8bbffdbf
commit f0fae620ea
4 changed files with 124 additions and 61 deletions

View File

@@ -41,6 +41,8 @@ export let show_toolbar: boolean = true;
export let placeholder: string = 'Type your text here...';
export let changed: boolean = false;
export let classes: string = '';
if (default_minimal) {
show_toolbar = false;
}
@@ -133,7 +135,7 @@ let mouse_leave_wait: number = 2000;
}
}, mouse_enter_wait);
}}
class="block w-full h-full"
class="block w-full h-full {classes}"
>
<ShadEditor
class="p-1 transition-all duration-1000"

View File

@@ -133,11 +133,11 @@ onDestroy(() => {
max-w-full
"
>
{#if $lq__post_obj?.topic_id}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>{/if}
<!-- {#if $lq__post_obj?.topic_id}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>{/if} -->
<span class="float-right flex flex-row flex-wrap gap-1 items-center justify-end">
{#if $lq__post_obj?.topic_name}
<span class="badge badge-info preset-tonal-tertiary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>
<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-tag"></span> {$lq__post_obj?.topic_name}</span>
{/if}
{#if $ae_loc.trusted_access && $lq__post_obj?.hide}
<span class="badge badge-warning"><span class="fas fa-exclamation-triangle m-1"></span> Hidden</span>

View File

@@ -375,7 +375,7 @@ $effect(() => {
<section
class="svelte_component ae_section ae_edit post_obj edit__post_obj space-y-2 p-2 border rounded bg-blue-100"
class="svelte_component ae_section ae_edit post_obj edit__post_obj space-y-2 p-2 border rounded preset-outlined-warning-200-800 preset-tonal-warning"
class:ae_create={!$idaa_slct.post_id}
bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
@@ -404,7 +404,12 @@ $effect(() => {
$idaa_sess.bb.edit__post_obj = false;
}
}}
class="novi_btn btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
class="
novi_btn
btn btn-sm
preset-filled-warning-200-800 hover:preset-filled-success-200-800
transition
"
title="Cancel editing of post for {$idaa_slct.post_obj.full_name} (ID: {$idaa_slct.post_obj.post_id}"
>
<span class="fas fa-edit m-1"></span> Cancel Edit
@@ -415,20 +420,22 @@ $effect(() => {
<input type="hidden" value={$idaa_slct.post_id} />
<section class="ae_section post__general_information border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section post__general_information -->
<div class="ae_section post__general_information border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section post__general_information -->
<div>
<label for="title" class="w-full">
<span class="text-sm text-gray-600 dark:text-gray-400">
Title of BB post:
</span>
<input type="text" id="title" name="title" required max="200" bind:value={$idaa_slct.post_obj.title} placeholder="Title of Post" autocomplete="off" class="input w-full" />
<input
type="text" id="title" name="title" required max="200" bind:value={$idaa_slct.post_obj.title} placeholder="Title of Post" autocomplete="off"
class="input w-full form-control"
/>
</label>
</div>
<div>
<label for="content" class="ae_label post__content w-full">
<span class="text-sm text-gray-600 dark:text-gray-400">
<span class="legend text-sm font-semibold text-gray-600 dark:text-gray-400">
Content (post body):
</span>
<!-- <textarea name="content" id="content" class="ae_value post__content tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.post_obj.content} ></textarea> -->
@@ -446,6 +453,7 @@ $effect(() => {
}}
bind:new_html={content_new_html}
bind:changed={content_changed}
classes="bg-gray-100 dark:bg-gray-800"
placeholder="Your post content here..."
/>
{:else}
@@ -461,22 +469,23 @@ $effect(() => {
}}
bind:new_html={content_new_html}
bind:changed={content_changed}
classes="bg-gray-100 dark:bg-gray-800"
placeholder="Your post content here..."
/>
{/if}
</label>
</div>
<div
class="flex flex-col gap-1 items-center justify-center"
>
<button
type="button"
class="novi_btn btn btn-sm"
class:preset-filled-secondary-500={$idaa_sess.bb.show__inline_edit__file_upload}
class:preset-tonal-secondary={!$idaa_sess.bb.show__inline_edit__file_upload}
class="
novi_btn
btn btn-sm
"
class:preset-filled-success-200-800={$idaa_sess.bb.show__inline_edit__file_upload}
class:preset-filled-tertiary-200-800={!$idaa_sess.bb.show__inline_edit__file_upload}
onclick={() => {
$idaa_sess.bb.show__inline_edit__file_upload = !$idaa_sess.bb.show__inline_edit__file_upload;
}}
@@ -649,13 +658,16 @@ $effect(() => {
<div>
<label class="">
<label class="form-group w-100">
<span class="text-sm text-gray-600 dark:text-gray-400">
BB post topic:
</span>
<select
name="topic_id"
class="select w-96"
class="
select w-96 preset-outline-secondary-500
form-control col-sm-12
"
bind:value={$idaa_slct.post_obj.topic_id}
>
<option value="">-- None --</option>
@@ -672,7 +684,7 @@ $effect(() => {
<h3 class="h3">Poster's Information</h3>
<fieldset class="">
<fieldset class="form-group">
<legend class="text-sm text-gray-600 dark:text-gray-400">Post as "Anonymous"?</legend>
<div class="flex flex-row gap-2">
<input
@@ -698,7 +710,8 @@ $effect(() => {
</div>
</fieldset>
<label for="external_person_id">
<div>
<label for="external_person_id" class="block form-group d-block w-100">
<span class="text-sm text-gray-600 dark:text-gray-400">
<span class="fas fa-link"></span> Linked with Novi ID
</span>
@@ -710,7 +723,7 @@ $effect(() => {
name="external_person_id"
value={($idaa_slct.post_obj.external_person_id ? $idaa_slct.post_obj.external_person_id : $idaa_loc.novi_uuid)}
readonly={true}
class="input w-96"
class="input w-96 form-control"
>
{:else}
<div class="ae_highlight text-sm bg-yellow-100 p-2">
@@ -724,12 +737,14 @@ $effect(() => {
value={($idaa_slct.post_obj?.external_person_id ? $idaa_slct.post_obj
?.external_person_id : '')}
readonly={!$ae_loc.administrator_access}
class="input w-96"
class="input w-96 form-control"
>
{/if}
</label>
</div>
<label for="full_name">
<div>
<label for="full_name" class="block form-group d-block w-75">
<span class="text-sm text-gray-600 dark:text-gray-400">
Name
{#if !$ae_loc.trusted_access}
@@ -744,12 +759,14 @@ $effect(() => {
name="full_name"
value={($idaa_slct.post_obj?.full_name ? $idaa_slct?.post_obj.full_name : $idaa_loc.novi_full_name)}
readonly={!$ae_loc.trusted_access}
class="input w-96"
class="input w-96 form-control"
>
</label>
</div>
{#if $ae_loc.trusted_access}
<label for="email">
<div>
<label for="email" class="block form-group d-block w-75">
<span class="text-sm text-gray-600 dark:text-gray-400">
Email
{#if !$ae_loc.trusted_access}
@@ -763,12 +780,13 @@ $effect(() => {
name="email"
value={($idaa_slct.post_obj?.email ? $idaa_slct.post_obj?.email : $idaa_loc.novi_email ?? '')}
readonly={!$ae_loc.trusted_access}
class="input w-96"
class="input w-96 form-control"
>
<span class="text-xs text-gray-600 dark:text-gray-400 italic">
Secondary link using the Novi email address
</span>
</label>
</div>
{:else}
<input type="hidden" name="email" value={($idaa_slct.post_obj?.email ? $idaa_slct.post_obj?.email : $idaa_loc.novi_email ?? '')} />
{/if}
@@ -802,25 +820,32 @@ $effect(() => {
</div>
</fieldset>
</section> <!-- END: section post__general_information -->
</div> <!-- END: section post__general_information -->
{#if $ae_loc.trusted_access}
<button
type="button"
class="novi_btn btn btn-sm preset-tonal-warning float-right"
class:preset-filled-secondary-500={$idaa_loc.bb.show__admin_options}
class:preset-tonal-secondary={!$idaa_loc.bb.show__admin_options}
class="
novi_btn
btn btn-sm float-right
"
class:preset-filled-success-200-800={$idaa_loc.bb.show__admin_options}
class:preset-filled-tertiary-200-800={!$idaa_loc.bb.show__admin_options}
onclick={() => {
$idaa_loc.bb.show__admin_options = !$idaa_loc.bb.show__admin_options;
}}
>
{#if $idaa_loc.bb.show__admin_options}
<span class="fas fa-eye-slash m-1"></span>
{:else}
<span class="fas fa-eye m-1"></span>
{$idaa_loc.bb.show__admin_options ? 'Hide' : 'Show'} Admin
{/if}
{$idaa_loc.bb.show__admin_options ? 'Hide' : 'Show'} Admin?
</button>
<!-- BEGIN: section post__admin_options -->
<section
<div
class="ae_section post__admin_options border border-gray-200 rounded p-2 space-y-2 bg-red-100"
class:hidden={!$idaa_loc.bb.show__admin_options}
>
@@ -835,8 +860,8 @@ $effect(() => {
<span
class="flex flex-row flex-wrap gap-2 items-center justify-evenly grow"
>
<fieldset class="flex flex-row gap-1 items-center justify-center">
<legend class="legend text-sm font-semibold">Hide</legend>
<fieldset class="flex flex-row gap-1 items-center justify-center form-check">
<legend class="legend text-sm font-semibold form-check-label">Hide</legend>
<div>
<input
type="radio"
@@ -844,7 +869,7 @@ $effect(() => {
name="hide"
value={true}
bind:group={$idaa_slct.post_obj.hide}
class="radio"
class="radio form-check-input"
>
<label for="hide_yes">Yes</label>
</div>
@@ -855,14 +880,14 @@ $effect(() => {
name="hide"
value={false}
bind:group={$idaa_slct.post_obj.hide}
class="radio"
class="radio form-check-input"
>
<label for="hide_no">No</label>
</div>
</fieldset>
<fieldset class="flex flex-row gap-2">
<legend class="legend text-sm font-semibold">Priority</legend>
<fieldset class="flex flex-row gap-1 items-center justify-center form-check">
<legend class="legend text-sm font-semibold form-check-label">Priority</legend>
<div>
<input
type="radio"
@@ -870,7 +895,7 @@ $effect(() => {
name="priority"
value={true}
bind:group={$idaa_slct.post_obj.priority}
class="radio"
class="radio form-check-input"
>
<label for="priority_yes">Yes</label>
</div>
@@ -881,23 +906,23 @@ $effect(() => {
name="priority"
value={false}
bind:group={$idaa_slct.post_obj.priority}
class="radio"
class="radio form-check-input"
>
<label for="priority_no">No</label>
</div>
</fieldset>
</span>
<span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
<label class="legend text-sm font-semibold">Sort <input type="number" name="sort" bind:value={$idaa_slct.post_obj.sort} class="input w-24" /></label>
<span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow col-sm-1">
<label class="legend text-sm font-semibold input-group">Sort <input type="number" name="sort" bind:value={$idaa_slct.post_obj.sort} class="input w-24 form-control" /></label>
<label class="legend text-sm font-semibold">Group <input type="text" name="group" bind:value={$idaa_slct.post_obj.group} max="100" class="input w-40" /></label>
<label class="legend text-sm font-semibold input-group">Group <input type="text" name="group" bind:value={$idaa_slct.post_obj.group} max="100" class="input w-40 form-control" /></label>
</span>
{#if $ae_loc.administrator_access}
<span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
<fieldset class="flex flex-row gap-2">
<legend class="legend text-sm font-semibold">Enable</legend>
<fieldset class="flex flex-row gap-2 form-check">
<legend class="legend text-sm font-semibold form-check-label">Enable</legend>
<div>
<input
type="radio"
@@ -905,7 +930,7 @@ $effect(() => {
name="enable"
value={true}
bind:group={$idaa_slct.post_obj.enable}
class="radio"
class="radio form-check-input"
>
<label for="enable_yes">Yes</label>
</div>
@@ -916,7 +941,7 @@ $effect(() => {
name="enable"
value={false}
bind:group={$idaa_slct.post_obj.enable}
class="radio"
class="radio form-check-input"
>
<label for="enable_no">No</label>
</div>
@@ -930,13 +955,15 @@ $effect(() => {
{#if $ae_loc.trusted_access}
<label
for="notes"
class="ae_label post__notes w-full"
>
<span class="legend text-sm font-semibold">Internal Staff Notes</span>
<span class="legend text-sm font-semibold text-gray-600 dark:text-gray-400">Internal Staff Notes</span>
<Tiptap_editor
default_minimal={true}
html_text={$idaa_slct.post_obj.notes}
show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
show_button_kv={{
'heading__h1': false, 'heading__h2': false, 'heading__h3': false
}}
bind:new_html={notes_new_html}
bind:changed={notes_changed}
placeholder="Internal notes for staff only. Not shown to the public."
@@ -944,18 +971,25 @@ $effect(() => {
</label>
{/if}
</section> <!-- END: section post__admin_options -->
</div> <!-- END: section post__admin_options -->
{/if}
<section class="ae_section ae_options ae_row ae_actions post__options post__actions flex flex-row gap-1 items-center justify-between">
<div class="
ae_section ae_options ae_row ae_actions post__options post__actions
flex flex-row gap-1 items-center justify-between w-full
d-flex align-items-center justify-content-between
"
>
<div>
<!-- BEGIN: section post__options -->
{#if $idaa_slct.post_id}
<button
type="submit"
disabled={(disable_submit_btn || !obj_changed)}
class="novi_btn btn_primary btn btn-primary preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
class="novi_btn btn btn-primary
preset-tonal-success
hover:preset-filled-success-500 transition"
>
{#await prom_api__post_obj}
<span class="fas fa-spinner fa-spin m-1"></span> Saving
@@ -989,7 +1023,10 @@ $effect(() => {
if (!confirm('Are you sure you want to delete this post?')) {return false;}
handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'delete'});
}}
class="novi_btn btn btn-sm preset-tonal-warning"
class="
novi_btn
btn btn-sm preset-filled-warning-400-600 hover:preset-filled-error-200-800
"
title="Delete record permanently"
>
<span class="fas fa-minus m-1"></span> Delete
@@ -1001,7 +1038,12 @@ $effect(() => {
if (!confirm('Are you sure you want to disable this post?')) {return false;}
handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'disable'});
}}
class="novi_btn btn btn-sm preset-tonal-warning"
class="
novi_btn
btn btn-sm
preset-filled-warning-200-800 hover:preset-filled-error-200-800
transition
"
title="Disable record to delete"
>
<span class="fas fa-minus m-1"></span> Delete
@@ -1013,7 +1055,12 @@ $effect(() => {
if (!confirm('Are you sure you want to hide this post?')) {return false;}
handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'hide'});
}}
class="novi_btn btn btn-sm preset-tonal-warning"
class="
novi_btn
btn btn-sm
preset-filled-warning-200-800 hover:preset-filled-error-200-800
transition
"
title="Hide record to delete"
>
<span class="fas fa-comment-slash m-1"></span> Delete
@@ -1035,13 +1082,18 @@ $effect(() => {
$idaa_sess.bb.edit__post_obj = false;
}
}}
class="novi_btn btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
class="
novi_btn
btn btn-sm
preset-filled-warning-200-800 hover:preset-filled-success-200-800
transition
"
title="Cancel editing of post for {$idaa_slct.post_obj.full_name} (ID: {$idaa_slct.post_obj.post_id}"
>
<span class="fas fa-edit m-1"></span> Cancel Edit
</button>
</div>
</section>
</div>
</form>

View File

@@ -41,7 +41,7 @@ onMount(() => {
<span class="fas fa-comment-alt m-1"></span>
{@html idaa_post_obj.title}
</span>
{#if idaa_post_obj.topic_name}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-user-md m-1"></span> {idaa_post_obj.topic_name}</span>{/if}
{#if idaa_post_obj.topic_name}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-tag m-1"></span> {idaa_post_obj.topic_name}</span>{/if}
</h3>
</header>
@@ -58,7 +58,11 @@ onMount(() => {
<div class="ae_options flex flex-row gap-2 items-center justify-center">
<a
href="/idaa/bb/{idaa_post_obj?.post_id}"
class="novi_btn btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
class="
novi_btn btn-secondary
btn btn-md preset-filled-primary-200-800
transition
"
title={`Open to see details: ${idaa_post_obj?.name}`}
>
<span class="fas fa-envelope-open m-1"></span>
@@ -144,7 +148,7 @@ onMount(() => {
{/if}
</div>
<div class="ae_section ae_footer ae_meta post__meta text-sm text-gray-500 mt-4 flex flex-row gap-2 items-center justify-center">
<div class="ae_footer ae_meta post__meta text-sm text-gray-500/80 m-1 flex flex-row gap-2 items-center justify-center">
{#if (idaa_post_obj.anonymous)}
<div class="post__posted_by">
<span class="text-xs">Posted by:</span>
@@ -179,7 +183,12 @@ onMount(() => {
</span>
{/if}
{#if idaa_post_obj.archive_on}
<span class="post__archive_on text-xs">Archive on: {ae_util.iso_datetime_formatter(idaa_post_obj.archive_on, 'datetime_12_short')}</span>
<span
class="post__archive_on"
>
<span class="ae_label text-xs">Archive on:</span>
<span class="ae_value">{ae_util.iso_datetime_formatter(idaa_post_obj.archive_on, 'datetime_12_short')}</span>
</span>
{/if}
</div>
{/if}