Work on editing of posts and posts comments.

This commit is contained in:
Scott Idem
2024-11-05 15:59:19 -05:00
parent ac7016bb3e
commit cf997601f4
5 changed files with 490 additions and 72 deletions

View File

@@ -107,7 +107,7 @@ $: lq__post_comment_obj_li = liveQuery(async () => {
// history.pushState({}, '', url);
$idaa_sess.bb.show__modal_view = false;
$idaa_sess.bb.show__modal_edit = true;
$idaa_sess.bb.show__inline_edit__post_obj = true;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
title={`Edit meeting: ${$lq__post_obj?.title}`}

View File

@@ -0,0 +1,396 @@
<script lang="ts">
export let log_lvl = 1;
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
import { posts_func } from '$lib/ae_posts/ae_posts_functions';
import Tiptap_editor from '$lib/element_tiptap_editor.svelte';
export let lq__post_obj: any;
const dispatch = createEventDispatcher();
type key_val = {
[key: string]: any;
};
let prom_api__post_obj: any;
let disable_submit_btn = true;
async function handle_submit_form(event: any) {
console.log('*** handle_submit_form() ***');
disable_submit_btn = true;
let form_data = new FormData(event.target);
console.log(form_data);
disable_submit_btn = false;
return true;
}
async function handle_delete_post_obj({post_id, method}: key_val) {
console.log('*** handle_delete_post_obj() ***');
return true;
}
</script>
<section
class="svelte_component ae_section ae_edit post_obj edit__post_obj space-y-2 p-2 border border-1 rounded"
class:ae_create={!$idaa_slct.post_id}
bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
<form on:submit|preventDefault={handle_submit_form} class="space-y-1">
{#await prom_api__post_obj}
<div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
{:then}
{#if prom_api__post_obj}
<!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div> -->
{:else}
<!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
{/if}
{/await}
<section class="text-center"> <!-- BEGIN: section post__options -->
<button
on:click={() => {
$idaa_sess.bb.show__inline_edit__post_obj = false;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning 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>
</section> <!-- END: section post__options -->
<h3 class="h3">Post</h3>
<input type="hidden" value={$idaa_slct.post_id} />
<section class="ae_section post__general_information space-y-1"> <!-- BEGIN: section post__general_information -->
<label for="title">Title of BB Post:
<input type="text" id="title" name="title" required max="200" value={$lq__post_obj?.title} placeholder="Title of Post" autocomplete="off" class="input w-96" />
</label>
<label for="description" class="ae_label post__description">Content (post body):
<!-- <textarea name="description" id="description" class="ae_value post__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.post_obj.description} ></textarea> -->
<Tiptap_editor
default_minimal={true}
bind:html_text={$idaa_slct.post_obj.description}
show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
bind:new_html={$idaa_slct.post_obj.description_new_html}
placeholder="Your post content here..."
/>
</label>
<div>
<label class="">
BB post topic:
<select
name="type"
class="select w-96"
value={$lq__post_obj?.type}
>
<option value="">-- None --</option>
<option value={16}>Licensing/ monitoring/ credentialing issues</option>
<option value={17}>Return to practice</option>
<option value={18}>Contacts/ sponsorship in my area</option>
<option value={19}>Professional positions</option>
<option value={21}
disabled={!$ae_loc.trusted_access}
>
Announcement
</option>
</select>
</label>
</div>
<h3 class="h3">Poster's Information</h3>
<fieldset class="">
<legend class="">Post as Anonymous</legend>
<div class="flex flex-row gap-2">
<input
type="radio"
id="anonymous_no"
name="anonymous"
value={false}
bind:group={$slct.post_obj.anonymous}
class="radio"
>
<label for="anonymous_no">No, include my name and email address</label>
</div>
<div class="flex flex-row gap-2">
<input
type="radio"
id="anonymous_yes"
name="anonymous"
value={true}
bind:group={$slct.post_obj.anonymous}
class="radio"
>
<label for="anonymous_yes">Yes, the post will be listed as Anonymous</label>
</div>
</fieldset>
<label for="external_person_id"><span class="fas fa-link"></span> Linked with Novi ID
{#if !$ae_loc.trusted_access}
<span class="fas fa-lock" title="Field is locked"></span>
<input
type="text"
id="external_person_id"
name="external_person_id"
value={($slct.post_obj.external_person_id ? $slct.post_obj.external_person_id : $idaa_loc.novi_uuid)}
readonly={true}
class="input w-96"
>
{:else}
<div class="ae_highlight text-sm bg-yellow-100 p-2">
Primary link using the Novi API UUID. This must be empty, a staff person, or an active member of IDAA and should be the primary contact for this meeting.
</div>
<span class="fas fa-unlock m-1" title="Field is unlocked"></span>
<input
type="text"
id="external_person_id"
name="external_person_id"
value={($slct.post_obj.external_person_id ? $slct.post_obj.external_person_id : '')}
readonly={false}
class="input w-96"
>
{/if}
</label>
<label for="full_name">Name
{#if !$ae_loc.trusted_access}
<span class="fas fa-lock m-1" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock m-1" title="Field is unlocked"></span>
{/if}
<input
type="text"
id="full_name"
name="full_name"
value={($slct.post_obj.full_name ? $slct.post_obj.full_name : $idaa_loc.novi_full_name)}
readonly={!$ae_loc.trusted_access}
class="input w-96"
>
</label>
{#if $ae_loc.trusted_access}
<label for="email">Email
{#if !$ae_loc.trusted_access}
<span class="fas fa-lock m-1" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock m-1" title="Field is unlocked"></span>
{/if}
<input
type="text"
name="email"
value={($slct.post_obj.email ? $slct.post_obj.email : $idaa_loc.novi_email)}
readonly={!$ae_loc.trusted_access}
class="input w-96"
>
<span class="ae_highlight">Secondary link using the Novi email address</span>
</label>
{/if}
</section> <!-- END: section post__general_information -->
<button
type="button"
class="ae_btn ae_d_none_toggle ae_float_right ae_smallest btn btn-xs btn-info btn-sm variant-ghost-warning hover:variant-filled-warning transition"
on:click={() => {
// document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_out'); document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_in');
$idaa_loc.show__admin_options = !$idaa_loc.show__admin_options;
}}
>
<span class="fas fa-eye m-1"></span>
{$idaa_loc.show__admin_options ? 'Hide' : ''} Admin Options?
</button>
<section
class="ae_section post__admin_options"
class:hidden={!$ae_loc.trusted_access || !$idaa_loc.show__admin_options}
> <!-- BEGIN: section post__admin_options -->
<h3 class="h4">
Admin Options
</h3>
<span
>
<span
class="flex flex-row flex-wrap items-center justify-between"
>
<label>Hide
<input
type="checkbox"
name="hide"
id="hide"
bind:checked={$idaa_slct.post_obj.hide}
class="checkbox"
>
</label>
<label>Priority
<input
type="checkbox"
name="priority"
id="priority"
bind:checked={$idaa_slct.post_obj.priority}
class="checkbox"
>
</label>
<label>Sort <input type="number" name="sort" value={$lq__post_obj?.sort} class="input w-24" /></label>
<label>Group <input type="text" name="group" value={$lq__post_obj?.group ? $lq__post_obj?.group : ''} max="100" class="input w-40" /></label>
{#if $ae_loc.administrator_access}
<label>Enable
<input
type="checkbox"
name="enable"
id="enable"
bind:checked={$idaa_slct.post_obj.enable}
class="checkbox"
>
</label>
{/if}
</span>
{#if $ae_loc.trusted_access}
<label
for="notes"
>
Internal Staff Notes
<Tiptap_editor
default_minimal={true}
bind:html_text={$idaa_slct.post_obj.notes}
show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
bind:new_html={$idaa_slct.post_obj.notes_new_html}
/>
</label>
{/if}
</span> <!-- END: span ae_show_hide_content -->
</section> <!-- END: section post__admin_options -->
<section class="ae_section ae_options ae_row ae_actions post__options post__actions flex flex-row gap-1 items-center justify-between">
<div>
<!-- BEGIN: section post__options -->
{#if $idaa_slct.post_id}
<button
type="submit"
disabled={(disable_submit_btn)}
class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
>
{#await prom_api__post_obj}
<span class="fas fa-spinner fa-spin m-1"></span> Saving
{:then}
<span class="fas fa-save m-1"></span> Save
{/await}
</button>
{:else}
<button
type="submit"
disabled={(disable_submit_btn)}
on:click={() => {
if (!confirm('Are you sure you want to create this post?')) {return false;}
// handle_save_post_obj({post_id: $idaa_slct.post_id, method: 'create'});
}}
class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
>
{#await prom_api__post_obj}
<span class="fas fa-spinner fa-spin m-1"></span> Saving
{:then}
<span class="fas fa-plus m-1"></span> Save New Event
{/await}
</button>
{/if}
{#if $idaa_slct.post_id}
{#if $ae_loc.administrator_access}
<button
on:click={() => {
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'});
$idaa_slct.post_id = null;
$lq__post_obj = {};
}}
class="btn btn-sm variant-soft-warning" type="button"
title="Delete record permanently"
>
<span class="fas fa-minus m-1"></span> Delete
</button>
{:else if $ae_loc.trusted_access}
<button
on:click={() => {
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'});
$idaa_slct.post_id = null;
$lq__post_obj = {};
}}
class="btn btn-sm variant-soft-warning" type="button"
title="Disable record to delete"
>
<span class="fas fa-minus m-1"></span> Delete
</button>
{:else}
<button
on:click={() => {
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'});
$idaa_slct.post_id = null;
$lq__post_obj = {};
}}
class="btn btn-sm variant-soft-warning" type="button"
title="Hide record to delete"
>
<span class="fas fa-comment-slash m-1"></span> Delete
</button>
{/if}
{/if}
</div>
<div>
<button
on:click={() => {
$idaa_sess.bb.show__inline_edit__post_obj = false;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning 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>
</form>
</section>

View File

@@ -1,12 +1,15 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { Modal } from 'flowbite-svelte';
// *** Import Aether core variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct, idaa_trigger } from '$lib/ae_idaa_stores';
import Comp__post_obj_id_edit from './ae_idaa_comp__post_obj_id_edit.svelte';
export let lq__post_obj: any;
export let lq__post_comment_obj_li: any;
@@ -75,20 +78,27 @@ function handle_post_comment_obj_deleted(event) {
>
<div class="post__header">
<h2 class="post__title">
<h2 class="post__title flex flex-row gap-2 items-center">
<span class="h3">
{@html $lq__post_obj?.title}
</span>
{#if $lq__post_obj?.topic_id}<span class="badge badge-info bg-info"><span class="fas fa-user-md"></span> {$lq__post_obj?.topic_name}</span>{/if}
{#if $lq__post_obj?.topic_id}<span class="badge badge-info variant-glass-secondary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>{/if}
</h2>
</div>
{#if $idaa_sess.bb.show__inline_edit__post_obj}
<Comp__post_obj_id_edit
lq__post_obj={lq__post_obj}
/>
{:else}
<div class="post__content">
<pre class="post__content p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html $idaa_slct.post_obj.content}</pre>
</div>
<section class="ae_section ae_meta post__meta text-sm text-gray-500 mt-4 flex flex-row gap-2 items-center justify-center">
<div class="ae_group">
<section class="ae_section ae_meta post__meta text-sm text-gray-500 mt-4 flex flex-row gap-2 items-center justify-between">
<div class="ae_group flex flex-col gap-1">
{#if ($idaa_slct.post_obj.anonymous)}
<div class="post__posted_by">
Posted by: <span class="fas fa-user-secret"></span> <span class="post__full_name">Anonymous</span>
@@ -118,7 +128,7 @@ function handle_post_comment_obj_deleted(event) {
</div>
</div>
<div class="ae_options">
<div class="ae_options flex flex-row gap-1 items-center">
{#if $idaa_slct.post_obj.post_comment_count}
<span class="ae_badge ae_info post__post_comment_count">
<span class="fas fa-comment"></span> {($idaa_slct.post_obj.post_comment_count == 1 ? `${$idaa_slct.post_obj.post_comment_count} comment` : `${$idaa_slct.post_obj.post_comment_count} comments` )}
@@ -136,7 +146,7 @@ function handle_post_comment_obj_deleted(event) {
<span class="fas fa-plus m-1"></span> New Comment
</button>
{#if $ae_loc.trusted_access || $idaa_slct.post_obj.external_person_id === $idaa_loc.novi_uuid || $idaa_slct.post_obj.email === $idaa_loc.novi_email}
{#if $ae_loc.trusted_access || $idaa_slct.post_obj.external_person_id === $idaa_loc.novi_uuid}
<button
on:click={() => {
// $idaa_slct.post_id = $idaa_slct.post_obj.post_id_random;
@@ -148,26 +158,32 @@ function handle_post_comment_obj_deleted(event) {
// $idaa_sess.bb.show_main__options = false;
// $idaa_sess.bb.show_list__post_li = false;
$idaa_sess.bb.show_view__post_id = false;
$idaa_sess.bb.show_edit__post_id = true;
// $idaa_sess.bb.show_view__post_id = false;
$idaa_sess.bb.show__inline_edit__post_obj = true;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
title="Edit post for {$idaa_slct.post_obj.full_name} (ID: {$idaa_slct.post_obj.post_id}"
>
<span class="fas fa-edit m-1"></span> Edit
<span class="fas fa-edit m-1"></span> Edit Post
</button>
{/if}
</div>
</section>
{/if}
{#if $idaa_sess.bb.show_edit__post_comment}
<section class="bb_post_comment_crud">
<Element_modal_v3
show = { true }
modal_cover_body = { true }
<Modal
title="{$lq__post_obj?.title} - {$lq__post_obj?.id}"
bind:open={$idaa_sess.bb.show__modal_view}
autoclose={false}
outsideclose={true}
placement="top-center"
size="lg"
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
on:close={ () => {
$idaa_slct.post_comment_id = null;
$idaa_slct.post_comment_obj = {};
@@ -182,65 +198,71 @@ function handle_post_comment_obj_deleted(event) {
<span slot="body">
<section class="post_comment_obj_view">
<Edit_post_comment_obj on:post_comment_obj_created={handle_post_comment_obj_created} on:post_comment_obj_updated={handle_post_comment_obj_updated} on:post_comment_obj_deleted={handle_post_comment_obj_deleted} />
<!-- <Edit_post_comment_obj
on:post_comment_obj_created={handle_post_comment_obj_created} on:post_comment_obj_updated={handle_post_comment_obj_updated} on:post_comment_obj_deleted={handle_post_comment_obj_deleted} /> -->
</section>
</span>
</Element_modal_v3>
</Modal>
</section>
{/if}
{#if $lq__post_comment_obj_li?.length}
<section class="post_comment_obj_li space-y-2 border border-1 rounded p-2 border-y-4">
{#each $lq__post_comment_obj_li as idaa_post_comment_obj, index}
<hr />
<div class="post_comment__content">
<pre class="post_comment__content p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html idaa_post_comment_obj.content}</pre>
<div class="p-2 border border-1 rounded">
<div class="post_comment__content">
<pre class="post_comment__content p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html idaa_post_comment_obj.content}</pre>
</div>
<section class="ae_section ae_meta post_comment__meta text-xs text-gray-500 mt-4 flex flex-row gap-2 items-center justify-between">
<div class="flex flex-col gap-1">
<span class="post_comment__posted_by `comment_by_container">
<span class="comment_by_lable">Comment by:</span>
{#if idaa_post_comment_obj.anonymous}
<span class="fas fa-user-secret"></span>
<span class="comment_by_full_name anonymous">Anonymous</span>
{:else}
<span class="fas fa-user"></span>
<span class="comment_by_full_name">{idaa_post_comment_obj.full_name}</span>
{/if}
</span>
<span class="post_comment__created_on_updated_on">
Created on:
<span class="post_comment__created_on">{ae_util.iso_datetime_formatter(idaa_post_comment_obj.created_on, 'datetime_iso_no_seconds')}
{#if idaa_post_comment_obj.updated_on}
Updated on:
{ae_util.iso_datetime_formatter(idaa_post_comment_obj.updated_on, 'datetime_iso_no_seconds')}
{/if}
</span>
</div>
{#if $ae_loc.trusted_access || idaa_post_comment_obj.external_person_id === $idaa_loc.novi_uuid}
<div class="ae_options">
<button on:click={() => {
$idaa_slct.post_comment_id = idaa_post_comment_obj.post_comment_id_random;
$idaa_slct.post_comment_obj = idaa_post_comment_obj;
// $idaa_sess.bb.show_post_comment_list = false;
$idaa_sess.bb.show_edit__post_comment = true;
// $idaa_sess.bb.show_view__post_id = false;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
title="Edit comment by {idaa_post_comment_obj?.full_name} (for post ID {$lq__post_obj?.id})"
>
<span class="fas fa-edit"></span> Edit Comment
</button>
</div>
{/if}
</section>
</div>
<section class="ae_section ae_meta post_comment__meta text-sm text-gray-500 mt-4 flex flex-row gap-2 items-center justify-center">
<div class="ae_group">
<span class="post_comment__posted_by `comment_by_container">
<span class="comment_by_lable">Comment by:</span>
{#if idaa_post_comment_obj.anonymous}
<span class="fas fa-user-secret"></span>
<span class="comment_by_full_name anonymous">Anonymous</span>
{:else}
<span class="fas fa-user"></span>
<span class="comment_by_full_name">{idaa_post_comment_obj.full_name}</span>
<!-- {#if idaa_post_comment_obj.email}
(<a href="mailto:{idaa_post_comment_obj.email}"><span class="comment_by_email">{idaa_post_comment_obj.email}</span></a>)
{/if} -->
{/if}
<div class="post_comment__created_on_updated_on">
Created on:
<span class="post_comment__created_on">{ae_util.iso_datetime_formatter(idaa_post_comment_obj.created_on, 'datetime_iso_no_seconds')}
{#if idaa_post_comment_obj.updated_on}
Updated on:
{ae_util.iso_datetime_formatter(idaa_post_comment_obj.updated_on, 'datetime_iso_no_seconds')}
{/if}
</div>
</div>
{#if $ae_loc.trusted_access || idaa_post_comment_obj.external_person_id === $idaa_loc.novi_uuid}
<div class="ae_options">
<button on:click={() => {
$idaa_slct.post_comment_id = idaa_post_comment_obj.post_comment_id_random;
$idaa_slct.post_comment_obj = idaa_post_comment_obj;
// $idaa_sess.bb.show_post_comment_list = false;
$idaa_sess.bb.show_edit__post_comment = true;
// $idaa_sess.bb.show_view__post_id = false;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
title="Edit comment by {idaa_post_comment_obj?.full_name} (for post ID {$lq__post_obj?.id})"
>
<span class="fas fa-edit"></span> Edit Comment
</button>
</div>
{/if}
</section>
{/each}
</section>
{/if}
</section>
@@ -248,18 +270,18 @@ function handle_post_comment_obj_deleted(event) {
<style>
.post_obj .ae_meta {
flex-direction: column;
/* flex-direction: column; */
/* justify-content: space-between; */
}
.post_obj .ae_meta .ae_group {
/* .post_obj .ae_meta .ae_group {
flex-direction: row;
}
} */
.post_obj .ae_meta .ae_options {
/* .post_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
} */
.post__posted_by, .post_comment__posted_by {
/* font-size: smaller; */

View File

@@ -53,8 +53,8 @@ onMount(() => {
// $idaa_sess.bb.show_main__options = true;
// $idaa_sess.bb.show_list__post_obj_li = true;
// $idaa_sess.bb.show_edit__post_id = false;
$idaa_sess.bb.show__modal_edit = false;
$idaa_sess.bb.show__modal_view = true;
$idaa_sess.bb.show__modal_edit = false;
}}
class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition"
title={`View: ${idaa_post_obj?.title}`}
@@ -78,8 +78,8 @@ onMount(() => {
// $idaa_sess.bb.show_main__options = true;
// $idaa_sess.bb.show_list__post_obj_li = true;
// $idaa_sess.bb.show_edit__post_id = true;
$idaa_sess.bb.show__modal_edit = true;
$idaa_sess.bb.show__modal_view = false;
$idaa_sess.bb.show__modal_view = true;
$idaa_sess.bb.show__inline_edit__post_obj = true;
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
title={`Edit post: ${idaa_post_obj.title}`}

View File

@@ -630,7 +630,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</ul>
</div>
</section> <!-- BEGIN: section event__general_information -->
</section> <!-- END: section event__general_information -->
<hr>