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

2026-04-06 02:33:48 +00:00 · 2020-11-13 19:10:36 +01:00
parent 0c02952f7a
commit 324f4b1ffa
9 changed files with 210 additions and 70 deletions
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -29,7 +29,7 @@
    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=405847df44edd86e301a",
    "/chunks/files.js": "/chunks/files.js?id=e0e01c40a7c37f170270",
    "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js?id=6cafd70cb9e5ae25f02a",
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=4663bca7e1ed60adb774",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=8c15cc5895d59467a5a5",
    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=aba8c662fbc234892216",
    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=ecceaa6cdf5768826b36",
    "/chunks/invoices.js": "/chunks/invoices.js?id=248503ac5967fe8370f9",
@@ -179,5 +179,12 @@
    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.e9a41033e7b11fab8d60.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.e9a41033e7b11fab8d60.hot-update.js",
    "/js/main.8e5724e1bf2542aefedb.hot-update.js": "/js/main.8e5724e1bf2542aefedb.hot-update.js",
    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8e5724e1bf2542aefedb.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8e5724e1bf2542aefedb.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e05a68f5ae202d91bc4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e05a68f5ae202d91bc4.hot-update.js"
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e05a68f5ae202d91bc4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e05a68f5ae202d91bc4.hot-update.js",
+    "/js/main.e36c6dc8382e3d5fe133.hot-update.js": "/js/main.e36c6dc8382e3d5fe133.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.e36c6dc8382e3d5fe133.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.e36c6dc8382e3d5fe133.hot-update.js",
+    "/chunks/settings-subscription.e36c6dc8382e3d5fe133.hot-update.js": "/chunks/settings-subscription.e36c6dc8382e3d5fe133.hot-update.js",
+    "/chunks/settings-subscription~chunks/user-subscription.js": "/chunks/settings-subscription~chunks/user-subscription.js?id=d58c4e02afae33b7cc85",
+    "/chunks/user-subscription.e36c6dc8382e3d5fe133.hot-update.js": "/chunks/user-subscription.e36c6dc8382e3d5fe133.hot-update.js",
+    "/js/main.1c56b7e701300e0d9ed4.hot-update.js": "/js/main.1c56b7e701300e0d9ed4.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1c56b7e701300e0d9ed4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1c56b7e701300e0d9ed4.hot-update.js"
 }
--- a/resources/js/components/FilesView/ContextMenu.vue
+++ b/resources/js/components/FilesView/ContextMenu.vue
@@ -321,6 +321,7 @@ import {
 import { mapGetters } from 'vuex'
 import { events } from '@/bus'

+<<<<<<< HEAD
 export default {
    name: 'ContextMenu',
    components: {
@@ -334,6 +335,18 @@ export default {
        LinkIcon,
        StarIcon,
        EyeIcon
+=======
+      // Show panel if is not open
+      this.$store.dispatch("fileInfoToggle", true);
+    },
+    deleteItem() {
+      // Dispatch remove item
+      this.$store.dispatch("deleteItem");
+    },
+    createFolder() {
+      // Create folder
+      this.$createFolder(this.$t("popup_create_folder.folder_default_name"));
+>>>>>>> 559bee6 (bulk-operations v0.1 setup bulk delete,move items and FileInfoPanel)
    },
    computed: {
        ...mapGetters(['user']),
--- a/resources/js/components/FilesView/FileBrowser.vue
+++ b/resources/js/components/FilesView/FileBrowser.vue
@@ -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,
--- a/resources/js/components/FilesView/FileInfoPanel.vue
+++ b/resources/js/components/FilesView/FileInfoPanel.vue
@@ -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>

@@ -93,21 +93,21 @@
        computed: {
            ...mapGetters(['fileInfoDetail', 'permissionOptions']),
            fileType() {
-                return this.fileInfoDetail.type
+                return this.fileInfoDetail[0].type
            },
            canShowMetaData() {
-                return this.fileInfoDetail.metadata && this.fileInfoDetail.metadata.ExifImageWidth
+                return this.fileInfoDetail[0].metadata && this.fileInfoDetail[0].metadata.ExifImageWidth
            },
            sharedInfo() {
                // 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
@@ -119,17 +119,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]})
            }
        }
    }
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -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)
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -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)
--- a/resources/js/components/FilesView/FilePreview.vue
+++ b/resources/js/components/FilesView/FilePreview.vue
@@ -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)
            }
        },
    }
