story-content: Added remove story modal, added annotations

2018-09-23 13:08:55 +02:00
parent df1295e7a6
commit 564192c76d
10 changed files with 171 additions and 6 deletions
@@ -0,0 +1,3 @@
+<div class=("annotation annotation-level-"+(input.level||"info"))>
+  <include(input.renderBody)/>
+</div>
@@ -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;
+}
@@ -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)
  }
@@ -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">
-    <h1 class="color-primary">${state.story.name}</h1>
+    <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>
@@ -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;
+    }
+  }
 }
@@ -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
+    })
+  }
+}
@@ -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>
@@ -3,11 +3,15 @@ module.exports = (req, res, next) => {
    res.markoAsync = async(template, input) => {
      const locals = Object.assign((res.locals || {}), input)

-      for (const key in locals) {
-        const value = locals[key]
-        if (value instanceof Promise) {
-          locals[key] = await value
+      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)
@@ -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}`},
    })
@@ -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}