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
@@ -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>