logs-content: Added add post form

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

@@ -0,0 +1,59 @@
+const moment = require("moment")
+
+const {postApi} = require("../../../../../rpdata/api/Post")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      values: {
+        time: moment.utc(new Date()).format("YYYY-MM-DD HH:mm:ss"),
+        kind: "text",
+        nick: "",
+        text: "",
+      },
+    }
+
+    this.first = false
+  }
+
+  change(key, ev) {
+    this.state.values[key] = ev.target.value
+  }
+
+  open() {
+  }
+
+  close() {
+    this.first = false
+    this.emit("close")
+  }
+
+  save() {
+    if (this.state.loading) {
+      return
+    }
+
+    const values = this.state.values
+    
+    let time = new Date(values.time + " UTC")
+    if (Number.isNaN(time)) {
+      this.state.error = `Could not parse ${values.time} as date`
+      return
+    }
+    
+    const input = {logId: this.input.logId, time, kind: this.state.values.kind, nick: this.state.values.nick, text: this.state.values.text}
+
+    this.state.loading = true
+    postApi.add(input).then(data => {
+      this.emit("added", data)
+      this.emit("close")
+    }).catch(errs => {
+      console.warn("Failed to add post:", errs)
+      this.state.error = "Failed to add post: " + errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}

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

@@ -0,0 +1,26 @@
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <h1>Add Post</h1>
+
+  <p key="error" class="color-error">${state.error}</p>
+
+  <label>Timestamp</label>
+  <input key="time" placeholder="Title" class="big" on-change("change", "time") value=state.values.time />
+
+  <label>Kind</label>
+  <select key="kind" class="big" placeholder="Kind" on-change("change", "kind") value=state.values.kind>
+    <option value="text" selected=(state.values.kind === "text")>Text (text, /npc)</option>
+    <option value="action" selected=(state.values.kind === "action")>Action (/me, /npca)</option>
+    <option value="scene" selected=(state.values.kind === "scene")>Scene (/scene)</option>
+    <option value="annotation.info" selected=(state.values.kind === "annotation.info")>Annotation - Info</option>
+    <option value="annotation.warning" selected=(state.values.kind === "annotation.warning")>Annotation - Warning</option>
+    <option value="annotation.error" selected=(state.values.kind === "annotation.error")>Annotation - Error</option>
+  </select>
+
+  <label>Nick</label>
+  <input key="nick" placeholder="IRC_Nick (You can use non-IRC letters here, like ', but I recommend you don't so the character is found)" class="big" on-change("change", "nick") value=state.values.nick />
+
+  <label>Text</label>
+  <textarea key="text" placeholder="Text" class="tall" on-change("change", "text") value=state.values.text />
+
+  <button disabled=state.loading on-click("save")>Add Post</button>
+</modal>

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

@@ -0,0 +1,5 @@
+module.exports = class {
+  select(value) {
+    this.emit("select", value)
+  }
+}

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

@@ -1,5 +1,9 @@
 <menu user=input.user>
   <menu-header>Log</menu-header>
+  <menu-link dark key="_create" on-click("select", "add", null) icon="+">Add Post</menu-link>
+
+  <menu-gap />
+  <menu-header>Links</menu-header>
   <menu-link href=("/logs/?channels="+input.log.channel.name) icon="#">${input.log.channel.name}</menu-link>
   <menu-link if(input.log.channel.eventName) href=("/logs/?channels="+input.log.channel.eventName) icon="E">${input.log.channel.eventName}</menu-link>
   <for(character in input.log.characters)>

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

@@ -5,10 +5,19 @@ const {postApi} = require("../../../../../rpdata/api/Post")
 module.exports = class {
   onCreate(input) {
     this.state = {
-      log: input.log
+      log: input.log,
+      modal: null,
     }
   }
 
+  open(modal) {
+    this.state.modal = modal
+  }
+
+  close() {
+    this.state.modal = null
+  }
+  
   /**
    * Patch the posts
    * 
@@ -70,8 +79,13 @@ module.exports = class {
     })
   }
 
-  postEdited(post) {
+  postEdited(patch) {
-    this.patch([post])
+    this.patch([patch])
+  }
+
+  postAdded(post) {
+    this.state.log.posts = this.state.log.posts.concat([post])
+    this.state.log = Object.assign({}, this.state.log)    
   }
 
   get title() {

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

@@ -1,4 +1,4 @@
-<logs-content-menu user=input.user log=state.log />
+<logs-content-menu user=input.user log=state.log on-select("open") />
 <main>
   <div class="logs-content">
     <h1 class="color-primary">${component.title}</h1>
@@ -12,4 +12,6 @@
           last=(post.position === state.log.posts.length)
     />
   </div>
+
+  <add-post-modal enabled=(state.modal === "add") logId=state.log.id on-close("close") on-added("postAdded") />
 </main>

rpdata/api/Post.js

@@ -24,6 +24,30 @@ class Post {
 }
 
 class PostAPI {
+  /**
+   * Call `addPost(input)` mutation, returns the id and edited fields of the post
+   * 
+   * @param {{logId:string, time:Date, kind:string, nick:string, text:string}} input 
+   * @returns {Promise<{id:string, time:Date, kind:string, nick:string, text:string}>}
+   */
+  add(input) {
+    return query(`
+      mutation AddPost($input: PostAddInput!) {
+        addPost(input: $input) {
+          id
+          position
+          time
+          kind
+          nick
+          text
+        }
+      }
+    `, {input}, {permissions: ["post.add"]}).then(({addPost}) => {
+       return new Post(addPost.id, addPost.position, addPost.time, addPost.kind, addPost.nick, addPost.text)
+    })
+  }
+
+
   /**
    * Call `movePost(input)` mutation, returns the id and position of all affected posts.
    * 
@@ -51,7 +75,7 @@ class PostAPI {
    */
   edit(input) {
     return query(`
-      mutation RemovePost($input: PostEditInput!) {
+      mutation EditPost($input: PostEditInput!) {
         editPost(input: $input) {
           id
           time
@@ -61,6 +85,10 @@ class PostAPI {
         }
       }
     `, {input}, {permissions: ["post.edit"]}).then(({editPost}) => {
+      if (editPost.time != null) {
+        editPost.time = new Date(editPost.time)
+      }
+
       return editPost
     })
   }