Comments are pretty much done!

marko/page/story-content/components/create-comment-modal/component.js

@@ -17,6 +17,7 @@ module.exports = class {
       },
       characters: [],
       opened: false,
+      placeholder: "(Required)",
     }
 
     this.first = false
@@ -26,10 +27,30 @@ module.exports = class {
     charactersApi.list({author: (this.input.user||{}).name}).then((characters) => {
       this.state.characters = characters.sort((a,b) => a.name.localeCompare(b.name))
     })
+
+    const comments = this.input.chapter.comments || []
+    const lastComment = comments[comments.length - 1]
+    let date = lastComment.fictionalDate || chapter.fictionalDate
+    if (date != null) {
+      this.change("fictionalDate", {target: {value: moment(date).format("MMM D, YYYY")}})
+    }
   }
 
   change(key, ev) {
-    this.state.values = Object.assign({}, this.state.values, {[key]: ev.target.value})    
+    this.state.values = Object.assign({}, this.state.values, {[key]: ev.target.value})
+
+    if (key === "characterId") {
+      if (ev.target.value !== "") {
+        const character = this.state.characters.find(c => c.id === this.state.values.characterId)
+        if (character != null) {
+          this.state.placeholder = character.name
+        } else {
+          this.state.placeholder = "(Required)"
+        }
+      } else {
+        this.state.placeholder = "(Required)"
+      }
+    }
   }
 
   open() {
@@ -47,13 +68,28 @@ module.exports = class {
   }
 
   save() {
-    const values = this.state.values
+    const values = Object.assign({}, this.state.values)
 
-    if (values.source.length < 1) {
-      this.state.error = "You cannot post an empty comment."
+    if (values.source.length == 0) {
+      this.state.error = "The comment body is empty."
       console.warn(values)
       return
     }
+
+    if (this.input.chapter.commentMode !== "Chat" && values.subject.trim().length == 0) {
+      this.state.error = "The subject is empty."
+      return
+    }
+
+    if (values.characterName.trim().length < 1) {
+      const character = this.state.characters.find(c => c.id === this.state.values.characterId)
+      if (character == null) {
+        this.state.error = "You need to give a display name for an anonymous character."
+        return
+      }
+
+      values.characterName = character.name
+    }
     
     let fictionalDate = new Date(values.fictionalDate + " UTC")
     if (values.fictionalDate != "") {
@@ -74,8 +110,12 @@ module.exports = class {
       fictionalDate: fictionalDate, 
     }
 
-    commentApi.addComment(input).then(chapter => {
-      this.emit("add", chapter)
+    if (input.characterId == "") {
+      input.characterId = null
+    }
+
+    commentApi.addComment(input).then(comment => {
+      this.emit("add", comment)
       this.emit("close")
 
       this.state.values = {
@@ -85,6 +125,7 @@ module.exports = class {
         characterId: "",
         fictionalDate: "",
       }
+      this.state.opened = false
     }).catch(errs => {
       console.warn("Failed to add comemnt:", errs)
 

marko/page/story-content/components/create-comment-modal/index.marko

@@ -1,22 +1,22 @@
 <modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
-  <h1>Create Chapter</h1>
+  <h1>Add Comment</h1>
 
   <p key="error" class="color-error">${state.error}</p>
 
   <if(input.chapter.commentMode !== "Chat")>
     <label>Subject</label>
-    <input key="subject" autofocus placeholder="(Optional)" class="big" on-change("change", "subject") value=state.values.subject />
+    <input key="subject" autofocus placeholder="" class="big" on-change("change", "subject") value=state.values.subject />
   </if>
 
-  <label>Diaply Name</label>
-  <input key="characterName" autofocus placeholder="(Optional)" on-change("change", "characterName") value=state.values.characterName />
-
   <label>Character ${state.characterId}</label>
   <select on-change("change", "characterId")>
     <option value="" selected=state.values.characterId=="">Anonymous</option>
     <option for(character in state.characters) value=character.id selected=(state.values.characterId==character.id)>${character.name}</option>
   </select>
 
+  <label>Display Name</label>
+  <input key="characterName" autofocus placeholder=state.placeholder on-change("change", "characterName") value=state.values.characterName />
+
   <label>IC Date</label>
   <input key="icdate" placeholder="(Optional)" on-change("change", "fictionalDate") value=state.values.fictionalDate />