Pagination support #331

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,
 
 };

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",

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>

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;
 			},

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',

src/store/index.js

@@ -44,6 +44,7 @@ const getDefaultState = () => {
 		processesUpdated: 0,
 		collections: [],
 		processNamespaces: Config.processNamespaces || [],
+		pageLimit: Config.pageLimit,
 	};
 };
 

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',

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',

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];

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',