2018-02-01 12:17:04 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2021-03-01 16:12:17 +00:00
|
|
|
<header-bar v-if="error || !req.type" showMenu showLogo />
|
2021-02-25 18:37:07 +00:00
|
|
|
|
2021-03-01 16:12:17 +00:00
|
|
|
<div id="breadcrumbs">
|
2018-02-01 12:17:04 +00:00
|
|
|
<router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
|
|
|
|
<i class="material-icons">home</i>
|
|
|
|
</router-link>
|
|
|
|
|
2018-06-27 07:48:16 +00:00
|
|
|
<span v-for="(link, index) in breadcrumbs" :key="index">
|
2018-02-01 12:17:04 +00:00
|
|
|
<span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
|
|
|
|
<router-link :to="link.url">{{ link.name }}</router-link>
|
|
|
|
</span>
|
|
|
|
</div>
|
2020-07-14 01:18:53 +00:00
|
|
|
|
2021-02-25 18:37:07 +00:00
|
|
|
<errors v-if="error" :errorCode="errorCode" />
|
2021-03-01 16:12:17 +00:00
|
|
|
<component v-else-if="currentView" :is="currentView"></component>
|
2018-02-01 12:17:04 +00:00
|
|
|
<div v-else>
|
|
|
|
<h2 class="message">
|
|
|
|
<span>{{ $t('files.loading') }}</span>
|
|
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-01-05 16:12:09 +00:00
|
|
|
import { files as api } from '@/api'
|
2021-03-01 16:12:17 +00:00
|
|
|
import { mapState, mapMutations } from 'vuex'
|
2021-02-25 18:37:07 +00:00
|
|
|
|
|
|
|
import HeaderBar from '@/components/header/HeaderBar'
|
|
|
|
import Errors from '@/views/Errors'
|
2021-02-26 15:10:21 +00:00
|
|
|
import Preview from '@/views/files/Preview'
|
|
|
|
import Listing from '@/views/files/Listing'
|
2018-02-01 12:17:04 +00:00
|
|
|
|
2019-01-05 16:12:09 +00:00
|
|
|
function clean (path) {
|
|
|
|
return path.endsWith('/') ? path.slice(0, -1) : path
|
|
|
|
}
|
|
|
|
|
2018-02-01 12:17:04 +00:00
|
|
|
export default {
|
|
|
|
name: 'files',
|
|
|
|
components: {
|
2021-02-25 18:37:07 +00:00
|
|
|
HeaderBar,
|
|
|
|
Errors,
|
2018-02-01 12:17:04 +00:00
|
|
|
Preview,
|
|
|
|
Listing,
|
2021-02-26 15:10:21 +00:00
|
|
|
Editor: () => import('@/views/files/Editor'),
|
2021-02-25 18:37:07 +00:00
|
|
|
},
|
|
|
|
data: function () {
|
|
|
|
return {
|
|
|
|
error: null,
|
|
|
|
width: window.innerWidth
|
|
|
|
}
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState([
|
|
|
|
'req',
|
|
|
|
'reload',
|
2020-07-04 14:19:03 +00:00
|
|
|
'loading',
|
|
|
|
'show'
|
2018-02-01 12:17:04 +00:00
|
|
|
]),
|
2021-03-01 16:12:17 +00:00
|
|
|
currentView () {
|
|
|
|
if (this.req.type == undefined) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.req.isDir) {
|
|
|
|
return 'listing'
|
|
|
|
} else if(this.req.type === 'text' || this.req.type === 'textImmutable') {
|
|
|
|
return 'editor'
|
|
|
|
} else {
|
|
|
|
return 'preview'
|
|
|
|
}
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
|
|
|
breadcrumbs () {
|
|
|
|
let parts = this.$route.path.split('/')
|
|
|
|
|
|
|
|
if (parts[0] === '') {
|
|
|
|
parts.shift()
|
|
|
|
}
|
|
|
|
|
|
|
|
if (parts[parts.length - 1] === '') {
|
|
|
|
parts.pop()
|
|
|
|
}
|
|
|
|
|
|
|
|
let breadcrumbs = []
|
|
|
|
|
|
|
|
for (let i = 0; i < parts.length; i++) {
|
|
|
|
if (i === 0) {
|
|
|
|
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/' + parts[i] + '/' })
|
|
|
|
} else {
|
|
|
|
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: breadcrumbs[i - 1].url + parts[i] + '/' })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
breadcrumbs.shift()
|
|
|
|
|
|
|
|
if (breadcrumbs.length > 3) {
|
|
|
|
while (breadcrumbs.length !== 4) {
|
|
|
|
breadcrumbs.shift()
|
|
|
|
}
|
|
|
|
|
|
|
|
breadcrumbs[0].name = '...'
|
|
|
|
}
|
|
|
|
|
|
|
|
return breadcrumbs
|
2021-02-25 18:37:07 +00:00
|
|
|
},
|
|
|
|
errorCode() {
|
|
|
|
return (this.error.message === '404' || this.error.message === '403') ? parseInt(this.error.message) : 500
|
2021-02-26 15:10:21 +00:00
|
|
|
}
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.fetchData()
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
'$route': 'fetchData',
|
2021-01-11 23:00:40 +00:00
|
|
|
'reload': function (value) {
|
|
|
|
if (value === true) {
|
|
|
|
this.fetchData()
|
|
|
|
}
|
2018-02-01 12:17:04 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
window.addEventListener('keydown', this.keyEvent)
|
|
|
|
},
|
|
|
|
beforeDestroy () {
|
|
|
|
window.removeEventListener('keydown', this.keyEvent)
|
|
|
|
},
|
|
|
|
destroyed () {
|
2021-02-25 18:37:07 +00:00
|
|
|
if (this.$store.state.showShell) {
|
|
|
|
this.$store.commit('toggleShell')
|
|
|
|
}
|
2018-02-01 12:17:04 +00:00
|
|
|
this.$store.commit('updateRequest', {})
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapMutations([ 'setLoading' ]),
|
2019-01-05 16:12:09 +00:00
|
|
|
async fetchData () {
|
2018-02-01 12:17:04 +00:00
|
|
|
// Reset view information.
|
|
|
|
this.$store.commit('setReload', false)
|
|
|
|
this.$store.commit('resetSelected')
|
|
|
|
this.$store.commit('multiple', false)
|
|
|
|
this.$store.commit('closeHovers')
|
|
|
|
|
|
|
|
// Set loading to true and reset the error.
|
|
|
|
this.setLoading(true)
|
|
|
|
this.error = null
|
|
|
|
|
|
|
|
let url = this.$route.path
|
|
|
|
if (url === '') url = '/'
|
|
|
|
if (url[0] !== '/') url = '/' + url
|
|
|
|
|
2019-01-05 16:12:09 +00:00
|
|
|
try {
|
|
|
|
const res = await api.fetch(url)
|
2018-02-01 12:17:04 +00:00
|
|
|
|
2019-01-05 16:12:09 +00:00
|
|
|
if (clean(res.path) !== clean(`/${this.$route.params.pathMatch}`)) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$store.commit('updateRequest', res)
|
|
|
|
document.title = res.name
|
|
|
|
} catch (e) {
|
|
|
|
this.error = e
|
|
|
|
} finally {
|
|
|
|
this.setLoading(false)
|
|
|
|
}
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
|
|
|
keyEvent (event) {
|
2020-07-04 14:19:03 +00:00
|
|
|
if (this.show !== null) {
|
|
|
|
// Esc!
|
|
|
|
if (event.keyCode === 27) {
|
|
|
|
this.$store.commit('closeHovers')
|
|
|
|
}
|
2018-02-01 12:17:04 +00:00
|
|
|
|
2020-07-04 14:19:03 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2018-02-01 12:17:04 +00:00
|
|
|
// F1!
|
|
|
|
if (event.keyCode === 112) {
|
|
|
|
event.preventDefault()
|
|
|
|
this.$store.commit('showHover', 'help')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|