From bcd8401b3198544b502ba867c464ebd24c1196b6 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Wed, 7 Jul 2021 13:14:29 +0200
Subject: [PATCH 1/6] feat: add page size

---
 .../src/components/FilesList/Pagination.vue   | 58 +++++++++++++++++++
 .../src/mixins/filesListPagination.js         | 39 ++++++++++++-
 packages/web-app-files/src/store/getters.js   | 12 +++-
 packages/web-app-files/src/store/mutations.js |  6 ++
 packages/web-app-files/src/store/state.js     |  2 +-
 .../web-app-files/src/views/Favorites.vue     | 31 +++-------
 .../src/views/LocationPicker.vue              | 23 +++-----
 packages/web-app-files/src/views/Personal.vue | 24 +++-----
 .../web-app-files/src/views/PublicFiles.vue   | 28 ++++-----
 .../web-app-files/src/views/SharedViaLink.vue | 37 +++---------
 .../web-app-files/src/views/SharedWithMe.vue  | 30 +++-------
 .../src/views/SharedWithOthers.vue            | 36 +++---------
 packages/web-app-files/src/views/Trashbin.vue | 25 ++------
 13 files changed, 177 insertions(+), 174 deletions(-)
 create mode 100644 packages/web-app-files/src/components/FilesList/Pagination.vue

diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
new file mode 100644
index 00000000000..20570fe7f81
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="files-pagination-container">
+    <!-- Empty block to center the pagination -->
+    <div class="files-pagination-empty" />
+    <oc-pagination
+      v-if="pages > 1"
+      :pages="pages"
+      :current-page="currentPage"
+      :max-displayed="3"
+      :current-route="$_filesListPagination_targetRoute"
+      class="files-pagination uk-flex uk-flex-center oc-my-s"
+    />
+    <oc-page-size
+      v-model="$_filesListPagination_pageItemsLimit"
+      :label="$gettext('Items per page')"
+      :options="[100, 500, 1000, $gettext('All')]"
+      class="files-pagination-size"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+
+import MixinFilesListPagination from '../../mixins/filesListPagination'
+
+export default {
+  mixins: [MixinFilesListPagination],
+
+  computed: {
+    ...mapState('Files', ['currentPage']),
+    ...mapGetters('Files', ['pages'])
+  },
+
+  watch: {
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.files-pagination {
+  justify-self: center;
+
+  &-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+
+  &-size {
+    display: inline-flex;
+    justify-self: end;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/mixins/filesListPagination.js b/packages/web-app-files/src/mixins/filesListPagination.js
index 97df4ffcd56..dc48d8d98b2 100644
--- a/packages/web-app-files/src/mixins/filesListPagination.js
+++ b/packages/web-app-files/src/mixins/filesListPagination.js
@@ -1,19 +1,54 @@
-import { mapMutations } from 'vuex'
+import { mapMutations, mapState } from 'vuex'
 
 export default {
   computed: {
+    ...mapState('Files', ['filesPageLimit']),
+
     $_filesListPagination_targetRoute() {
       return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
+    },
+
+    $_filesListPagination_pageItemsLimit: {
+      get() {
+        return this.filesPageLimit
+      },
+
+      set(value) {
+        this.SET_FILES_PAGE_LIMIT(value)
+        this.$_filesListPagination_updateQuery(value)
+      }
+    }
+  },
+
+  watch: {
+    $route: {
+      handler(route) {
+        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
+          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
+
+          return
+        }
+
+        this.$_filesListPagination_updateQuery()
+      },
+      immediate: true
     }
   },
 
   methods: {
-    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE']),
+    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE', 'SET_FILES_PAGE_LIMIT']),
 
     $_filesListPagination_updateCurrentPage() {
       const page = this.$route.params.page || 1
 
       this.UPDATE_CURRENT_PAGE(page)
+    },
+
+    $_filesListPagination_updateQuery(limit = this.$_filesListPagination_pageItemsLimit) {
+      const query = { ...this.$route.query, 'items-limit': limit }
+
+      this.SET_FILES_PAGE_LIMIT(limit)
+      this.$router.replace({ query }).catch(() => {})
     }
   }
 }
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index dc57ccbf2f5..daa3d677638 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -28,13 +28,19 @@ export default {
   },
   pages: (state, getters) => Math.ceil(getters.filesAll.length / state.filesPageLimit),
   activeFiles: (state, getters) => {
-    let files = getters.filesAll
-    const firstElementIndex = (state.currentPage - 1) * state.filesPageLimit
+    let files = [].concat(getters.filesAll)
 
     if (!state.areHiddenFilesShown) {
       files = files.filter(file => !file.name.startsWith('.'))
     }
-    return [].concat(files).splice(firstElementIndex, state.filesPageLimit)
+
+    if (state.filesPageLimit > 0) {
+      const firstElementIndex = (state.currentPage - 1) * state.filesPageLimit
+
+      return files.splice(firstElementIndex, state.filesPageLimit)
+    }
+
+    return files
   },
   activeFilesSize: (state, getters) => {
     return $_fileSizes(getters.activeFiles)
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 0afeb4c671e..6f91172c78f 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -373,6 +373,12 @@ export default {
     state.areHiddenFilesShown = value
 
     window.localStorage.setItem('oc_hiddenFilesShown', value)
+  },
+
+  SET_FILES_PAGE_LIMIT(state, limit) {
+    state.filesPageLimit = limit
+
+    window.localStorage.setItem('oc_filesPageLimit', limit)
   }
 }
 
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
index 6700e0c7296..7701e26397f 100644
--- a/packages/web-app-files/src/store/state.js
+++ b/packages/web-app-files/src/store/state.js
@@ -72,7 +72,7 @@ export default {
    * Pagination
    */
   currentPage: 1,
-  filesPageLimit: 100, // TODO: Replace with dynamic value from settings once available
+  filesPageLimit: 100,
 
   /**
    * View settings
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 29428f20945..f74fed536e6 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -27,14 +27,7 @@
           <quick-actions class="oc-visible@s" :item="props.resource" :actions="app.quickActions" />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="pages > 1"
-            :pages="pages"
-            :current-page="currentPage"
-            :max-displayed="3"
-            :current-route="$_filesListPagination_targetRoute"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination />
           <list-info
             v-if="activeFiles.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -54,23 +47,23 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 import { buildResource } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { ImageDimension, ImageType } from '../constants'
+import debounce from 'lodash-es/debounce'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
-import debounce from 'lodash-es/debounce'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { QuickActions, ListLoader, NoContentMessage, ListInfo },
+  components: { QuickActions, ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [FileActions, MixinFilesListPositioning, MixinFilesListPagination, MixinMountSideBar],
+  mixins: [FileActions, MixinFilesListPositioning, MixinMountSideBar],
 
   data: () => ({
     loading: true
@@ -78,7 +71,7 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage', 'files']),
+    ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
@@ -86,8 +79,7 @@ export default {
       'selectedFiles',
       'inProgress',
       'totalFilesCount',
-      'totalFilesSize',
-      'pages'
+      'totalFilesSize'
     ]),
     ...mapGetters(['user', 'configuration']),
 
@@ -124,11 +116,6 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
-    },
-
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 47f6348bf38..473f3ea29c4 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -52,14 +52,7 @@
             :header-position="headerPosition"
           >
             <template #footer>
-              <oc-pagination
-                v-if="pages > 1"
-                :pages="pages"
-                :current-page="currentPage"
-                :max-displayed="3"
-                :current-route="$_filesListPagination_targetRoute"
-                class="files-pagination uk-flex uk-flex-center oc-my-s"
-              />
+              <pagination />
               <list-info
                 v-if="activeFiles.length > 0"
                 class="uk-width-1-1 oc-my-s"
@@ -82,11 +75,11 @@ import { batchActions } from '../helpers/batchActions'
 import { cloneStateObject } from '../helpers/store'
 import MixinsGeneral from '../mixins'
 import MixinRoutes from '../mixins/routes'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 export default {
   metaInfo() {
@@ -98,10 +91,11 @@ export default {
   components: {
     NoContentMessage,
     ListLoader,
-    ListInfo
+    ListInfo,
+    Pagination
   },
 
-  mixins: [MixinsGeneral, MixinRoutes, MixinFilesListPagination],
+  mixins: [MixinsGeneral, MixinRoutes],
 
   data: () => ({
     headerPosition: 0,
@@ -113,16 +107,14 @@ export default {
     ...mapState('Files', [
       'selectedResourcesForMove',
       'locationPickerTargetFolder',
-      'currentFolder',
-      'currentPage'
+      'currentFolder'
     ]),
     ...mapGetters('Files', [
       'activeFiles',
       'publicLinkPassword',
       'davProperties',
       'totalFilesCount',
-      'totalFilesSize',
-      'pages'
+      'totalFilesSize'
     ]),
     ...mapGetters(['configuration']),
 
@@ -253,7 +245,6 @@ export default {
         if (!sameRoute || !sameItem) {
           this.navigateToTarget(this.$route)
         }
-        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 0cd86fc3d84..978e1f9001f 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -40,14 +40,7 @@
           />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="pages > 1"
-            :pages="pages"
-            :current-page="currentPage"
-            :max-displayed="3"
-            :current-route="$_filesListPagination_targetRoute"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination />
           <list-info
             v-if="activeFiles.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -70,29 +63,28 @@ import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListScrolling from '../mixins/filesListScrolling'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { buildResource } from '../helpers/resources'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { ImageDimension, ImageType } from '../constants'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { QuickActions, ListLoader, NoContentMessage, NotFoundMessage, ListInfo },
+  components: { QuickActions, ListLoader, NoContentMessage, NotFoundMessage, ListInfo, Pagination },
 
   mixins: [
     MixinAccessibleBreadcrumb,
     MixinFileActions,
     MixinFilesListPositioning,
     MixinFilesListScrolling,
-    MixinFilesListPagination,
     MixinMountSideBar
   ],
 
@@ -102,7 +94,7 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage', 'files']),
+    ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
@@ -111,8 +103,7 @@ export default {
       'inProgress',
       'currentFolder',
       'totalFilesCount',
-      'totalFilesSize',
-      'pages'
+      'totalFilesSize'
     ]),
     ...mapGetters(['user', 'homeFolder', 'configuration']),
 
@@ -169,7 +160,6 @@ export default {
         if (!sameRoute || !sameItem) {
           this.loadResources(sameRoute)
         }
-        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     },
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index f7ec40104d4..a1b6d414f78 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -32,13 +32,7 @@
         @rowMounted="rowMounted"
       >
         <template #footer>
-          <oc-pagination
-            v-if="pages > 1"
-            :pages="pages"
-            :current-page="currentPage"
-            :max-displayed="3"
-            :current-route="$_filesListPagination_targetRoute"
-          />
+          <pagination />
           <list-info
             v-if="activeFiles.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -53,22 +47,23 @@
 </template>
 
 <script>
-import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
+import { mapGetters, mapActions, mapMutations } from 'vuex'
 
 import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { ImageDimension, ImageType } from '../constants'
+import debounce from 'lodash-es/debounce'
 import { buildResource } from '../helpers/resources'
+
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
-import debounce from 'lodash-es/debounce'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 const visibilityObserver = new VisibilityObserver()
 export default {
@@ -76,14 +71,14 @@ export default {
     ListInfo,
     ListLoader,
     NoContentMessage,
-    NotFoundMessage
+    NotFoundMessage,
+    Pagination
   },
 
   mixins: [
     MixinAccessibleBreadcrumb,
     MixinFileActions,
     MixinFilesListPositioning,
-    MixinFilesListPagination,
     MixinMountSideBar
   ],
 
@@ -92,7 +87,6 @@ export default {
   }),
 
   computed: {
-    ...mapState('Files', ['currentPage']),
     ...mapGetters('Files', [
       'publicLinkPassword',
       'activeFiles',
@@ -103,8 +97,7 @@ export default {
       'inProgress',
       'currentFolder',
       'totalFilesCount',
-      'totalFilesSize',
-      'pages'
+      'totalFilesSize'
     ]),
     ...mapGetters(['configuration']),
 
@@ -150,7 +143,6 @@ export default {
         if (!sameRoute || !sameItem) {
           this.loadResources(sameRoute)
         }
-        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     },
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index 430967bea58..c1bfc23b30a 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -28,14 +28,7 @@
         @rowMounted="rowMounted"
       >
         <template #footer>
-          <oc-pagination
-            v-if="pages > 1"
-            :pages="pages"
-            :current-page="currentPage"
-            :max-displayed="3"
-            :current-route="$_filesListPagination_targetRoute"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination />
           <list-info
             v-if="activeFiles.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -55,28 +48,22 @@ import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { ImageDimension, ImageType } from '../constants'
+import debounce from 'lodash-es/debounce'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
-import debounce from 'lodash-es/debounce'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo },
+  components: { ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [
-    FileActions,
-    MixinFilesListPositioning,
-    MixinResources,
-    MixinFilesListPagination,
-    MixinMountSideBar
-  ],
+  mixins: [FileActions, MixinFilesListPositioning, MixinResources, MixinMountSideBar],
 
   data: () => ({
     loading: true
@@ -84,15 +71,14 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage', 'files']),
+    ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
       'activeFiles',
       'selectedFiles',
       'inProgress',
-      'totalFilesCount',
-      'pages'
+      'totalFilesCount'
     ]),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
 
@@ -129,11 +115,6 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
-    },
-
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index 75ddb547bbc..1739940c0f2 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -59,14 +59,7 @@
           </div>
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="pages > 1"
-            :pages="pages"
-            :current-page="currentPage"
-            :max-displayed="3"
-            :current-route="$_filesListPagination_targetRoute"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination />
           <list-info
             v-if="activeFiles.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -87,15 +80,15 @@ import FileActions from '../mixins/fileActions'
 import MixinAcceptShare from '../mixins/actions/acceptShare'
 import MixinDeclineShare from '../mixins/actions/declineShare'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { ImageDimension, ImageType } from '../constants'
+import debounce from 'lodash-es/debounce'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
-import debounce from 'lodash-es/debounce'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -103,7 +96,8 @@ export default {
   components: {
     ListLoader,
     NoContentMessage,
-    ListInfo
+    ListInfo,
+    Pagination
   },
 
   mixins: [
@@ -111,7 +105,6 @@ export default {
     MixinAcceptShare,
     MixinDeclineShare,
     MixinFilesListPositioning,
-    MixinFilesListPagination,
     MixinMountSideBar
   ],
 
@@ -122,15 +115,14 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage', 'files']),
+    ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
       'activeFiles',
       'selectedFiles',
       'inProgress',
-      'totalFilesCount',
-      'pages'
+      'totalFilesCount'
     ]),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
 
@@ -167,10 +159,6 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
-    },
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index 32bcfd4f0ef..29c26b7bb3c 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -30,14 +30,7 @@
         @rowMounted="rowMounted"
       >
         <template #footer>
-          <oc-pagination
-            v-if="pages > 1"
-            :pages="pages"
-            :current-page="currentPage"
-            :max-displayed="3"
-            :current-route="$_filesListPagination_targetRoute"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination />
           <list-info
             v-if="activeFiles.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -57,28 +50,22 @@ import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { ImageDimension, ImageType } from '../constants'
+import debounce from 'lodash-es/debounce'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from '../constants'
-import debounce from 'lodash-es/debounce'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo },
+  components: { ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [
-    FileActions,
-    MixinFilesListPositioning,
-    MixinResources,
-    MixinFilesListPagination,
-    MixinMountSideBar
-  ],
+  mixins: [FileActions, MixinFilesListPositioning, MixinResources, MixinMountSideBar],
 
   data: () => ({
     loading: true
@@ -86,15 +73,14 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage', 'files']),
+    ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
       'activeFiles',
       'selectedFiles',
       'inProgress',
-      'totalFilesCount',
-      'pages'
+      'totalFilesCount'
     ]),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
 
@@ -131,10 +117,6 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
-    },
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 3f88330245c..21decb75656 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -27,14 +27,7 @@
         @showDetails="$_mountSideBar_showDetails"
       >
         <template #footer>
-          <oc-pagination
-            v-if="pages > 1"
-            :pages="pages"
-            :current-page="currentPage"
-            :max-displayed="3"
-            :current-route="$_filesListPagination_targetRoute"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination />
           <list-info
             v-if="activeFiles.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -53,32 +46,31 @@ import { mapGetters, mapMutations, mapState } from 'vuex'
 import { buildDeletedResource, buildResource } from '../helpers/resources'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo },
+  components: { ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [MixinFilesListPositioning, MixinResources, MixinFilesListPagination, MixinMountSideBar],
+  mixins: [MixinFilesListPositioning, MixinResources, MixinMountSideBar],
 
   data: () => ({
     loading: true
   }),
 
   computed: {
-    ...mapState('Files', ['currentPage', 'files']),
+    ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
       'activeFiles',
       'selectedFiles',
       'inProgress',
-      'totalFilesCount',
-      'pages'
+      'totalFilesCount'
     ]),
 
     selected: {
@@ -106,11 +98,6 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
-    },
-
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
     }
   },
 

From 0d22451b8a439a0819af726695e857d49dd1dc61 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Wed, 7 Jul 2021 16:57:51 +0200
Subject: [PATCH 2/6] tests: cover page size

---
 __fixtures__/deletedFiles.js                  | 12 +++----
 __fixtures__/favoriteFiles.js                 | 32 +++++++++----------
 __fixtures__/files.js                         |  2 +-
 .../src/components/FilesList/Pagination.vue   |  1 +
 .../web-app-files/src/views/Favorites.vue     |  3 +-
 .../src/views/LocationPicker.vue              |  3 +-
 packages/web-app-files/src/views/Personal.vue |  2 ++
 .../web-app-files/src/views/PublicFiles.vue   |  2 ++
 .../web-app-files/src/views/SharedViaLink.vue |  9 +++++-
 .../web-app-files/src/views/SharedWithMe.vue  |  2 ++
 .../src/views/SharedWithOthers.vue            |  9 +++++-
 packages/web-app-files/src/views/Trashbin.vue |  3 +-
 .../integration/specs/pagination.spec.js      | 22 +++++++++++++
 .../tests/unit/views/Favorites.spec.js        | 17 +++++++++-
 .../tests/unit/views/views.setup.js           |  6 ++--
 tests/unit/config/jest.init.js                |  6 ----
 16 files changed, 94 insertions(+), 37 deletions(-)

diff --git a/__fixtures__/deletedFiles.js b/__fixtures__/deletedFiles.js
index 51c7cab7bdc..e3c7849117e 100644
--- a/__fixtures__/deletedFiles.js
+++ b/__fixtures__/deletedFiles.js
@@ -8,22 +8,22 @@ export default [
     tusSupport: null
   },
   {
-    name: '/trash-bin/alice/3871',
+    name: '/trash-bin/alice/3875',
     type: 'dir',
     fileInfo: {
-      '{http://owncloud.org/ns}trashbin-original-filename': 'Documents',
-      '{http://owncloud.org/ns}trashbin-original-location': 'Documents',
+      '{http://owncloud.org/ns}trashbin-original-filename': '.hidden-folder',
+      '{http://owncloud.org/ns}trashbin-original-location': '.hidden-folder',
       '{http://owncloud.org/ns}trashbin-delete-datetime': 'Mon, 14 Jun 2021 12:15:33 GMT',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },
     tusSupport: null
   },
   {
-    name: '/trash-bin/alice/3875',
+    name: '/trash-bin/alice/3871',
     type: 'dir',
     fileInfo: {
-      '{http://owncloud.org/ns}trashbin-original-filename': '.hidden-folder',
-      '{http://owncloud.org/ns}trashbin-original-location': '.hidden-folder',
+      '{http://owncloud.org/ns}trashbin-original-filename': 'Documents',
+      '{http://owncloud.org/ns}trashbin-original-location': 'Documents',
       '{http://owncloud.org/ns}trashbin-delete-datetime': 'Mon, 14 Jun 2021 12:15:33 GMT',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },
diff --git a/__fixtures__/favoriteFiles.js b/__fixtures__/favoriteFiles.js
index 5cd5024ec3e..72afec3d6d6 100644
--- a/__fixtures__/favoriteFiles.js
+++ b/__fixtures__/favoriteFiles.js
@@ -1,36 +1,36 @@
 export default [
   {
-    name: '/Documents',
+    name: '/.hidden-folder',
     type: 'dir',
     fileInfo: {
       '{http://owncloud.org/ns}permissions': 'RDNVCK',
       '{http://owncloud.org/ns}favorite': '1',
-      '{http://owncloud.org/ns}fileid': '3867',
-      '{http://owncloud.org/ns}owner-id': 'alice',
-      '{http://owncloud.org/ns}owner-display-name': 'alice',
+      '{http://owncloud.org/ns}fileid': '14',
+      '{http://owncloud.org/ns}owner-id': 'admin',
+      '{http://owncloud.org/ns}owner-display-name': 'admin',
       '{http://owncloud.org/ns}share-types': '',
-      '{http://owncloud.org/ns}privatelink': 'http://host.docker.internal:8080/f/3867',
-      '{http://owncloud.org/ns}size': '36227',
-      '{DAV:}getlastmodified': 'Mon, 14 Jun 2021 09:41:16 GMT',
-      '{DAV:}getetag': '"60c7243c2e7f1"',
+      '{http://owncloud.org/ns}privatelink': 'http://localhost:8080/f/14',
+      '{http://owncloud.org/ns}size': '0',
+      '{DAV:}getlastmodified': 'Thu, 24 Jun 2021 15:03:58 GMT',
+      '{DAV:}getetag': '"60d49edf01ab8"',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },
     tusSupport: null
   },
   {
-    name: '/.hidden folder',
+    name: '/Documents',
     type: 'dir',
     fileInfo: {
       '{http://owncloud.org/ns}permissions': 'RDNVCK',
       '{http://owncloud.org/ns}favorite': '1',
-      '{http://owncloud.org/ns}fileid': '14',
-      '{http://owncloud.org/ns}owner-id': 'admin',
-      '{http://owncloud.org/ns}owner-display-name': 'admin',
+      '{http://owncloud.org/ns}fileid': '3867',
+      '{http://owncloud.org/ns}owner-id': 'alice',
+      '{http://owncloud.org/ns}owner-display-name': 'alice',
       '{http://owncloud.org/ns}share-types': '',
-      '{http://owncloud.org/ns}privatelink': 'http://localhost:8080/f/14',
-      '{http://owncloud.org/ns}size': '0',
-      '{DAV:}getlastmodified': 'Thu, 24 Jun 2021 15:03:58 GMT',
-      '{DAV:}getetag': '"60d49edf01ab8"',
+      '{http://owncloud.org/ns}privatelink': 'http://host.docker.internal:8080/f/3867',
+      '{http://owncloud.org/ns}size': '36227',
+      '{DAV:}getlastmodified': 'Mon, 14 Jun 2021 09:41:16 GMT',
+      '{DAV:}getetag': '"60c7243c2e7f1"',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },
     tusSupport: null
diff --git a/__fixtures__/files.js b/__fixtures__/files.js
index bdb591c432d..b3b0ffe3c25 100644
--- a/__fixtures__/files.js
+++ b/__fixtures__/files.js
@@ -19,7 +19,7 @@ export default {
       tusSupport: null
     },
     {
-      name: '/.hidden folder',
+      name: '/.hidden-folder',
       type: 'dir',
       fileInfo: {
         '{http://owncloud.org/ns}permissions': 'RDNVCK',
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index 20570fe7f81..1e0c258c986 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -12,6 +12,7 @@
     />
     <oc-page-size
       v-model="$_filesListPagination_pageItemsLimit"
+      data-testid="files-pagination-size"
       :label="$gettext('Items per page')"
       :options="[100, 500, 1000, $gettext('All')]"
       class="files-pagination-size"
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index f74fed536e6..e83760bdfda 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -47,6 +47,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 import { buildResource } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
@@ -63,7 +64,7 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: { QuickActions, ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [FileActions, MixinFilesListPositioning, MixinMountSideBar],
+  mixins: [FileActions, MixinFilesListPositioning, MixinFilesListPagination, MixinMountSideBar],
 
   data: () => ({
     loading: true
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 473f3ea29c4..8a34f52053b 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -75,6 +75,7 @@ import { batchActions } from '../helpers/batchActions'
 import { cloneStateObject } from '../helpers/store'
 import MixinsGeneral from '../mixins'
 import MixinRoutes from '../mixins/routes'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
@@ -95,7 +96,7 @@ export default {
     Pagination
   },
 
-  mixins: [MixinsGeneral, MixinRoutes],
+  mixins: [MixinsGeneral, MixinRoutes, MixinFilesListPagination],
 
   data: () => ({
     headerPosition: 0,
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 978e1f9001f..6bcf978bee8 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -63,6 +63,7 @@ import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListScrolling from '../mixins/filesListScrolling'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { buildResource } from '../helpers/resources'
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -85,6 +86,7 @@ export default {
     MixinFileActions,
     MixinFilesListPositioning,
     MixinFilesListScrolling,
+    MixinFilesListPagination,
     MixinMountSideBar
   ],
 
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index a1b6d414f78..54df3bf15f4 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -52,6 +52,7 @@ import { mapGetters, mapActions, mapMutations } from 'vuex'
 import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -79,6 +80,7 @@ export default {
     MixinAccessibleBreadcrumb,
     MixinFileActions,
     MixinFilesListPositioning,
+    MixinFilesListPagination,
     MixinMountSideBar
   ],
 
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index c1bfc23b30a..7bbcfedc773 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -48,6 +48,7 @@ import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
@@ -63,7 +64,13 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: { ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [FileActions, MixinFilesListPositioning, MixinResources, MixinMountSideBar],
+  mixins: [
+    FileActions,
+    MixinFilesListPositioning,
+    MixinResources,
+    MixinFilesListPagination,
+    MixinMountSideBar
+  ],
 
   data: () => ({
     loading: true
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index 1739940c0f2..5a30620edde 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -80,6 +80,7 @@ import FileActions from '../mixins/fileActions'
 import MixinAcceptShare from '../mixins/actions/acceptShare'
 import MixinDeclineShare from '../mixins/actions/declineShare'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
@@ -105,6 +106,7 @@ export default {
     MixinAcceptShare,
     MixinDeclineShare,
     MixinFilesListPositioning,
+    MixinFilesListPagination,
     MixinMountSideBar
   ],
 
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index 29c26b7bb3c..c3a0310d4fd 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -50,6 +50,7 @@ import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
@@ -65,7 +66,13 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: { ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [FileActions, MixinFilesListPositioning, MixinResources, MixinMountSideBar],
+  mixins: [
+    FileActions,
+    MixinFilesListPositioning,
+    MixinResources,
+    MixinFilesListPagination,
+    MixinMountSideBar
+  ],
 
   data: () => ({
     loading: true
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 21decb75656..c0b16eae8eb 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -46,6 +46,7 @@ import { mapGetters, mapMutations, mapState } from 'vuex'
 import { buildDeletedResource, buildResource } from '../helpers/resources'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
@@ -56,7 +57,7 @@ import Pagination from '../components/FilesList/Pagination.vue'
 export default {
   components: { ListLoader, NoContentMessage, ListInfo, Pagination },
 
-  mixins: [MixinFilesListPositioning, MixinResources, MixinMountSideBar],
+  mixins: [MixinFilesListPositioning, MixinResources, MixinFilesListPagination, MixinMountSideBar],
 
   data: () => ({
     loading: true
diff --git a/packages/web-app-files/tests/integration/specs/pagination.spec.js b/packages/web-app-files/tests/integration/specs/pagination.spec.js
index c3742aca404..4185156a65d 100644
--- a/packages/web-app-files/tests/integration/specs/pagination.spec.js
+++ b/packages/web-app-files/tests/integration/specs/pagination.spec.js
@@ -181,4 +181,26 @@ describe('User can navigate in files list using pagination', () => {
       expect(document.querySelector('.oc-pagination-list-item-current').textContent).toMatch('2')
     }
   )
+
+  test.each(cases)(
+    'Items per page limit can be updated via route query in %s',
+    async (name, route, component) => {
+      const { getByText, queryByText } = render(
+        component,
+        { routes, store },
+        (vue, store, router) => {
+          const _route = { path: route, query: { 'items-limit': 1 } }
+
+          router.push(_route)
+        }
+      )
+
+      await waitFor(() =>
+        expect(document.querySelector(`#files-${toKebabCase(name)}-table`)).toBeVisible()
+      )
+
+      expect(getByText('.hidden-folder')).toBeVisible()
+      expect(queryByText('Documents')).toBe(null)
+    }
+  )
 })
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index 8adf09ce260..c7d63d3393c 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -4,11 +4,15 @@ import Favorites from 'packages/web-app-files/src/views/Favorites.vue'
 import { createStore } from 'vuex-extensions'
 import { createFile, localVue, getStore } from './views.setup'
 import Vuex from 'vuex'
+import VueRouter from 'vue-router'
 
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
   silent: true
 })
+localVue.use(VueRouter)
+
+const router = new VueRouter()
 
 jest.unmock('axios')
 
@@ -27,6 +31,7 @@ const stubs = {
 const defaultWrapper = mount(component, {
   store: getStore(),
   localVue,
+  router,
   stubs: stubs,
   data: () => ({
     loading: false
@@ -39,6 +44,7 @@ describe('Favorites component', () => {
       const wrapper = mount(component, {
         store: getStore(),
         localVue,
+        router,
         stubs: stubs,
         data: () => ({
           loading: true
@@ -67,13 +73,15 @@ describe('Favorites component', () => {
                 inProgress: () => [null]
               },
               mutations: {
-                UPDATE_CURRENT_PAGE: () => {}
+                UPDATE_CURRENT_PAGE: () => {},
+                SET_FILES_PAGE_LIMIT: () => {}
               },
               namespaced: true
             }
           }
         }),
         localVue,
+        router,
         stubs: stubs,
         data: () => ({
           loading: false
@@ -105,6 +113,7 @@ describe('Favorites component', () => {
       const wrapper = mount(component, {
         store: getStore({ highlightedFile: createFile({ id: 234 }) }),
         localVue,
+        router,
         stubs: stubs,
         data: () => ({
           loading: false
@@ -132,6 +141,7 @@ describe('Favorites component', () => {
             }
           }),
           localVue,
+          router,
           stubs: stubs,
           data: () => ({
             loading: false
@@ -155,6 +165,7 @@ describe('Favorites component', () => {
         const wrapper = mount(component, {
           store: getStore(),
           localVue,
+          router,
           stubs: stubs,
           data: () => ({
             loading: false
@@ -168,6 +179,7 @@ describe('Favorites component', () => {
         const wrapper = mount(component, {
           store: getStore({ pages: 1 }),
           localVue,
+          router,
           stubs: stubs,
           data: () => ({
             loading: false
@@ -185,6 +197,7 @@ describe('Favorites component', () => {
         const wrapper = mount(component, {
           store: getStore(),
           localVue,
+          router,
           stubs: stubs,
           data: () => ({
             loading: false
@@ -198,6 +211,7 @@ describe('Favorites component', () => {
         const wrapper = mount(component, {
           store: getStore({ activeFiles: [createFile({ id: 3, status: 2, type: 'file' })] }),
           localVue,
+          router,
           stubs: stubs,
           data: () => ({
             loading: false
@@ -210,6 +224,7 @@ describe('Favorites component', () => {
         const wrapper = mount(component, {
           store: getStore({ activeFiles: [] }),
           localVue,
+          router,
           stubs: stubs,
           data: () => ({
             loading: false
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index 21f9eedf0ae..8d6b8c0314b 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -46,7 +46,8 @@ export const getStore = function({
       Files: {
         state: {
           resource: null,
-          currentPage: 3
+          currentPage: 3,
+          filesPageLimit: 100
         },
         getters: {
           totalFilesCount: () => ({ files: 15, folders: 20 }),
@@ -62,7 +63,8 @@ export const getStore = function({
           UPDATE_RESOURCE: (state, resource) => {
             state.resource = resource
           },
-          UPDATE_CURRENT_PAGE: () => {}
+          UPDATE_CURRENT_PAGE: () => {},
+          SET_FILES_PAGE_LIMIT: () => {}
         },
         namespaced: true
       }
diff --git a/tests/unit/config/jest.init.js b/tests/unit/config/jest.init.js
index dbfb550346a..a45666d0877 100644
--- a/tests/unit/config/jest.init.js
+++ b/tests/unit/config/jest.init.js
@@ -14,12 +14,6 @@ try {
 
 config.mocks = {
   $gettext: str => str,
-  $route: {
-    params: {},
-    query: {},
-    name: '',
-    path: ''
-  },
   isIE11: () => false,
   $language: {
     current: 'en'

From c70f001c7caff19f873ba09ad4996e716b31300f Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Thu, 8 Jul 2021 11:48:32 +0200
Subject: [PATCH 3/6] feat: move page size to view options

---
 .../unreleased/enhancement-add-page-size      |  6 ++
 .../src/components/AppBar/AppBar.vue          | 48 +---------
 .../src/components/AppBar/ViewOptions.vue     | 87 +++++++++++++++++++
 .../src/components/FilesList/Pagination.vue   | 43 ++-------
 .../tests/unit/store/getters.spec.js          | 21 ++++-
 .../tests/unit/store/mutations.spec.js        | 10 +++
 6 files changed, 135 insertions(+), 80 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-page-size
 create mode 100644 packages/web-app-files/src/components/AppBar/ViewOptions.vue

diff --git a/changelog/unreleased/enhancement-add-page-size b/changelog/unreleased/enhancement-add-page-size
new file mode 100644
index 00000000000..d324c192afa
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-page-size
@@ -0,0 +1,6 @@
+Enhancement: add page size view option
+
+We've added a new item into the view options which can be used to set the number of items displayed per page.
+This value is persisted in the local storage so that the user doesn't have to update it every time he visits the app.
+
+https://github.com/owncloud/web/pull/5470
\ No newline at end of file
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 23689bf5d97..fa2e63a7f22 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -99,35 +99,7 @@
           <size-info v-if="selectedFiles.length > 0" class="oc-mr-s uk-visible@l" />
           <batch-actions />
         </div>
-        <oc-button
-          id="files-view-options-btn"
-          key="files-view-options-btn"
-          data-testid="files-view-options-btn"
-          :aria-label="viewButtonAriaLabel"
-          variation="passive"
-          appearance="raw"
-          size="small"
-          gap-size="xsmall"
-        >
-          <oc-icon name="tune" size="small" />
-          <translate>View</translate>
-        </oc-button>
-        <oc-drop
-          drop-id="files-view-options-drop"
-          toggle="#files-view-options-btn"
-          mode="click"
-          class="uk-width-auto"
-        >
-          <oc-list>
-            <li>
-              <oc-switch
-                v-model="hiddenFilesShownModel"
-                data-testid="files-switch-hidden-files"
-                :label="$gettext('Show hidden files')"
-              />
-            </li>
-          </oc-list>
-        </oc-drop>
+        <view-options />
       </div>
     </div>
   </div>
@@ -149,6 +121,7 @@ import FileDrop from './Upload/FileDrop.vue'
 import FileUpload from './Upload/FileUpload.vue'
 import FolderUpload from './Upload/FolderUpload.vue'
 import SizeInfo from './SelectedResources/SizeInfo.vue'
+import ViewOptions from './ViewOptions.vue'
 
 export default {
   components: {
@@ -156,7 +129,8 @@ export default {
     FileDrop,
     FileUpload,
     FolderUpload,
-    SizeInfo
+    SizeInfo,
+    ViewOptions
   },
   mixins: [Mixins, MixinFileActions, MixinRoutes, MixinScrollToResource],
   data: () => ({
@@ -194,10 +168,6 @@ export default {
       return this.$gettext('Add files or folders')
     },
 
-    viewButtonAriaLabel() {
-      return this.$gettext('Display customization options of the files list')
-    },
-
     currentPath() {
       const path = this.$route.params.item || ''
       if (path.endsWith('/')) {
@@ -304,16 +274,6 @@ export default {
         this.selectedFiles.length
       )
       return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
-    },
-
-    hiddenFilesShownModel: {
-      get() {
-        return this.areHiddenFilesShown
-      },
-
-      set(value) {
-        this.SET_HIDDEN_FILES_VISIBILITY(value)
-      }
     }
   },
 
diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
new file mode 100644
index 00000000000..980f4102c85
--- /dev/null
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <oc-button
+      id="files-view-options-btn"
+      key="files-view-options-btn"
+      data-testid="files-view-options-btn"
+      :aria-label="viewButtonAriaLabel"
+      variation="passive"
+      appearance="raw"
+      size="small"
+      gap-size="xsmall"
+    >
+      <oc-icon name="tune" size="small" />
+      <translate>View</translate>
+    </oc-button>
+    <oc-drop
+      drop-id="files-view-options-drop"
+      toggle="#files-view-options-btn"
+      mode="click"
+      class="uk-width-auto"
+    >
+      <oc-list>
+        <li class="files-view-options-list-item">
+          <oc-switch
+            v-model="hiddenFilesShownModel"
+            data-testid="files-switch-hidden-files"
+            :label="$gettext('Show hidden files')"
+          />
+        </li>
+        <li class="files-view-options-list-item">
+          <oc-page-size
+            v-model="$_filesListPagination_pageItemsLimit"
+            data-testid="files-pagination-size"
+            :label="$gettext('Items per page')"
+            :options="[100, 500, 1000, $gettext('All')]"
+            class="files-pagination-size"
+          />
+        </li>
+      </oc-list>
+    </oc-drop>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex'
+
+import MixinFilesListPagination from '../../mixins/filesListPagination'
+
+export default {
+  mixins: [MixinFilesListPagination],
+
+  computed: {
+    ...mapState('Files', ['areHiddenFilesShown']),
+
+    viewButtonAriaLabel() {
+      return this.$gettext('Display customization options of the files list')
+    },
+
+    hiddenFilesShownModel: {
+      get() {
+        return this.areHiddenFilesShown
+      },
+
+      set(value) {
+        this.SET_HIDDEN_FILES_VISIBILITY(value)
+      }
+    }
+  },
+
+  methods: {
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY'])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.files-view-options-list-item {
+  & > * {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & + & {
+    margin-top: var(--oc-space-small);
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index 1e0c258c986..81995ad82e0 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -1,23 +1,12 @@
 <template>
-  <div class="files-pagination-container">
-    <!-- Empty block to center the pagination -->
-    <div class="files-pagination-empty" />
-    <oc-pagination
-      v-if="pages > 1"
-      :pages="pages"
-      :current-page="currentPage"
-      :max-displayed="3"
-      :current-route="$_filesListPagination_targetRoute"
-      class="files-pagination uk-flex uk-flex-center oc-my-s"
-    />
-    <oc-page-size
-      v-model="$_filesListPagination_pageItemsLimit"
-      data-testid="files-pagination-size"
-      :label="$gettext('Items per page')"
-      :options="[100, 500, 1000, $gettext('All')]"
-      class="files-pagination-size"
-    />
-  </div>
+  <oc-pagination
+    v-if="pages > 1"
+    :pages="pages"
+    :current-page="currentPage"
+    :max-displayed="3"
+    :current-route="$_filesListPagination_targetRoute"
+    class="files-pagination uk-flex uk-flex-center oc-my-s"
+  />
 </template>
 
 <script>
@@ -41,19 +30,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.files-pagination {
-  justify-self: center;
-
-  &-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  }
-
-  &-size {
-    display: inline-flex;
-    justify-self: end;
-  }
-}
-</style>
diff --git a/packages/web-app-files/tests/unit/store/getters.spec.js b/packages/web-app-files/tests/unit/store/getters.spec.js
index ea5ef36ab10..cd661f7e8f9 100644
--- a/packages/web-app-files/tests/unit/store/getters.spec.js
+++ b/packages/web-app-files/tests/unit/store/getters.spec.js
@@ -8,7 +8,8 @@ describe('Getters', () => {
     state = {
       files: FixtureFiles['/'],
       searchTermGlobal: '',
-      filesPageLimit: 10
+      filesPageLimit: 10,
+      areHiddenFilesShown: true
     }
   })
 
@@ -26,5 +27,23 @@ describe('Getters', () => {
 
       expect(result.length).toEqual(5)
     })
+
+    it('returns only a portion of files if files page limit is set', () => {
+      state.filesPageLimit = 2
+
+      const { activeFiles, filesAll } = getters
+      const result = activeFiles(state, { filesAll: filesAll(state) })
+
+      expect(result.length).toEqual(2)
+    })
+
+    it('returns all files if files page limit is of type string', () => {
+      state.filesPageLimit = 'All'
+
+      const { activeFiles, filesAll } = getters
+      const result = activeFiles(state, { filesAll: filesAll(state) })
+
+      expect(result.length).toEqual(5)
+    })
   })
 })
diff --git a/packages/web-app-files/tests/unit/store/mutations.spec.js b/packages/web-app-files/tests/unit/store/mutations.spec.js
index 970b0ba0227..5f191287b5c 100644
--- a/packages/web-app-files/tests/unit/store/mutations.spec.js
+++ b/packages/web-app-files/tests/unit/store/mutations.spec.js
@@ -67,4 +67,14 @@ describe('vuex store mutations', () => {
 
     expect(state.areHiddenFilesShown).toEqual(false)
   })
+
+  it('sets the files page limit', () => {
+    const state = { filesPageLimit: 100 }
+    const { SET_FILES_PAGE_LIMIT } = mutations
+
+    SET_FILES_PAGE_LIMIT(state, 500)
+
+    expect(state.filesPageLimit).toEqual(500)
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toEqual('500')
+  })
 })

From e8d2ece3a5d6a7aa7a9f982465bc9c081310a78c Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Thu, 8 Jul 2021 13:45:15 +0200
Subject: [PATCH 4/6] tests: replace integration page size test with unit tests

---
 .../src/components/AppBar/ViewOptions.vue     | 42 ++++++++--
 .../src/components/FilesList/Pagination.vue   | 15 +---
 .../src/mixins/filesListPagination.js         | 45 +----------
 .../web-app-files/src/views/Favorites.vue     |  5 ++
 .../src/views/LocationPicker.vue              |  2 +
 packages/web-app-files/src/views/Personal.vue |  2 +
 .../web-app-files/src/views/PublicFiles.vue   |  2 +
 .../web-app-files/src/views/SharedViaLink.vue |  5 ++
 .../web-app-files/src/views/SharedWithMe.vue  |  5 ++
 .../src/views/SharedWithOthers.vue            |  5 ++
 packages/web-app-files/src/views/Trashbin.vue |  5 ++
 .../integration/specs/pagination.spec.js      | 22 ------
 .../unit/components/AppBar/AppBar.spec.js     | 58 --------------
 .../tests/unit/components/ViewOptions.spec.js | 76 +++++++++++++++++++
 tests/unit/stubs/OcPageSize.js                | 11 +++
 tests/unit/stubs/OcSwitch.js                  |  6 ++
 tests/unit/stubs/index.js                     |  3 +-
 17 files changed, 167 insertions(+), 142 deletions(-)
 delete mode 100644 packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
 create mode 100644 packages/web-app-files/tests/unit/components/ViewOptions.spec.js
 create mode 100644 tests/unit/stubs/OcPageSize.js
 create mode 100644 tests/unit/stubs/OcSwitch.js

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 980f4102c85..37128cb9874 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -29,7 +29,7 @@
         </li>
         <li class="files-view-options-list-item">
           <oc-page-size
-            v-model="$_filesListPagination_pageItemsLimit"
+            v-model="pageItemsLimit"
             data-testid="files-pagination-size"
             :label="$gettext('Items per page')"
             :options="[100, 500, 1000, $gettext('All')]"
@@ -44,13 +44,9 @@
 <script>
 import { mapMutations, mapState } from 'vuex'
 
-import MixinFilesListPagination from '../../mixins/filesListPagination'
-
 export default {
-  mixins: [MixinFilesListPagination],
-
   computed: {
-    ...mapState('Files', ['areHiddenFilesShown']),
+    ...mapState('Files', ['areHiddenFilesShown', 'filesPageLimit']),
 
     viewButtonAriaLabel() {
       return this.$gettext('Display customization options of the files list')
@@ -64,11 +60,43 @@ export default {
       set(value) {
         this.SET_HIDDEN_FILES_VISIBILITY(value)
       }
+    },
+
+    pageItemsLimit: {
+      get() {
+        return this.filesPageLimit
+      },
+
+      set(value) {
+        this.updateQuery(value)
+      }
+    }
+  },
+
+  watch: {
+    $route: {
+      handler(route) {
+        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
+          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
+
+          return
+        }
+
+        this.updateQuery()
+      },
+      immediate: true
     }
   },
 
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILES_PAGE_LIMIT']),
+
+    updateQuery(limit = this.pageItemsLimit) {
+      const query = { ...this.$route.query, 'items-limit': limit }
+
+      this.SET_FILES_PAGE_LIMIT(limit)
+      this.$router.replace({ query }).catch(() => {})
+    }
   }
 }
 </script>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index 81995ad82e0..b39b27b2be3 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -4,7 +4,7 @@
     :pages="pages"
     :current-page="currentPage"
     :max-displayed="3"
-    :current-route="$_filesListPagination_targetRoute"
+    :current-route="targetRoute"
     class="files-pagination uk-flex uk-flex-center oc-my-s"
   />
 </template>
@@ -12,20 +12,13 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 
-import MixinFilesListPagination from '../../mixins/filesListPagination'
-
 export default {
-  mixins: [MixinFilesListPagination],
-
   computed: {
     ...mapState('Files', ['currentPage']),
-    ...mapGetters('Files', ['pages'])
-  },
+    ...mapGetters('Files', ['pages']),
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
+    targetRoute() {
+      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
     }
   }
 }
diff --git a/packages/web-app-files/src/mixins/filesListPagination.js b/packages/web-app-files/src/mixins/filesListPagination.js
index dc48d8d98b2..d71b98e0d59 100644
--- a/packages/web-app-files/src/mixins/filesListPagination.js
+++ b/packages/web-app-files/src/mixins/filesListPagination.js
@@ -1,54 +1,13 @@
-import { mapMutations, mapState } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
-  computed: {
-    ...mapState('Files', ['filesPageLimit']),
-
-    $_filesListPagination_targetRoute() {
-      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
-    },
-
-    $_filesListPagination_pageItemsLimit: {
-      get() {
-        return this.filesPageLimit
-      },
-
-      set(value) {
-        this.SET_FILES_PAGE_LIMIT(value)
-        this.$_filesListPagination_updateQuery(value)
-      }
-    }
-  },
-
-  watch: {
-    $route: {
-      handler(route) {
-        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
-          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
-
-          return
-        }
-
-        this.$_filesListPagination_updateQuery()
-      },
-      immediate: true
-    }
-  },
-
   methods: {
-    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE', 'SET_FILES_PAGE_LIMIT']),
+    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE']),
 
     $_filesListPagination_updateCurrentPage() {
       const page = this.$route.params.page || 1
 
       this.UPDATE_CURRENT_PAGE(page)
-    },
-
-    $_filesListPagination_updateQuery(limit = this.$_filesListPagination_pageItemsLimit) {
-      const query = { ...this.$route.query, 'items-limit': limit }
-
-      this.SET_FILES_PAGE_LIMIT(limit)
-      this.$router.replace({ query }).catch(() => {})
     }
   }
 }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index e83760bdfda..610b24a605d 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -117,6 +117,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 8a34f52053b..5042e8acf5b 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -246,6 +246,8 @@ export default {
         if (!sameRoute || !sameItem) {
           this.navigateToTarget(this.$route)
         }
+
+        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 6bcf978bee8..0d2277f9d41 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -157,6 +157,8 @@ export default {
           return
         }
 
+        this.$_filesListPagination_updateCurrentPage()
+
         const sameRoute = to.name === from?.name
         const sameItem = to.params?.item === from?.params?.item
         if (!sameRoute || !sameItem) {
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 54df3bf15f4..811856e1a24 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -145,6 +145,8 @@ export default {
         if (!sameRoute || !sameItem) {
           this.loadResources(sameRoute)
         }
+
+        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     },
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index 7bbcfedc773..5dd9de85bbb 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -122,6 +122,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index 5a30620edde..df09ffe60bf 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -161,6 +161,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index c3a0310d4fd..1a29afa8fb1 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -124,6 +124,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index c0b16eae8eb..44b27adac54 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -99,6 +99,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/tests/integration/specs/pagination.spec.js b/packages/web-app-files/tests/integration/specs/pagination.spec.js
index 4185156a65d..c3742aca404 100644
--- a/packages/web-app-files/tests/integration/specs/pagination.spec.js
+++ b/packages/web-app-files/tests/integration/specs/pagination.spec.js
@@ -181,26 +181,4 @@ describe('User can navigate in files list using pagination', () => {
       expect(document.querySelector('.oc-pagination-list-item-current').textContent).toMatch('2')
     }
   )
-
-  test.each(cases)(
-    'Items per page limit can be updated via route query in %s',
-    async (name, route, component) => {
-      const { getByText, queryByText } = render(
-        component,
-        { routes, store },
-        (vue, store, router) => {
-          const _route = { path: route, query: { 'items-limit': 1 } }
-
-          router.push(_route)
-        }
-      )
-
-      await waitFor(() =>
-        expect(document.querySelector(`#files-${toKebabCase(name)}-table`)).toBeVisible()
-      )
-
-      expect(getByText('.hidden-folder')).toBeVisible()
-      expect(queryByText('Documents')).toBe(null)
-    }
-  )
 })
diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
deleted file mode 100644
index 9aa85153e17..00000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { shallowMount, createLocalVue, config } from '@vue/test-utils'
-import Vuex from 'vuex'
-
-import Store from '@files/src/store'
-import stubs from '@/tests/unit/stubs'
-
-import AppBar from '@files/src/components/AppBar/AppBar.vue'
-
-describe('AppBar', () => {
-  let store, mutations
-  const localVue = createLocalVue()
-
-  localVue.use(Vuex)
-
-  beforeEach(() => {
-    mutations = { SET_HIDDEN_FILES_VISIBILITY: jest.fn() }
-    store = new Vuex.Store({
-      modules: {
-        Files: {
-          ...Store,
-          mutations
-        }
-      },
-      getters: {
-        getToken: () => 'token',
-        newFileHandlers: () => []
-      }
-    })
-    config.mocks = Object.assign(config.mocks, {
-      $route: {
-        meta: { title: 'files' },
-        params: { item: '' }
-      },
-      publicPage: () => false
-    })
-  })
-
-  it('triggeres mutation to toggle hidden files', async () => {
-    const OcSwitch = localVue.component('oc-switch', {
-      model: { prop: 'value', event: 'change' },
-      template: '<input type="checkbox" />'
-    })
-    const wrapper = shallowMount(AppBar, {
-      store,
-      localVue,
-      stubs: {
-        ...stubs,
-        'oc-switch': OcSwitch
-      },
-      directives: { OcTooltip: () => {} }
-    })
-
-    wrapper.find('[data-testid="files-switch-hidden-files"]').vm.$emit('change', false)
-    await wrapper.vm.$nextTick()
-
-    expect(mutations.SET_HIDDEN_FILES_VISIBILITY).toHaveBeenCalled()
-  })
-})
diff --git a/packages/web-app-files/tests/unit/components/ViewOptions.spec.js b/packages/web-app-files/tests/unit/components/ViewOptions.spec.js
new file mode 100644
index 00000000000..ca9f610a2ce
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/ViewOptions.spec.js
@@ -0,0 +1,76 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+
+import Store from '@files/src/store'
+import stubs from '@/tests/unit/stubs'
+import OcPageSize from '@/tests/unit/stubs/OcPageSize'
+import OcSwitch from '@/tests/unit/stubs/OcSwitch'
+
+import ViewOptions from '@files/src/components/AppBar/ViewOptions.vue'
+
+describe('ViewOptions', () => {
+  let localVue, router, mutations, store
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(Vuex)
+    localVue.use(VueRouter)
+
+    router = new VueRouter()
+    mutations = {
+      ...Store.mutations,
+      SET_FILES_PAGE_LIMIT: jest.fn(),
+      SET_HIDDEN_FILES_VISIBILITY: jest.fn()
+    }
+    store = new Vuex.Store({
+      modules: {
+        Files: {
+          ...Store,
+          mutations
+        }
+      }
+    })
+  })
+
+  it('updates the files page limit when using page size component', () => {
+    const wrapper = shallowMount(ViewOptions, { store, router, localVue, stubs })
+    const select = wrapper.find('[data-testid="files-pagination-size"]')
+
+    expect(select.exists()).toBe(true)
+
+    select.vm.$emit('input', 500)
+
+    expect(mutations.SET_FILES_PAGE_LIMIT).toHaveBeenCalled()
+  })
+
+  it('updates the files page limit when route query changes', () => {
+    const wrapper = shallowMount(ViewOptions, {
+      store,
+      router,
+      localVue,
+      stubs: { ...stubs, 'oc-page-size': OcPageSize(localVue) }
+    })
+
+    wrapper.vm.$router.replace({ query: { 'items-limit': 500 } }).catch(() => {})
+
+    expect(mutations.SET_FILES_PAGE_LIMIT).toHaveBeenCalled()
+  })
+
+  it('triggeres mutation to toggle hidden files', async () => {
+    const wrapper = shallowMount(ViewOptions, {
+      store,
+      localVue,
+      stubs: {
+        ...stubs,
+        'oc-switch': OcSwitch(localVue)
+      },
+      directives: { OcTooltip: jest.fn() },
+      router
+    })
+
+    wrapper.find('[data-testid="files-switch-hidden-files"]').vm.$emit('change', false)
+
+    expect(mutations.SET_HIDDEN_FILES_VISIBILITY).toHaveBeenCalled()
+  })
+})
diff --git a/tests/unit/stubs/OcPageSize.js b/tests/unit/stubs/OcPageSize.js
new file mode 100644
index 00000000000..137196f3903
--- /dev/null
+++ b/tests/unit/stubs/OcPageSize.js
@@ -0,0 +1,11 @@
+export default vue => {
+  return vue.component('oc-page-size', {
+    model: { prop: 'value', event: 'input' },
+    template: `<select name="size">
+      <option value="100">100</option>
+      <option value="500">500</option>
+      <option value="1000">1000</option>
+      <option value="all">All</option>
+    </select>`
+  })
+}
diff --git a/tests/unit/stubs/OcSwitch.js b/tests/unit/stubs/OcSwitch.js
new file mode 100644
index 00000000000..c5310570466
--- /dev/null
+++ b/tests/unit/stubs/OcSwitch.js
@@ -0,0 +1,6 @@
+export default vue => {
+  return vue.component('oc-switch', {
+    model: { prop: 'value', event: 'change' },
+    template: '<input type="checkbox" />'
+  })
+}
diff --git a/tests/unit/stubs/index.js b/tests/unit/stubs/index.js
index 54d3d45a1ed..f4770060a45 100644
--- a/tests/unit/stubs/index.js
+++ b/tests/unit/stubs/index.js
@@ -12,5 +12,6 @@ export default {
   'oc-list': true,
   'oc-switch': true,
   'oc-loader': true,
-  'oc-img': true
+  'oc-img': true,
+  'oc-page-size': true
 }

From 324e94f1bd1ac63b7a483031ad137b76daee05c0 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Thu, 8 Jul 2021 15:09:01 +0200
Subject: [PATCH 5/6] deps: update ODS

---
 package.json                                              | 8 ++++----
 .../tests/unit/components/ViewOptions.spec.js             | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 862f27464d8..dd795331455 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,8 @@
     "@rollup/plugin-html": "^0.2.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.2.1",
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/vue": "^5.6.2",
     "@types/jest": "^26.0.23",
     "@types/jest-axe": "^3.5.2",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
@@ -78,6 +80,7 @@
     "jest-serializer-vue": "^2.0.2",
     "jest-svg-transformer": "^1.0.0",
     "join-path": "^1.1.1",
+    "jsdom": "^16.6.0",
     "ldapjs": "^2.2.3",
     "lodash": "^4.17.21",
     "nightwatch": "1.5.1",
@@ -104,13 +107,10 @@
     "rollup-plugin-ts": "^1.4.0",
     "rollup-plugin-visualizer": "^5.5.1",
     "rollup-plugin-vue": "^5.1.4",
+    "sync-fetch": "^0.3.0",
     "ts-jest": "^26.5.6",
     "tslib": "^2.2.0",
     "typescript": "^4.3.2",
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/vue": "^5.6.2",
-    "jsdom": "^16.6.0",
-    "sync-fetch": "^0.3.0",
     "url-search-params-polyfill": "^8.0.0",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.12",
diff --git a/packages/web-app-files/tests/unit/components/ViewOptions.spec.js b/packages/web-app-files/tests/unit/components/ViewOptions.spec.js
index ca9f610a2ce..e62eb44b698 100644
--- a/packages/web-app-files/tests/unit/components/ViewOptions.spec.js
+++ b/packages/web-app-files/tests/unit/components/ViewOptions.spec.js
@@ -57,7 +57,7 @@ describe('ViewOptions', () => {
     expect(mutations.SET_FILES_PAGE_LIMIT).toHaveBeenCalled()
   })
 
-  it('triggeres mutation to toggle hidden files', async () => {
+  it('triggeres mutation to toggle hidden files', () => {
     const wrapper = shallowMount(ViewOptions, {
       store,
       localVue,

From 4de48d796136601bbada1a9360277f31a05c3c72 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Thu, 8 Jul 2021 16:12:23 +0200
Subject: [PATCH 6/6] feat: pass the route object directly

---
 .../web-app-files/src/components/FilesList/Pagination.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index b39b27b2be3..a9113a83a44 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -4,7 +4,7 @@
     :pages="pages"
     :current-page="currentPage"
     :max-displayed="3"
-    :current-route="targetRoute"
+    :current-route="$route"
     class="files-pagination uk-flex uk-flex-center oc-my-s"
   />
 </template>
@@ -15,11 +15,7 @@ import { mapState, mapGetters } from 'vuex'
 export default {
   computed: {
     ...mapState('Files', ['currentPage']),
-    ...mapGetters('Files', ['pages']),
-
-    targetRoute() {
-      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
-    }
+    ...mapGetters('Files', ['pages'])
   }
 }
 </script>