From ff0c24799239c940966cfadb47eb833648dc4c04 Mon Sep 17 00:00:00 2001
From: Robert-Jan de Dreu <160743+rjd22@users.noreply.github.com>
Date: Tue, 25 Feb 2025 09:00:34 +0100
Subject: [PATCH] Make pagination configurable in configuration (#533)

* Make pagination configurable in configuration

* Set pagination defaults in store

* Add documentation of pagination
---
 configuration_sample.php               |  1 +
 docs/configuration/basic.md            |  4 ++++
 frontend/store.js                      |  6 ++++--
 frontend/views/Browser.vue             |  2 +-
 frontend/views/Users.vue               |  2 +-
 frontend/views/partials/Pagination.vue | 17 ++++++-----------
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/configuration_sample.php b/configuration_sample.php
index 11bd10d..9339ad9 100644
--- a/configuration_sample.php
+++ b/configuration_sample.php
@@ -23,6 +23,7 @@ return [
         'guest_redirection' => '', // useful for external auth adapters
         'search_simultaneous' => 5,
         'filter_entries' => [],
+        'pagination' => ['', 5, 10, 15],
     ],
 
     'services' => [
diff --git a/docs/configuration/basic.md b/docs/configuration/basic.md
index 198603f..885afe0 100644
--- a/docs/configuration/basic.md
+++ b/docs/configuration/basic.md
@@ -31,6 +31,10 @@ Note: if you've made a mistake in configuration file (forgot to close a quote?)
         // neither of above => it is a file and could be in every folder, example: '.htaccess'
         // both of above => full folder path has to match, example: '/homes/web/filegator/.npm/'
         'filter_entries' => ['Recycle.bin/', 'File System Information/', '.DS_Store', '@eaDir/', '#recycle/'],
+
+        // Use '' for the unlimited pagination and integers for the items per page. The first item is used as the
+        // default pagination and the choices are ordered by the order in the array.
+        'pagination' => ['', 5, 10, 15],
     ],
 ```
 
diff --git a/frontend/store.js b/frontend/store.js
index f0e4d0b..b95e970 100644
--- a/frontend/store.js
+++ b/frontend/store.js
@@ -8,7 +8,9 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     initialized: false,
-    config: [],
+    config: {
+      pagination: ['', 5, 10, 15],
+    },
     user: {
       role: 'guest',
       permissions: [],
@@ -50,7 +52,7 @@ export default new Vuex.Store({
       }
     },
     setConfig(state, data) {
-      state.config = data
+      state.config = {...state.config, ...data}
     },
     setUser(state, data) {
       state.user = data
diff --git a/frontend/views/Browser.vue b/frontend/views/Browser.vue
index 47b34a4..cb47d38 100644
--- a/frontend/views/Browser.vue
+++ b/frontend/views/Browser.vue
@@ -191,7 +191,7 @@ export default {
   data() {
     return {
       dropZone: false,
-      perPage: '',
+      perPage: this.$store.state.config.pagination[0],
       currentPage: 1,
       checked: [],
       isLoading: false,
diff --git a/frontend/views/Users.vue b/frontend/views/Users.vue
index 8a2274f..61c64cf 100644
--- a/frontend/views/Users.vue
+++ b/frontend/views/Users.vue
@@ -65,7 +65,7 @@ export default {
   components: { Menu, Pagination },
   data() {
     return {
-      perPage: '',
+      perPage: this.$store.state.config.pagination[0],
       currentPage: 1,
       isLoading: false,
       defaultSort: ['name', 'desc'],
diff --git a/frontend/views/partials/Pagination.vue b/frontend/views/partials/Pagination.vue
index 3bd0773..59c1af1 100644
--- a/frontend/views/partials/Pagination.vue
+++ b/frontend/views/partials/Pagination.vue
@@ -1,17 +1,12 @@
 <template>
   <div>
     <b-select :value="perpage" size="is-small" @input="$emit('selected', $event)">
-      <option value="">
-        {{ lang('No pagination') }}
-      </option>
-      <option value="5">
-        {{ lang('Per page', 5) }}
-      </option>
-      <option value="10">
-        {{ lang('Per page', 10) }}
-      </option>
-      <option value="15">
-        {{ lang('Per page', 15) }}
+      <option
+        v-for="page in this.$store.state.config.pagination"
+        :key="page"
+        :value="page"
+      >
+        {{ page === '' ? lang('No pagination') : lang('Per page', page) }}
       </option>
     </b-select>
   </div>