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

chore: files pages logic responsability

This commit is contained in:
Ramires Viana 2021-02-26 15:10:21 +00:00
parent 95811e99bc
commit e503cb69f2
4 changed files with 216 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,6 @@
<template>
<div>
<header-bar showMenu showLogo>
<search /> <title />
<action class="search-button" icon="search" :label="$t('buttons.search')" @action="openSearch()" />
<template #actions v-if="!error">
<template v-if="!isMobile">
<share-button v-if="headerButtons.share" />
<rename-button v-if="headerButtons.rename" />
<copy-button v-if="headerButtons.copy" />
<move-button v-if="headerButtons.move" />
<delete-button v-if="headerButtons.delete" />
</template>
<shell-button v-if="headerButtons.shell" />
<switch-button />
<download-button v-if="headerButtons.download" />
<upload-button v-if="headerButtons.upload" />
<info-button />
<action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
</template>
</header-bar>
<div id="file-selection" v-if="isMobile">
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
<share-button v-if="headerButtons.share" />
<rename-button v-if="headerButtons.rename" />
<copy-button v-if="headerButtons.copy" />
<move-button v-if="headerButtons.move" />
<delete-button v-if="headerButtons.delete" />
</div>
<header-bar showMenu showLogo />
<div id="breadcrumbs" v-if="isListing || error">
<router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
@ -45,7 +16,7 @@
<errors v-if="error" :errorCode="errorCode" />
<preview v-else-if="isPreview"></preview>
<editor v-else-if="isEditor"></editor>
<listing :class="{ multiple }" v-else-if="isListing"></listing>
<listing v-else-if="isListing"></listing>
<div v-else>
<h2 class="message">
<span>{{ $t('files.loading') }}</span>
@ -57,25 +28,11 @@
<script>
import { files as api } from '@/api'
import { mapGetters, mapState, mapMutations } from 'vuex'
import { enableExec } from '@/utils/constants'
import HeaderBar from '@/components/header/HeaderBar'
import Action from '@/components/header/Action'
import Search from '@/components/Search'
import InfoButton from '@/components/buttons/Info'
import DeleteButton from '@/components/buttons/Delete'
import RenameButton from '@/components/buttons/Rename'
import UploadButton from '@/components/buttons/Upload'
import DownloadButton from '@/components/buttons/Download'
import SwitchButton from '@/components/buttons/SwitchView'
import MoveButton from '@/components/buttons/Move'
import CopyButton from '@/components/buttons/Copy'
import ShareButton from '@/components/buttons/Share'
import ShellButton from '@/components/buttons/Shell'
import Errors from '@/views/Errors'
import Preview from '@/components/files/Preview'
import Listing from '@/components/files/Listing'
import Preview from '@/views/files/Preview'
import Listing from '@/views/files/Listing'
function clean (path) {
return path.endsWith('/') ? path.slice(0, -1) : path
@ -85,22 +42,10 @@ export default {
name: 'files',
components: {
HeaderBar,
Action,
Search,
InfoButton,
DeleteButton,
ShareButton,
RenameButton,
DownloadButton,
CopyButton,
UploadButton,
SwitchButton,
MoveButton,
ShellButton,
Errors,
Preview,
Listing,
Editor: () => import('@/components/files/Editor'),
Editor: () => import('@/views/files/Editor'),
},
data: function () {
return {
@ -110,16 +55,13 @@ export default {
},
computed: {
...mapGetters([
'selectedCount',
'isListing',
'isEditor',
'isFiles'
]),
...mapState([
'req',
'user',
'reload',
'multiple',
'loading',
'show'
]),
@ -159,24 +101,9 @@ export default {
return breadcrumbs
},
headerButtons() {
return {
upload: this.user.perm.create,
download: this.user.perm.download,
shell: this.user.perm.execute && enableExec,
delete: this.selectedCount > 0 && this.user.perm.delete,
rename: this.selectedCount === 1 && this.user.perm.rename,
share: this.selectedCount === 1 && this.user.perm.share,
move: this.selectedCount === 1 && this.user.perm.rename,
copy: this.selectedCount === 1 && this.user.perm.create,
}
},
errorCode() {
return (this.error.message === '404' || this.error.message === '403') ? parseInt(this.error.message) : 500
},
isMobile () {
return this.width <= 736
},
}
},
created () {
this.fetchData()
@ -191,13 +118,9 @@ export default {
},
mounted () {
window.addEventListener('keydown', this.keyEvent)
window.addEventListener('scroll', this.scroll)
window.addEventListener('resize', this.windowsResize)
},
beforeDestroy () {
window.removeEventListener('keydown', this.keyEvent)
window.removeEventListener('scroll', this.scroll)
window.removeEventListener('resize', this.windowsResize)
},
destroyed () {
if (this.$store.state.showShell) {
@ -247,78 +170,11 @@ export default {
return
}
// Esc!
if (event.keyCode === 27) {
// If we're on a listing, unselect all
// files and folders.
if (this.isListing) {
this.$store.commit('resetSelected')
}
}
// Del!
if (event.keyCode === 46) {
if (this.isEditor ||
!this.isFiles ||
this.loading ||
!this.user.perm.delete ||
(this.isListing && this.selectedCount === 0) ||
this.$store.state.show != null) return
this.$store.commit('showHover', 'delete')
}
// F1!
if (event.keyCode === 112) {
event.preventDefault()
this.$store.commit('showHover', 'help')
}
// F2!
if (event.keyCode === 113) {
if (this.isEditor ||
!this.isFiles ||
this.loading ||
!this.user.perm.rename ||
(this.isListing && this.selectedCount === 0) ||
(this.isListing && this.selectedCount > 1)) return
this.$store.commit('showHover', 'rename')
}
// CTRL + S
if (event.ctrlKey || event.metaKey) {
if (this.isEditor) return
if (String.fromCharCode(event.which).toLowerCase() === 's') {
event.preventDefault()
if (this.req.kind !== 'editor') {
document.getElementById('download-button').click()
}
}
}
},
scroll () {
if (this.req.kind !== 'listing' || this.$store.state.user.viewMode === 'mosaic') return
let top = 112 - window.scrollY
if (top < 64) {
top = 64
}
document.querySelector('#listing.list .item.header').style.top = top + 'px'
},
openSearch () {
this.$store.commit('showHover', 'search')
},
toggleMultipleSelection () {
this.$store.commit('multiple', !this.multiple)
this.$store.commit('closeHovers')
},
windowsResize () {
this.width = window.innerWidth
}
}
}

0
frontend/src/components/files/Editor.vue → frontend/src/views/files/Editor.vue
View File

290
frontend/src/components/files/Listing.vue → frontend/src/views/files/Listing.vue
View File

@ -1,108 +1,181 @@
<template>
<div v-if="(req.numDirs + req.numFiles) == 0">
<h2 class="message">
<i class="material-icons">sentiment_dissatisfied</i>
<span>{{ $t('files.lonely') }}</span>
</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 v-else id="listing"
:class="user.viewMode">
<div>
<div class="item header">
<div></div>
<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>
<div>
<header-bar showMenu showLogo>
<search /> <title />
<action class="search-button" icon="search" :label="$t('buttons.search')" @action="openSearch()" />
<p :class="{ active: sizeSorted }" class="size"
role="button"
tabindex="0"
@click="sort('size')"
:title="$t('files.sortBySize')"
:aria-label="$t('files.sortBySize')">
<span>{{ $t('files.size') }}</span>
<i class="material-icons">{{ sizeIcon }}</i>
</p>
<p :class="{ active: modifiedSorted }" class="modified"
role="button"
tabindex="0"
@click="sort('modified')"
:title="$t('files.sortByLastModified')"
:aria-label="$t('files.sortByLastModified')">
<span>{{ $t('files.lastModified') }}</span>
<i class="material-icons">{{ modifiedIcon }}</i>
</p>
<template #actions>
<template v-if="!isMobile">
<share-button v-if="headerButtons.share" />
<rename-button v-if="headerButtons.rename" />
<copy-button v-if="headerButtons.copy" />
<move-button v-if="headerButtons.move" />
<delete-button v-if="headerButtons.delete" />
</template>
<shell-button v-if="headerButtons.shell" />
<switch-button />
<download-button v-if="headerButtons.download" />
<upload-button v-if="headerButtons.upload" />
<info-button />
<action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
</template>
</header-bar>
<div v-if="isMobile" id="file-selection">
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
<share-button v-if="headerButtons.share" />
<rename-button v-if="headerButtons.rename" />
<copy-button v-if="headerButtons.copy" />
<move-button v-if="headerButtons.move" />
<delete-button v-if="headerButtons.delete" />
</div>
<div v-if="(req.numDirs + req.numFiles) == 0">
<h2 class="message">
<i class="material-icons">sentiment_dissatisfied</i>
<span>{{ $t('files.lonely') }}</span>
</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 v-else id="listing"
:class="user.viewMode">
<div>
<div class="item header">
<div></div>
<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"
role="button"
tabindex="0"
@click="sort('size')"
:title="$t('files.sortBySize')"
:aria-label="$t('files.sortBySize')">
<span>{{ $t('files.size') }}</span>
<i class="material-icons">{{ sizeIcon }}</i>
</p>
<p :class="{ active: modifiedSorted }" class="modified"
role="button"
tabindex="0"
@click="sort('modified')"
:title="$t('files.sortByLastModified')"
:aria-label="$t('files.sortByLastModified')">
<span>{{ $t('files.lastModified') }}</span>
<i class="material-icons">{{ modifiedIcon }}</i>
</p>
</div>
</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.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>
<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>
<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 :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>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import Item from './ListingItem'
import css from '@/utils/css'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { users, files as api } from '@/api'
import { enableExec } from '@/utils/constants'
import * as upload from '@/utils/upload'
import css from '@/utils/css'
import HeaderBar from '@/components/header/HeaderBar'
import Action from '@/components/header/Action'
import Search from '@/components/Search'
import InfoButton from '@/components/buttons/Info'
import DeleteButton from '@/components/buttons/Delete'
import RenameButton from '@/components/buttons/Rename'
import UploadButton from '@/components/buttons/Upload'
import DownloadButton from '@/components/buttons/Download'
import SwitchButton from '@/components/buttons/SwitchView'
import MoveButton from '@/components/buttons/Move'
import CopyButton from '@/components/buttons/Copy'
import ShareButton from '@/components/buttons/Share'
import ShellButton from '@/components/buttons/Shell'
import Item from '@/components/files/ListingItem'
export default {
name: 'listing',
components: { Item },
components: {
HeaderBar,
Action,
Search,
InfoButton,
DeleteButton,
ShareButton,
RenameButton,
DownloadButton,
CopyButton,
UploadButton,
SwitchButton,
MoveButton,
ShellButton,
Item
},
data: function () {
return {
showLimit: 50,
dragCounter: 0
dragCounter: 0,
width: window.innerWidth
}
},
computed: {
...mapState(['req', 'selected', 'user', 'show']),
...mapState([
'req',
'selected',
'user',
'show',
'multiple'
]),
...mapGetters([
'selectedCount'
]),
nameSorted () {
return (this.req.sorting.by === 'name')
},
@ -159,6 +232,21 @@ export default {
}
return 'arrow_upward'
},
headerButtons() {
return {
upload: this.user.perm.create,
download: this.user.perm.download,
shell: this.user.perm.execute && enableExec,
delete: this.selectedCount > 0 && this.user.perm.delete,
rename: this.selectedCount === 1 && this.user.perm.rename,
share: this.selectedCount === 1 && this.user.perm.share,
move: this.selectedCount === 1 && this.user.perm.rename,
copy: this.selectedCount === 1 && this.user.perm.create,
}
},
isMobile () {
return this.width <= 736
}
},
mounted: function () {
@ -169,6 +257,7 @@ export default {
window.addEventListener('keydown', this.keyEvent)
window.addEventListener('resize', this.resizeEvent)
window.addEventListener('scroll', this.scrollEvent)
window.addEventListener('resize', this.windowsResize)
document.addEventListener('dragover', this.preventDefault)
document.addEventListener('dragenter', this.dragEnter)
document.addEventListener('dragleave', this.dragLeave)
@ -179,6 +268,7 @@ export default {
window.removeEventListener('keydown', this.keyEvent)
window.removeEventListener('resize', this.resizeEvent)
window.removeEventListener('scroll', this.scrollEvent)
window.removeEventListener('resize', this.windowsResize)
document.removeEventListener('dragover', this.preventDefault)
document.removeEventListener('dragenter', this.dragEnter)
document.removeEventListener('dragleave', this.dragLeave)
@ -190,10 +280,34 @@ export default {
return window.btoa(unescape(encodeURIComponent(name)))
},
keyEvent (event) {
// No prompts are shown
if (this.show !== null) {
return
}
// Esc!
if (event.keyCode === 27) {
// Reset files selection.
this.$store.commit('resetSelected')
}
// Del!
if (event.keyCode === 46) {
if (!this.user.perm.delete || this.selectedCount == 0) return
// Show delete prompt.
this.$store.commit('showHover', 'delete')
}
// F2!
if (event.keyCode === 113) {
if (!this.user.perm.rename || this.selectedCount !== 1) return
// Show rename prompt.
this.$store.commit('showHover', 'rename')
}
// Ctrl is pressed
if (!event.ctrlKey && !event.metaKey) {
return
}
@ -207,7 +321,7 @@ export default {
break
case 'c':
case 'x':
this.copyCut(event, key)
this.copyCut(event, key)
break
case 'v':
this.paste(event)
@ -225,6 +339,10 @@ export default {
}
}
break
case 's':
event.preventDefault()
document.getElementById('download-button').click()
break
}
},
preventDefault (event) {
@ -458,6 +576,16 @@ export default {
}
this.$store.commit('setReload', true)
},
openSearch () {
this.$store.commit('showHover', 'search')
},
toggleMultipleSelection () {
this.$store.commit('multiple', !this.multiple)
this.$store.commit('closeHovers')
},
windowsResize () {
this.width = window.innerWidth
}
}
}

2
frontend/src/components/files/Preview.vue → frontend/src/views/files/Preview.vue
View File

@ -66,7 +66,7 @@ import InfoButton from '@/components/buttons/Info'
import DeleteButton from '@/components/buttons/Delete'
import RenameButton from '@/components/buttons/Rename'
import DownloadButton from '@/components/buttons/Download'
import ExtendedImage from './ExtendedImage'
import ExtendedImage from '@/components/files/ExtendedImage'
const mediaTypes = [
"image",