mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
vue frontend update
This commit is contained in:
carodej
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="file-content" :class="{ 'is-offset': uploadingFilesCount, 'is-dragging': isDragging }"
|
||||
@dragover.prevent
|
||||
@drop.stop.prevent="dropUpload($event)"
|
||||
@dragover="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
>
|
||||
<div
|
||||
class="files-container"
|
||||
ref="fileContainer"
|
||||
:class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() }"
|
||||
@click.self="filesContainerClick"
|
||||
>
|
||||
<!--MobileToolbar-->
|
||||
<MobileToolbar />
|
||||
|
||||
<!--Searchbar-->
|
||||
<SearchBar v-if="$isMinimalScale()" class="mobile-search"/>
|
||||
|
||||
<!--Mobile Actions-->
|
||||
<MobileActions />
|
||||
|
||||
<!--Item previews list-->
|
||||
<div v-if="isList" class="file-list-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="preview_type"
|
||||
>
|
||||
<FileItemList
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.stop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Item previews grid-->
|
||||
<div v-if="isGrid" class="file-grid-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="preview_type"
|
||||
>
|
||||
<FileItemGrid
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Show empty page if folder is empty-->
|
||||
<EmptyPage v-if="!isSearching"/>
|
||||
|
||||
<!--Show empty page if no search results-->
|
||||
<EmptyMessage
|
||||
v-if="isSearching && isEmpty"
|
||||
:message="$t('messages.nothing_was_found')"
|
||||
icon="eye-slash"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--File Info Panel-->
|
||||
<div v-if="! $isMinimalScale()" class="file-info-container" :class="{ 'is-fileinfo-visible': fileInfoVisible }">
|
||||
<!--File info panel-->
|
||||
<FileInfoPanel v-if="fileInfoDetail"/>
|
||||
|
||||
<!--If file info panel empty show message-->
|
||||
<EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-slash"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileToolbar from '@/components/VueFileManagerComponents/FilesView/MobileToolbar'
|
||||
import MobileActions from '@/components/VueFileManagerComponents/FilesView/MobileActions'
|
||||
import FileInfoPanel from '@/components/VueFileManagerComponents/FilesView/FileInfoPanel'
|
||||
import FileItemList from '@/components/VueFileManagerComponents/FilesView/FileItemList'
|
||||
import FileItemGrid from '@/components/VueFileManagerComponents/FilesView/FileItemGrid'
|
||||
import EmptyMessage from '@/components/VueFileManagerComponents/FilesView/EmptyMessage'
|
||||
import EmptyPage from '@/components/VueFileManagerComponents/FilesView/EmptyPage'
|
||||
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FilesContainer',
|
||||
components: {
|
||||
MobileToolbar,
|
||||
MobileActions,
|
||||
FileInfoPanel,
|
||||
FileItemList,
|
||||
FileItemGrid,
|
||||
EmptyMessage,
|
||||
SearchBar,
|
||||
EmptyPage
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'uploadingFilesCount',
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'preview_type',
|
||||
'isSearching',
|
||||
'isLoading',
|
||||
'data'
|
||||
]),
|
||||
isGrid() {
|
||||
return this.preview_type === 'grid'
|
||||
},
|
||||
isList() {
|
||||
return this.preview_type === 'list'
|
||||
},
|
||||
isEmpty() {
|
||||
return this.data.length == 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggingId: undefined,
|
||||
isDragging: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dropUpload(event) {
|
||||
// Upload external file
|
||||
this.$uploadExternalFiles(event, this.currentFolder.unique_id)
|
||||
|
||||
this.isDragging = false
|
||||
},
|
||||
dragEnter() {
|
||||
this.isDragging = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.isDragging = false
|
||||
},
|
||||
dragStart(data) {
|
||||
|
||||
events.$emit('dragstart', data)
|
||||
|
||||
// Store dragged folder
|
||||
this.draggingId = data
|
||||
},
|
||||
dragFinish(data, event) {
|
||||
|
||||
if (event.dataTransfer.items.length == 0) {
|
||||
|
||||
// Prevent to drop on file or image
|
||||
if (data.type !== 'folder' || this.draggingId === data) return
|
||||
|
||||
// Move folder to new parent
|
||||
this.$store.dispatch('moveItem', [this.draggingId, data])
|
||||
|
||||
} else {
|
||||
|
||||
// Get unique_id of current folder
|
||||
const unique_id = data.type !== 'folder' ? this.currentFolder.unique_id : data.unique_id
|
||||
|
||||
// Upload external file
|
||||
this.$uploadExternalFiles(event, unique_id)
|
||||
}
|
||||
|
||||
this.isDragging = false
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
filesContainerClick() {
|
||||
|
||||
// Deselect clicked item
|
||||
events.$emit('fileItem:deselect')
|
||||
|
||||
// Hide context menu if is opened
|
||||
events.$emit('contextMenu:hide')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('fileItem:deselect', () =>
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
)
|
||||
|
||||
events.$on('scrollTop', () => {
|
||||
// Scroll top
|
||||
var container = document.getElementsByClassName(
|
||||
'files-container'
|
||||
)[0]
|
||||
|
||||
if (container) container.scrollTop = 0
|
||||
})
|
||||
|
||||
// On items delete
|
||||
events.$on('items:delete', () => {
|
||||
this.$store.dispatch('removeItem', this.fileInfoDetail)
|
||||
|
||||
//let ids = []
|
||||
//let items = []
|
||||
|
||||
// Get ids
|
||||
/*this.$children[0].$children.filter(item => {
|
||||
|
||||
if (item.isClicked) {
|
||||
|
||||
ids.push(item.data.unique_id)
|
||||
|
||||
items.push({
|
||||
unique_id: item.data.unique_id,
|
||||
type: item.data.type,
|
||||
})
|
||||
}
|
||||
})*/
|
||||
|
||||
// Dispatch action
|
||||
/*this.$store.dispatch('removeItems', [ids, items])*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.button-upload {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&.is-dragging {
|
||||
@include transform(scale(0.99));
|
||||
}
|
||||
}
|
||||
|
||||
.files-container {
|
||||
overflow-y: auto;
|
||||
flex: 0 0 100%;
|
||||
@include transition(150ms);
|
||||
position: relative;
|
||||
|
||||
&.is-fileinfo-visible {
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 180px);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
flex: 0 0 300px;
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Transition
|
||||
.file-move {
|
||||
transition: transform 0.6s;
|
||||
}
|
||||
|
||||
.file-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.file-leave-active {
|
||||
transition: all 0ms;
|
||||
}
|
||||
|
||||
.file-enter, .file-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.file-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user