refactor: modal-create-page - vue component

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

@@ -7,7 +7,7 @@
         section
           label.label Enter the new document path:
           p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
-            input.input(type='text', placeholder='page-name', v-model='entrypath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
+            input.input(type='text', placeholder='page-name', v-model='userPath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
             span.help.is-danger(v-show='isInvalid') This document path is invalid!
         footer
           a.button.is-grey.is-outlined(v-on:click='cancel') Discard
@@ -21,25 +21,25 @@
     data () {
       return {
         currentPath: '',
-        isLoading: false
+        userPath: '',
+        isLoading: false,
+        isInvalid: false
       }
     },
     computed: {
-      entrypath () { return this.$store.state.modalCreatePage.entrypath }
       isShown () {
         if(this.$store.state.modalCreatePage.shown) {
           this.makeSelection()
         }
         return this.$store.state.modalCreatePage.shown
       }
-      isInvalid () { return this.$store.state.modalCreatePage.invalid }
     },
     methods: {
       makeSelection: function () {
         let self = this;
         self._.delay(() => {
           let startPos = (self.currentPath.length > 0) ? self.currentPath.length + 1 : 0
-          self.$helpers.form.setInputSelection(self.$refs.createPageInput, startPos, self.entrypath.length)
+          self.$helpers.form.setInputSelection(self.$refs.createPageInput, startPos, self.userPath.length)
         }, 100)
       },
       cancel: function () {
@@ -47,9 +47,9 @@
       },
       create: function () {
         this.isInvalid = false
-        let newDocPath = this.$helpers.pages.makeSafePath(this.entrypath)
+        let newDocPath = this.$helpers.pages.makeSafePath(this.userPath)
         if (this._.isEmpty(newDocPath)) {
-          this.$store.createPage.commit('')
+          this.isInvalid = true
         } else {
           this.isLoading = true
           window.location.assign('/create/' + newDocPath)
@@ -58,8 +58,7 @@
     },
     mounted () {
       this.currentPath = (this.basepath === 'home') ? '' : this.basepath
-      let newPage = (this._.isEmpty(this.currentPath)) ? 'new-page' : this.currentPath + '/new-page'
-      this.$store.commit('modalCreatePage/pathChange', newPage)
+      this.userPath = (this._.isEmpty(this.currentPath)) ? 'new-page' : this.currentPath + '/new-page'
     }
   }
 </script>

client/js/store/modules/modal-create-page.js

@@ -3,14 +3,11 @@
 export default {
   namespaced: true,
   state: {
-    entrypath: '',
-    shown: false,
-    invalid: false
+    shown: false
   },
   getters: {},
   mutations: {
-    shownChange: (state, shownState) => { state.shown = shownState },
-    pathChange: (state, newpath) => { state.entrypath = newpath }
+    shownChange: (state, shownState) => { state.shown = shownState }
   },
   actions: {
     open({ commit }) { commit('shownChange', true) },