forked from andyburke/autonomous.contact
feature: first pass on replies
refactor: move more smarts in the smartforms around
This commit is contained in:
parent
e1bb07a138
commit
ab63d4ba8d
6 changed files with 343 additions and 181 deletions
|
|
@ -2,7 +2,7 @@ import lurid from '@andyburke/lurid';
|
|||
import { get_session, get_user, PRECHECK_TABLE, require_user } from '../../../../../utils/prechecks.ts';
|
||||
import { TOPIC, TOPICS } from '../../../../../models/topic.ts';
|
||||
import * as CANNED_RESPONSES from '../../../../../utils/canned_responses.ts';
|
||||
import { EVENT, get_events_collection_for_topic } from '../../../../../models/event.ts';
|
||||
import { EVENT, get_events_collection_for_topic, VALIDATE_EVENT } from '../../../../../models/event.ts';
|
||||
import parse_body from '../../../../../utils/bodyparser.ts';
|
||||
import { FSDB_COLLECTION, FSDB_SEARCH_OPTIONS, WALK_ENTRY } from '@andyburke/fsdb';
|
||||
import * as path from '@std/path';
|
||||
|
|
@ -172,6 +172,15 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
|
|||
|
||||
event.id = `${event.type}:${lurid()}`;
|
||||
|
||||
const errors = VALIDATE_EVENT(event);
|
||||
if (errors) {
|
||||
return Response.json({
|
||||
errors
|
||||
}, {
|
||||
status: 400
|
||||
});
|
||||
}
|
||||
|
||||
await events.create(event);
|
||||
|
||||
return Response.json(event, {
|
||||
|
|
|
|||
|
|
@ -210,6 +210,33 @@ textarea:focus {
|
|||
height: 0;
|
||||
}
|
||||
|
||||
input[collapse-toggle] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label:has(input[collapse-toggle]) {
|
||||
display: block;
|
||||
max-width: 8rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--text);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
input[collapse-toggle] + .collapsible,
|
||||
label:has(input[collapse-toggle]) + .collapsible {
|
||||
transition: all 0.33s;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input[collapse-toggle]:checked + .collapsible,
|
||||
label:has(input[collapse-toggle]:checked) + .collapsible {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
form div {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
/* make all forms semi-smart */
|
||||
const forms = document.querySelectorAll("form[data-smart]");
|
||||
function smarten_forms() {
|
||||
const forms = document.body.querySelectorAll("form[data-smart]:not([data-smartened])");
|
||||
for (const form of forms) {
|
||||
async function on_submit(event) {
|
||||
debugger;
|
||||
event.preventDefault();
|
||||
form.disabled = true;
|
||||
form.__submitted_at = new Date();
|
||||
|
||||
if (form.on_submit) {
|
||||
const result = await form.on_submit(event);
|
||||
|
|
@ -25,8 +26,63 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
continue;
|
||||
}
|
||||
|
||||
if (typeof value === "string" && value.length === 0) {
|
||||
const input = form.querySelector(`[name="${key}"]`);
|
||||
const input = form.querySelector(`[name="${key}"]`);
|
||||
|
||||
if (input.type === "file") {
|
||||
if (input.dataset["smartformsSaveToHome"]) {
|
||||
form.uploaded = [];
|
||||
form.errors = [];
|
||||
|
||||
const user = document.body.dataset.user
|
||||
? JSON.parse(document.body.dataset.user)
|
||||
: undefined;
|
||||
if (!user) {
|
||||
throw new Error("You must be logged in to upload files here.");
|
||||
}
|
||||
|
||||
for await (const file of input.files) {
|
||||
const body = new FormData();
|
||||
body.append("file", file, encodeURIComponent(file.name));
|
||||
|
||||
const file_path =
|
||||
"/files/users/" + user.id + "/" + encodeURIComponent(file.name);
|
||||
|
||||
const file_upload_response = await api.fetch(file_path, {
|
||||
method: "PUT",
|
||||
body,
|
||||
});
|
||||
|
||||
if (!file_upload_response.ok) {
|
||||
const error = await file_upload_response.json();
|
||||
form.errors.push(error?.error?.message ?? "Unknown error.");
|
||||
continue;
|
||||
}
|
||||
|
||||
const file_url =
|
||||
window.location.protocol + "//" + window.location.host + file_path;
|
||||
form.uploaded.push(file_url);
|
||||
}
|
||||
|
||||
if (form.errors.length) {
|
||||
const errors = form.errors.join("\n\n");
|
||||
alert(errors);
|
||||
return false;
|
||||
}
|
||||
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
const generator = input.getAttribute("generator");
|
||||
const generated_value =
|
||||
typeof generator === "string" && generator.length
|
||||
? eval(generator)(input, form)
|
||||
: undefined;
|
||||
|
||||
const resolved_value =
|
||||
typeof value === "string" && value.length ? value : generated_value;
|
||||
|
||||
if (typeof resolved_value === "undefined") {
|
||||
const should_submit_empty = input && input.dataset["smartformsSubmitEmpty"];
|
||||
if (!should_submit_empty) {
|
||||
continue;
|
||||
|
|
@ -40,11 +96,20 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
current = current[element];
|
||||
}
|
||||
|
||||
current[elements.slice(elements.length - 1).shift()] = value;
|
||||
current[elements.slice(elements.length - 1).shift()] = resolved_value;
|
||||
}
|
||||
|
||||
if (form.on_parsed) {
|
||||
await form.on_parsed(json);
|
||||
if (form.uploaded?.length > 0) {
|
||||
json.data = json.data ?? {};
|
||||
json.data.media = [...form.uploaded];
|
||||
}
|
||||
|
||||
const on_parsed =
|
||||
form.on_parsed ??
|
||||
(form.getAttribute("on_parsed") ? eval(form.getAttribute("on_parsed")) : undefined);
|
||||
|
||||
if (on_parsed) {
|
||||
await on_parsed(json);
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
@ -69,7 +134,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
return form.on_error(error);
|
||||
}
|
||||
|
||||
alert(error.message ?? "Unknown error!");
|
||||
alert(error.message ?? "Unknown error:\n\n" + error);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -78,8 +143,20 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
}
|
||||
|
||||
const response_body = await response.json();
|
||||
if (form.on_reply) {
|
||||
return form.on_reply(response_body);
|
||||
|
||||
const on_reply =
|
||||
form.on_reply ??
|
||||
(form.getAttribute("on_reply")
|
||||
? eval(form.getAttribute("on_reply"))
|
||||
: undefined);
|
||||
if (on_reply) {
|
||||
await on_reply(response_body);
|
||||
}
|
||||
|
||||
const inputs_for_reset = form.querySelectorAll("input[reset-on-submit]");
|
||||
for (const input of inputs_for_reset) {
|
||||
const reset_value = input.getAttribute("reset-on-submit");
|
||||
input.value = reset_value ?? "";
|
||||
}
|
||||
} catch (error) {
|
||||
console.dir({
|
||||
|
|
@ -97,6 +174,19 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
}
|
||||
|
||||
form.addEventListener("submit", on_submit);
|
||||
//form.onsubmit = on_submit;
|
||||
form.dataset.smartened = true;
|
||||
}
|
||||
}
|
||||
|
||||
const smarten_observer = new MutationObserver(smarten_forms);
|
||||
smarten_observer.observe(document, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
/*
|
||||
|
||||
document.addEventListener("DOMContentLoaded", smarten_forms);
|
||||
document.addEventListener("DOMSubtreeModified", smarten_forms);
|
||||
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@
|
|||
.post-container {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-rows: auto auto auto auto 1fr;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-template-areas:
|
||||
"expander preview info"
|
||||
"expander preview subject"
|
||||
"expander preview content";
|
||||
"expander preview info"
|
||||
"expander preview subject"
|
||||
". . content"
|
||||
". . newpost"
|
||||
". . replies";
|
||||
max-height: 6rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
|
|
@ -20,9 +22,8 @@
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.post-container:has(input[name="expanded"]:checked) {
|
||||
max-height: 40rem;
|
||||
overflow-y: scroll;
|
||||
.post-container:has(> div > label > input[name="expanded"]:checked) {
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
.expand-toggle-container input[name="expanded"] {
|
||||
|
|
@ -30,15 +31,16 @@
|
|||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.post-container:has(input[name="expanded"]) .icon.minus,
|
||||
.post-container:has(input[name="expanded"]:checked) .icon.plus {
|
||||
|
||||
.post-container:has(> div > label > input[name="expanded"]) .icon.minus,
|
||||
.post-container:has(> div > label > input[name="expanded"]:checked) .icon.plus {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.post-container:has(input[name="expanded"]) .icon.plus,
|
||||
.post-container:has(input[name="expanded"]:checked) .icon.minus {
|
||||
.post-container:has(> div > label > input[name="expanded"]) .icon.plus,
|
||||
.post-container:has(> div > label > input[name="expanded"]:checked) .icon.minus {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
|
@ -121,6 +123,14 @@
|
|||
padding-left: 5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.post-container .new-post-container {
|
||||
grid-area: newpost;
|
||||
}
|
||||
|
||||
.post-container .replies-container {
|
||||
grid-area: replies;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="forum" class="tab">
|
||||
|
|
@ -145,10 +155,10 @@
|
|||
const creator = await USERS.get(post.creator_id);
|
||||
const existing_element =
|
||||
document.getElementById(`post-${post.id.substring(0, 49)}`) ??
|
||||
document.getElementById(`post-${post.meta.temp_id}`);
|
||||
document.getElementById(`post-${post.meta?.temp_id}`);
|
||||
const post_datetime = datetime_to_local(post.timestamps.created);
|
||||
|
||||
const html_content = `<div class="post-container" data-creator_id="${creator.id}">
|
||||
const html_content = `<div class="post-container" data-creator_id="${creator.id}" data-post_id="${post.id}">
|
||||
<div class="expand-toggle-container">
|
||||
<label>
|
||||
<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
|
||||
|
|
@ -173,14 +183,21 @@
|
|||
</div>
|
||||
<div class="subject-container">${post.data.subject}</div>
|
||||
<div class="content-container">${htmlify(post.data.content)}</div>
|
||||
<!-- #include file="./new_post.html" -->
|
||||
<div class="replies-container"></div>
|
||||
</div>`;
|
||||
|
||||
if (existing_element) {
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = html_content;
|
||||
existing_element.replaceWith(template.content.firstChild);
|
||||
existing_element.classList.remove("sending");
|
||||
} else {
|
||||
forum_posts_list.insertAdjacentHTML("beforeend", html_content);
|
||||
const target_container =
|
||||
document.querySelector(
|
||||
`.post-container[data-post_id='${post.parent_id}'] > .replies-container`,
|
||||
) ?? forum_posts_list;
|
||||
target_container.insertAdjacentHTML("beforeend", html_content);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -202,6 +219,12 @@
|
|||
await render_post(post);
|
||||
}
|
||||
|
||||
const new_post_forms = document.querySelectorAll(".post-creation-form");
|
||||
for (const new_post_form of new_post_forms) {
|
||||
new_post_form.action =
|
||||
"/api/topics/" + document.body.dataset?.topic + "/events";
|
||||
}
|
||||
|
||||
forum_posts_list.scrollTop = 0;
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +251,7 @@
|
|||
})
|
||||
.then(async (new_events_response) => {
|
||||
const new_events = (await new_events_response.json()) ?? [];
|
||||
await append_posts(new_events);
|
||||
await append_posts(new_events.reverse());
|
||||
poll_for_new_posts(topic_id);
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -276,7 +299,7 @@
|
|||
|
||||
const events = await events_response.json();
|
||||
|
||||
await append_posts(events);
|
||||
await append_posts(events.reverse());
|
||||
poll_for_new_posts();
|
||||
}
|
||||
document.addEventListener("topic_changed", load_active_topic_for_forum);
|
||||
|
|
@ -284,157 +307,6 @@
|
|||
</script>
|
||||
</div>
|
||||
|
||||
<div id="post-creation-container" data-requires-permission="topics.posts.create">
|
||||
<button
|
||||
onclick="(() => { document.querySelector( '#post-creation' ).classList.toggle( 'collapsed' ); })()"
|
||||
>
|
||||
<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New Post
|
||||
</button>
|
||||
<form
|
||||
id="post-creation"
|
||||
data-smart="true"
|
||||
method="POST"
|
||||
class="collapsed"
|
||||
style="
|
||||
margin-top: 1rem
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
"
|
||||
>
|
||||
<script>
|
||||
const form = document.currentScript.closest("form");
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const file_input = form.querySelector('input[type="file"]');
|
||||
const subject_input = form.querySelector('[name="data.subject"]');
|
||||
const content_input = form.querySelector('[name="data.content"]');
|
||||
const parent_id_input = form.querySelector('[name="parent_id"]');
|
||||
|
||||
form.on_submit = async (event) => {
|
||||
const user = JSON.parse(document.body.dataset.user);
|
||||
const topic_id = document.body.dataset.topic;
|
||||
if (!topic_id) {
|
||||
alert("Failed to get topic_id!");
|
||||
return false;
|
||||
}
|
||||
|
||||
form.uploaded_urls = [];
|
||||
form.errors = [];
|
||||
for await (const file of file_input.files) {
|
||||
const body = new FormData();
|
||||
body.append("file", file, encodeURIComponent(file.name));
|
||||
|
||||
const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;
|
||||
|
||||
const file_upload_response = await api.fetch(file_path, {
|
||||
method: "PUT",
|
||||
body,
|
||||
});
|
||||
|
||||
if (!file_upload_response.ok) {
|
||||
const error = await file_upload_response.json();
|
||||
form.errors.push(error?.error?.message ?? "Unknown error.");
|
||||
continue;
|
||||
}
|
||||
|
||||
const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
|
||||
form.uploaded_urls.push(file_url);
|
||||
}
|
||||
|
||||
if (form.errors.length) {
|
||||
const errors = form.errors.join("\n\n");
|
||||
alert(errors);
|
||||
return false;
|
||||
}
|
||||
|
||||
const subject = subject_input.value.trim();
|
||||
const content = content_input.value.trim();
|
||||
|
||||
if (subject.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
form.action = `/api/topics/${topic_id}/events`;
|
||||
};
|
||||
|
||||
form.on_parsed = (json) => {
|
||||
const now = new Date().toISOString();
|
||||
|
||||
const temp_id = `TEMP-${now}`;
|
||||
json.id = temp_id;
|
||||
json.type = "post";
|
||||
json.meta = {
|
||||
temp_id,
|
||||
};
|
||||
json.timestamps = {
|
||||
created: now,
|
||||
updated: now,
|
||||
};
|
||||
json.data = json.data ?? {};
|
||||
|
||||
if (form.uploaded_urls.length) {
|
||||
json.data.content =
|
||||
(typeof json.data.content === "string" &&
|
||||
json.data.content.trim().length
|
||||
? json.data.content.trim() + "\n"
|
||||
: "") + form.uploaded_urls.join("\n");
|
||||
}
|
||||
|
||||
render_post(json);
|
||||
document.getElementById(`post-${temp_id}`)?.classList.add("sending");
|
||||
};
|
||||
|
||||
form.on_error = (error) => {
|
||||
// TODO: mark the temporary message element with the failed class?
|
||||
alert(error);
|
||||
content_input.focus();
|
||||
};
|
||||
|
||||
form.on_reply = (post) => {
|
||||
const post_id = `post-${post.meta?.temp_id ?? ""}`;
|
||||
document.getElementById(post_id)?.classList.remove("sending");
|
||||
|
||||
append_posts([post]);
|
||||
parent_id_input.value = "";
|
||||
subject_input.value = "";
|
||||
content_input.value = "";
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<input type="hidden" name="parent_id" value="" />
|
||||
|
||||
<input
|
||||
id="new-thread-subject"
|
||||
type="text"
|
||||
name="data.subject"
|
||||
value=""
|
||||
placeholder="Thread subject..."
|
||||
style="margin-bottom: 1rem"
|
||||
/>
|
||||
|
||||
<input
|
||||
id="file-upload-and-share-input-for-thread"
|
||||
aria-label="Upload and share file"
|
||||
type="file"
|
||||
multiple
|
||||
/>
|
||||
<label for="file-upload-and-share-input-for-thread">
|
||||
<div class="icon attachment"></div>
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
id="new-thread-content"
|
||||
type="text"
|
||||
name="data.content"
|
||||
value=""
|
||||
placeholder=" ... "
|
||||
></textarea>
|
||||
|
||||
<input type="submit" value="Post" />
|
||||
</form>
|
||||
</div>
|
||||
<!-- #include file="./new_post.html" -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
82
public/tabs/forum/new_post.html
Normal file
82
public/tabs/forum/new_post.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<div class="new-post-container">
|
||||
<label>
|
||||
<input type="checkbox" collapse-toggle />
|
||||
<i class="icon plus" style="display: inline-block; margin-right: 0.5rem"></i>
|
||||
<span>New Post</span>
|
||||
</label>
|
||||
<form
|
||||
data-smart="true"
|
||||
data-requires-permission="topics.posts.create"
|
||||
method="POST"
|
||||
class="post-creation-form collapsible"
|
||||
style="
|
||||
margin-top: 1rem
|
||||
width: 100%;
|
||||
transition: all 0.5s;
|
||||
"
|
||||
on_reply="(post) => { append_posts([post]); }"
|
||||
on_parsed="(post) => { render_post(post); document.getElementById('post-' + post.id)?.classList.add('sending'); }"
|
||||
>
|
||||
<input type="hidden" name="type" value="post" />
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name="id"
|
||||
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
|
||||
reset-on-submit
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="meta.temp_id"
|
||||
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
|
||||
reset-on-submit
|
||||
/>
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name="timestamps.created"
|
||||
generator="(_input, form) => form.__submitted_at.toISOString()"
|
||||
reset-on-submit
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="timestamps.updated"
|
||||
generator="(_input, form) => form.__submitted_at.toISOString()"
|
||||
reset-on-submit
|
||||
/>
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name="parent_id"
|
||||
generator="(_input, form) => { debugger; const parent_post = form.closest( '.post-container' ); return parent_post?.dataset?.post_id; }"
|
||||
/>
|
||||
|
||||
<input
|
||||
class="new-post-subject"
|
||||
type="text"
|
||||
name="data.subject"
|
||||
value=""
|
||||
placeholder="Post subject..."
|
||||
style="margin-bottom: 1rem"
|
||||
reset-on-submit
|
||||
/>
|
||||
<label>
|
||||
<input
|
||||
aria-label="Upload and share file"
|
||||
type="file"
|
||||
multiple
|
||||
data-smartforms-save-to-home="true"
|
||||
reset-on-submit
|
||||
/>
|
||||
<div class="icon attachment"></div>
|
||||
</label>
|
||||
<textarea
|
||||
type="text"
|
||||
name="data.content"
|
||||
value=""
|
||||
placeholder=" ... "
|
||||
reset-on-submit
|
||||
></textarea>
|
||||
<input type="submit" value="Post" />
|
||||
</form>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue