filebrowser/_assets/src/components/MovePrompt.vue

152 lines
3.6 KiB
Vue

<template>
<div class="prompt">
<h3>Move</h3>
<p>Choose new house for your file(s)/folder(s):</p>
<ul class="file-list">
<li @click="select" @dblclick="next" :key="item.name" v-for="item in items" :data-url="item.url">{{ item.name }}</li>
</ul>
<p>Currently navigating on: <code>{{ current }}</code>.</p>
<div>
<button class="ok" @click="move">Move</button>
<button class="cancel" @click="cancel">Cancel</button>
</div>
</div>
</template>
<script>
import page from '../page'
import webdav from '../webdav'
var $ = window.info
export default {
name: 'move-prompt',
data: function () {
return {
items: [],
current: window.location.pathname
}
},
mounted: function () {
if (window.location.pathname !== $.baseURL + '/') {
this.items.push({
name: '..',
url: page.removeLastDir(window.location.pathname) + '/'
})
}
if ($.req.kind === 'listing') {
for (let item of $.req.data.items) {
if (!item.isDir) continue
this.items.push({
name: item.name,
url: item.url
})
}
return
}
},
methods: {
cancel: function (event) {
this.$store.commit('showMove', false)
},
move: function (event) {
event.preventDefault()
let el = event.currentTarget
let promises = []
let dest = this.current
// buttons.setLoading('move')
let selected = el.querySelector('li[aria-selected=true]')
if (selected !== null) {
dest = selected.dataset.url
}
for (let item of $.selected) {
let from = $.req.data.items[item].url
let to = dest + '/' + $.req.data.items[item].name
to = to.replace('//', '/')
promises.push(webdav.move(from, to))
}
this.$store.commit('showMove', false)
Promise.all(promises)
.then(() => {
// buttons.setDone('move')
page.open(dest)
})
.catch(e => {
// buttons.setDone('move', false)
console.log(e)
})
},
next: function (event) {
let url = event.currentTarget.dataset.url
this.json(url)
.then((data) => {
this.current = url
this.items = []
if (url !== $.baseURL + '/') {
this.items.push({
name: '..',
url: page.removeLastDir(url) + '/'
})
}
let req = JSON.parse(data)
for (let item of req.data.items) {
if (!item.isDir) continue
this.items.push({
name: item.name,
url: item.url
})
}
})
.catch(e => console.log(e))
},
json: function (url) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.open('GET', url)
request.setRequestHeader('Accept', 'application/json')
request.onload = () => {
if (request.status === 200) {
resolve(request.responseText)
} else {
reject(request.statusText)
}
}
request.onerror = () => reject(request.statusText)
request.send()
})
},
select: function (event) {
let el = event.currentTarget
if (el.getAttribute('aria-selected') === 'true') {
el.setAttribute('aria-selected', false)
return
}
let el2 = this.$el.querySelector('li[aria-selected=true]')
if (el2) {
el2.setAttribute('aria-selected', false)
}
el.setAttribute('aria-selected', true)
return
}
}
}
</script>