nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 09:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

bulk-operations v0.1 setup bulk delete,move items and FileInfoPanel

Browse Source
This commit is contained in:
Milos Holba
2020-11-13 17:56:45 +01:00
parent 8a9d2d7f9a
commit 559bee6ca2
9 changed files with 282 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FilesView/ContextMenu.vue
View File

@@ -473,7 +473,7 @@ export default {
},
deleteItem() {
// Dispatch remove item
this.$store.dispatch("deleteItem", this.item);
this.$store.dispatch("deleteItem");
},
createFolder() {
// Create folder

8
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -74,10 +74,12 @@
<!--File Info Panel-->
<div v-if="! $isMinimalScale()" class="file-info-container" :class="{ 'is-fileinfo-visible': fileInfoVisible }">
<!--File info panel-->
<FileInfoPanel v-if="fileInfoDetail"/>
<FileInfoPanel v-if="fileInfoDetail.length === 1"/>
<MultiSelected v-if="fileInfoDetail.length > 1 "/>
<!--If file info panel empty show message-->
<EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
<EmptyMessage v-if="fileInfoDetail.length === 0" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
</div>
</div>
</template>
@@ -85,6 +87,7 @@
<script>
import MobileToolbar from '@/components/FilesView/MobileToolbar'
import MobileActions from '@/components/FilesView/MobileActions'
import MultiSelected from '@/components/FilesView/MultiSelected'
import FileInfoPanel from '@/components/FilesView/FileInfoPanel'
import FileItemList from '@/components/FilesView/FileItemList'
import FileItemGrid from '@/components/FilesView/FileItemGrid'
@@ -99,6 +102,7 @@
components: {
MobileToolbar,
MobileActions,
MultiSelected,
FileInfoPanel,
FileItemList,
FileItemGrid,

32
resources/js/components/FilesView/FileInfoPanel.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="file-info-content" v-if="fileInfoDetail">
<div class="file-info-content" v-if="fileInfoDetail.length === 1">
<div class="file-headline" spellcheck="false">
<FilePreview/>
@@ -14,37 +14,37 @@
</div>
</div>
<div class="file-info">
<span ref="name" class="name">{{ fileInfoDetail.name }}</span>
<span class="mimetype" v-if="fileInfoDetail.mimetype">.{{ fileInfoDetail.mimetype }}</span>
<span ref="name" class="name">{{ fileInfoDetail[0].name }}</span>
<span class="mimetype" v-if="fileInfoDetail[0].mimetype">.{{ fileInfoDetail[0].mimetype }}</span>
</div>
</div>
</div>
<!--Info list-->
<ListInfo>
<ListInfoItem v-if="fileInfoDetail.filesize"
<ListInfoItem v-if="fileInfoDetail[0].filesize"
:title="$t('file_detail.size')"
:content="fileInfoDetail.filesize">
:content="fileInfoDetail[0].filesize">
</ListInfoItem>
<ListInfoItem v-if="$checkPermission(['master']) && fileInfoDetail.user_scope !== 'master'"
<ListInfoItem v-if="$checkPermission(['master']) && fileInfoDetail[0].user_scope !== 'master'"
:title="$t('file_detail.author')"
:content="$t('file_detail.author_participant')">
</ListInfoItem>
<ListInfoItem
:title="$t('file_detail.created_at')"
:content="fileInfoDetail.created_at">
:content="fileInfoDetail[0].created_at">
</ListInfoItem>
<ListInfoItem v-if="$checkPermission(['master'])"
:title="$t('file_detail.where')">
<div class="action-button" @click="moveItem">
<span>{{ fileInfoDetail.parent ? fileInfoDetail.parent.name : $t('locations.home') }}</span>
<span>{{ fileInfoDetail[0].parent ? fileInfoDetail[0].parent.name : $t('locations.home') }}</span>
<edit-2-icon size="10" class="edit-icon"></edit-2-icon>
</div>
</ListInfoItem>
<ListInfoItem v-if="$checkPermission('master') && fileInfoDetail.shared"
<ListInfoItem v-if="$checkPermission('master') && fileInfoDetail[0].shared"
:title="$t('file_detail.shared')">
<div class="action-button" @click="shareItemOptions">
<span>{{ sharedInfo }}</span>
@@ -53,7 +53,7 @@
<div class="sharelink">
<lock-icon v-if="isLocked" @click="shareItemOptions" class="lock-icon" size="17"></lock-icon>
<unlock-icon v-if="! isLocked" @click="shareItemOptions" class="lock-icon" size="17"></unlock-icon>
<CopyInput class="copy-sharelink" size="small" :value="fileInfoDetail.shared.link"/>
<CopyInput class="copy-sharelink" size="small" :value="fileInfoDetail[0].shared.link"/>
</div>
</ListInfoItem>
</ListInfo>
@@ -87,7 +87,7 @@
computed: {
...mapGetters(['fileInfoDetail', 'permissionOptions']),
fileType() {
return this.fileInfoDetail.type
return this.fileInfoDetail[0].type
/* switch () {
case 'folder':
return 'folder'
@@ -110,13 +110,13 @@
// Get permission title
let title = this.permissionOptions.find(option => {
return option.value === this.fileInfoDetail.shared.permission
return option.value === this.fileInfoDetail[0].shared.permission
})
return title ? title.label : this.$t('shared.can_download')
},
sharedIcon() {
switch (this.fileInfoDetail.shared.permission) {
switch (this.fileInfoDetail[0].shared.permission) {
case 'editor':
return 'user-edit'
break
@@ -128,17 +128,17 @@
}
},
isLocked() {
return this.fileInfoDetail.shared.protected
return this.fileInfoDetail[0].shared.protected
}
},
methods: {
shareItemOptions() {
// Open share item popup
events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail[0]})
},
moveItem() {
// Move item fire popup
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail[0]})
}
}
}

9
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -168,7 +168,8 @@
clickedItem(e) {
events.$emit('contextMenu:hide')
if(e.ctrlKey && !e.shiftKey) {
if(e.ctrlKey && !e.shiftKey) {
// Click + Ctrl
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
}else {
@@ -176,9 +177,11 @@
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}else if (e.shiftKey){
// Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
let clickedItem = this.allData.indexOf(this.data)
// If Click + Shift + Ctrl dont remove already selected items
if(!e.ctrlKey) {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
@@ -196,6 +199,8 @@
}
this.fileInfoDetail.forEach(element => console.log(element.id ,element.name))
}else {
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)

12
resources/js/components/FilesView/FileItemList.vue
View File

@@ -161,6 +161,8 @@ export default {
events.$emit('contextMenu:hide')
if(e.ctrlKey && !e.shiftKey) {
// Click + Ctrl
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
}else {
@@ -168,9 +170,12 @@ export default {
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}else if (e.shiftKey){
// Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
let clickedItem = this.allData.indexOf(this.data)
// If Click + Shift + Ctrl dont remove already selected items
if(!e.ctrlKey) {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
@@ -178,16 +183,15 @@ export default {
if(lastItem < clickedItem) {
for(let i=lastItem ; i<=clickedItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
console.log(this.allData[i].name)
}
}else {
for(let i=clickedItem ; i<=lastItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
console.log(this.allData[i].name)
}
}
this.fileInfoDetail.forEach(element => console.log(element.id ,element.name))
}else {
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)

12
resources/js/components/FilesView/FilePreview.vue
View File

@@ -1,9 +1,9 @@
<template>
<div v-if="canBePreview" class="preview">
<img v-if="fileInfoDetail.type == 'image'" :src="fileInfoDetail.thumbnail" :alt="fileInfoDetail.name" />
<audio v-else-if="fileInfoDetail.type == 'audio'" :src="fileInfoDetail.file_url" controlsList="nodownload" controls></audio>
<video v-else-if="fileInfoDetail.type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="fileInfoDetail.file_url" type="video/mp4">
<img v-if="fileInfoDetail[0].type == 'image'" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
<audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio>
<video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="fileInfoDetail[0].file_url" type="video/mp4">
</video>
</div>
</template>
@@ -17,9 +17,9 @@
computed: {
...mapGetters(['fileInfoDetail']),
canBePreview() {
return this.fileInfoDetail && ! includes([
return this.fileInfoDetail[0] && ! includes([
'folder', 'file'
], this.fileInfoDetail.type)
], this.fileInfoDetail[0].type)
}
},
}

74
resources/js/components/FilesView/MultiSelected.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<div class="wrapper">
<div class="icon-wrapper">
<CheckSquareIcon class="icon" size="21"/>
</div>
<div class="text">
<span class="title">Selected Multiple Items</span>
<span class="count">{{this.fileInfoDetail.length}} items</span>
</div>
</div>
</template>
<script>
import {CheckSquareIcon} from "vue-feather-icons";
import {mapGetters} from 'vuex'
export default {
name:'MultiSelected',
components: {CheckSquareIcon},
computed: {
...mapGetters(['fileInfoDetail'])
},
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.wrapper {
display: flex;
justify-content: center;
.text{
padding-left: 10px;
width: 100%;
word-break: break-all;
.title {
@include font-size(14);
font-weight: 700;
line-height: 1.4;
display: block;
color: $text;
}
.count {
@include font-size(12);
font-weight: 600;
color: $theme;
display: block;
}
}
.icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
}
}
@media (prefers-color-scheme: dark) {
.wrapper {
.text {
.title {
color: $dark_mode_text_primary;
}
}
}
}
</style>