bulk-operations select items v0.1

public/mix-manifest.json

@@ -29,7 +29,7 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=72998371a634f818fdfd",
     "/chunks/files.js": "/chunks/files.js?id=3b608964757ef9dda7c6",
     "/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=93090f58b637eeb86ded",
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=b42e4150955dc325f60b",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=0dbfea6e92ed1c8f0976",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=f78ef9c665238797e92a",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=4fb27bef1f7595b94047",
     "/chunks/invoices.js": "/chunks/invoices.js?id=95740d62a1ed253ef2ff",
@@ -74,5 +74,15 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=4d9e46c209e88d5f47ab",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=fafc88cef747e911e17b",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=106a3b5ccd6d467ac524",
-    "/chunks/users.js": "/chunks/users.js?id=f213041c6b6095cd03e1"
+    "/chunks/users.js": "/chunks/users.js?id=f213041c6b6095cd03e1",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8385359afa3944ca807a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8385359afa3944ca807a.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d3a5335e722fd9fb6e56.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d3a5335e722fd9fb6e56.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d5af6abd1beba986a178.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d5af6abd1beba986a178.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.5965ab5322d6cc4d13db.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.5965ab5322d6cc4d13db.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e13d8c21b5be7da6813.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6e13d8c21b5be7da6813.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.e43bd903bca089337d69.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.e43bd903bca089337d69.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.69dec1d5e8bd89299756.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.69dec1d5e8bd89299756.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.f84e1112ab1be09b49cd.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.f84e1112ab1be09b49cd.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.32c364ad1df3e3a86304.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.32c364ad1df3e3a86304.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d67db0944848f4731b1d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d67db0944848f4731b1d.hot-update.js"
 }

resources/js/components/FilesView/FileItemList.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
+	<div class="file-wrapper" 
+	@click.stop="clickedItem" 
+	@dblclick="goToItem" 
+	spellcheck="false">
 		<!--List preview-->
 		<div
 			:draggable="canDrag"
@@ -11,7 +14,7 @@
 			@dragleave="dragLeave"
 			@dragover.prevent="dragEnter"
 			class="file-item"
-			:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
+			:class="{ 'is-clicked': this.isClicked, 'is-dragenter': area }"
 		>
 			<!--Thumbnail for item-->
 			<div class="icon-item">
@@ -80,7 +83,17 @@ export default {
 		LinkIcon
 	},
 	computed: {
-		...mapGetters(['FilePreviewType']),
+		...mapGetters(['FilePreviewType', 'fileInfoDetail' ]),
+		...mapGetters({allData: 'data'}),
+		isClicked() {
+			// let clicked = false
+			if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){
+				return true
+			}else {
+				return false
+			}
+			// return clicked
+		},
 		isFolder() {
 			return this.data.type === 'folder'
 		},
@@ -127,7 +140,7 @@ export default {
 	},
 	data() {
 		return {
-			isClicked: false,
+			// isClicked: false,
 			area: false,
 			itemName: undefined
 		}
@@ -149,10 +162,38 @@ export default {
 		},
 		clickedItem(e) {
 			events.$emit('contextMenu:hide')
-			events.$emit('fileItem:deselect')
-
-			// Set clicked item
-			this.isClicked = true
+			
+			if(e.ctrlKey && !e.shiftKey) {
+				if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
+					this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
+				}else {
+					console.log(this.data.name)
+					this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+				}
+			}else if (e.shiftKey){
+				let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
+				let clickedItem = this.allData.indexOf(this.data)
+				
+				if(!e.ctrlKey) {
+					this.$store.commit('CLEAR_FILEINFO_DETAIL')
+				}
+				
+				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 {
+				events.$emit('fileItem:deselect')
+				this.$store.commit('LOAD_FILEINFO_DETAIL', this.data )
+			}
 
 			// Open in mobile version on first click
 			if (this.$isMobile() && this.isFolder) {
@@ -170,9 +211,6 @@ export default {
 				}
 			}
 
-			// Load file info detail
-			this.$store.commit('GET_FILEINFO_DETAIL', this.data)
-
 			// Get target classname
 			let itemClass = e.target.className
 
@@ -209,7 +247,8 @@ export default {
 
 		events.$on('fileItem:deselect', () => {
 			// Deselect file
-			this.isClicked = false
+			// this.isClicked = false
+			this.$store.commit('CLEAR_FILEINFO_DETAIL')
 		})
 
 		// Change item name

resources/js/store/modules/fileBrowser.js

@@ -5,7 +5,7 @@ import i18n from '@/i18n/index'
 
 const defaultState = {
     uploadingFilesCount: undefined,
-    fileInfoDetail: undefined,
+    fileInfoDetail: [],
     currentFolder: undefined,
     uploadingFileProgress: 0,
     isProcessingFile: false,
@@ -244,16 +244,21 @@ const mutations = {
             if (item.unique_id == updatedFile.unique_id) item.name = updatedFile.name
         })
     },
+    REMOVE_ITEM_FILEINFO_DETAIL(state,item) {
+      state.fileInfoDetail = state.fileInfoDetail.filter(element => element.unique_id !== item.unique_id)
+    },
     CLEAR_FILEINFO_DETAIL(state) {
-        state.fileInfoDetail = undefined
+        state.fileInfoDetail = []
     },
     LOAD_FILEINFO_DETAIL(state, item) {
-        state.fileInfoDetail = item
+        state.fileInfoDetail = []
+        state.fileInfoDetail.push(item)
     },
     GET_FILEINFO_DETAIL(state, item) {
         let checkData = state.data.find(el => el.unique_id == item.unique_id)
+        if(state.fileInfoDetail.includes(checkData)) return
 
-        state.fileInfoDetail = checkData ? checkData : state.currentFolder
+        state.fileInfoDetail.push(checkData ? checkData : state.currentFolder)
     },
     CHANGE_SEARCHING_STATE(state, searchState) {
         state.isSearching = searchState