edit.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <!-- Finish handling of URL -->
  3. <div>
  4. <Header
  5. title="Write your blog"
  6. exitLink="/instructor/blogs">
  7. <!-- TODO: Check if blog status is active -->
  8. <template #actionMenu>
  9. <div class="full-page-takeover-header-button">
  10. <!-- TODO: Check blog validity before publishing -->
  11. <Modal
  12. openTitle="Publish"
  13. openBtnClass="button is-success is-medium is-inverted is-outlined"
  14. title="Review Details">
  15. <div>
  16. <div class="title">Once you publish blog you cannot change url to a blog.</div>
  17. <!-- Check for error -->
  18. <div>
  19. <div class="subtitle">Current Url is:</div>
  20. <article class="message is-success">
  21. <div class="message-body">
  22. <!-- Get here actual slug -->
  23. <strong>some-slug</strong>
  24. </div>
  25. </article>
  26. </div>
  27. <!-- <article class="message is-danger">
  28. <div class="message-body">
  29. Display error here
  30. </div>
  31. </article> -->
  32. </div>
  33. </Modal>
  34. </div>
  35. </template>
  36. <!-- <template v-else #actionMenu>
  37. <div class="full-page-takeover-header-button">
  38. <Modal
  39. openTitle="Unpublish"
  40. openBtnClass="button is-success is-medium is-inverted is-outlined"
  41. title="Unpublish Blog">
  42. <div>
  43. <div class="title">Unpublish blog so it's no longer displayed in blogs page</div>
  44. </div>
  45. </Modal>
  46. </div>
  47. </template> -->
  48. </Header>
  49. <div class="blog-editor-container">
  50. <div class="container">
  51. <editor
  52. @editorMounted="initBlogContent"
  53. @editorUpdated="updateBlog"
  54. />
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. import Editor from '~/components/editor'
  61. import Header from '~/components/shared/Header'
  62. import Modal from '~/components/shared/Modal'
  63. import { mapState } from "vuex";
  64. export default {
  65. layout: 'instructor',
  66. components: {
  67. Editor, Header, Modal
  68. },
  69. computed : {
  70. ...mapState({
  71. blog: ({instructor}) => instructor.blog.item
  72. })
  73. },
  74. async fetch({params, store}){
  75. await store.dispatch('instructor/blog/fetchBlogById', params.id)
  76. },
  77. methods: {
  78. // initBlogContent(editor) {
  79. // if (this.blog && this.blog.content) {
  80. // editor.setContent(this.blog.content)
  81. // }
  82. // }
  83. initBlogContent(initContent) {
  84. debugger
  85. if (this.blog && this.blog.content) {
  86. initContent(this.blog.content)
  87. }
  88. },
  89. async updateBlog(blogData) {
  90. try{
  91. await this.$store.dispatch('instructor/blog/updateBlog', {data: blogData, id: this.blog._id})
  92. this.$toasted.success('Blog Updated!', {duration: 2000})
  93. }catch(error){
  94. this.$toasted.error('Blog cannot be saved!', {duration: 2000})
  95. }
  96. }
  97. }
  98. }
  99. </script>