WIP selection via keyboard

owncloud · Jun 21, 2022 · 4be1391 · 4be1391
1 parent 5d6f401
commit 4be1391
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
@@ -34,6 +34,7 @@ export default defineComponent({
       sidebarClosed: 'closed',
       sidebarActivePanel: 'activePanel'
     }),
+    ...mapState('Files', ['latestSelectedId']),
 
     showSidebar() {
       return !this.sidebarClosed
@@ -47,7 +48,8 @@ export default defineComponent({
           this.closeSidebar()
         }
       }
-    }
+    },
+
   },
   created() {
     this.$root.$on('upload-end', () => {
@@ -64,7 +66,7 @@ export default defineComponent({
   },
 
   methods: {
-    ...mapActions('Files', ['resetFileSelection']),
+    ...mapActions('Files', ['resetFileSelection', 'toggleFileSelection']),
     ...mapActions('Files/sidebar', {
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
@@ -74,6 +76,42 @@ export default defineComponent({
     ...mapMutations('Files', ['UPSERT_RESOURCE']),
 
     handleShortcut(event) {
+      this.handleFileActionsShortcuts(event)
+      this.handleFileSelectionShortcuts(event)
+    },
+
+    handleFileSelectionShortcuts(event) {
+      const key = event.keyCode || event.which
+      const isShiftPressed = event.shiftKey
+      if(!isShiftPressed) return
+      const isUpPressed = key === 38
+      const isDownPressed = key === 40
+      if(isDownPressed) {
+        const latestSelectedRow = document.querySelectorAll(`[data-item-id='${this.latestSelectedId}']`)[0]
+        const nextRow = latestSelectedRow.nextSibling as HTMLElement
+        const nextResourceId = nextRow.getAttribute("data-item-id")
+
+        console.log(nextRow)
+        console.log(nextResourceId)
+        this.toggleFileSelection({id: nextResourceId})
+      }
+      if(isUpPressed) {
+        const latestSelectedRow = document.querySelectorAll(`[data-item-id='${this.latestSelectedId}']`)[0]
+        const nextRow = latestSelectedRow.previousSibling as HTMLElement
+        const nextResourceId = nextRow.getAttribute("data-item-id")
+
+        console.log(nextRow)
+        console.log(nextResourceId)
+        this.toggleFileSelection({id: nextResourceId})
+      }
+      // get last selected id
+      // find index in dom
+      // get id from dom index + 1 or  - 1
+      
+      //document.getElementsByClassName("oc-table-highlighted")[0].parentElement.childNodes[0]
+    },
+
+    handleFileActionsShortcuts(event) {
       const key = event.keyCode || event.which
       const ctr = window.navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey
       if (!ctr /* CTRL | CMD */) return

diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
@@ -92,14 +92,22 @@ export default {
     state.clipboardAction = action
   },
   SET_FILE_SELECTION(state, files) {
+    console.log("im here jo")
+    console.log(files)
+    const latestSelected = files.find(i => !state.selectedIds.some(j => j === i.id))
+    const latestSelectedId = latestSelected ? latestSelected.id : state.latestSelectedId
+    state.latestSelectedId = latestSelectedId
+    console.log(state.latestSelectedId)
     state.selectedIds = files.map((f) => f.id)
   },
   ADD_FILE_SELECTION(state, file) {
+    console.log("im here jo 2")
     const selected = [...state.selectedIds]
     const fileIndex = selected.findIndex((id) => {
       return id === file.id
     })
     if (fileIndex === -1) {
+      state.latestSelectedId = file.id
       selected.push(file.id)
       state.selectedIds = selected
     }

diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
@@ -3,6 +3,7 @@ export default {
   files: [],
   filesSearched: null,
   selectedIds: [],
+  latestSelectedId: null,
   clipboardResources: [],
   clipboardAction: null,
   versions: [],