--- a/resources/js/components/FilesView/MultiSelected.vue
+++ b/resources/js/components/FilesView/MultiSelected.vue
@@ -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>
--- a/resources/js/store/modules/fileFunctions.js
+++ b/resources/js/store/modules/fileFunctions.js
@@ -3,28 +3,40 @@ import router from '@/router'
 import {events} from '@/bus'
 import {last} from 'lodash'
 import axios from 'axios'
+import { Store } from 'vuex'

 const actions = {
-    moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => {
+    moveItem: ({commit, getters, dispatch}, [undefined, to_item]) => {
+
+        let items = []
+
+        getters.fileInfoDetail.forEach((data) => {
+            items.push({
+                'force_delete': data.deleted_at ? true : false,
+                'type': data.type,
+                "unique_id": data.unique_id
+            })
+        })

        // Get route
        let route = getters.sharedDetail && ! getters.sharedDetail.protected
-            ? '/api/move/' + item_from.unique_id + '/public/' + router.currentRoute.params.token
-            : '/api/move/' + item_from.unique_id
+            ? '/api/move/public' + router.currentRoute.params.token
+            : '/api/move'

        axios
            .post(route, {
-                from_type: item_from.type,
-                to_unique_id: to_item.unique_id,
-                _method: 'patch'
+                _method: 'post',
+                to_unique_id:to_item.unique_id,
+                items: items
            })
            .then(() => {
-                commit('REMOVE_ITEM', item_from.unique_id)
-                commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
-
-                if (item_from.type === 'folder' && getters.currentFolder.location !== 'public')
-                    dispatch('getAppData')
+                items.forEach(item=> {
+                    commit('REMOVE_ITEM', item.unique_id)
+                    commit('INCREASE_FOLDER_ITEM', to_item.unique_id)

+                    if (item.type === 'folder' && getters.currentFolder.location !== 'public')
+                        dispatch('getAppData')
+                    })
            })
            .catch(() => isSomethingWrong())
    },
@@ -171,51 +183,72 @@ const actions = {
            })
            .catch(() => isSomethingWrong())
    },
-    deleteItem: ({commit, getters, dispatch}, data) => {
+    deleteItem: ({commit, getters, dispatch}) => {

-        // Remove file
-        commit('REMOVE_ITEM', data.unique_id)
+        let items = []

-        // Remove item from sidebar
-        if (getters.permission === 'master') {
+        getters.fileInfoDetail.forEach((data) => {
+            items.push({
+                'force_delete': data.deleted_at ? true : false,
+                'type': data.type,
+                "unique_id": data.unique_id
+            })
+            
+            //    Remove file
+            commit('REMOVE_ITEM', data.unique_id)

-            if (data.type === 'folder')
-                commit('REMOVE_ITEM_FROM_FAVOURITES', data)
-        }
+            // Remove item from sidebar
+            if (getters.permission === 'master') {

+                if (data.type === 'folder')
+                    commit('REMOVE_ITEM_FROM_FAVOURITES', data)
+            }
+
+            // Remove file
+            commit('REMOVE_ITEM', data.unique_id)
+
+            // Remove item from sidebar
+            if (getters.permission === 'master') {
+
+                if (data.type === 'folder')
+                    commit('REMOVE_ITEM_FROM_FAVOURITES', data)
+            }
+        
+        })
+        
        // Remove file preview
        commit('CLEAR_FILEINFO_DETAIL')

        // Get route
        let route = getters.sharedDetail && ! getters.sharedDetail.protected
-            ? '/api/remove-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
-            : '/api/remove-item/' + data.unique_id
+            ? '/api/remove-item/public/' + router.currentRoute.params.token
+            : '/api/remove-item'

        axios
            .post(route, {
-                _method: 'delete',
-                data: {
-                    type: data.type,
-                    force_delete: data.deleted_at ? true : false,
-                },
+                _method: 'post',
+                data: items
            })
            .then(() => {

-                // If is folder, update app data
-                if (data.type === 'folder') {
+                items.forEach(data => {
+                    
+                    // If is folder, update app data
+                    if (data.type === 'folder') {

-                    if (data.unique_id === getters.currentFolder.unique_id) {
+                        if (data.unique_id === getters.currentFolder.unique_id) {

-                        if ( getters.currentFolder.location === 'public' ) {
-                            dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
-                        } else {
-                            dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
+                            if ( getters.currentFolder.location === 'public' ) {
+                                dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
+                            } else {
+                                dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
+                            }
                        }
-                    }

-                    if ( getters.currentFolder.location !== 'public' )
-                        dispatch('getAppData')
-                }
+                        if ( getters.currentFolder.location !== 'public' )
+                            dispatch('getAppData')
+                    }
+                })
            })
            .catch(() => isSomethingWrong())
    },