Browse Source

named slot + toasted + v-else 사용법

김보경 5 years ago
parent
commit
ded06571c7
3 changed files with 42 additions and 35 deletions
  1. 1 1
      components/editor/index.vue
  2. 12 5
      pages/instructor/blog/_id/edit.vue
  3. 29 29
      store/instructor/blog.js

+ 1 - 1
components/editor/index.vue

@@ -117,7 +117,7 @@ export default {
       const html = this.editor.getHTML()
       const title = this.getNodeValueByName('title')
       const subtitle = this.getNodeValueByName('subtitle')
-      return { html, title, subtitle}
+      return {content: html, title, subtitle}
     },
     getNodeValueByName(name) {
       const docContent = this.editor.state.doc.content

+ 12 - 5
pages/instructor/blog/_id/edit.vue

@@ -5,7 +5,7 @@
       title="Write your blog"
       exitLink="/instructor/blogs">
       <!-- TODO: Check if blog status is active -->
-      <template #actionMenu>
+      <template v-if="blog.status === 'active'" #actionMenu>
         <div class="full-page-takeover-header-button">
           <!-- TODO: Check blog validity before publishing -->
           <Modal
@@ -35,7 +35,7 @@
           </Modal>
         </div>
       </template>
-      <!-- <template v-else #actionMenu>
+      <template v-else #actionMenu>
         <div class="full-page-takeover-header-button">
           <Modal
             openTitle="Unpublish"
@@ -46,7 +46,7 @@
             </div>
           </Modal>
         </div>
-      </template> -->
+      </template>
     </Header>
     <div class="blog-editor-container">
       <div class="container">
@@ -111,9 +111,16 @@ export default {
         this.$toasted.error('Blog cannot be saved!', {duration: 2000})
       }
     },
-    publishBlog({closeModal}) {
+    async publishBlog({closeModal}) {
       const blogContent = this.editor.getContent()
-      debugger
+      blogContent.status = 'published'
+      try {
+        await this.$store.dispatch('instructor/blog/updateBlog', {data: blogContent, id: this.blog._id})
+        this.$toasted.success('Blog has been published!', {duration: 3000})
+        closeModal()
+      } catch (error) {
+        this.$toasted.error('Blog cannot be published!', {duration: 3000})
+      }
     },
     checkBlogValidity() {
       const title = this.editor.getNodeValueByName('title')

+ 29 - 29
store/instructor/blog.js

@@ -4,43 +4,43 @@ export const state = () => ({
 })
 
 export const actions = {
-  async createBlog(_, blogData) {
-    try {
-      commit('setIsSaving', true)
-      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')
+  async createBlog({commit}, blogData) {
+    commit('setIsSaving', true)
+    console.log('instructor/blog.js actions createBlog call axios.$post->blogData')
+    const blog = await this.$axios.$post('/api/v1/blogs', blogData)
+    if(blog.isAxiosError === true){
       commit('setIsSaving', false)
-      return blog
-    } catch (error) {
-      commit('setIsSaving', false)
-      return error
+      console.log(blog.data)
+      return Error('')
     }
+    console.log('instructor/blog.js actions createBlog done axios.$post->blogData')
+    commit('setIsSaving', false)
+    return blog
   },
   async fetchBlogById({commit}, blogId) {
-    try {
-      console.log('instructor/blog.js actions fetchBlogById call axios.$get->blogId')
-      const blog = await this.$axios.$get(`/api/v1/blogs/${blogId}`)
-      console.log('instructor/blog.js actions fetchBlogById done axios.$get->blogId')
-      console.log('courses.js mutations call setBlog')
-      commit('setBlog', blog)
-      console.log('courses.js mutations done setBlog')
-    } catch (error) {
-      return error
+    console.log('instructor/blog.js actions fetchBlogById call axios.$get->blogId')
+    const blog = await this.$axios.$get(`/api/v1/blogs/${blogId}`)
+    if(blog.isAxiosError === true){
+      console.log(blog.data)
+      return Error('')
     }
+    console.log('instructor/blog.js actions fetchBlogById done axios.$get->blogId')
+    console.log('courses.js mutations call setBlog')
+    commit('setBlog', blog)
+    console.log('courses.js mutations done setBlog')
   },
   async updateBlog({commit, state}, {data, id}) {
-    try {
-      console.log('instructor/blog.js actions updateBlog call axios.$patch-> Id, data')
-      const blog = await this.$axios.$patch(`/api/v1/blogs/${id}`, data)
-      console.log('instructor/blog.js actions updateBlog done axios.$patch-> Id, data')
-      console.log('courses.js mutations call setBlog')
-      commit('setBlog', blog)
-      console.log('courses.js mutations done setBlog')
-      return state.item
-    } catch (error) {
-      return error
+    console.log('instructor/blog.js actions updateBlog call axios.$patch-> Id, data')
+    const blog = await this.$axios.$patch(`/api/v1/blogs/${id}`, data)
+    if(blog.isAxiosError === true){
+      console.log(blog.data)
+      return Error('')
     }
+    console.log('instructor/blog.js actions updateBlog done axios.$patch-> Id, data')
+    console.log('courses.js mutations call setBlog')
+    commit('setBlog', blog)
+    console.log('courses.js mutations done setBlog')
+    return state.item
   }
 }