logs-content: Added move up/down mutations

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

@@ -1,5 +1,7 @@
 const moment = require("moment")
 
+const {postApi} = require("../../../../../rpdata/api/Post")
+
 module.exports = class {
   onCreate(input) {
     this.state = {
@@ -7,6 +9,46 @@ module.exports = class {
     }
   }
 
+  /**
+   * Patch the posts
+   * 
+   * @param {{id:string, [x:string]: any}[]} patches 
+   */
+  patch(patches) {
+    const posts = this.state.log.posts.slice()
+
+    for (const patch of patches) {
+      const index = posts.findIndex(p => p.id === patch.id)
+      if (index == -1) {
+        console.warn("Post not found for patch:", patch)
+        // TODO: Force full refresh
+        continue
+      }
+
+      posts[index] = Object.assign(Object.assign({}, posts[index]), patch)
+    }
+
+    // Sort posts and look for continuity issues (duplicate or skipped positions)
+    posts.sort((a, b) => a.position - b.position)
+    for (let i = 1; i < posts.length; ++i) {
+      if (posts[i].position !== posts[i - 1].position + 1) {
+        console.warn("Discontinuity detected!")
+        // TODO: Force full refresh
+      }
+    }
+
+    this.state.log.posts = posts
+    this.state.log = Object.assign({}, this.state.log)
+  }
+
+  movePost(post, toPosition) {
+    postApi.move({id: post.id, toPosition}).then(patches => {
+      this.patch(patches)
+    }).catch(err => {
+      console.warn(err)
+    })
+  }
+
   get title() {
     if (this.state.log.title) {
       return this.state.log.title

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

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

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

@@ -4,11 +4,24 @@ module.exports = class {
       shortName: "",
       name: "",
       text: "",
+      modal: null,
     }
 
     this.updatePost(input)
   }
 
+  open(modal) {
+    this.state.modal == modal
+  }
+
+  close() {
+    this.state.modal = null
+  }
+
+  move(toPosition) {
+    this.emit("move", toPosition)
+  }
+
   onInput(input) {
     if (this.state == null) {
       return

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

@@ -1,5 +1,11 @@
 <div 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("open", "edit") >Edit</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 />
   </div>

marko/page/logs-content/components/post/style.less

@@ -1,11 +1,31 @@
 div.post {
   margin-bottom: 1ch;
 
-  .post-meta-row {
+  div.post-meta-row {
     padding: 0;
     margin: 0;
   }
-  
+
+  div.options {
+    position: absolute;
+    text-align: right;
+    width: calc(100% - 35.5ch);
+    max-width: 75ch;
+
+    a {
+      display: inline-block;
+      padding: 0 0.5ch;
+      
+      opacity: 0.5;
+      
+      cursor: pointer;
+      user-select: none;
+    }
+    a:hover {
+      opacity: 1;
+    }
+  }
+
   div.post-body {
     font-size: 1.25em;
 

rpdata/api/Post.js

@@ -23,4 +23,25 @@ class Post {
   }
 }
 
-module.exports = {Post}
+class PostAPI {
+  /**
+   * Call `movePost(input)` mutation, returns the id and position of all affected posts.
+   * 
+   * @param {{id:string, toPosition: number}} input 
+   * @returns {Promise<{id:string, position:number}[]>}
+   */
+  move(input) {
+    return query(`
+      mutation MovePost($input: PostMoveInput!) {
+        movePost(input: $input) {
+          id
+          position
+        }
+      }
+    `, {input}, {permissions: ["post.move"]}).then(({movePost}) => {
+       return movePost
+    })
+  }
+}
+
+module.exports = {Post, postApi: new PostAPI}