Add new option 'maxItemsPerPage' (#563)

* Add new option 'maxItemsPerPage' (with default 1000)

Co-authored-by: Matthias Mohr <[email protected]>

Author: vprivat-ads

config.js

@@ -39,6 +39,7 @@ module.exports = {
     geoTiffResolution: 128,
     redirectLegacyUrls: false,
     itemsPerPage: 12,
+    maxItemsPerPage: 1000,
     defaultThumbnailSize: null,
     maxPreviewsOnMap: 50,
     crossOriginMedia: null,

config.schema.json

@@ -169,6 +169,12 @@
       ],
       "minimum": 1
     },
+    "maxItemsPerPage": {
+      "type": [
+        "integer"
+      ],
+      "minimum": 1
+    },
     "defaultThumbnailSize": {
       "type": [
         "array",

docs/options.md

@@ -35,6 +35,7 @@ The following ways to set config options are possible:
   - [displayGeoTiffByDefault](#displaygeotiffbydefault)
   - [redirectLegacyUrls](#redirectlegacyurls)
   - [itemsPerPage](#itemsperpage)
+  - [maxItemsPerPage](#maxitemsperpage)
   - [maxPreviewsOnMap](#maxpreviewsonmap)
   - [cardViewMode](#cardviewmode)
   - [cardViewSort](#cardviewsort)
@@ -237,6 +238,10 @@ If you are updating from on old version of STAC Browser, you can set this option
 
 The number of items requested and shown per page by default. Only applies to APIs that support the `limit` query parameter.
 
+## maxItemsPerPage
+
+The maximum number of items per page that a user can request through the `limit` query parameter (`1000` by default).
+
 ## maxPreviewsOnMap
 
 The maximum number of previews (thumbnails or overviews) of items that will be shown on the map when on Catalog or Collection pages.

src/components/SearchFilter.vue

@@ -205,7 +205,6 @@ export default {
   data() {
     return Object.assign({
       results: null,
-      maxItems: 10000,
       loaded: false,
       queryables: null,
       hasAllCollections: false,
@@ -215,7 +214,7 @@ export default {
     }, getDefaults());
   },
   computed: {
-    ...mapState(['itemsPerPage', 'uiLanguage']),
+    ...mapState(['itemsPerPage', 'maxItemsPerPage', 'uiLanguage']),
     ...mapGetters(['canSearchCollections', 'supportsConformance']),
     collectionSelectOptions() {
       let taggable = !this.hasAllCollections;
@@ -281,6 +280,9 @@ export default {
       const collator = new Intl.Collator(this.uiLanguage);
       return this.queryables.slice(0).sort((a, b) => collator.compare(a.title, b.title));
     },
+    maxItems() {
+      return this.maxItemsPerPage || 1000;
+    },
     datetime: {
       get() {
         return Array.isArray(this.query.datetime) ? this.query.datetime.map(d => Utils.dateFromUTC(d)) : null;