Fix keyboard nav reactivity broken after delete on item in admin settins

owncloud · Jan 30, 2024 · fc343ad · fc343ad
1 parent c1c15f0
commit fc343ad
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 164 deletions.
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -124,12 +124,6 @@ import { defaultFuseOptions } from '@ownclouders/web-pkg'
 import { useFileListHeaderPosition, usePagination } from '@ownclouders/web-pkg'
 import { Pagination } from '@ownclouders/web-pkg'
 import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults'
-import { useKeyboardActions } from '@ownclouders/web-pkg'
-import {
-  useKeyboardTableMouseActions,
-  useKeyboardTableNavigation
-} from 'web-app-admin-settings/src/composables/keyboardActions'
-import { findIndex } from 'lodash-es'
 
 export default defineComponent({
   name: 'GroupsList',
@@ -155,10 +149,6 @@ export default defineComponent({
     const router = useRouter()
     const route = useRoute()
     const markInstance = ref(null)
-
-    const lastSelectedGroupIndex = ref(0)
-    const lastSelectedGroupId = ref(null)
-
     const isGroupSelected = (group) => {
       return props.selectedGroups.some((s) => s.id === group.id)
     }
@@ -258,26 +248,7 @@ export default defineComponent({
       total: totalPages
     } = usePagination({ items, perPageDefault, perPageStoragePrefix })
 
-    const keyActions = useKeyboardActions()
-    useKeyboardTableNavigation(
-      keyActions,
-      paginatedItems,
-      props.selectedGroups,
-      lastSelectedGroupIndex,
-      lastSelectedGroupId
-    )
-    useKeyboardTableMouseActions(
-      keyActions,
-      paginatedItems,
-      props.selectedGroups,
-      lastSelectedGroupIndex,
-      lastSelectedGroupId
-    )
-
     const toggleGroup = (group, deselect = false) => {
-      lastSelectedGroupIndex.value = findIndex(props.groups, (u) => u.id === group.id)
-      lastSelectedGroupId.value = group.id
-      keyActions.resetSelectionCursor()
       emit('toggleSelectGroup', group, deselect)
     }
 

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -142,12 +142,6 @@ import { ContextMenuQuickAction } from '@ownclouders/web-pkg'
 import { useFileListHeaderPosition, useRoute, useRouter, usePagination } from '@ownclouders/web-pkg'
 import { Pagination } from '@ownclouders/web-pkg'
 import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults'
-import { useKeyboardActions } from '@ownclouders/web-pkg'
-import {
-  useKeyboardTableMouseActions,
-  useKeyboardTableNavigation
-} from 'web-app-admin-settings/src/composables/keyboardActions'
-import { findIndex } from 'lodash-es'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -175,9 +169,6 @@ export default defineComponent({
     const filterTerm = ref('')
     const markInstance = ref(undefined)
 
-    const lastSelectedSpaceIndex = ref(0)
-    const lastSelectedSpaceId = ref(null)
-
     const highlighted = computed(() => props.selectedSpaces.map((s) => s.id))
     const footerTextTotal = computed(() => {
       return $gettext('%{spaceCount} spaces in total', {
@@ -457,26 +448,7 @@ export default defineComponent({
       eventBus.publish(SideBarEventTopics.open)
     }
 
-    const keyActions = useKeyboardActions()
-    useKeyboardTableNavigation(
-      keyActions,
-      paginatedItems,
-      props.selectedSpaces,
-      lastSelectedSpaceIndex,
-      lastSelectedSpaceId
-    )
-    useKeyboardTableMouseActions(
-      keyActions,
-      paginatedItems,
-      props.selectedSpaces,
-      lastSelectedSpaceIndex,
-      lastSelectedSpaceId
-    )
-
     const toggleSpace = (space, deselect = false) => {
-      lastSelectedSpaceIndex.value = findIndex(props.spaces, (u) => u.id === space.id)
-      lastSelectedSpaceId.value = space.id
-      keyActions.resetSelectionCursor()
       emit('toggleSelectSpace', space, deselect)
     }
 

diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -109,12 +109,6 @@ import { ContextMenuQuickAction } from '@ownclouders/web-pkg'
 import { useFileListHeaderPosition, usePagination } from '@ownclouders/web-pkg'
 import { Pagination } from '@ownclouders/web-pkg'
 import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults'
-import {
-  useKeyboardTableNavigation,
-  useKeyboardTableMouseActions
-} from 'web-app-admin-settings/src/composables/keyboardActions'
-import { useKeyboardActions } from '@ownclouders/web-pkg'
-import { findIndex } from 'lodash-es'
 
 export default defineComponent({
   name: 'UsersList',
@@ -141,10 +135,6 @@ export default defineComponent({
     const sortBy = ref<string>('onPremisesSamAccountName')
     const sortDir = ref<string>(SortDir.Asc)
     const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
-
-    const lastSelectedUserIndex = ref(0)
-    const lastSelectedUserId = ref(null)
-
     const isUserSelected = (user) => {
       return props.selectedUsers.some((s) => s.id === user.id)
     }
@@ -262,26 +252,7 @@ export default defineComponent({
       total: totalPages
     } = usePagination({ items, perPageDefault, perPageStoragePrefix })
 
-    const keyActions = useKeyboardActions()
-    useKeyboardTableNavigation(
-      keyActions,
-      paginatedItems,
-      props.selectedUsers,
-      lastSelectedUserIndex,
-      lastSelectedUserId
-    )
-    useKeyboardTableMouseActions(
-      keyActions,
-      paginatedItems,
-      props.selectedUsers,
-      lastSelectedUserIndex,
-      lastSelectedUserId
-    )
-
     const toggleUser = (user, deselect = false) => {
-      lastSelectedUserIndex.value = findIndex(props.users, (u) => u.id === user.id)
-      lastSelectedUserId.value = user.id
-      keyActions.resetSelectionCursor()
       emit('toggleSelectUser', user, deselect)
     }
 

diff --git a/...es/web-app-admin-settings/src/composables/keyboardActions/useKeyboardTableMouseActions.ts b/...es/web-app-admin-settings/src/composables/keyboardActions/useKeyboardTableMouseActions.ts
@@ -3,27 +3,28 @@ import { eventBus } from '@ownclouders/web-pkg'
 import { KeyboardActions } from '@ownclouders/web-pkg'
 import { findIndex, find } from 'lodash-es'
 import { Resource } from '@ownclouders/web-client'
+import { Item } from '@ownclouders/web-client/src/helpers'
 
 export const useKeyboardTableMouseActions = (
   keyActions: KeyboardActions,
   paginatedResources: Ref<{ id: string }[]>,
-  selectedRows: any,
+  selectedRows: Ref<Item[]>,
   lastSelectedRowIndex: Ref<number>,
   lastSelectedRowId: Ref<string | null>
 ) => {
   let resourceListClickedMetaEvent
   let resourceListClickedShiftEvent
 
   const handleCtrlClickAction = (resource: Resource) => {
-    const rowIndex = findIndex(selectedRows, { id: resource.id })
+    const rowIndex = findIndex(unref(selectedRows), { id: resource.id })
     if (rowIndex >= 0) {
-      selectedRows.splice(rowIndex, 1)
+      selectedRows.value = unref(selectedRows).filter((item) => item.id != resource.id)
     } else {
-      selectedRows.push(resource)
+      unref(selectedRows).push(resource)
     }
     keyActions.resetSelectionCursor()
 
-    lastSelectedRowIndex.value = rowIndex >= 0 ? rowIndex : selectedRows.length - 1
+    lastSelectedRowIndex.value = rowIndex >= 0 ? rowIndex : unref(selectedRows).length - 1
     lastSelectedRowId.value = String(resource.id)
   }
 
@@ -47,10 +48,10 @@ export const useKeyboardTableMouseActions = (
       if (skipTargetSelection && nodeId === resource.id) {
         continue
       }
-      const selectedRowIndex = findIndex(selectedRows, { id: nodeId })
+      const selectedRowIndex = findIndex(unref(selectedRows), { id: nodeId })
       if (selectedRowIndex === -1) {
         const selectedRow = find(paginatedResources.value, { id: nodeId })
-        selectedRows.push(selectedRow)
+        unref(selectedRows).push(selectedRow)
       }
     }
 

diff --git a/...ages/web-app-admin-settings/src/composables/keyboardActions/useKeyboardTableNavigation.ts b/...ages/web-app-admin-settings/src/composables/keyboardActions/useKeyboardTableNavigation.ts
@@ -2,11 +2,12 @@ import { useScrollTo } from '@ownclouders/web-pkg'
 import { Ref, unref } from 'vue'
 import { Key, KeyboardActions, ModifierKey } from '@ownclouders/web-pkg'
 import { find, findIndex } from 'lodash-es'
+import { Item } from '@ownclouders/web-client/src/helpers'
 
 export const useKeyboardTableNavigation = (
   keyActions: KeyboardActions,
   paginatedResources: Ref<{ id: string }[]>,
-  selectedRows: any,
+  selectedRows: Ref<Item[]>,
   lastSelectedRowIndex: Ref<number>,
   lastSelectedRowId: Ref<string | null>
 ) => {
@@ -31,19 +32,19 @@ export const useKeyboardTableNavigation = (
   keyActions.bindKeyAction({ primary: Key.Space }, () => {
     const { lastSelectedRow, lastSelectedRowIndex } = getLastSelectedRow()
     if (lastSelectedRowIndex === -1) {
-      selectedRows.push(lastSelectedRow)
+      selectedRows.value.push(lastSelectedRow)
     } else {
-      selectedRows.splice(lastSelectedRowIndex, 1)
+      selectedRows.value = unref(selectedRows).filter((item) => item.id !== lastSelectedRow.id)
     }
   })
 
   keyActions.bindKeyAction({ primary: Key.Esc }, () => {
     keyActions.resetSelectionCursor()
-    selectedRows.splice(0, selectedRows.length)
+    selectedRows.value = []
   })
 
   const handleNavigateAction = async (up = false) => {
-    const nextResource = !lastSelectedRowId ? getFirstResource() : getNextResource(up)
+    const nextResource = !unref(lastSelectedRowId) ? getFirstResource() : getNextResource(up)
 
     if (nextResource === -1) {
       return
@@ -55,7 +56,7 @@ export const useKeyboardTableNavigation = (
     )
 
     keyActions.resetSelectionCursor()
-    selectedRows.splice(0, selectedRows.length, nextResource)
+    selectedRows.value = [nextResource]
     lastSelectedRowIndex.value = nextResourceIndex
     lastSelectedRowId.value = String(nextResource.id)
 
@@ -77,10 +78,12 @@ export const useKeyboardTableNavigation = (
       const { lastSelectedRow, lastSelectedRowIndex } = getLastSelectedRow()
 
       lastSelectedRowIndex === -1
-        ? selectedRows.push(lastSelectedRow)
-        : selectedRows.splice(lastSelectedRowIndex, 1)
+        ? selectedRows.value.push(lastSelectedRow)
+        : (selectedRows.value = unref(selectedRows).filter(
+            (item) => item.id !== lastSelectedRow.id
+          ))
     } else {
-      selectedRows.push(nextResource)
+      selectedRows.value.push(nextResource)
     }
 
     lastSelectedRowIndex.value = nextResourceIndex
@@ -105,17 +108,17 @@ export const useKeyboardTableNavigation = (
         (resource) => resource.id === lastSelectedRowId.value
       )
       const lastSelectedRowIndex = findIndex(
-        selectedRows,
+        unref(selectedRows),
         (resource: any) => resource.id === lastSelectedRowId.value
       )
 
       if (lastSelectedRowIndex === -1) {
-        selectedRows.push(lastSelectedRow)
+        selectedRows.value.push(lastSelectedRow)
       } else {
-        selectedRows.splice(lastSelectedRowIndex, 1)
+        selectedRows.value = unref(selectedRows).filter((item) => item.id !== lastSelectedRow.id)
       }
     } else {
-      selectedRows.push(nextResource)
+      selectedRows.value.push(nextResource)
     }
 
     lastSelectedRowIndex.value = nextResourceIndex
@@ -126,7 +129,7 @@ export const useKeyboardTableNavigation = (
 
   const handleSelectAllAction = () => {
     keyActions.resetSelectionCursor()
-    selectedRows.splice(0, selectedRows.length, ...paginatedResources.value)
+    selectedRows.value = [...unref(paginatedResources)]
   }
 
   const getNextResource = (previous = false) => {
@@ -153,7 +156,7 @@ export const useKeyboardTableNavigation = (
       (resource) => resource.id === lastSelectedRowId.value
     )
     const lastSelectedRowIndex = findIndex(
-      selectedRows,
+      unref(selectedRows),
       (resource: any) => resource.id === lastSelectedRowId.value
     )
     return {