story-content: Added remove story modal, added annotations

marko/components/annotation/index.marko

@@ -0,0 +1,3 @@
+<div class=("annotation annotation-level-"+(input.level||"info"))>
+  <include(input.renderBody)/>
+</div>

marko/components/annotation/style.less

@@ -0,0 +1,36 @@
+div.annotation {
+  outline: 1px solid;
+  padding: 0.25em 1ch;
+  margin-bottom: 1em;
+
+  h2 {
+    font-size: 1em;
+    margin: 0;
+    text-align: center;
+    border-bottom: 0.25px dotted;
+    margin-bottom: 0.25em;
+    padding-bottom: 0.25em;
+  }
+
+  p {
+    margin-top: 0.5em;
+  }
+  p:first-of-type {
+    margin: 0;
+  }
+}
+
+div.annotation-level-info {
+  background-color: rgba(0, 31, 63, 0.5);
+  color: #08F;
+}
+
+div.annotation-level-warning {
+  background-color: rgba(63, 31, 0, 0.5);
+  color: #F80;
+}
+
+div.annotation-level-error {
+  background-color: rgba(63, 7, 0, 0.5);
+  color: #F10;
+}

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

@@ -3,6 +3,7 @@ module.exports = class {
     this.state = {
       story: input.story,
       modal: null,
+      removed: false,
     }
   }
 
@@ -60,6 +61,10 @@ module.exports = class {
     this.refreshStory()
   }
 
+  timeToDie() {
+    this.state.removed = true
+  }
+
   refreshStory() {
     this.state.story = Object.assign({}, this.state.story)
   }

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

@@ -1,11 +1,22 @@
 <story-content-menu key="menu" on-select("menuSelect") story=state.story selected=(input.selected || {}) user=input.user />
 <main>
   <div class="story-content">
+    <div class="header">
       <h1 class="color-primary">${state.story.name}</h1>
+      <a on-click("open", "story.edit") class="color-menu">Edit</a>
+      <a on-click("open", "story.remove") class="color-menu">Remove</a>
+    </div>
     <story-tags tags=state.story.tags on-select("open", "story.tags")/>
+    <annotation if(state.removed) level="error">
+      <p>
+        This story has been removed. Your browser has not refreshed the page yet, 
+        so you can still read it (or back it up) before leaving the page.
+      </p>
+    </annotation>
     <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") />
   <edit-story-tags-modal enabled=(state.modal === "story.tags") story=state.story on-tags("updateStoryTags") on-close("close") />
+  <remove-story-modal enabled=(state.modal === "story.remove") story=state.story on-remove("timeToDie") on-close("close") />
 </main>

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

@@ -7,4 +7,27 @@
     font-weight: 200;
     text-align: center;
   }
+
+  .header {
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 1em;
+    
+    h1 {
+      vertical-align: middle;
+      display: block;
+      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/story-content/components/remove-story-modal/component.js

@@ -0,0 +1,56 @@
+const moment = require("moment")
+
+const {storyApi} = require("../../../../../rpdata/api/Story")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      values: {
+        title: "",
+        source: "",
+        fictionalDate: "",
+      },
+    }
+  }
+
+  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.emit("close")
+  }
+
+  doIt() {
+    this.state.loading = true
+
+    storyApi.remove({id: this.input.story.id}).then(() => {
+      this.emit("remove")
+      this.emit("close")
+    }).catch(errs => {
+      console.warn("Failed to delete:", errs)
+
+      this.state.error = "Failed to delete: " + errs.message || errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}

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

@@ -0,0 +1,9 @@
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) notification closable on-close("close") on-open("open") >
+  <h1>Delete Story</h1>
+
+  <p class="color-error">${state.error}</p>
+  
+  <p class="color-danger">Deletion is final!</p>
+
+  <button disabled=state.loading on-click("doIt")>Yes, do as I say!</button>
+</modal>

middleware/locals.js

@@ -3,12 +3,16 @@ module.exports = (req, res, next) => {
     res.markoAsync = async(template, input) => {
       const locals = Object.assign((res.locals || {}), input)
 
+      try {
         for (const key in locals) {
           const value = locals[key]
           if (value instanceof Promise) {
             locals[key] = await value
           }
         }
+      } catch(err) {
+        return res.status(404).json(err)
+      }
 
       return res.marko(template, locals)
     }

routes/story/by-tag.js

@@ -12,7 +12,7 @@ router.get("/:tagkind/:tagname", common, async(req, res) => {
     const tag = new Tag(req.params.tagkind, req.params.tagname)
 
     res.markoAsync(listTemplate, {
-      stories: storyApi.list({tags: tag}), 
+      stories: storyApi.list({tags: [tag]}), 
       menuTags: [tag],
       selected: {tag: `${tag.kind}:${tag.name}`},
     })

rpdata/api/Story.js

@@ -184,6 +184,24 @@ const storyApi = {
       return removeStoryTag
     })
   },
+
+  /**
+   * Call `removeStory(input)` mutation, returns the id.
+   * 
+   * @param {{id:string}} input
+   * @returns {Promise<{id:string}>}
+   */
+  remove(input) {
+    return query(`
+      mutation RemoveStory($input: StoryRemoveInput!) {
+        removeStory(input:$input) {
+          id
+        }
+      }
+    `, {input}, {permissions: ["member", "story.remove"]}).then(({removeStory}) => {
+      return removeStory
+    })
+  },
 }
 
 module.exports = {storyApi, Story}