story-content: Added add chapter

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>