Fix pagination and items-per-page behavior in Spaces and Trash overview

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

@@ -7,7 +7,7 @@
         :has-bulk-actions="true"
         :has-hidden-files="false"
         :has-file-extensions="false"
-        :has-pagination="false"
+        :has-pagination="true"
         :batch-actions-loading="batchActionsLoading"
         :view-modes="viewModes"
         :view-mode-default="FolderViewModeConstants.defaultModeName"
@@ -294,7 +294,7 @@ const {
 } = usePagination({
   items,
   perPageDefault: '50',
-  perPageStoragePrefix: 'spaces-list'
+  perPageStoragePrefix: 'files'
 })
 
 const batchActionsLoading = computed(() => {

packages/web-app-files/src/views/trash/Overview.vue

@@ -6,7 +6,7 @@
         :has-view-options="true"
         :has-hidden-files="false"
         :has-file-extensions="false"
-        :has-pagination="false"
+        :has-pagination="true"
         :show-actions-bar="false"
         :view-modes="viewModes"
       />
@@ -43,7 +43,7 @@
             :is="folderView.component"
             v-else
             class="trash-table"
-            :resources="displaySpaces"
+            :resources="paginatedSpaces"
             :fields-displayed="['name']"
             :sort-by="sortBy"
             :sort-dir="sortDir"
@@ -79,6 +79,7 @@
               />
             </template>
             <template #footer>
+              <pagination :pages="totalPages" :current-page="currentPage" />
               <div class="text-center w-full my-2">
                 <p data-testid="files-list-footer-info" class="text-role-on-surface-variant">
                   {{ footerTextTotal }}
@@ -108,6 +109,8 @@ import {
   defaultFuseOptions,
   FileSideBar,
   NoContentMessage,
+  Pagination,
+  usePagination,
   useClientService,
   useGetMatchingSpace,
   useLoadPreview,
@@ -271,6 +274,14 @@ const filter = (spaces: SpaceResource[], filterTerm: string) => {
 const displaySpaces = computed(() =>
   sort(filter(unref(spaces), unref(filterTerm)), unref(sortBy), unref(sortDir) === 'desc')
 )
+const {
+  items: paginatedSpaces,
+  page: currentPage,
+  total: totalPages
+} = usePagination({
+  items: displaySpaces,
+  perPageStoragePrefix: 'files'
+})
 
 const handleSort = (event: { sortBy: keyof SpaceResource; sortDir: SortDir }) => {
   sortBy.value = event.sortBy

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`Projects view > different files view states > lists all available proje
 "<div class="flex w-full">
   <div class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
     <div id="files-view" class="outline-0 z-0 flex flex-col">
-      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsbar="true" showactionsonselection="true" batchactionsloading="false"></app-bar-stub>
+      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="true" showactionsbar="true" showactionsonselection="true" batchactionsloading="false"></app-bar-stub>
       <table data-v-3c9ab66c="" class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" view-size="1" id="files-space-table">
         <thead data-v-3c9ab66c="" class="oc-thead border-b">
           <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">

packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
 "<div class="flex w-full">
   <div class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
     <div id="files-view" class="outline-0 z-0 flex flex-col">
-      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsbar="false" showactionsonselection="false" batchactionsloading="false"></app-bar-stub>
+      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="true" showactionsbar="false" showactionsonselection="false" batchactionsloading="false"></app-bar-stub>
       <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
         <div data-v-8440503a="" role="search" class="oc-search flex items-center w-3xs">
           <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for trash bins" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0">