refactor: modal-create-page - vue component
This commit is contained in:
parent
25edd663de
commit
62e7ea5b2b
@ -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>
|
||||
|
@ -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) },
|
||||
|
Loading…
Reference in New Issue
Block a user