story-content: Added add chapter

marko/components/menu-link/component.js

@@ -1,7 +1,17 @@
 module.exports = class {
   onCreate(input) {
     this.state = {
-      classes: ["menu-link", "color-menu", input.class],
+      classes: ["menu-link", "color-menu"],
+    }
+
+    if (input.dark) {
+      this.state.classes.push(input)
+    }
+
+    if (Array.isArray(input.class)) {
+      this.state.classes.push(...input.class)
+    } else if (input.class != null) {
+      this.state.classes.push(input.class)
     }
 
     this.state.classes.push(input.selected ? "selected" : "not-selected")

marko/components/menu-link/style.less

@@ -26,3 +26,9 @@ div.menu-link {
     }
   }
 }
+div.menu-link.dark {
+  opacity: 0.5;
+}
+div.menu-link.dark:hover {
+  opacity: 1;
+}

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

@@ -0,0 +1,82 @@
+const moment = require("moment")
+
+const {chapterApi} = require("../../../../../rpdata/api/Chapter")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      values: {
+        title: "",
+        source: "",
+        fictionalDate: "",
+      },
+    }
+
+    this.first = false
+  }
+
+  onInput(input) {
+    if (input.chapter && !this.first) {
+      let {fictionalDate, title, source} = input.chapter
+
+      if (fictionalDate != null) {
+        fictionalDate = moment.utc(fictionalDate).format("MMM D, YYYY")
+      }
+  
+      this.state.values = {fictionalDate, title, source}
+    }
+  }
+
+  change(key, ev) {
+    this.state.values[key] = ev.target.value
+  }
+
+  open() {
+    
+  }
+
+  close() {
+    this.first = false
+    this.emit("close")
+  }
+
+  save() {
+    const values = this.state.values
+
+    if (values.source.length < 1) {
+      this.state.error = "You cannot post an empty chapter."
+      return
+    }
+    
+    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
+    }
+    
+    const input = {storyId: this.input.storyId, title: values.title, source: values.source, fictionalDate}
+
+    chapterApi.addChapter(input).then(chapter => {
+      this.emit("add", chapter)
+      this.emit("close")
+
+      this.state.values = {
+        title: "",
+        source: "",
+        fictionalDate: "",
+      }
+    }).catch(errs => {
+      console.warn("Failed to edit:", errs)
+
+      this.state.error = "Failed to edit: " + errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}

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

@@ -0,0 +1,11 @@
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <h1>Create Chapter</h1>
+
+  <p key="error" class="color-error">${state.error}</p>
+
+  <input key="title" placeholder="Title (Optional)" class="big" on-change("change", "title") value=state.values.title />
+  <input key="icdate" placeholder="IC Date (Optional)" on-change("change", "fictionalDate") value=state.values.fictionalDate />
+  <textarea key="source" placeholder="Content" class="tall" on-change("change", "source") value=state.values.source />
+
+  <button disabled=state.loading on-click("save")>Save</button>
+</modal>

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

@@ -1,10 +1,23 @@
 module.exports = class {
   onCreate(input) {
     this.state = {
-      story: input.story
+      story: input.story,
+      modal: null,
     }
   }
 
+  open(modal) {
+    this.state.modal = modal
+  }
+
+  close() {
+    this.state.modal = null
+  }
+
+  addChapter(chapter) {
+    this.state.story.chapters.push(chapter)
+  }
+
   updateChapter(id, data) {
     const index = this.state.story.chapters.findIndex(ch => ch.id === id)
     if (index === -1) {
@@ -28,4 +41,14 @@ module.exports = class {
 
     this.state.story.chapters.splice(index, 1)
   }
+
+  menuSelect(kind, id) {
+    console.log(kind, id)
+
+    switch (kind) {
+      case "add":
+        this.open("chapter.add")
+        break
+    }
+  }
 }

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

@@ -1,8 +1,11 @@
-<story-content-menu key="menu" story=state.story selected=(input.selected || {}) user=input.user />
+<story-content-menu key="menu" on-select("menuSelect") story=state.story selected=(input.selected || {}) user=input.user />
 <main>
   <div class="story-content">
     <h1 class="color-primary">${state.story.name}</h1>
     <story-tags tags=state.story.tags />
     <chapter for(chapter in state.story.chapters) key=chapter.id chapter=chapter on-edit("updateChapter", chapter.id) on-remove("removeChapter", chapter.id)/>
   </div>
+
+  <create-chapter-modal storyId=state.story.id enabled=(state.modal === "chapter.add") chapter=input.chapter on-close("close") on-add("addChapter") />
+  
 </main>

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

@@ -21,7 +21,7 @@ module.exports = class {
   }
 
   chapterTitle(chapter) {
-    let title = "Chapter " + this.input.story.chapters.indexOf(chapter) + 1
+    let title = "Chapter " + (this.input.story.chapters.indexOf(chapter) + 1)
     if (chapter.title) {
       title = chapter.title
     } else if (chapter.fictionalDate && chapter.fictionalDate.getUTCFullYear() > 1) {
@@ -31,7 +31,11 @@ module.exports = class {
     return title
   }
 
-  selectChapter(id) {
+  select(kind, id) {
-    this.state.selectedChapter = id
+    if (kind === "chapter") {
+      this.state.selectedChapter = id
+    }
+
+    this.emit("select", kind, id)
   }
 }

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

@@ -1,6 +1,7 @@
 <menu user=input.user>
   <menu-header>${input.story.name}</menu-header>
   <for(chapter in input.story.chapters | status-var=loop)>
-    <menu-link key=chapter.id on-click("selectChapter", chapter.id) href=("#" + chapter.id) selected=(state.selectedChapter === chapter.id) icon=(loop.getIndex()+1)>${component.chapterTitle(chapter)}</menu-link>
+    <menu-link key=chapter.id on-click("select", "chapter", chapter.id) href=("#" + chapter.id) selected=(state.selectedChapter === chapter.id) icon=(loop.getIndex()+1)>${component.chapterTitle(chapter)}</menu-link>
   </for>
+  <menu-link dark key="_create" on-click("select", "add", null) icon="+">Add Chapter</menu-link>
 </menu>

rpdata/api/Chapter.js

@@ -23,7 +23,33 @@ class Chapter {
 
 const chapterApi = {
   /**
-   * Call `editChapter(input)` mutation
+   * Call `addChapter(input)` mutation, returns the entire object.
+   * 
+   * @param {{id:string, storyId:string, title:string, author?:string, fictionalDate?:Date, source: string}} input
+   * @returns {Promise<Chapter>} 
+   */
+  addChapter(input) {
+    return query(`
+      mutation AddChapter($input: ChapterAddInput!) {
+        addChapter(input: $input) {
+          id
+          title
+          author
+          source
+          createdDate
+          fictionalDate
+          editedDate
+        }
+      }
+    `, {input}, {permissions: ["member", "story.add"]}).then((data) => {
+      const ac = data.addChapter
+
+      return new Chapter(ac.id, ac.title, ac.author, ac.source, ac.createdDate, ac.fictionalDate, ac.editedDate)
+    })
+  },
+
+  /**
+   * Call `editChapter(input)` mutation, returns editable fields
    * 
    * @param {{id:string, title:string, fictionalDate:Date, source: string}} input
    * @returns {Promise<{title:string, fictionalDate:Date, source:string}>} 
@@ -47,7 +73,7 @@ const chapterApi = {
   },
 
   /**
-   * Call `removeChapter(input)` mutation
+   * Call `removeChapter(input)` mutation, returns only the id
    * 
    * @param {{id:string}} input
    * @returns {Promise<{id: string}>}