From 4901e461aeb157f47250c750636bfd41edc20a80 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Fri, 6 Dec 2024 23:19:34 +0100
Subject: [PATCH] Pagination support #331

---
 config.js                        |  3 ++
 package.json                     |  4 +--
 src/components/JobPanel.vue      |  2 +-
 src/components/WorkPanelMixin.js |  3 +-
 src/store/files.js               |  1 +
 src/store/index.js               |  1 +
 src/store/jobs.js                |  1 +
 src/store/services.js            |  1 +
 src/store/storeFactory.js        | 47 ++++++++++++++++++++++++++------
 src/store/userProcesses.js       |  1 +
 10 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/config.js b/config.js
index 855bd19e7..f20453807 100644
--- a/config.js
+++ b/config.js
@@ -101,5 +101,8 @@ export default {
 	// Show or hide experimental and/or deprecated entites by default (e.g. processes, collections)
 	showExperimentalByDefault: false,
 	showDeprecatedByDefault: false,
+
+	// number of items to show per page in the UI (jobs, services, files, UDPs) - null to disable pagination
+	pageLimit: 50,
 	
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index d9ebf764f..ceeeb7529 100644
--- a/package.json
+++ b/package.json
@@ -48,10 +48,10 @@
   "dependencies": {
     "@kirtandesai/ol-geocoder": "^5.0.6",
     "@musement/iso-duration": "^1.0.0",
-    "@openeo/js-client": "^2.6.0",
+    "@openeo/js-client": "open-EO/openeo-js-client#pagination",
     "@openeo/js-commons": "^1.5.0",
     "@openeo/js-processgraphs": "^1.4.1",
-    "@openeo/vue-components": "^2.17.0",
+    "@openeo/vue-components": "open-EO/openeo-vue-components#load-more-table",
     "@radiantearth/stac-fields": "^1.5.0-beta.2",
     "@radiantearth/stac-migrate": "^2.0.0-beta.1",
     "@tmcw/togeojson": "^5.5.0",
diff --git a/src/components/JobPanel.vue b/src/components/JobPanel.vue
index 42cd43b01..fa9520ae8 100644
--- a/src/components/JobPanel.vue
+++ b/src/components/JobPanel.vue
@@ -1,5 +1,5 @@
 <template>
-	<DataTable ref="table" :data="data" :columns="columns" class="JobPanel">
+	<DataTable ref="table" :data="data" :columns="columns" :hasMore="hasMore" class="JobPanel" @next="nextPage()">
 		<template slot="toolbar">
 			<button title="Add new job for batch processing" @click="createJobFromScript()" v-show="supportsCreate" :disabled="!this.hasProcess"><i class="fas fa-plus"></i> Create Batch Job</button>
 			<button title="Run the process directly and view the results without storing them permanently" @click="executeProcess" v-show="supports('computeResult')" :disabled="!this.hasProcess"><i class="fas fa-play"></i> Run now</button>
diff --git a/src/components/WorkPanelMixin.js b/src/components/WorkPanelMixin.js
index cce37dd4f..d58064794 100644
--- a/src/components/WorkPanelMixin.js
+++ b/src/components/WorkPanelMixin.js
@@ -22,10 +22,11 @@ export default (namespace, singular, plural, loadInitially = true) => {
 		},
 		computed: {
 			...Utils.mapState(namespace, {data: namespace}),
+			...Utils.mapState(namespace, ['pages', 'hasMore']),
 			...Utils.mapGetters(namespace, ['supportsList', 'supportsCreate', 'supportsRead', 'supportsUpdate', 'supportsDelete'])
 		},
 		methods: {
-			...Utils.mapActions(namespace, ['list', 'create', 'read', 'update', 'delete']),
+			...Utils.mapActions(namespace, ['list', 'nextPage', 'create', 'read', 'update', 'delete']),
 			getTable() { // To be overridden
 				return this.$refs && this.$refs.table ? this.$refs.table : null;
 			},
diff --git a/src/store/files.js b/src/store/files.js
index 983d48752..0ee81514d 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -3,6 +3,7 @@ import storeFactory from './storeFactory';
 export default storeFactory({
 	namespace: 'files',
 	listFn: 'listFiles',
+	paginateFn: 'paginateFiles',
 	createFn: 'uploadFile',
 	updateFn: 'uploadFile',
 	deleteFn: 'deleteFile',
diff --git a/src/store/index.js b/src/store/index.js
index 6e736dd8c..e3cdca2f2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -44,6 +44,7 @@ const getDefaultState = () => {
 		processesUpdated: 0,
 		collections: [],
 		processNamespaces: Config.processNamespaces || [],
+		pageLimit: Config.pageLimit,
 	};
 };
 
diff --git a/src/store/jobs.js b/src/store/jobs.js
index 9f92bcc7f..bff8c16dd 100644
--- a/src/store/jobs.js
+++ b/src/store/jobs.js
@@ -3,6 +3,7 @@ import storeFactory from './storeFactory';
 export default storeFactory({
 	namespace: 'jobs',
 	listFn: 'listJobs',
+	paginateFn: 'paginateJobs',
 	createFn: 'createJob',
 	updateFn: 'updateJob',
 	deleteFn: 'deleteJob',
diff --git a/src/store/services.js b/src/store/services.js
index ed962170f..53b866c47 100644
--- a/src/store/services.js
+++ b/src/store/services.js
@@ -3,6 +3,7 @@ import storeFactory from './storeFactory';
 export default storeFactory({
 	namespace: 'services',
 	listFn: 'listServices',
+	paginateFn: 'paginateServices',
 	createFn: 'createService',
 	updateFn: 'updateService',
 	deleteFn: 'deleteService',
diff --git a/src/store/storeFactory.js b/src/store/storeFactory.js
index dcacffa7d..266e8322f 100644
--- a/src/store/storeFactory.js
+++ b/src/store/storeFactory.js
@@ -2,14 +2,16 @@ import { UserProcess } from '@openeo/js-client';
 import { Utils } from '@openeo/js-commons';
 import Vue from 'vue';
 
-export default ({namespace, listFn, createFn, updateFn, deleteFn, readFn, readFnById, customizations, primaryKey}) => {
+export default ({namespace, listFn, paginateFn, createFn, updateFn, deleteFn, readFn, readFnById, customizations, primaryKey}) => {
 	if (!primaryKey) {
 		primaryKey = 'id';
 	}
 	const getDefaultState = () => {
-		let data = {};
-		data[namespace] = [];
-		return data;
+		return {
+			pages: null,
+			hasMore: false,
+			[namespace]: []
+		};
 	};
 	let definition = {
 		namespaced: true,
@@ -76,19 +78,46 @@ export default ({namespace, listFn, createFn, updateFn, deleteFn, readFn, readFn
 				return updated;
 			},
 			async list(cx) {
-				var data = [];
+				cx.commit('reset');
 				if (cx.getters.supportsList) {
 					// Pass over existing data so that it can be updated (for all complete entities, only update fields that exist in the new object)
 					// instead of getting replaced, see https://github.com/Open-EO/openeo-web-editor/issues/234
-					data = await cx.rootState.connection[listFn](cx.state[namespace]);
+					if (paginateFn) {
+						const pages = cx.rootState.connection[paginateFn](cx.rootState.pageLimit, cx.state[namespace]);
+						cx.commit('pages', pages);
+						cx.commit('data', await pages.next());
+					}
+					else {
+						const data = await cx.rootState.connection[listFn](cx.state[namespace]);
+						cx.commit('data', data);
+					}
+				}
+				return cx.state[namespace];
+			},
+			async nextPage(cx) {
+				if (!cx.state.pages || !cx.state.hasMore) {
+					return;
 				}
-				cx.commit('data', data);
-				return data;
+				cx.commit('data', await cx.state.pages.next());
+				return cx.state[namespace];
 			}
 		},
 		mutations: {
 			data(state, data) {
-				state[namespace] = data.map(d => Vue.observable(d));
+				let hasMore = false;
+				if (Utils.isObject(data)) {
+					hasMore = !data.done;
+					data = data.value;
+				}
+				if (Array.isArray(data)) {
+					for (let d of data) {
+						state[namespace].push(d);
+					}
+				}
+				state.hasMore = hasMore;
+			},
+			pages(state, pages) {
+				state.pages = pages;
 			},
 			upsert(state, data) {
 				let id = data[primaryKey];
diff --git a/src/store/userProcesses.js b/src/store/userProcesses.js
index b94eeb335..6600cb7e2 100644
--- a/src/store/userProcesses.js
+++ b/src/store/userProcesses.js
@@ -4,6 +4,7 @@ import Utils from '../utils';
 export default storeFactory({
 	namespace: 'userProcesses',
 	listFn: 'listUserProcesses',
+	paginateFn: null,
 	createFn: 'setUserProcess',
 	updateFn: 'replaceUserProcess',
 	deleteFn: 'deleteUserProcess',