Comments are pretty much done!

2019-03-17 20:00:49 +01:00
parent 490725ecd2
commit 6ea9632623
14 changed files with 365 additions and 27 deletions
@@ -0,0 +1,131 @@
+const moment = require("moment")
+
+const {commentApi} = require("../../../../../rpdata/api/Comment")
+const {charactersApi} = require("../../../../../rpdata/api/Character")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      values: {
+        subject: "",
+        source: "",
+        characterName: "",
+        characterId: "",
+        fictionalDate: "",
+      },
+      characters: [],
+      opened: false,
+      placeholder: "(Required)",
+    }
+  }
+
+  onInput(input) {
+    if (input.comment) {
+      charactersApi.list({author: (input.user||{}).name}).then((characters) => {
+        this.state.characters = characters.sort((a,b) => a.name.localeCompare(b.name))
+      })
+
+      const comment = input.comment
+      this.state.values = {
+        subject: comment.subject,
+        characterId: comment.characterId,
+        characterName: comment.characterName,
+        fictionalDate: moment(comment.fictionalDate).format("MMM D, YYYY"),
+        source: comment.source,
+      }
+    }
+  }
+
+  change(key, ev) {
+    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)"
+      }
+    }
+  }
+
+  close() {
+    this.emit("close")
+  }
+
+  save() {
+    const values = Object.assign({}, this.state.values)
+    let clearFictionalDate = false
+
+    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 != "") {
+      if (Number.isNaN(fictionalDate)) {
+        this.state.error = `Could not parse ${values.fictionalDate} as date!`
+        return
+      }
+    } else {
+      fictionalDate = null
+      clearFictionalDate = true
+    }
+    
+    const input = {
+      commentId: this.input.comment.id, 
+      subject: values.subject, 
+      source: values.source, 
+      characterName: values.characterName, 
+      characterId: values.characterId,
+      fictionalDate: fictionalDate,
+      clearFictionalDate: clearFictionalDate,
+    }
+
+    if (input.characterId == "") {
+      input.characterId = null
+    }
+
+    commentApi.editComment(input).then(comment => {
+      this.emit("edit", comment)
+      this.close()
+
+      this.state.values = {
+        subject: "",
+        source: "",
+        characterName: "",
+        characterId: "",
+        fictionalDate: "",
+      }
+    }).catch(errs => {
+      console.warn("Failed to add comemnt:", errs)
+
+      this.state.error = "Failed to add comemnt: " + (errs[0]||errs||{}).message || errs
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}
@@ -0,0 +1,27 @@
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") >
+  <h1>Edit Comment</h1>
+
+  <p key="error" class="color-error">${state.error}</p>
+
+  <if(input.chapter.commentMode !== "Chat")>
+    <label>Subject</label>
+    <input key="subject" autofocus placeholder="" class="big" on-change("change", "subject") value=state.values.subject />
+  </if>
+
+  <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 />
+
+  <label>Content</label>
+  <textarea key="source" placeholder="" class="tall" on-change("change", "source") value=state.values.source />
+
+  <button disabled=state.loading on-click("save")>Save</button>
+</modal>