Add Option for pagination to Admin Settings

changelog/unreleased/enhancement-add-pagination-options-to-admin-settings

@@ -0,0 +1,7 @@
+Enhancement: Add pagination options to admin settings
+
+We've added pagination options to the admin settings app,
+furthermore we've added more granular pagination options to the files app.
+
+https://github.com/owncloud/web/pull/9199
+https://github.com/owncloud/web/issues/9188

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -12,7 +12,16 @@
               :items="breadcrumbs"
             />
             <portal-target name="app.runtime.mobile.nav" />
-            <div>
+            <div class="oc-flex">
+              <view-options
+                v-if="showViewOptions"
+                :has-hidden-files="false"
+                :has-file-extensions="false"
+                :has-pagination="true"
+                :pagination-options="paginationOptions"
+                :per-page-query-name="perPageQueryName"
+                :per-page-default="perPageDefault"
+              />
               <oc-button
                 v-if="sideBarAvailablePanels.length"
                 id="files-toggle-sidebar"
@@ -58,6 +67,11 @@
 </template>
 
 <script lang="ts">
+import {
+  perPageQueryName,
+  perPageDefault,
+  paginationOptions
+} from 'web-app-admin-settings/src/defaults'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import SideBar from 'web-pkg/src/components/SideBar/SideBar.vue'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
@@ -76,12 +90,14 @@ import { eventBus, useAppDefaults } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { Panel } from 'web-pkg/src/components/SideBar'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
+import ViewOptions from 'web-pkg/src/components/ViewOptions.vue'
 
 export default defineComponent({
   components: {
     SideBar,
     AppLoadingSpinner,
-    BatchActions
+    BatchActions,
+    ViewOptions
   },
   props: {
     breadcrumbs: {
@@ -118,6 +134,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    showViewOptions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     showBatchActions: {
       type: Boolean,
       required: false,
@@ -179,7 +200,10 @@ export default defineComponent({
       selectPanel,
       ...useAppDefaults({
         applicationId: 'admin-settings'
-      })
+      }),
+      perPageQueryName,
+      perPageDefault,
+      paginationOptions
     }
   },
   computed: {

packages/web-app-admin-settings/src/defaults/index.ts

@@ -1,3 +1,4 @@
 export const supportedLogoMimeTypes = ['image/gif', 'image/jpeg', 'image/png']
 export const perPageDefault = '50'
 export const perPageQueryName = 'admin-settings-items-per-page'
+export const paginationOptions = ['20', '50', '100', '250']

packages/web-app-admin-settings/src/views/Groups.vue

@@ -10,6 +10,7 @@
       :show-batch-actions="!!selectedGroups.length"
       :batch-actions="batchActions"
       :batch-action-items="selectedGroups"
+      :show-view-options="true"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions">

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -11,6 +11,7 @@
       :show-batch-actions="!!selectedSpaces.length"
       :batch-actions="batchActions"
       :batch-action-items="selectedSpaces"
+      :show-view-options="true"
     >
       <template #sideBarHeader>
         <space-info

packages/web-app-admin-settings/src/views/Users.vue

@@ -10,6 +10,7 @@
       :show-batch-actions="!!selectedUsers.length"
       :batch-actions="batchActions"
       :batch-action-items="selectedUsers"
+      :show-view-options="true"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions">

packages/web-app-admin-settings/tests/unit/views/Users.spec.ts

@@ -461,6 +461,7 @@ function getMountedWrapper({
         stubs: {
           CreateUserModal: true,
           AppLoadingSpinner: true,
+          ViewOptions: true,
           OcBreadcrumb: true,
           NoContentMessage: true,
           OcTable: true,

packages/web-app-admin-settings/tests/unit/views/__snapshots__/General.spec.ts.snap

@@ -2,6 +2,6 @@
 
 exports[`General view renders component 1`] = `
 <div>
-  <app-template-stub batchactionitems="" batchactions="" breadcrumbs="[object Object],[object Object]" issidebarheadercompact="false" loading="false" showbatchactions="false" sidebaravailablepanels="" sidebarloading="false" sidebaropen="false"></app-template-stub>
+  <app-template-stub batchactionitems="" batchactions="" breadcrumbs="[object Object],[object Object]" issidebarheadercompact="false" loading="false" showbatchactions="false" showviewoptions="false" sidebaravailablepanels="" sidebarloading="false" sidebaropen="false"></app-template-stub>
 </div>
 `;

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

@@ -8,7 +8,55 @@ exports[`Spaces view loading states should render spaces list after loading has
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
           <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
-          <div>
+          <div class="oc-flex">
+            <div class="oc-flex oc-flex-middle">
+              <!--v-if-->
+              <button aria-label="Display customization options of the files list" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-view-options-btn" type="button">
+                <!-- @slot Content of the button -->
+                <span class="oc-icon oc-icon-m oc-icon-passive">
+                  <!---->
+                </span>
+              </button>
+              <div class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto" id="files-view-options-drop">
+                <div class="oc-card oc-card-body oc-background-secondary oc-p-m">
+                  <ul class="oc-list oc-my-rm oc-mx-rm">
+                    <!--v-if-->
+                    <!--v-if-->
+                    <li class="files-view-options-list-item">
+                      <div class="oc-page-size files-pagination-size">
+                        <label class="oc-page-size-label" for="oc-page-size-3">Items per page</label>
+                        <div class="oc-page-size-select" input-id="oc-page-size-3" options="20,50,100,250">
+                          <label class="oc-label" for="oc-select-4"></label>
+                          <div class="v-select vs--single vs--unsearchable oc-select oc-page-size-select" dir="auto" style="background: transparent;">
+                            <div aria-expanded="false" aria-label="Search for option" aria-owns="vs2__listbox" class="vs__dropdown-toggle" id="vs2__combobox" role="combobox">
+                              <div class="vs__selected-options">
+                                <input aria-autocomplete="list" aria-controls="vs2__listbox" aria-labelledby="vs2__combobox" autocomplete="off" class="vs__search" id="oc-select-4" readonly="" type="search">
+                              </div>
+                              <div class="vs__actions">
+                                <button aria-label="Clear Selected" class="vs__clear" style="display: none;" title="Clear Selected" type="button">
+                                  <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
+                                  </svg>
+                                </button>
+                                <svg class="vs__open-indicator" height="10" role="presentation" width="14" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"></path>
+                                </svg>
+                                <div class="vs__spinner" style="display: none;">Loading...</div>
+                              </div>
+                            </div>
+                            <transition-stub appear="false" css="true" name="vs__fade" persisted="false">
+                              <ul id="vs2__listbox" role="listbox" style="display: none; visibility: hidden;"></ul>
+                            </transition-stub>
+                          </div>
+                          <!--v-if-->
+                        </div>
+                      </div>
+                    </li>
+                    <!--v-if-->
+                  </ul>
+                </div>
+              </div>
+            </div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">
               <!-- @slot Content of the button -->
               <span class="oc-icon oc-icon-m oc-icon-passive">

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -81,7 +81,6 @@ import { isLocationTrashActive } from '../../router'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
 import SidebarToggle from './SidebarToggle.vue'
-import ViewOptions from './ViewOptions.vue'
 import { ViewMode } from 'web-pkg/src/ui/types'
 import {
   useFileActionsAcceptShare,
@@ -99,6 +98,7 @@ import { useClientService, useRouter, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
 import { EVENT_ITEM_DROPPED } from 'design-system/src/helpers'
+import ViewOptions from 'web-pkg/src/components/ViewOptions.vue'
 
 export default defineComponent({
   components: {

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -206,7 +206,8 @@ import {
   useCapabilityShareJailEnabled,
   SortDir,
   useStore,
-  useUserContext
+  useUserContext,
+  ViewModeConstants
 } from 'web-pkg/src/composables'
 import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED, ImageDimension } from 'web-pkg/src/constants'
 import { eventBus } from 'web-pkg/src/services/eventBus'
@@ -220,7 +221,6 @@ import { configurationManager } from 'web-pkg/src/configuration'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
 import { useResourceRouteResolver } from 'web-app-files/src/composables/filesList/useResourceRouteResolver'
-import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
 import { ClipboardActions } from 'web-app-files/src/helpers/clipboardActions'
 import { isResourceTxtFileAlmostEmpty } from 'web-app-files/src/helpers/resources'
 import { determineSortFields } from 'web-app-files/src/helpers/ui/resourceTable'

packages/web-app-files/src/components/FilesList/ResourceTiles.vue

@@ -99,13 +99,12 @@
 import { onBeforeUpdate, defineComponent, nextTick, PropType, computed, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource, SpaceResource } from 'web-client'
-import { useStore, SortDir, SortField } from 'web-pkg/src/composables'
+import { useStore, SortDir, SortField, ViewModeConstants } from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { displayPositionedDropdown } from 'web-pkg/src/helpers/contextMenuDropdown'
 import { createLocationSpaces } from 'web-app-files/src/router'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
-import { ViewModeConstants } from 'web-app-files/src/composables'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can

packages/web-app-files/src/composables/index.ts

@@ -5,4 +5,3 @@ export * from './router'
 export * from './selection'
 export * from './shares'
 export * from './spaces'
-export * from './viewMode'

packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts

@@ -16,10 +16,14 @@ import { Task } from 'vue-concurrency'
 import { Resource } from 'web-client'
 import { useSelectedResources, SelectedResourcesResult } from '../selection'
 import { ReadOnlyRef } from 'web-pkg'
-import { useFileListHeaderPosition } from 'web-pkg/src/composables'
+import {
+  useFileListHeaderPosition,
+  useViewMode,
+  useViewSize,
+  ViewModeConstants
+} from 'web-pkg/src/composables'
 
 import { ScrollToResult, useScrollTo } from '../scrollTo'
-import { useViewMode, useViewSize, ViewModeConstants } from '../viewMode'
 
 interface ResourcesViewDefaultsOptions<T, U extends any[]> {
   loadResourcesTask?: Task<T, U>

packages/web-app-files/src/views/Favorites.vue

@@ -80,12 +80,12 @@ import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
-import { useResourcesViewDefaults, ViewModeConstants } from '../composables'
+import { useResourcesViewDefaults } from '../composables'
 import { computed, defineComponent } from 'vue'
 import { Resource } from 'web-client'
 import SideBar from '../components/SideBar/SideBar.vue'
 import FilesViewWrapper from '../components/FilesViewWrapper.vue'
-import { useStore } from 'web-pkg/src/composables'
+import { useStore, ViewModeConstants } from 'web-pkg/src/composables'
 import { SpaceResource } from 'web-client/src/helpers'
 import { getSpaceFromResource } from 'web-app-files/src/helpers/resource/getSpace'
 

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

@@ -171,15 +171,20 @@ import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import WhitespaceContextMenu from 'web-app-files/src/components/Spaces/WhitespaceContextMenu.vue'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
-import { useRoute, useRouteQuery, useClientService } from 'web-pkg/src/composables'
+import {
+  useRoute,
+  useRouteQuery,
+  useClientService,
+  ViewModeConstants
+} from 'web-pkg/src/composables'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
 import { ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { createLocationPublic, createLocationSpaces } from '../../router'
-import { useResourcesViewDefaults, ViewModeConstants } from '../../composables'
+import { useResourcesViewDefaults } from '../../composables'
 import { ResourceTransfer, TransferType } from '../../helpers/resource'
 import { FolderLoaderOptions } from '../../services/folder'
 import { CreateTargetRouteOptions } from 'web-app-files/src/helpers/folderLink/types'

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

@@ -79,7 +79,13 @@ import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 import AppBar from '../../components/AppBar/AppBar.vue'
 import CreateSpace from '../../components/AppBar/CreateSpace.vue'
-import { useAbility, useClientService, useSort, useStore } from 'web-pkg/src/composables'
+import {
+  useAbility,
+  useClientService,
+  useSort,
+  useStore,
+  ViewModeConstants
+} from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
@@ -90,7 +96,7 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics, useSideBar } from 'web-pkg/src/composables/sideBar'
 import { WebDAV } from 'web-client/src/webdav'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
-import { useSelectedResources, ViewModeConstants } from 'web-app-files/src/composables'
+import { useSelectedResources } from 'web-app-files/src/composables'
 import { sortFields as availableSortFields } from '../../helpers/ui/resourceTiles'
 
 export default defineComponent({

packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts

@@ -10,8 +10,8 @@ import {
   defaultStoreMockOptions,
   RouteLocation
 } from 'web-test-helpers'
-import { ViewModeConstants } from 'web-app-files/src/composables'
 import { ArchiverService } from 'web-app-files/src/services'
+import { ViewModeConstants } from 'web-pkg/src/composables'
 
 const selectors = {
   ocBreadcrumbStub: 'oc-breadcrumb-stub',

packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
       <div class="oc-flex" id="files-app-bar-controls-right">
-        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagedefault="100" perpagequeryname="items-per-page" viewmodes=""></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>
@@ -33,7 +33,7 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
       <div class="oc-flex" id="files-app-bar-controls-right">
-        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagedefault="100" perpagequeryname="items-per-page" viewmodes=""></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>
@@ -57,7 +57,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
       <div class="oc-flex" id="files-app-bar-controls-right">
-        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagedefault="100" perpagequeryname="items-per-page" viewmodes=""></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>

packages/web-pkg/package.json

@@ -15,6 +15,7 @@
   },
   "peerDependencies": {
     "@casl/vue": "^2.2.1",
+    "@casl/ability": "^6.3.3",
     "axios": "^0.27.2 || ^1.0.0",
     "filesize": "^9.0.11",
     "fuse.js": "^6.5.3",