fix: show the last page instead of an empty list when the page is out of range

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -263,16 +263,6 @@ onBeforeUnmount(() => {
   eventBus.unsubscribe('app.files.spaces.uploaded-image', uploadedImageToken)
 })
 
-// e.g. after deleting all spaces of the last page: show the new last page instead of an empty one
-watch(totalPages, async (pageCount) => {
-  if (pageCount > 0 && unref(currentPage) > pageCount) {
-    await router.push({
-      ...unref(route),
-      query: { ...unref(route).query, page: String(pageCount) }
-    })
-  }
-})
-
 // the selection is kept across pages, so only the spaces of the current page count
 const allSpacesSelected = computed(
   () => unref(paginatedItems).length > 0 && unref(paginatedItems).every(isSpaceSelected)

packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts

@@ -1,9 +1,7 @@
-import { computed, unref } from 'vue'
+import { computed } from 'vue'
 import {
-  queryItemAsString,
   useMessages,
   useModals,
-  useRouteQuery,
   isPromiseFulfilled,
   isPromiseRejected
 } from '@opencloud-eu/web-pkg'
@@ -20,16 +18,6 @@ export function useGroupActionsDelete() {
   const { dispatchModal } = useModals()
   const groupSettingsStore = useGroupSettingsStore()
 
-  const currentPageQuery = useRouteQuery('page', '1')
-  const currentPage = computed(() => {
-    return parseInt(queryItemAsString(unref(currentPageQuery)))
-  })
-
-  const itemsPerPageQuery = useRouteQuery('items-per-page', '1')
-  const itemsPerPage = computed(() => {
-    return parseInt(queryItemAsString(unref(itemsPerPageQuery)))
-  })
-
   async function deleteGroups(groups: Group[]) {
     const graphClient = clientService.graphAuthenticated
     const promises = groups.map((group) => graphClient.groups.deleteGroup(group.id))
@@ -70,12 +58,6 @@ export function useGroupActionsDelete() {
 
     groupSettingsStore.removeGroups(groups.filter((_, i) => isPromiseFulfilled(results[i])))
     groupSettingsStore.setSelectedGroups([])
-
-    const pageCount = Math.ceil(groupSettingsStore.groups.length / unref(itemsPerPage))
-    if (unref(currentPage) > 1 && unref(currentPage) > pageCount) {
-      // reset pagination to avoid empty lists (happens when deleting all items on the last page)
-      currentPageQuery.value = pageCount.toString()
-    }
   }
 
   function handler({ resources }: GroupActionOptions) {

packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts

@@ -11,6 +11,7 @@ import { Group } from '@opencloud-eu/web-client/graph/generated'
 import { SortDir } from '@opencloud-eu/design-system/helpers'
 import { OcCheckbox, OcTable } from '@opencloud-eu/design-system/components'
 import { RouteLocationNormalizedLoaded } from 'vue-router'
+import { nextTick } from 'vue'
 
 const getGroupMocks = () =>
   [
@@ -72,6 +73,27 @@ describe('GroupsList', () => {
     })
   })
 
+  describe('pagination', () => {
+    it('shows the last page when the current page runs out of filtered groups', async () => {
+      const { wrapper } = getWrapper({
+        groups: [
+          { id: '1', displayName: 'admins' },
+          { id: '2', displayName: 'admins2' },
+          { id: '3', displayName: 'users' }
+        ] as Group[],
+        filterTerm: 'admins',
+        query: { page: '2', 'items-per-page': '1' }
+      })
+      expect(getTableData(wrapper).map((g) => g.displayName)).toEqual(['admins2'])
+
+      const groupSettingsStore = useGroupSettingsStore()
+      groupSettingsStore.groups = groupSettingsStore.groups.filter((g) => g.id !== '2')
+      await nextTick()
+
+      expect(getTableData(wrapper).map((g) => g.displayName)).toEqual(['admins'])
+    })
+  })
+
   it('should show the group details on details button click', async () => {
     const groups = getGroupMocks()
     const { wrapper } = getWrapper({ mountType: mount, groups })

packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts

@@ -127,23 +127,16 @@ describe('SpacesList', () => {
 
   describe('pagination', () => {
     it('shows the new last page if the current page gets empty, e.g. after deleting spaces', async () => {
-      const { mocks } = getWrapper({
-        mountType: shallowMount,
-        stubActions: false,
-        page: '2',
-        perPage: '1'
-      })
+      const { wrapper } = getWrapper({ stubActions: false, page: '2', perPage: '1' })
       const spacesStore = useSpacesStore()
       spacesStore.setAllProjectSpaces(spaceMocks.map((space) => ({ ...space })) as SpaceResource[])
       await flushPromises()
-      expect(mocks.$router.push).not.toHaveBeenCalled()
+      expect(getColumn(wrapper, 'name')).toEqual(['2 Another space'])
 
       spacesStore.removeSpace(spaceMocks[1])
       await flushPromises()
 
-      expect(mocks.$router.push).toHaveBeenCalledWith(
-        expect.objectContaining({ query: expect.objectContaining({ page: '1' }) })
-      )
+      expect(getColumn(wrapper, 'name')).toEqual(['1 Some space'])
     })
   })
 

packages/web-app-files/src/views/spaces/GenericTrash.vue

@@ -10,7 +10,7 @@
         <template #actions>
           <oc-button
             v-if="emptyTrashBinAction.isVisible({ resources: [space] })"
-            :disabled="paginatedResources.length === 0"
+            :disabled="isEmpty"
             :action-options="{ resources: [space] }"
             :class="emptyTrashBinAction.class"
             size="medium"
@@ -143,7 +143,7 @@ const keyActions = useKeyboardActions()
 useKeyboardFileNavigation(keyActions, paginatedResources, viewMode)
 useKeyboardFileMouseActions(keyActions, viewMode)
 
-const isEmpty = computed(() => unref(resourcesViewDefaults.paginatedResources).length < 1)
+const isEmpty = computed(() => unref(resourcesViewDefaults.storeItems).length < 1)
 
 const { actions: emptyTrashBinActions } = useFileActionsEmptyTrashBin()
 const emptyTrashBinAction = computed(() => unref(emptyTrashBinActions)[0])

packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts

@@ -82,6 +82,7 @@ function getMountedWrapper({
   const plugins = [...defaultPlugins()]
   vi.mocked(useResourcesViewDefaults).mockImplementation(() =>
     useResourcesViewDefaultsMock({
+      storeItems: ref(files),
       paginatedResources: ref(files),
       areResourcesLoading: ref(loading)
     })

packages/web-pkg/src/composables/pagination/usePagination.ts

@@ -26,11 +26,15 @@ interface PaginationResult<T> {
 export function usePagination<T>(options: PaginationOptions<T>): PaginationResult<T> {
   const router = useRouter()
   const route = useRoute()
-  const page = createPageRef<T>(options)
+  const requestedPage = createPageRef<T>(options)
   const perPage = createPerPageRef<T>(options)
   const total = computed(() => {
     return Math.ceil(unref(options.items).length / unref(perPage)) || 1
   })
+  const page = computed(() => {
+    const clampedPage = Math.min(unref(requestedPage), unref(total))
+    return clampedPage >= 1 ? clampedPage : 1
+  })
   const items = computed(() => {
     if (!unref(perPage)) {
       return unref(options.items)

packages/web-pkg/tests/unit/composables/pagination/usePagination.spec.ts

@@ -10,7 +10,8 @@ describe('usePagination', () => {
     it.each([
       { currentPage: 1, itemsPerPage: 100, expected: [1, 2, 3, 4, 5, 6] },
       { currentPage: 1, itemsPerPage: 2, expected: [1, 2] },
-      { currentPage: 2, itemsPerPage: 2, expected: [3, 4] }
+      { currentPage: 2, itemsPerPage: 2, expected: [3, 4] },
+      { currentPage: 9, itemsPerPage: 4, expected: [5, 6] }
     ])('returns proper paginated items', ({ currentPage, itemsPerPage, expected }) => {
       getWrapper({
         setup: ({ items }) => {
@@ -22,6 +23,21 @@ describe('usePagination', () => {
       })
     })
   })
+  describe('computed page', () => {
+    it.each([
+      { currentPage: 2, expected: 2 },
+      { currentPage: 9, expected: 2 }
+    ])('clamps page $currentPage to $expected', ({ currentPage, expected }) => {
+      getWrapper({
+        setup: ({ page }) => {
+          expect(unref(page)).toBe(expected)
+        },
+        items: [1, 2, 3, 4, 5, 6],
+        currentPage,
+        itemsPerPage: 4
+      })
+    })
+  })
   describe('computed total', () => {
     it.each([
       { itemCount: 1, itemsPerPage: 100, expected: 1 },