wikijs-fork/client/js/components/modal-move-page.vue

87 lines
2.9 KiB
Vue

<template lang="pug">
transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-indigo {{ $t('modal.movepagetitle') }}
section
label.label {{ $t('modal.movepagepath') }}
p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
input.input(type='text', v-bind:placeholder='$t("modal.movepageplaceholder")', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
span.help.is-red(v-show='isInvalid') {{ $t('modal.movepageinvalid') }}
span.note {{ $t('modal.movepagewarning') }}
footer
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
a.button.is-indigo(v-on:click='move') {{ $t('modal.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>