You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/client/js/components/modal-move-page.vue

84 lines
2.7 KiB

<template lang="pug">
.modal(v-bind:class='{ "is-active": isShown }')
.modal-background
.modal-container
.modal-content
header.is-indigo Move document
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='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
span.help.is-red(v-show='isInvalid') This document path is invalid or not allowed!
span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button.is-indigo(v-on:click='move') Move
</template>
<script>
export default {
name: 'modal-move-page',
props: ['currentPath'],
data () {
return {
movePath: '',
isLoading: false,
isInvalid: false
}
},
computed: {
isShown () {
if(this.$store.state.modalMovePage.shown) {
this.movePath = this.currentPath
this.makeSelection()
}
return this.$store.state.modalMovePage.shown
}
},
methods: {
makeSelection: function () {
let self = this;
self._.delay(() => {
let startPos = (self._.includes(self.currentPath, '/') ? self._.lastIndexOf(self.movePath, '/') + 1 : 0
self.$helpers.form.setInputSelection(self.$refs.movePageInput, startPos, self.movePath.length)
}, 100)
},
cancel: function () {
this.$store.dispatch('modalMovePage/close')
},
move: function () {
this.isInvalid = false
let newDocPath = this.$helpers.pages.makeSafePath(this.movePath)
if (this._.isEmpty(newDocPath) || newDocPath === this.currentPath || newDocPath === 'home') {) {
this.isInvalid = true
} else {
this.isLoading = true
this.$http.put(window.location.href, {
move: newDocPath
}).then(resp => {
return resp.json()
}).then(resp => {
if (resp.ok) {
window.location.assign('/' + newDocPath)
} else {
this.loading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: resp.msg
})
}
}).catch(err => {
this.loading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
})
})
}
}
}
}
</script>