WIP

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,14 +86,15 @@ 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)
  this.handleFileSelectionShortcuts(event)
  },
 
  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) {

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) {

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
  }