chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

chore: files view dynamic component

This commit is contained in:
Ramires Viana 2021-03-01 16:12:17 +00:00
parent 057307181e
commit 7b6579ac8a
7 changed files with 107 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/store/getters.js
View File

@ -2,8 +2,6 @@ const getters = {
isLogged: state => state.user !== null, isLogged: state => state.user !== null,
isFiles: state => !state.loading && state.route.name === 'Files', isFiles: state => !state.loading && state.route.name === 'Files',
isListing: (state, getters) => getters.isFiles && state.req.isDir, isListing: (state, getters) => getters.isFiles && state.req.isDir,
isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
isPreview: state => state.previewMode,
isSharing: state => !state.loading && state.route.name === 'Share', isSharing: state => !state.loading && state.route.name === 'Share',
selectedCount: state => state.selected.length, selectedCount: state => state.selected.length,
progress : state => { progress : state => {

3
frontend/src/store/index.js
View File

@ -24,9 +24,8 @@ const state = {
showShell: false, showShell: false,
showMessage: null, showMessage: null,
showConfirm: null, showConfirm: null,
previewMode: false,
hash: '', hash: '',
token: '', token: ''
} }
export default new Vuex.Store({ export default new Vuex.Store({

3
frontend/src/store/mutations.js
View File

@ -85,9 +85,6 @@ const mutations = {
state.clipboard.key = '' state.clipboard.key = ''
state.clipboard.items = [] state.clipboard.items = []
}, },
setPreviewMode(state, value) {
state.previewMode = value
},
setHash: (state, value) => (state.hash = value), setHash: (state, value) => (state.hash = value),
} }

29
frontend/src/views/Files.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<header-bar showMenu showLogo /> <header-bar v-if="error || !req.type" showMenu showLogo />
<div id="breadcrumbs" v-if="isListing || error"> <div id="breadcrumbs">
<router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')"> <router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
<i class="material-icons">home</i> <i class="material-icons">home</i>
</router-link> </router-link>
@ -14,9 +14,7 @@
</div> </div>
<errors v-if="error" :errorCode="errorCode" /> <errors v-if="error" :errorCode="errorCode" />
<preview v-else-if="isPreview"></preview> <component v-else-if="currentView" :is="currentView"></component>
<editor v-else-if="isEditor"></editor>
<listing v-else-if="isListing"></listing>
<div v-else> <div v-else>
<h2 class="message"> <h2 class="message">
<span>{{ $t('files.loading') }}</span> <span>{{ $t('files.loading') }}</span>
@ -27,7 +25,7 @@
<script> <script>
import { files as api } from '@/api' import { files as api } from '@/api'
import { mapGetters, mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import HeaderBar from '@/components/header/HeaderBar' import HeaderBar from '@/components/header/HeaderBar'
import Errors from '@/views/Errors' import Errors from '@/views/Errors'
@ -54,19 +52,24 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters([
'isListing',
'isEditor',
'isFiles'
]),
...mapState([ ...mapState([
'req', 'req',
'reload', 'reload',
'loading', 'loading',
'show' 'show'
]), ]),
isPreview () { currentView () {
return !this.loading && !this.isListing && !this.isEditor || this.loading && this.$store.state.previewMode 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'
}
}, },
breadcrumbs () { breadcrumbs () {
let parts = this.$route.path.split('/') let parts = this.$route.path.split('/')

2
frontend/src/views/files/Editor.vue
View File

@ -130,6 +130,8 @@ export default {
} }
}, },
close () { close () {
this.$store.commit('updateRequest', {})
let uri = url.removeLastDir(this.$route.path) + '/' let uri = url.removeLastDir(this.$route.path) + '/'
this.$router.push({ path: uri }) this.$router.push({ path: uri })
} }

161
frontend/src/views/files/Listing.vue
View File

@ -31,90 +31,97 @@
<action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" /> <action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" />
</div> </div>
<div v-if="(req.numDirs + req.numFiles) == 0"> <div v-if="$store.state.loading">
<h2 class="message"> <h2 class="message">
<i class="material-icons">sentiment_dissatisfied</i> <span>{{ $t('files.loading') }}</span>
<span>{{ $t('files.lonely') }}</span>
</h2> </h2>
<input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
<input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
</div> </div>
<div v-else id="listing" <template v-else>
:class="user.viewMode"> <div v-if="(req.numDirs + req.numFiles) == 0">
<div> <h2 class="message">
<div class="item header"> <i class="material-icons">sentiment_dissatisfied</i>
<div></div> <span>{{ $t('files.lonely') }}</span>
<div> </h2>
<p :class="{ active: nameSorted }" class="name" <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
role="button" <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
tabindex="0" </div>
@click="sort('name')" <div v-else id="listing"
:title="$t('files.sortByName')" :class="user.viewMode">
:aria-label="$t('files.sortByName')"> <div>
<span>{{ $t('files.name') }}</span> <div class="item header">
<i class="material-icons">{{ nameIcon }}</i> <div></div>
</p> <div>
<p :class="{ active: nameSorted }" class="name"
role="button"
tabindex="0"
@click="sort('name')"
:title="$t('files.sortByName')"
:aria-label="$t('files.sortByName')">
<span>{{ $t('files.name') }}</span>
<i class="material-icons">{{ nameIcon }}</i>
</p>
<p :class="{ active: sizeSorted }" class="size" <p :class="{ active: sizeSorted }" class="size"
role="button" role="button"
tabindex="0" tabindex="0"
@click="sort('size')" @click="sort('size')"
:title="$t('files.sortBySize')" :title="$t('files.sortBySize')"
:aria-label="$t('files.sortBySize')"> :aria-label="$t('files.sortBySize')">
<span>{{ $t('files.size') }}</span> <span>{{ $t('files.size') }}</span>
<i class="material-icons">{{ sizeIcon }}</i> <i class="material-icons">{{ sizeIcon }}</i>
</p> </p>
<p :class="{ active: modifiedSorted }" class="modified" <p :class="{ active: modifiedSorted }" class="modified"
role="button" role="button"
tabindex="0" tabindex="0"
@click="sort('modified')" @click="sort('modified')"
:title="$t('files.sortByLastModified')" :title="$t('files.sortByLastModified')"
:aria-label="$t('files.sortByLastModified')"> :aria-label="$t('files.sortByLastModified')">
<span>{{ $t('files.lastModified') }}</span> <span>{{ $t('files.lastModified') }}</span>
<i class="material-icons">{{ modifiedIcon }}</i> <i class="material-icons">{{ modifiedIcon }}</i>
</p> </p>
</div>
</div>
</div>
<h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
<div v-if="req.numDirs > 0">
<item v-for="(item) in dirs"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
<div v-if="req.numFiles > 0">
<item v-for="(item) in files"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
<input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
<div :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>{{ $t('files.multipleSelectionEnabled') }}</p>
<div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
<i class="material-icons">clear</i>
</div> </div>
</div> </div>
</div> </div>
</template>
<h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
<div v-if="req.numDirs > 0">
<item v-for="(item) in dirs"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
<div v-if="req.numFiles > 0">
<item v-for="(item) in files"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
</div>
<input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
<input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
<div :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>{{ $t('files.multipleSelectionEnabled') }}</p>
<div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
<i class="material-icons">clear</i>
</div>
</div>
</div>
</div> </div>
</template> </template>

13
frontend/src/views/files/Preview.vue
View File

@ -125,14 +125,12 @@ export default {
}, },
async mounted () { async mounted () {
window.addEventListener('keydown', this.key) window.addEventListener('keydown', this.key)
this.$store.commit('setPreviewMode', true)
this.listing = this.oldReq.items this.listing = this.oldReq.items
this.$root.$on('preview-deleted', this.deleted) this.$root.$on('preview-deleted', this.deleted)
this.updatePreview() this.updatePreview()
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('keydown', this.key) window.removeEventListener('keydown', this.key)
this.$store.commit('setPreviewMode', false)
this.$root.$off('preview-deleted', this.deleted) this.$root.$off('preview-deleted', this.deleted)
}, },
methods: { methods: {
@ -142,16 +140,11 @@ export default {
if (this.hasNext) { if (this.hasNext) {
this.next() this.next()
} else if (!this.hasPrevious && !this.hasNext) { } else if (!this.hasPrevious && !this.hasNext) {
this.back() this.close()
} else { } else {
this.prev() this.prev()
} }
}, },
back () {
this.$store.commit('setPreviewMode', false)
let uri = url.removeLastDir(this.$route.path) + '/'
this.$router.push({ path: uri })
},
prev () { prev () {
this.hoverNav = false this.hoverNav = false
this.$router.push({ path: this.previousLink }) this.$router.push({ path: this.previousLink })
@ -171,7 +164,7 @@ export default {
} else if (event.which === 37) { // left arrow } else if (event.which === 37) { // left arrow
if (this.hasPrevious) this.prev() if (this.hasPrevious) this.prev()
} else if (event.which === 27) { // esc } else if (event.which === 27) { // esc
this.back() this.close()
} }
}, },
async updatePreview () { async updatePreview () {
@ -239,6 +232,8 @@ export default {
}, 1500); }, 1500);
}, 500), }, 500),
close () { close () {
this.$store.commit('updateRequest', {})
let uri = url.removeLastDir(this.$route.path) + '/' let uri = url.removeLastDir(this.$route.path) + '/'
this.$router.push({ path: uri }) this.$router.push({ path: uri })
}, },