From 06e6c81c77f8098693473e49c11557820541dd15 Mon Sep 17 00:00:00 2001
From: Matthias Andreas Benkard <code@mail.matthias.benkard.de>
Date: Mon, 13 Apr 2020 17:01:35 +0200
Subject: Lazy Chat: Implement editing of messages.

Change-Id: I291201da1fbc7c2b6563f0837f7ce3e2f7f8555c
---
 .../bookmarks/MlkBookmarkSubmissionForm.js         |  8 ++--
 .../resources/META-INF/resources/cms2/base.css     |  9 ++++
 .../lazychat/MlkLazychatSubmissionForm.js          | 53 +++++++++++++++++++---
 .../resources/META-INF/resources/posts/postList.js |  6 +++
 .../resources/templates/benki/posts/postList.html  | 13 +++++-
 5 files changed, 76 insertions(+), 13 deletions(-)

(limited to 'src/main/resources')

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 @@ template.innerHTML = `
 
   <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 @@ template.innerHTML = `
 
       <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 @@ article.lazychat-message {
   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 @@ template.innerHTML = `
   <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 @@ template.innerHTML = `
 export class MlkLazychatSubmissionForm extends HTMLElement {
   /*::
   textInput: HTMLTextAreaElement;
+  visibilityInput: HTMLInputElement;
+  loaded: boolean;
   */
 
   constructor() {
@@ -41,20 +43,57 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
 
     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");
+  }
+
+  get isEditor() {
+    return this.editedId !== null;
+  }
 
-  disconnectedCallback () {}
+  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 @@ document.addEventListener('DOMContentLoaded', () => {
     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}
-- 
cgit v1.2.3