logs-content: Added remove modal, fixed move up/down mutations

marko/components/modal/style.less

@@ -113,6 +113,17 @@ div.overlay {
       opacity: 1;
       cursor: pointer;
     }
+
+    div.summary {
+      text-align: left;
+      margin: auto;
+
+      p {
+        margin: 0;
+        text-indent: -2ch;
+        margin-left: 2ch;
+      }
+    }
   }
   div.modal.nolabel {
     input, textarea {

marko/page/logs-content/components/page/component.js

@@ -41,7 +41,11 @@ module.exports = class {
     this.state.log = Object.assign({}, this.state.log)
   }
 
-  movePost(post, toPosition) {
+  movePost(post, toPosition, relative) {
+    if (relative) {
+      toPosition = post.position + toPosition
+    }
+
     postApi.move({id: post.id, toPosition}).then(patches => {
       this.patch(patches)
     }).catch(err => {
@@ -49,6 +53,23 @@ module.exports = class {
     })
   }
 
+  removePost(post) {
+    postApi.remove({id: post.id}).then(() => {
+      this.state.log.posts = this.state.log.posts.filter(p => p.id !== post.id)
+    
+      for (const p of this.state.log.posts) {
+        if (p.position > post.position) {
+          p.position--
+        }
+      }
+  
+      this.state.log = Object.assign({}, this.state.log)
+    }).catch(errs => {
+      console.warn("Failed to delete:", errs)
+      this.state.error = "Failed to delete: " + (errs.message || errs[0].message)
+    })
+  }
+
   get title() {
     if (this.state.log.title) {
       return this.state.log.title

marko/page/logs-content/components/page/index.marko

@@ -2,6 +2,13 @@
 <main>
   <div class="logs-content">
     <h1 class="color-primary">${component.title}</h1>
-    <post for(post in state.log.posts) on-move("movePost", post) post=post characters=state.log.characters last=(post.position === state.log.posts.length) />
+    <post for(post in state.log.posts)
+          key=post.id
+          on-move("movePost", post)
+          on-remove("removePost", post)
+          post=post
+          characters=state.log.characters
+          last=(post.position === state.log.posts.length)
+    />
   </div>
 </main>

marko/page/logs-content/components/post/component.js

@@ -5,13 +5,14 @@ module.exports = class {
       name: "",
       text: "",
       modal: null,
+      removed: false,
     }
 
     this.updatePost(input)
   }
 
   open(modal) {
-    this.state.modal == modal
+    this.state.modal = modal
   }
 
   close() {
@@ -22,6 +23,11 @@ module.exports = class {
     this.emit("move", toPosition)
   }
 
+  remove() {
+    this.state.removed = true
+    this.emit("remove")
+  }
+
   onInput(input) {
     if (this.state == null) {
       return

marko/page/logs-content/components/post/index.marko

@@ -1,10 +1,10 @@
-<div class=["post", component.kindClass("post-type")]>
+<div if(!state.removed) class=["post", component.kindClass("post-type")]>
   <div class="post-meta-row">
     <div class="options color-menu">
-      <a if(input.post.position != 1) on-click("move", input.post.position - 1)>Up</a>
-      <a if(!input.last) on-click("move", input.post.position + 1)>Down</a>
+      <a on-click("move", -1, true)>Up</a>
+      <a on-click("move", +1, true)>Down</a>
       <!--<a on-click("open", "edit") >Edit</a>-->
-      <!--<a on-click("open", "remove") >Remove</a>-->
+      <a on-click("open", "remove")>Remove</a>
     </div>
     <post-meta kind="timestamp" value=input.post.time />
     <post-meta kind="nick" value=input.post.nick />
@@ -23,4 +23,5 @@
    <div if(input.post.kind === "text") class="post-body color-text">
     <markdown class="post-content post-text" source=state.text />
   </div>
+  <remove-post-modal enabled=(state.modal === "remove") post=input.post on-close("close") on-remove("remove") />
 </div>

marko/page/logs-content/components/remove-post-modal/component.js

@@ -0,0 +1,35 @@
+const moment = require("moment")
+
+const {postApi} = require("../../../../../rpdata/api/Post")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      clicked: false,
+      timestamp: moment(input.post.time).format("YYYY-MM-DD HH:mm:ss")
+    }
+  }
+
+  change(key, ev) {
+    this.state.values[key] = ev.target.value
+  }
+
+  open() {
+  }
+
+  close() {
+    this.emit("close")
+  }
+
+  doIt() {
+    if (this.state.clicked) {
+      return
+    }
+
+    this.state.clicked = true
+
+    this.emit("remove")
+    this.emit("close")
+  }
+}

marko/page/logs-content/components/remove-post-modal/index.marko

@@ -0,0 +1,16 @@
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <h1>Remove Post ${input.post.position}</h1>
+
+  <p class="color-error">${state.error}</p>
+  
+  <p class="color-danger">Are you sure you got the right post?</p>
+
+  <div class="summary">
+    <p><b>Timestamp</b>: ${state.timestamp}</p>
+    <p><b>Kind</b>: ${input.post.kind}</p>
+    <p><b>Nick</b>: ${input.post.nick}</p>
+    <p><b>Text</b>: ${input.post.text}</p>
+  </div>
+
+  <button disabled=state.loading on-click("doIt")>Yes, erase history!</button>
+</modal>

rpdata/api/Post.js

@@ -42,6 +42,24 @@ class PostAPI {
        return movePost
     })
   }
+
+  /**
+   * Call `removePost(input)` mutation, returns the id of the affected post.
+   * 
+   * @param {{id:string, toPosition: number}} input 
+   * @returns {Promise<{id:string}>}
+   */
+  remove(input) {
+    return query(`
+      mutation RemovePost($input: PostRemoveInput!) {
+        removePost(input: $input) {
+          id
+        }
+      }
+    `, {input}, {permissions: ["post.remove"]}).then(({removePost}) => {
+       return removePost
+    })
+  }
 }
 
 module.exports = {Post, postApi: new PostAPI}