bulk-operations select items v0.1

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