refactor: vuex re-org + modal-create-page

client/js/components/modal-create-page.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-  .modal(v-if='isShown')
+  .modal(v-bind:class='{ "is-active": isShown }')
     .modal-background
     .modal-container
       .modal-content
         header.is-light-blue Create New Document
         section
           label.label Enter the new document path:
-          p.control.is-fullwidth(v-class='{ "is-loading": isLoading }')
+          p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
             input.input(type='text', placeholder='page-name', v-model='entrypath', autofocus)
             span.help.is-danger(v-show='isInvalid') This document path is invalid!
         footer
@@ -15,30 +15,29 @@
 </template>
 
 <script>
-  import { isEmpty } from 'lodash'
-  // import { makeSafePath } from '../helpers/pages'
   import { mapState } from 'vuex'
 
   export default {
-    name: 'modal-create',
+    name: 'modal-create-page',
+    props: ['basepath'],
     data () {
       return {
         isLoading: false
       }
     },
-    computed: mapState('createPage', {
-      entrypath: '',
-      isShown: 'shown',
-      isInvalid: 'invalid'
-    }),
+    computed: {
+      entrypath () { return this.$store.state.modalCreatePage.entrypath }
+      isShown () { return this.$store.state.modalCreatePage.shown }
+      isInvalid () { return this.$store.state.modalCreatePage.invalid }
+    },
     methods: {
       cancel: function () {
-        this.$store.dispatch('createPageClose')
+        this.$store.dispatch('modalCreatePage/close')
       },
       create: function () {
         this.isInvalid = false
-        let newDocPath = makeSafePath(this.entrypath)
-        if (isEmpty(newDocPath)) {
+        let newDocPath = this.helpers.pages.makeSafePath(this.entrypath)
+        if (this._.isEmpty(newDocPath)) {
           this.$store.createPage.commit('')
         } else {
           this.isLoading = true
@@ -47,7 +46,7 @@
       }
     },
     mounted () {
-      // this.entrypath = currentBasePath + '/new-page'
+      this.$store.commit('modalCreatePage/pathChange', this.basepath + '/new-page')
     }
   }
 </script>