KB53 Support bookmark edition.

Change-Id: Ieacbb5c448b9afa4bc9524167e0c73618de6db48

4 files changed, 83 insertions, 4 deletions

diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
index 3dd3754..3b93305 100644
--- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -8,7 +8,7 @@ template.innerHTML = `
   <link rel="stylesheet" type="text/css" href="/cms2/base.css" />
   <link rel="stylesheet" type="text/css" href="/bookmarks/MlkBookmarkSubmissionForm.css" />
 
-  <form class="pure-form" method="post" action="/bookmarks">
+  <form id="main-form" class="pure-form" method="post" action="/bookmarks">
     <fieldset>
       <legend>Edit Bookmark</legend>
 
@@ -37,10 +37,13 @@ template.innerHTML = `
 
 export class MlkBookmarkSubmissionForm extends HTMLElement {
   /*::
+  mainForm: HTMLFormElement;
   descriptionInput: HTMLTextAreaElement;
   titleInput: HTMLInputElement;
   uriInput: HTMLInputElement;
   uriSpinner: ProgressSpinner;
+  visibilityInput: HTMLInputElement;
+  loaded: boolean;
   */
 
   constructor() {
@@ -49,6 +52,8 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     let shadow = this.attachShadow({mode: "open"});
     shadow.appendChild(template.content.cloneNode(true));
 
+    this.mainForm =
+        cast(shadow.getElementById('main-form'));
     this.descriptionInput =
         cast(shadow.getElementById('description-input'));
     this.titleInput =
@@ -57,13 +62,34 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
         cast(shadow.getElementById('uri-input'));
     this.uriSpinner =
         cast(shadow.getElementById('uri-spinner'));
+    this.visibilityInput =
+        cast(shadow.getElementById('visibility-input'));
+
+    this.loaded = false;
   }
 
   static get observedAttributes() {
     return [];
   }
 
-  connectedCallback () {
+  get editedId() /*:number | null*/ {
+    let attr = this.getAttribute("edited-id");
+    if (attr === undefined || attr === null) {
+      return null;
+    }
+    return parseInt(attr, 10);
+  }
+
+  get isEditor() {
+    return this.editedId !== null;
+  }
+
+  connectedCallback() {
+    if (this.editedId !== null) {
+      this.mainForm.method = "post";
+      this.mainForm.action = `/bookmarks/${this.editedId}/edit`;
+    }
+
     this.uriInput.addEventListener('blur', this.onUriBlur.bind(this));
     this.uriInput.value = this.uri || "";
     this.titleInput.value = this.titleText || "";
@@ -98,10 +124,11 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     } else {
       this.descriptionInput.focus();
     }
+    this.load();
   }
 
   async onUriBlur() {
-    if (!this.uriInput.value) {
+    if (this.isEditor || !this.uriInput.value) {
       return;
     }
 
@@ -121,6 +148,27 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     let pageInfo = await r.json();
     this.titleInput.value = pageInfo.title;
   }
+
+  async load() {
+    if (this.editedId === null || this.loaded) {
+      return;
+    }
+
+    let fetchUrl = new URL(`/posts/${this.editedId}`, document.URL);
+    let r = await fetch(fetchUrl);
+
+    if (!r.ok) {
+      return;
+    }
+
+    let post = await r.json();
+    this.uriInput.value = post.uri;
+    this.titleInput.value = post.title;
+    this.descriptionInput.innerText = post.description;
+    this.visibilityInput.value = post.visibility;
+
+    this.loaded = true;
+  }
 }
 
 customElements.define("mlk-bookmark-submission-form", MlkBookmarkSubmissionForm);
diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index 8811bb3..bc95300 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -153,10 +153,15 @@ body > footer {
   border-top: lightgray solid 1px;
 }
 
+a.bookmark-title {
+  text-decoration: none;
+}
+
 h1.bookmark-title {
   font-size: 1em;
   margin: 0;
   padding: 0;
+  display: inline;
 }
 
 .bookmark-info {
@@ -164,6 +169,7 @@ h1.bookmark-title {
   font-size: smaller;
   margin: 0;
   padding: 0;
+  flex: auto;
 }
 
 article.bookmark {
@@ -173,6 +179,10 @@ article.bookmark {
   background: #f8f0f0;
 }
 
+article.bookmark > header {
+  display: flex
+}
+
 .lazychat-message-info {
   font-style: italic;
   font-size: smaller;
@@ -209,6 +219,14 @@ elix-expandable-section.editor-pane::part(header) {
   display: inline-block;
 }
 
+.bookmark-edit-button {
+  font-size: small;
+}
+
+.bookmark-message-controls {
+  flex: initial;
+}
+
 .lazychat-edit-button {
   font-size: small;
 }
diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
index e43e135..4c4aca8 100644
--- a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
@@ -61,7 +61,7 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
     if (attr === undefined || attr === null) {
       return null;
     }
-    return parseInt(attr);
+    return parseInt(attr, 10);
   }
 
   get isEditor() {
diff --git a/src/main/resources/META-INF/resources/posts/postList.js b/src/main/resources/META-INF/resources/posts/postList.js
index 7bab4f9..8ffb7ca 100644
--- a/src/main/resources/META-INF/resources/posts/postList.js
+++ b/src/main/resources/META-INF/resources/posts/postList.js
@@ -23,4 +23,17 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
   }
+
+  let bookmarks = document.getElementsByClassName('bookmark');
+  for (let bookmark of bookmarks) {
+    let editorPane = bookmark.getElementsByClassName('editor-pane')[0];
+    if (editorPane) {
+      let form = bookmark.getElementsByTagName('mlk-bookmark-submission-form')[0];
+      let editButton = bookmark.getElementsByClassName('bookmark-edit-button')[0];
+      editButton.addEventListener('click', () => {
+        editorPane.toggle();
+        form.focus();
+      });
+    }
+  }
 });