logs-content: Added edit log form.

marko/page/logs-content/components/edit-log-modal/component.js

@@ -0,0 +1,68 @@
+const moment = require("moment")
+
+const {logsApi} = require("../../../../../rpdata/api/Log")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      values: {
+        title: "",
+        event: "",
+        description: "",
+        open: false,
+      },
+    }
+
+    this.first = false
+  }
+
+  onInput(input) {
+    if (input.log && !this.first) {
+      this.state.values = {
+        title: input.log.title,
+        event: input.log.eventName,
+        description: input.log.description,
+        open: input.log.open,
+      }
+
+      this.first = true
+    }
+  }
+
+  change(key, ev) {
+    this.state.values[key] = ev.target.value
+    this.state.values = Object.assign({}, this.state.values)
+  }
+
+  open() {
+    this.state.loading = false
+  }
+
+  close() {
+    this.first = false
+    this.emit("close")
+  }
+
+  save() {
+    if (this.state.loading) {
+      return
+    }
+
+    const input = Object.assign({id: this.input.log.id}, this.state.values)
+    console.log(input)
+
+    this.state.loading = true
+    logsApi.edit(input).then(data => {
+      this.emit("edited", data)
+      this.emit("close")
+    }).catch(errs => {
+      console.warn("Failed to edit:", errs)
+
+      this.state.error = "Failed to edit: " + errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}

marko/page/logs-content/components/edit-log-modal/index.marko

@@ -0,0 +1,25 @@
+import moment from "moment"
+
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <h1>Edit Log</h1>
+
+  <p key="error" class="color-error">${state.error}</p>
+
+  <label>Title</label>
+  <input key="title" placeholder=(input.log.channel.name + " – " + moment(input.log.date).format("MMMM D, YYYY")) class="big" on-change("change", "title") value=state.values.title />
+
+  <label>Event Name</label>
+  <input key="event" placeholder="(Optional)" class="big" on-change("change", "event") value=state.values.event />
+  
+  <label>Description</label>
+  <textarea key="description" placeholder="(Optional)" on-change("change", "description") value=state.values.description />
+
+  <toggle value=state.values.open on="Open" off="Closed"
+          onDesc=("New posts in "+input.log.channel.name+" will end up here.")
+          offDesc="The logbot will not append to this log."
+          on-change("change", "open") />
+
+  <p if(state.values.open) key="warning" class="color-danger">Opening a log will close all others for the same channels.</p>  
+
+  <button disabled=state.loading on-click("save")>Save</button>
+</modal>

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

@@ -1,6 +1,6 @@
 <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-link dark key="_create" on-click("select", "post.add", null) icon="+">Add Post</menu-link>
 
   <menu-gap />
   <menu-header>Links</menu-header>

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

@@ -83,6 +83,10 @@ module.exports = class {
     this.patch([patch])
   }
 
+  logEdited(patch) {
+    this.state.log = Object.assign(Object.assign({}, this.state.log), patch)
+  }
+
   postAdded(post) {
     this.state.log.posts = this.state.log.posts.concat([post])
     this.state.log = Object.assign({}, this.state.log)    

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

@@ -1,7 +1,10 @@
 <logs-content-menu user=input.user log=state.log on-select("open") />
 <main>
   <div class="logs-content">
-    <h1 class="color-primary">${component.title}</h1>
+    <div class="header">
+      <h1 class="color-primary">${component.title}</h1>
+      <a on-click("open", "log.edit") class="color-menu">Edit</a>
+    </div>
     <post for(post in state.log.posts)
           key=post.id
           on-move("movePost", post)
@@ -13,5 +16,6 @@
     />
   </div>
 
-  <add-post-modal enabled=(state.modal === "add") logId=state.log.id on-close("close") on-added("postAdded") />
+  <add-post-modal enabled=(state.modal === "post.add") logId=state.log.id on-close("close") on-added("postAdded") />
+  <edit-log-modal enabled=(state.modal === "log.edit") log=state.log on-close("close") on-edited("logEdited") />
 </main>

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

@@ -3,8 +3,27 @@ div.logs-content {
   max-width: 75ch;
   margin: auto;
 
-  h1 {
-    font-weight: 200;
+  div.header {
     text-align: center;
+    vertical-align: middle;
+    margin-bottom: 1em;
+
+    h1 {
+      display: block;
+      font-weight: 200;
+      text-align: center;
+      margin-bottom: 0;
+    }
+
+    a {
+      vertical-align: middle;
+      display: inline-block;
+      padding: 0.5em 0.5ch 0.5em 0.5ch;
+      opacity: 0.5;
+    }
+    a:hover {
+      cursor: pointer;
+      opacity: 1;
+    }
   }
 }

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

@@ -8,7 +8,7 @@ import moment from "moment"
                      description=log.description
                      characters=log.characters
                      name=(log.title || (log.channelName + " - " + moment(log.date).format("MMMM D, YYYY")))
-                     tags=[{kind: "Location", name: log.channelName}, {kind: "Event", name: log.event}]
+                     tags=[{kind: "Location", name: log.channelName}, {kind: "Event", name: log.eventName}]
                      enableAllTags=true
                      createdDate=log.date />
 </content-list>

rpdata/api/Log.js

@@ -35,7 +35,7 @@ class Log {
   }
 }
 
-const logsApi = {
+class LogAPI {
   find(id) {
     return query(`
       query FindLog($id: String!) {
@@ -75,7 +75,95 @@ const logsApi = {
     `, {id}).then(({log}) => {
       return Log.fromData(log)
     })
-  },
+  }
+
+  /**
+   * Call `addLog(input)` mutation, returns a Log
+   * 
+   * @param {{time:Date, channel:string, title:string, eventName:string, description:string, open:boolean}} input 
+   * @returns {Promise<Log>}
+   */
+  add(input) {
+    return query(`
+      mutation FindLog($input: LogAddInput!) {
+        log(input: $input) {
+          id
+          shortId
+          date
+          title
+          eventName
+          description
+          open
+          channel {
+            name
+            logged
+            hub
+            eventName
+            locationName
+          }
+          characters {
+            id
+            nicks
+            author
+            name
+            shortName
+            description
+          }
+          posts {
+            id
+            position
+            time
+            kind
+            nick
+            text
+          }
+        }
+      }
+    `, {input}, {permissions: ["log.add "]}).then(({addLog}) => {
+      return Log.fromData(addLog)
+    })
+  }
+
+  /**
+   * Call `editLog(input)` mutation, returns the id and all editable fields.
+   * 
+   * @param {{id:string, title:string, eventName:string, description:string, open:boolean}} input 
+   * @returns {Promise<{id:string, title:string, eventName:string, description:string, open:boolean}>}
+   */
+  edit(input) {
+    return query(`
+      mutation EditLog($input: LogEditInput!) {
+        editLog(input: $input) {
+          id
+          title
+          eventName
+          description
+          open
+        }
+      }
+    `, {input}, {permissions: ["log.edit"]}).then(({editLog}) => {
+      return editLog
+    })
+  }
+
+
+  /**
+   * Call `removeLog(input)` mutation, returns the id
+   * 
+   * @param {{id:string}} input 
+   * @returns {Promise<{id:string}>}
+   */
+  remove(input) {
+    return query(`
+      mutation RemoveLog($input: LogRemoveInput!) {
+        removeLog(input: $input) {
+          id
+        }
+      }
+    `, {input}, {permissions: ["log.remove"]}).then(({editLog}) => {
+      return editLog
+    })
+  }
 }
 
-module.exports = { Log, logsApi }
+module.exports = { Log, logsApi: new LogAPI }

rpdata/api/LogHeader.js

@@ -14,14 +14,14 @@ class LogHeader {
    * @param {boolean} open 
    * @param {{id:string,name:string,shortName:string,author:string}[]} characters 
    */
-  constructor(id, shortId, date, channelName, title, description, event, open, characters) {
+  constructor(id, shortId, date, channelName, title, description, eventName, open, characters) {
     this.id = id
     this.shortId = shortId
     this.date = new Date(date)
     this.channelName = channelName
     this.title = title || null
     this.description = description || null
-    this.event = event || null
+    this.eventName = eventName || null
     this.open = open
     this.characters = characters.map(ch => new LogHeaderCharacter(ch.id, ch.name, ch.shortName, ch.author))
   }
@@ -76,7 +76,7 @@ const logHeaderApi = {
         }
       }
     `, {filter}).then(({headers}) => {
-       return headers.map(h => new LogHeader(h.id, h.shortId, h.date, h.channelName, h.title, h.description, h.event, h.open, h.characters))
+       return headers.map(h => new LogHeader(h.id, h.shortId, h.date, h.channelName, h.title, h.description, h.eventName, h.open, h.characters))
     })
   },
 }