From d917c3511a99332a4c1a00d6c69f1fff49651aea Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 21 Jun 2022 16:14:15 +0200
Subject: [PATCH] WIP

---
 packages/web-app-files/src/App.vue            | 48 ++++++++++++++-----
 .../components/FilesList/ResourceTable.vue    |  4 +-
 packages/web-app-files/src/store/mutations.js |  8 ++--
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 4c99e2a67f1..a8cd7f5a702 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -19,6 +19,7 @@
   </main>
 </template>
 <script lang="ts">
+import { bus } from 'web-pkg/src/instance'
 import Mixins from './mixins'
 import { mapActions, mapState, mapMutations } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
@@ -29,6 +30,11 @@ export default defineComponent({
     SideBar
   },
   mixins: [Mixins],
+  data: () => {
+    return {
+      selectionCounter: 0
+    }
+  },
   computed: {
     ...mapState('Files/sidebar', {
       sidebarClosed: 'closed',
@@ -55,6 +61,13 @@ export default defineComponent({
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
+    const fileListClickedEvent = bus.subscribe('app.files.list.clicked', (resource) => {
+      console.log(resource);
+    })
+
+    this.$on('beforeDestroy', () => {
+      bus.unsubscribe('app.files.list.clicked', fileListClickedEvent)
+    })
   },
 
   mounted() {
@@ -73,7 +86,7 @@ export default defineComponent({
     }),
     ...mapActions(['showMessage', 'createModal', 'hideModal']),
     ...mapActions('Files', ['copySelectedFiles', 'cutSelectedFiles', 'pasteSelectedFiles']),
-    ...mapMutations('Files', ['UPSERT_RESOURCE']),
+    ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_LATEST_SELECTED_FILE']),
 
     handleShortcut(event) {
       this.handleFileActionsShortcuts(event)
@@ -81,6 +94,7 @@ export default defineComponent({
     },
 
     handleFileSelectionShortcuts(event) {
+      // click has to reset selectioncounter
       const key = event.keyCode || event.which
       const isShiftPressed = event.shiftKey
       if(!isShiftPressed) return
@@ -89,26 +103,34 @@ export default defineComponent({
       if(isDownPressed) {
         const latestSelectedRow = document.querySelectorAll(`[data-item-id='${this.latestSelectedId}']`)[0]
         const nextRow = latestSelectedRow.nextSibling as HTMLElement
+        if(nextRow === null) return
         const nextResourceId = nextRow.getAttribute("data-item-id")
 
-        console.log(nextRow)
-        console.log(nextResourceId)
-        this.toggleFileSelection({id: nextResourceId})
+        if(this.selectionCounter < 0) {
+          // deselect
+          this.toggleFileSelection({id: this.latestSelectedId})
+          this.SET_LATEST_SELECTED_FILE(nextResourceId)
+        }else {
+          // select
+          this.toggleFileSelection({id: nextResourceId})
+        }
+        this.selectionCounter = this.selectionCounter + 1
       }
       if(isUpPressed) {
         const latestSelectedRow = document.querySelectorAll(`[data-item-id='${this.latestSelectedId}']`)[0]
         const nextRow = latestSelectedRow.previousSibling as HTMLElement
+        if(nextRow === null) return
         const nextResourceId = nextRow.getAttribute("data-item-id")
-
-        console.log(nextRow)
-        console.log(nextResourceId)
-        this.toggleFileSelection({id: nextResourceId})
+        if(this.selectionCounter > 0) {
+          // deselect
+          this.toggleFileSelection({id: this.latestSelectedId})
+          this.SET_LATEST_SELECTED_FILE(nextResourceId)
+        }else {
+          // select
+          this.toggleFileSelection({id: nextResourceId})
+        }
+        this.selectionCounter = this.selectionCounter - 1
       }
-      // 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) {
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 3ca6c482747..740f2f2cfd4 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -41,7 +41,7 @@
         size="large"
         :value="selection"
         :option="item"
-        @input="emitSelect"
+        @input="fileClicked"
         @click.native.stop
       />
     </template>
@@ -168,6 +168,7 @@
 </template>
 
 <script lang="ts">
+import { bus } from 'web-pkg/src/instance'
 import { DateTime } from 'luxon'
 import maxSize from 'popper-max-size-modifier'
 import { mapGetters, mapActions, mapState } from 'vuex'
@@ -673,6 +674,7 @@ export default defineComponent({
        * Triggered when the file row is clicked
        * @property {object} resource The resource for which the event is triggered
        */
+      bus.publish('app.files.list.clicked', resource);
       this.emitSelect([resource])
     },
     formatDate(date) {
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index e281c0aeb52..4d3df115a21 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -91,17 +91,16 @@ export default {
   SET_CLIPBOARD_ACTION(state, action) {
     state.clipboardAction = action
   },
+  SET_LATEST_SELECTED_FILE(state, file) {
+    state.latestSelectedId = file
+  },
   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
@@ -115,6 +114,7 @@ export default {
   REMOVE_FILE_SELECTION(state, file) {
     const selected = [...state.selectedIds]
     if (selected.length > 1) {
+      state.latestSelectedId = file.id
       state.selectedIds = selected.filter((id) => file.id !== id)
       return
     }