Merge pull request #640 from Peergos/feat/drive-shift-select

Drive - use shift key for multiple select
Peergos · Nov 18, 2024 · fb670ba · fb670ba
2 parents 8e3c56c + 0cbf7f2
commit fb670ba
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/src/components/drive/DriveGridCard.vue b/src/components/drive/DriveGridCard.vue
@@ -8,7 +8,7 @@
             :accent="selected" 
             round 
             outline 
-            @click.stop.native="toggleSelection" 
+            @click.stop.native="toggleSelection($event)"
         />
         <AppButton
 			class="card__menu"
@@ -76,8 +76,9 @@ module.exports = {
 			this.$store.commit('SET_DRIVE_MENU_TARGET', e.currentTarget)
 			this.$emit('openMenu')
 		},
-        toggleSelection(){
-            this.$emit('toggleSelection')
+        toggleSelection(event){
+            let shift = event.shiftKey;
+            this.$emit('toggleSelection', shift);
         }
 	},
     directives: {

diff --git a/src/components/drive/DriveTable.vue b/src/components/drive/DriveTable.vue
@@ -21,6 +21,7 @@
                         v-model="selected"
                         :value="file"
                         tabindex="0"
+                        @click.shift="clickShiftHandler"
                         />
                         <span class="checkmark"></span>
                     </label>            
@@ -72,19 +73,41 @@ module.exports = {
     data: function () {
         return {
             selected: this.selectedFiles,
+            isShiftModifierOn: false,
         }
     },
     watch: {
         selected(newSelected, oldSelected) {
-            if(newSelected != this.selectedFiles){
-            this.$emit('update:selectedFiles', newSelected)
-            }
+              if (this.isShiftModifierOn && newSelected.length == oldSelected.length +1) {
+                  if(newSelected != this.selectedFiles){
+                      let difference = newSelected.filter(x => !oldSelected.includes(x))[0];
+                      let newIndex = this.files.indexOf(difference);
+                      var largestIndex = -1;
+                      for(var i=0; i < newSelected.length; i++) {
+                          let index = this.files.indexOf(newSelected[i]);
+                          if (index < newIndex && index > largestIndex) {
+                              largestIndex = index;
+                          }
+                      }
+                      let selectedWithShift = newSelected.concat(this.files.slice(largestIndex +1, newIndex));
+                      this.$emit('update:selectedFiles', selectedWithShift);
+                  }
+              } else {
+                  if(newSelected != this.selectedFiles){
+                      this.$emit('update:selectedFiles', newSelected)
+                  }
+              }
         },
         selectedFiles(newSelected, oldSelected){
-            this.selected = newSelected
+            this.selected = newSelected;
+            this.isShiftModifierOn = false;
         }
     },
     methods: {
+        clickShiftHandler() {
+            this.isShiftModifierOn = true;
+        },
+
 		showMenu(e, file){
 			// https://stackoverflow.com/questions/53738919/emit-event-with-parameters-in-vue/53739018
 			this.$store.commit('SET_DRIVE_MENU_TARGET', e.currentTarget)

diff --git a/src/views/Drive.vue b/src/views/Drive.vue
@@ -108,7 +108,7 @@
             :file="file"
             :itemIndex="index"
             :selected="isSelected(file)"
-            @toggleSelection="toggleSelection(file)"
+            @toggleSelection="toggleSelection(file, $event)"
           />
           <DriveGridDrop
             v-if="
@@ -3277,12 +3277,24 @@ module.exports = {
         isSelected(file) {
             return this.selectedFiles.findIndex(selected => selected == file) > -1
         },
-        toggleSelection(file) {
+        toggleSelection(file, shiftModifier) {
             let index = this.selectedFiles.findIndex(selected=> selected == file)
             if (index > -1) {
                 this.selectedFiles.splice(index, 1)
             } else {
-                this.selectedFiles.push(file)
+                if (shiftModifier) {
+                    let newIndex = this.sortedFiles.indexOf(file);
+                    var largestIndex = -1;
+                    for(var i=0; i < this.selectedFiles.length; i++) {
+                        let index = this.sortedFiles.indexOf(this.selectedFiles[i]);
+                        if (index < newIndex && index > largestIndex) {
+                            largestIndex = index;
+                        }
+                    }
+                    this.selectedFiles = this.selectedFiles.concat(this.sortedFiles.slice(largestIndex +1, newIndex +1));
+                } else {
+                    this.selectedFiles.push(file);
+                }
             }
         }