save blog + Edit page > Modal component 생성

assets/scss/main.scss

@@ -2,4 +2,8 @@
 @import "./bulma";
 @import "./spacing";
 @import "./instructor_header";
-@import "./editor/index";
+@import "./editor/index";
+
+.blog-editor-container {
+  padding-top: 60px;
+}

components/shared/Modal.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div @click="openModal" v-if="showButton">
+      <slot name="submitBtn">
+        <button :class="openBtnClass">{{openTitle}}</button>
+      </slot>
+    </div>
+    <div class="modal"
+         :class="{'is-active': isOpen}">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">{{title}}</p>
+          <button @click="isOpen=false" class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="content">
+            <slot></slot>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button
+            :disabled="isDisabled"
+            @click="emitAction"
+            class="button is-success">
+            {{actionTitle}}
+          </button>
+          <button @click="isOpen=false" class="button">Cancel</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    openTitle: {
+      type: String,
+      default: 'Open'
+    },
+    title: {
+      type: String,
+      default: 'Hey There'
+    },
+    actionTitle: {
+      type: String,
+      default: 'Commit'
+    },
+    openBtnClass: {
+      type: String,
+      default: 'button'
+    },
+    showButton: {
+      type: Boolean,
+      default: true
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isOpen: false
+    }
+  },
+  methods: {
+    emitAction() {
+      this.$emit('submitted',
+        { closeModal: this.closeCallback }
+      )
+    },
+    closeCallback() {
+      this.isOpen = false
+    },
+    openModal() {
+      this.isOpen = true
+      this.$emit('opened')
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .modal-card-body {
+    color: black;
+  }
+  .modal {
+    z-index: 9999;
+  }
+</style>

pages/instructor/blog/_id/edit.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- Finish handling of URL -->
+  <div>
+    <Header
+      title="Write your blog"
+      exitLink="/instructor/blogs">
+      <!-- TODO: Check if blog status is active -->
+      <template #actionMenu>
+        <div class="full-page-takeover-header-button">
+          <!-- TODO: Check blog validity before publishing -->
+          <Modal
+            openTitle="Publish"
+            openBtnClass="button is-success is-medium is-inverted is-outlined"
+            title="Review Details">
+            <div>
+              <div class="title">Once you publish blog you cannot change url to a blog.</div>
+              <!-- Check for error -->
+              <div>
+                <div class="subtitle">Current Url is:</div>
+                <article class="message is-success">
+                  <div class="message-body">
+                    <!-- Get here actual slug -->
+                    <strong>some-slug</strong>
+                  </div>
+                </article>
+              </div>
+              <!-- <article class="message is-danger">
+                <div class="message-body">
+                  Display error here
+                </div>
+              </article> -->
+            </div>
+          </Modal>
+        </div>
+      </template>
+      <!-- <template v-else #actionMenu>
+        <div class="full-page-takeover-header-button">
+          <Modal
+            openTitle="Unpublish"
+            openBtnClass="button is-success is-medium is-inverted is-outlined"
+            title="Unpublish Blog">
+            <div>
+              <div class="title">Unpublish blog so it's no longer displayed in blogs page</div>
+            </div>
+          </Modal>
+        </div>
+      </template> -->
+    </Header>
+    <div class="blog-editor-container">
+      <div class="container">
+        <editor/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Editor from '~/components/editor'
+import Header from '~/components/shared/Header'
+import Modal from '~/components/shared/Modal'
+export default {
+  layout: 'instructor',
+  components: {
+    Editor, Header, Modal
+  }
+}
+</script>

pages/instructor/blog/editor.vue

@@ -21,14 +21,13 @@ export default {
     Header, Editor
   },
   methods: {
-    saveBlog({content, title, subtitle}) {
-      debugger;
+    async saveBlog(blogData) {
+      const blog = await this.$store.dispatch('instructor/blog/createBlog', blogData)
+      this.$router.push(`/instructor/blog/${blog._id}/edit`)
     }
   }
 }
 </script>
 <style lang="scss">
-  .blog-editor-container {
-    padding-top: 60px;
-  }
+
 </style>

store/instructor/blog.js

@@ -0,0 +1,20 @@
+export const state = () => ({
+
+})
+
+export const actions = {
+  async createBlog(_, blogData) {
+    try {
+      console.log('instructor/blog.js actions createBlog call axios.$post->blogData')
+      const blog = await this.$axios.$post('/api/v1/blogs', blogData)
+      console.log('instructor/blog.js actions createBlog done axios.$post->blogData')
+      return blog
+    } catch (error) {
+      return error
+    }
+  }
+}
+
+export const mutations = {
+
+}