liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: modal-create-page - vue component

Browse Source
This commit is contained in:
NGPixel 2017-05-26 18:30:40 -04:00
parent 25edd663de
commit 62e7ea5b2b
2 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/js/components/modal-create-page.vue
View File

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

7
client/js/store/modules/modal-create-page.js
View File

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