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

using existing store state and component

Browse Source
This commit is contained in:
Weidi Deng 2020-12-23 15:04:44 +08:00
parent 57e11a5162
commit 5087c6c579
13 changed files with 104 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/api/files.js
View File

@ -58,8 +58,7 @@ export async function put (url, content = '') {
}
export function download (format, ...files) {
const isSharing = store.getters['isSharing']
let url = isSharing ? `${baseURL}/api/public/dl/${store.state.shared.hash}` : `${baseURL}/api/raw`
let url = store.getters['isSharing'] ? `${baseURL}/api/public/dl/${store.state.hash}` : `${baseURL}/api/raw`
if (files.length === 1) {
url += removePrefix(files[0]) + '?'
@ -79,9 +78,7 @@ export function download (format, ...files) {
url += `algo=${format}&`
}
if (!isSharing) {
url += `auth=${store.state.jwt}`
}
url += `auth=${store.state.jwt}`
window.open(url)
}

2
frontend/src/api/utils.js
View File

@ -37,7 +37,7 @@ export function removePrefix (url) {
if (url.startsWith('/files')) {
url = url.slice(6)
} else if (store.getters['isSharing']) {
url = url.slice(7 + store.state.shared.hash.length)
url = url.slice(7 + store.state.hash.length)
}
if (url === '') url = '/'

33
frontend/src/components/Header.vue
View File

@ -8,8 +8,8 @@
<search v-if="isLogged"></search>
</div>
<div>
<template v-if="isLogged">
<button @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
<template v-if="isLogged || isSharing">
<button v-show="!isSharing" @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
<i class="material-icons">search</i>
</button>
@ -18,7 +18,7 @@
</button>
<!-- Menu that shows on listing AND mobile when there are files selected -->
<div id="file-selection" v-if="isMobile && isListing">
<div id="file-selection" v-if="isMobile && isListing && !isSharing">
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
<share-button v-show="showShareButton"></share-button>
<rename-button v-show="showRenameButton"></rename-button>
@ -28,7 +28,7 @@
</div>
<!-- This buttons are shown on a dropdown on mobile phones -->
<div class="dropdown" :class="{ active: showMore }">
<div id="dropdown" :class="{ active: showMore }">
<div v-if="!isListing || !isMobile">
<share-button v-show="showShareButton"></share-button>
<rename-button v-show="showRenameButton"></rename-button>
@ -43,18 +43,7 @@
<upload-button v-show="showUpload"></upload-button>
<info-button v-show="isFiles"></info-button>
<button v-show="isListing" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
<i class="material-icons">check_circle</i>
<span>{{ $t('buttons.select') }}</span>
</button>
</div>
</template>
<template v-if="isSharing">
<!-- This buttons are shown on a dropdown on mobile phones -->
<div class="dropdown" :class="{ active: showMore }">
<download-button v-if="sharedSelectedCount > 0"></download-button>
<button @click="toggleSharedMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
<button v-show="isListing || (isSharing && req.isDir)" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
<i class="material-icons">check_circle</i>
<span>{{ $t('buttons.select') }}</span>
</button>
@ -122,16 +111,14 @@ export default {
'isPreview',
'isListing',
'isLogged',
'isSharing',
'sharedSelectedCount'
'isSharing'
]),
...mapState([
'req',
'user',
'loading',
'reload',
'multiple',
'shared'
'multiple'
]),
logoURL: () => logoURL,
isExecEnabled: () => enableExec,
@ -142,7 +129,7 @@ export default {
return this.isListing && this.user.perm.create
},
showDownloadButton () {
return this.isFiles && this.user.perm.download
return (this.isFiles && this.user.perm.download) || (this.isSharing && this.selectedCount > 0)
},
showDeleteButton () {
return this.isFiles && (this.isListing
@ -190,10 +177,6 @@ export default {
this.$store.commit('multiple', !this.multiple)
this.resetPrompts()
},
toggleSharedMultipleSelection () {
this.$store.commit('sharedMultiple', !this.shared.multiple)
this.resetPrompts()
},
resetPrompts () {
this.$store.commit('closeHovers')
}

10
frontend/src/components/buttons/Download.vue
View File

@ -3,7 +3,6 @@
<i class="material-icons">file_download</i>
<span>{{ $t('buttons.download') }}</span>
<span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
<span v-else-if="isSharing && sharedSelectedCount > 0" class="counter">{{ sharedSelectedCount }}</span>
</button>
</template>
@ -14,8 +13,8 @@ import { files as api } from '@/api'
export default {
name: 'download-button',
computed: {
...mapState(['req', 'selected', 'shared']),
...mapGetters(['isListing', 'selectedCount', 'isSharing', 'sharedSelectedCount'])
...mapState(['req', 'selected']),
...mapGetters(['isListing', 'selectedCount', 'isSharing'])
},
methods: {
download: function () {
@ -29,11 +28,6 @@ export default {
return
}
if (this.sharedSelectedCount === 1 && !this.shared.req.items[this.shared.selected[0]].isDir) {
api.download(null, this.shared.req.items[this.shared.selected[0]].url)
return
}
this.$store.commit('showHover', 'download')
}
}

4
frontend/src/components/files/ListingItem.vue
View File

@ -48,7 +48,7 @@ export default {
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
computed: {
...mapState(['user', 'selected', 'req', 'user', 'jwt']),
...mapGetters(['selectedCount']),
...mapGetters(['selectedCount', 'isSharing']),
isSelected () {
return (this.selected.indexOf(this.index) !== -1)
},
@ -63,7 +63,7 @@ export default {
return this.user.perm.rename
},
canDrop () {
if (!this.isDir) return false
if (!this.isDir || this.isSharing) return false
for (let i of this.selected) {
if (this.req.items[i].url === this.url) {

112
frontend/src/components/files/SharedItem.vue
View File

@ -1,112 +0,0 @@
<template>
<div class="item"
role="button"
tabindex="0"
@click="click"
@dblclick="dblclick"
@touchstart="touchstart"
:data-dir="isDir"
:aria-label="name"
:aria-selected="isSelected">
<div>
<i class="material-icons">{{ icon }}</i>
</div>
<div>
<p class="name">{{ name }}</p>
<p v-if="isDir" class="size" data-order="-1">&mdash;</p>
<p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
<p class="modified">
<time :datetime="modified">{{ humanTime() }}</time>
</p>
</div>
</div>
</template>
<script>
import { mapMutations, mapGetters, mapState } from 'vuex'
import filesize from 'filesize'
import moment from 'moment'
export default {
name: 'sharedItem',
data: function () {
return {
touches: 0
}
},
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
computed: {
...mapState(['shared']),
...mapGetters(['sharedSelectedCount']),
isSelected () {
return (this.shared.selected.indexOf(this.index) !== -1)
},
icon () {
if (this.isDir) return 'folder'
if (this.type === 'image') return 'insert_photo'
if (this.type === 'audio') return 'volume_up'
if (this.type === 'video') return 'movie'
return 'insert_drive_file'
}
},
methods: {
...mapMutations(['addSharedSelected', 'removeSharedSelected', 'resetSharedSelected']),
humanSize: function () {
return filesize(this.size)
},
humanTime: function () {
return moment(this.modified).fromNow()
},
click: function (event) {
if (this.sharedSelectedCount !== 0) event.preventDefault()
if (this.$store.state.shared.selected.indexOf(this.index) !== -1) {
this.removeSharedSelected(this.index)
return
}
if (event.shiftKey && this.shared.selected.length > 0) {
let fi = 0
let la = 0
if (this.index > this.shared.selected[0]) {
fi = this.shared.selected[0] + 1
la = this.index
} else {
fi = this.index
la = this.shared.selected[0] - 1
}
for (; fi <= la; fi++) {
if (this.$store.state.shared.selected.indexOf(fi) == -1) {
this.addSharedSelected(fi)
}
}
return
}
if (!event.ctrlKey && !event.metaKey && !this.$store.state.shared.multiple) this.resetSharedSelected()
this.addSharedSelected(this.index)
},
dblclick: function () {
this.open()
},
touchstart () {
setTimeout(() => {
this.touches = 0
}, 300)
this.touches++
if (this.touches > 1) {
this.open()
}
},
open: function () {
this.$router.push({path: this.url})
}
}
}
</script>

14
frontend/src/components/prompts/Download.vue
View File

@ -25,20 +25,12 @@ import { files as api } from '@/api'
export default {
name: 'download',
computed: {
...mapState(['selected', 'req', 'shared']),
...mapGetters(['selectedCount', 'isSharing' ,'sharedSelectedCount'])
...mapState(['selected', 'req']),
...mapGetters(['selectedCount'])
},
methods: {
download: function (format) {
if (this.isSharing) {
let files = []
for (let i of this.shared.selected) {
files.push(this.shared.req.items[i].url)
}
api.download(format, ...files)
} else if (this.selectedCount === 0) {
if (this.selectedCount === 0) {
api.download(format, this.$route.path)
} else {
let files = []

6
frontend/src/css/_share.css
View File

@ -54,12 +54,6 @@
border-right: 0;
border-bottom: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.share__box__items #listing.list .item .name {

12
frontend/src/css/mobile.css
View File

@ -28,7 +28,7 @@
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
.dropdown {
#dropdown {
position: fixed;
top: 1em;
right: 1em;
@ -40,23 +40,23 @@
transform-origin: top right;
z-index: 99999;
}
.dropdown > div {
#dropdown > div {
display: block;
}
.dropdown.active {
#dropdown.active {
transform: scale(1);
}
.dropdown .action {
#dropdown .action {
display: flex;
align-items: center;
border-radius: 0;
width: 100%;
}
.dropdown .action span:not(.counter) {
#dropdown .action span:not(.counter) {
display: inline-block;
padding: .4em;
}
.dropdown .counter {
#dropdown .counter {
left: 2.25em;
}
#file-selection {

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

@ -4,7 +4,7 @@ const getters = {
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.shared.loaded && state.route.name === 'Share',
isSharing: state => !state.loading && state.route.name === 'Share',
selectedCount: state => state.selected.length,
progress : state => {
if (state.upload.progress.length == 0) {
@ -13,8 +13,7 @@ const getters = {
let sum = state.upload.progress.reduce((acc, val) => acc + val)
return Math.ceil(sum / state.upload.size * 100);
},
sharedSelectedCount: state => state.shared.selected.length
}
}
export default getters

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

@ -7,7 +7,18 @@ import upload from './modules/upload'
Vue.use(Vuex)
const state = {
user: null,
user: {
perm: {
admin: false,
create: false,
delete: false,
download: false,
execute: false,
modify: false,
rename: false,
share: false
}
},
req: {},
oldReq: {},
clipboard: {
@ -25,13 +36,7 @@ const state = {
showMessage: null,
showConfirm: null,
previewMode: false,
shared: {
req: {},
hash: '',
loaded: false,
selected: [],
multiple: false
}
hash: ''
}
export default new Vuex.Store({

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

@ -27,12 +27,8 @@ const mutations = {
state.show = 'success'
state.showMessage = value
},
setLoading: (state, value) => {
state.loading = value
},
setReload: (state, value) => {
state.reload = value
},
setLoading: (state, value) => { state.loading = value },
setReload: (state, value) => { state.reload = value },
setUser: (state, value) => {
if (value === null) {
state.user = null
@ -91,19 +87,7 @@ const mutations = {
setPreviewMode(state, value) {
state.previewMode = value
},
addSharedSelected: (state, value) => (state.shared.selected.push(value)),
removeSharedSelected: (state, value) => {
let i = state.shared.selected.indexOf(value)
if (i === -1) return
state.shared.selected.splice(i, 1)
},
resetSharedSelected: (state) => {
state.shared.selected = []
},
sharedMultiple: (state, value) => (state.shared.multiple = value),
updateSharedRequest: (state, value) => (state.shared.req = value),
setSharedHash: (state, value) => (state.shared.hash = value),
toggleSharedLoaded: (state, value) => (state.shared.loaded = value)
setHash: (state, value) => (state.hash = value),
}
export default mutations

101
frontend/src/views/Share.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-if="shared.loaded">
<div v-if="!loading">
<div id="breadcrumbs">
<router-link :to="'/share/' + shared.hash" :aria-label="$t('files.home')" :title="$t('files.home')">
<router-link :to="'/share/' + hash" :aria-label="$t('files.home')" :title="$t('files.home')">
<i class="material-icons">home</i>
</router-link>
@ -13,13 +13,13 @@
<div class="share">
<div class="share__box share__box__info">
<div class="share__box__header">
{{ shared.req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
{{ req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
</div>
<div class="share__box__element share__box__center share__box__icon">
<i class="material-icons">{{ icon }}</i>
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.displayName') }}</strong> {{ shared.req.name }}
<strong>{{ $t('prompts.displayName') }}</strong> {{ req.name }}
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
@ -34,12 +34,12 @@
<qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
</div>
</div>
<div v-if="shared.req.isDir" class="share__box share__box__items">
<div class="share__box__header" v-if="shared.req.isDir">
<div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
<div class="share__box__header" v-if="req.isDir">
{{ $t('files.files') }}
</div>
<div id="listing" class="list">
<shared-item v-for="(item) in shared.req.items.slice(0, this.showLimit)"
<item v-for="(item) in req.items.slice(0, this.showLimit)"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
@ -48,14 +48,14 @@
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</shared-item>
<div v-if="shared.req.items.length > showLimit" class="item">
</item>
<div v-if="req.items.length > showLimit" class="item">
<div>
<p class="name"> + {{ shared.req.items.length - showLimit }} </p>
<p class="name"> + {{ req.items.length - showLimit }} </p>
</div>
</div>
<div :class="{ active: $store.state.shared.multiple }" id="multiple-selection">
<div :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>{{ $t('files.multipleSelectionEnabled') }}</p>
<div @click="$store.commit('sharedMultiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
<i class="material-icons">clear</i>
@ -63,8 +63,19 @@
</div>
</div>
</div>
<div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
<h2 class="message">
<i class="material-icons">sentiment_dissatisfied</i>
<span>{{ $t('files.lonely') }}</span>
</h2>
</div>
</div>
</div>
<div v-else-if="error">
<not-found v-if="error.message === '404'"></not-found>
<forbidden v-else-if="error.message === '403'"></forbidden>
<internal-error v-else></internal-error>
</div>
</template>
<script>
@ -74,16 +85,22 @@ import { baseURL } from '@/utils/constants'
import filesize from 'filesize'
import moment from 'moment'
import QrcodeVue from 'qrcode.vue'
import SharedItem from "@/components/files/SharedItem"
import Item from "@/components/files/ListingItem"
import Forbidden from './errors/403'
import NotFound from './errors/404'
import InternalError from './errors/500'
export default {
name: 'share',
components: {
SharedItem,
Item,
Forbidden,
NotFound,
InternalError,
QrcodeVue
},
data: () => ({
notFound: false,
error: null,
filePath: '',
showLimit: 500
}),
@ -92,7 +109,7 @@ export default {
},
created: async function () {
const hash = this.$route.params.pathMatch.split('/')[0]
this.setSharedHash(hash)
this.setHash(hash)
await this.fetchData()
},
mounted () {
@ -102,13 +119,13 @@ export default {
window.removeEventListener('keydown', this.keyEvent)
},
computed: {
...mapState(['shared']),
...mapGetters(['sharedSelectedCount']),
...mapState(['hash', 'req', 'loading', 'multiple']),
...mapGetters(['selectedCount']),
icon: function () {
if (this.shared.req.isDir) return 'folder'
if (this.shared.req.type === 'image') return 'insert_photo'
if (this.shared.req.type === 'audio') return 'volume_up'
if (this.shared.req.type === 'video') return 'movie'
if (this.req.isDir) return 'folder'
if (this.req.type === 'image') return 'insert_photo'
if (this.req.type === 'audio') return 'volume_up'
if (this.req.type === 'video') return 'movie'
return 'insert_drive_file'
},
path: function () {
@ -132,20 +149,20 @@ export default {
return absoluteParts.slice(absoluteParts.length - len).join('/')
},
link: function () {
return `${baseURL}/api/public/dl/${this.shared.hash}/${this.path}`
return `${baseURL}/api/public/dl/${this.hash}/${this.path}`
},
fullLink: function () {
return window.location.origin + this.link
},
humanSize: function () {
if (this.shared.req.isDir) {
return this.shared.req.items.length
if (this.req.isDir) {
return this.req.items.length
}
return filesize(this.shared.req.size)
return filesize(this.req.size)
},
humanTime: function () {
return moment(this.shared.req.modified).fromNow()
return moment(this.req.modified).fromNow()
},
breadcrumbs () {
let parts = this.path.split('/')
@ -162,7 +179,7 @@ export default {
for (let i = 0; i < parts.length; i++) {
if (i === 0) {
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/share/' + this.shared.hash + '/' + parts[i] + '/' })
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/share/' + this.hash + '/' + parts[i] + '/' })
} else {
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: breadcrumbs[i - 1].url + parts[i] + '/' })
}
@ -182,27 +199,33 @@ export default {
}
},
methods: {
...mapMutations([ 'resetSharedSelected', 'setSharedHash', 'updateSharedRequest', 'toggleSharedLoaded' ]),
...mapMutations([ 'setHash', 'resetSelected', 'updateRequest', 'setLoading' ]),
base64: function (name) {
return window.btoa(unescape(encodeURIComponent(name)))
},
fetchData: async function () {
this.notFound = false
this.$store.commit('toggleSharedLoaded', false)
this.$store.commit('resetSharedSelected')
this.$store.commit('sharedMultiple', false)
// 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
try {
let file = await api.getHash(encodeURIComponent(this.$route.params.pathMatch))
this.filePath = file.path
if (file.isDir) file.items = file.items.map((item, index) => {
item.index = index
item.url = `/share/${this.shared.hash}/${this.path}/${encodeURIComponent(item.name)}`
item.url = `/share/${this.hash}/${this.path}/${encodeURIComponent(item.name)}`
return item
})
this.updateSharedRequest(file)
this.$store.commit('toggleSharedLoaded', true)
this.updateRequest(file)
this.setLoading(false)
} catch (e) {
this.notFound = true
this.error = e
}
},
keyEvent (event) {
@ -210,13 +233,13 @@ export default {
if (event.keyCode === 27) {
// If we're on a listing, unselect all
// files and folders.
if (this.sharedSelectedCount > 0) {
this.resetSharedSelected()
if (this.selectedCount > 0) {
this.resetSelected()
}
}
},
toggleMultipleSelection () {
this.$store.commit('sharedMultiple', !this.shared.multiple)
this.$store.commit('multiple', !this.multiple)
}
}
}