chore: files pages logic responsability
This commit is contained in:
Ramires Viana
parent
95811e99bc
commit
e503cb69f2
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-bar showMenu showLogo>
|
||||
<search /> <title />
|
||||
<action class="search-button" icon="search" :label="$t('buttons.search')" @action="openSearch()" />
|
||||
|
||||
<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>
|
||||
|
|
@ -83,26 +115,67 @@
|
|||
</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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
Loading…
Reference in New Issue