Lazy Chat: Implement editing of messages.
Change-Id: I291201da1fbc7c2b6563f0837f7ce3e2f7f8555c
diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
index 0a8fad7..3dd3754 100644
--- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -10,7 +10,7 @@
<form class="pure-form" method="post" action="/bookmarks">
<fieldset>
- <legend>New Bookmark</legend>
+ <legend>Edit Bookmark</legend>
<label for="uri-input">URI:</label>
<input name="uri" id="uri-input" type="text" placeholder="URI" required />
@@ -24,9 +24,9 @@
<label for="visibility-input">Visibility:</label>
<select id="visibility-input" name="visibility" required>
- <option value="public" selected>Public</option>
- <option value="semiprivate">Semiprivate</option>
- <option value="private">Private</option>
+ <option value="PUBLIC" selected>Public</option>
+ <option value="SEMIPRIVATE">Semiprivate</option>
+ <option value="PRIVATE">Private</option>
</select>
<div class="controls">
diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index 61f447c..c455ce8 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -187,6 +187,15 @@
min-width: calc(100% - 12em);
}
+elix-expandable-section.editor-pane::part(toggle) {
+ margin: 0;
+ display: inline;
+}
+
+elix-expandable-section.editor-pane::part(header) {
+ display: inline-block;
+}
+
.paging {
display: flex;
flex-direction: row;
diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
index a2bef8c..6cb3059 100644
--- a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
@@ -8,18 +8,18 @@
<link rel="stylesheet" type="text/css" href="/cms2/base.css" />
<link rel="stylesheet" type="text/css" href="/lazychat/MlkLazychatSubmissionForm.css" />
- <form class="pure-form" method="post" action="/lazychat">
+ <form id="main-form" class="pure-form" method="post" action="/lazychat">
<fieldset>
- <legend>New Message</legend>
+ <legend>Edit Message</legend>
<label for="text-input">Text:</label>
<textarea name="text" id="text-input" placeholder="Text"></textarea>
<label for="visibility-input">Visibility:</label>
<select id="visibility-input" name="visibility" required>
- <option value="public">Public</option>
- <option value="semiprivate" selected>Semiprivate</option>
- <option value="private">Private</option>
+ <option value="PUBLIC">Public</option>
+ <option value="SEMIPRIVATE" selected>Semiprivate</option>
+ <option value="PRIVATE">Private</option>
</select>
<div class="controls">
@@ -31,6 +31,8 @@
export class MlkLazychatSubmissionForm extends HTMLElement {
/*::
textInput: HTMLTextAreaElement;
+ visibilityInput: HTMLInputElement;
+ loaded: boolean;
*/
constructor() {
@@ -41,20 +43,57 @@
this.textInput =
cast(shadow.getElementById('text-input'));
+ this.visibilityInput =
+ cast(shadow.getElementById('visibility-input'));
+ this.loaded = false;
}
static get observedAttributes() {
return [];
}
- connectedCallback () {}
+ get editedId() {
+ return this.getAttribute("edited-id");
+ }
- disconnectedCallback () {}
+ get isEditor() {
+ return this.editedId !== null;
+ }
+
+ connectedCallback() {
+ if (this.isEditor) {
+ let form = this.shadowRoot.getElementById("main-form");
+ form.method = "post";
+ form.action = `/lazychat/p/${this.editedId}/edit`;
+ }
+ }
+
+ disconnectedCallback() {}
attributeChangedCallback(name /*:string*/, oldValue /*:string*/, newValue /*:string*/) {}
focus() {
this.textInput.focus();
+ this.load();
+ }
+
+ async load() {
+ if (!this.editedId || this.loaded) {
+ return;
+ }
+
+ let fetchUrl = new URL(`/lazychat/p/${this.editedId}`, document.URL);
+ let r = await fetch(fetchUrl);
+
+ if (!r.ok) {
+ return;
+ }
+
+ let post = await r.json();
+ this.textInput.value = post.content;
+ this.visibilityInput.value = post.visibility;
+
+ this.loaded = true;
}
}
diff --git a/src/main/resources/META-INF/resources/posts/postList.js b/src/main/resources/META-INF/resources/posts/postList.js
index 0578d7b..3eb23ce 100644
--- a/src/main/resources/META-INF/resources/posts/postList.js
+++ b/src/main/resources/META-INF/resources/posts/postList.js
@@ -10,4 +10,10 @@
let lazychatSubmissionForm = document.getElementById('lazychat-submission-form');
lazychatSubmissionPane.addEventListener('opened',() => lazychatSubmissionForm.focus());
}
+
+ let lazychatEditorPanes = document.getElementsByClassName('lazychat-editor-pane');
+ for (let pane of lazychatEditorPanes) {
+ let form = pane.getElementsByTagName('mlk-lazychat-submission-form')[0];
+ pane.addEventListener('opened', () => form.focus());
+ }
});
diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html
index a29d886..8dd5210 100644
--- a/src/main/resources/templates/benki/posts/postList.html
+++ b/src/main/resources/templates/benki/posts/postList.html
@@ -1,4 +1,4 @@
-{@java.util.List<eu.mulk.mulkcms2.benki.bookmarks.Bookmark> posts}
+{@java.util.List<eu.mulk.mulkcms2.benki.posts.Post> posts}
{@java.lang.String pageTitle}
{@java.lang.Boolean showBookmarkForm}
{@java.lang.Boolean hasPreviousPage}
@@ -69,15 +69,24 @@
{#else}
<article class="lazychat-message">
<header>
- <div class="lazychat-message-info">
+ <div class="lazychat-message-info" style="display: inline-block">
<time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
<span class="lazychat-message-owner">{owner.firstName} {owner.lastName}</span>
</div>
+
+ {#if showLazychatForm}
+ <elix-expandable-section class="lazychat-editor-pane editor-pane">
+ <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
+ </elix-expandable-section>
+ {/if}
</header>
<section class="lazychat-message-content">
{contentHtml.raw}
</section>
+
+ <section class="lazychat-editor">
+ </section>
</article>
{/if}
{/with}