Sync/Refresh button for user workspaces #231 #286

Author: m-mohr

src/components/CustomProcessPanel.vue

@@ -2,6 +2,7 @@
 	<DataTable ref="table" :data="data" :columns="columns" class="CustomProcessPanel">
 		<template slot="toolbar">
 			<button title="Add new custom process" @click="addProcessFromScript" v-show="supportsCreate" :disabled="!this.hasProcess"><i class="fas fa-plus"></i> Add</button>
+			<SyncButton name="custom processes" :sync="() => updateData(true)" />
 		</template>
 		<template #actions="p">
 			<button title="Details" @click="processInfo(p.row)" v-show="supportsRead"><i class="fas fa-info"></i></button>
@@ -12,14 +13,18 @@
 </template>
 
 <script>
-import EventBusMixin from './EventBusMixin.js';
+import EventBusMixin from './EventBusMixin';
 import WorkPanelMixin from './WorkPanelMixin';
+import SyncButton from './SyncButton.vue';
 import Utils from '../utils.js';
 import { UserProcess } from '@openeo/js-client';
 
 export default {
 	name: 'CustomProcessPanel',
 	mixins: [WorkPanelMixin('userProcesses', 'custom process', 'custom processes', false), EventBusMixin],
+	components: {
+		SyncButton
+	},
 	data() {
 		return {
 			columns: {

src/components/FilePanel.vue

@@ -9,6 +9,7 @@
 						<input type="file" name="uploadUserFile" class="uploadUserFile" ref="uploadUserFile" @change="uploadFiles" multiple>
 					</div>
 				</div>
+				<SyncButton name="files" :sync="() => updateData(true)" />
 			</template>
 			<template #actions="p">
 				<button title="Download" @click="downloadFile(p.row)" v-show="supportsRead"><i class="fas fa-download"></i></button>
@@ -20,11 +21,15 @@
 
 <script>
 import WorkPanelMixin from './WorkPanelMixin';
+import SyncButton from './SyncButton.vue';
 import Utils from '../utils.js';
 
 export default {
   	name: 'FilePanel',
 	mixins: [WorkPanelMixin('files', 'file', 'files')],
+	components: {
+		SyncButton
+	},
 	data() {
 		return {
 			columns: {
@@ -153,6 +158,18 @@ export default {
 	height: 100%;
 	width: 100%;
 
+	.toolbar {
+		display: flex;
+
+		.upload {
+			flex-grow: 1;
+		}
+		.data-sync {
+			flex-grow: 0;
+			height: 100%;
+		}
+	}
+
 	.dropZone {
 		width: 100%;
 		height: 100%;

src/components/JobPanel.vue

@@ -3,6 +3,7 @@
 		<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>
+			<SyncButton name="batch jobs" :sync="() => updateData(true)" />
 		</template>
 		<template #actions="p">
 			<button title="Details" @click="showJobInfo(p.row)" v-show="supportsRead"><i class="fas fa-info"></i></button>
@@ -21,8 +22,9 @@
 </template>
 
 <script>
-import EventBusMixin from './EventBusMixin.js';
+import EventBusMixin from './EventBusMixin';
 import WorkPanelMixin from './WorkPanelMixin';
+import SyncButton from './SyncButton.vue';
 import Utils from '../utils.js';
 import { AbortController, Job } from '@openeo/js-client';
 
@@ -31,6 +33,9 @@ const WorkPanelMixinInstance = WorkPanelMixin('jobs', 'batch job', 'batch jobs')
 export default {
 	name: 'JobPanel',
 	mixins: [WorkPanelMixinInstance, EventBusMixin],
+	components: {
+		SyncButton
+	},
 	data() {
 		return {
 			columns: {

src/components/ServicePanel.vue

@@ -3,6 +3,7 @@
 		<template slot="toolbar">
 			<button title="Add new permanently stored web service" @click="createServiceFromScript()" v-show="supportsCreate" :disabled="!this.hasProcess"><i class="fas fa-plus"></i> Create</button>
 			<button title="Quickly show the process on map without storing it permanently" @click="quickViewServiceFromScript()" v-show="supportsQuickView" :disabled="!this.hasProcess"><i class="fas fa-map"></i> Show on Map</button>
+			<SyncButton name="web services" :sync="() => updateData(true)" />
 		</template>
 		<template #actions="p">
 			<button title="Details" @click="serviceInfo(p.row)" v-show="supportsRead"><i class="fas fa-info"></i></button>
@@ -17,15 +18,19 @@
 </template>
 
 <script>
-import EventBusMixin from './EventBusMixin.js';
+import EventBusMixin from './EventBusMixin';
 import WorkPanelMixin from './WorkPanelMixin';
+import SyncButton from './SyncButton.vue';
 import Utils from '../utils';
 import { Service } from '@openeo/js-client';
 import { mapMutations } from 'vuex';
 
 export default {
 	name: 'ServicePanel',
 	mixins: [WorkPanelMixin('services', 'web service', 'web services'), EventBusMixin],
+	components: {
+		SyncButton
+	},
 	data() {
 		return {
 			columns: {

src/components/SyncButton.vue

@@ -0,0 +1,51 @@
+<template>
+	<button :title="title" class="data-sync" @click="update">
+		<i v-if="syncState === true" class="fas fa-check"></i>
+		<i v-else-if="syncState === false" class="fas fa-times"></i>
+		<i v-else class="fas fa-sync"></i>
+	</button>
+</template>
+
+<script>
+export default {
+	name: "SyncButton",
+	props: {
+		name: {
+			type: String,
+			required: true
+		},
+		sync: {
+			type: Function,
+			required: true
+		}
+	},
+	data() {
+		return {
+			syncState: null
+		};
+	},
+	computed: {
+		title() {
+			return "Refresh list of " + this.name
+		}
+	},
+	methods: {
+		async update(event) {
+			if (this.syncState !== null) {
+				return;
+			}
+			this.syncState = await this.sync(event);
+			setTimeout(() => this.syncState = null, 3000);
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.fa-check {
+	color: green;
+}
+.fa-times {
+	color: maroon;
+}
+</style>

src/components/WorkPanelMixin.js

@@ -62,11 +62,11 @@ export default (namespace, singular, plural, loadInitially = true) => {
 					Utils.exception(this, error, "Load " + singular + " error");
 				}
 			},
-			async updateData() {
+			async updateData(force = false) {
 				var table = this.getTable();
 				var nextSyncTime = Date.now() - this.getSyncInterval();
-				if (!table || this.lastSyncTime > nextSyncTime) {
-					return;
+				if (!table || (!force && this.lastSyncTime > nextSyncTime)) {
+					return false;
 				}
 				else if (!this.supportsList) {
 					table.setNoData("Sorry, listing stored " + plural + " is not supported by the server.");
@@ -85,6 +85,7 @@ export default (namespace, singular, plural, loadInitially = true) => {
 						if(data.length == 0) {
 							table.setNoData("Add your first " + singular + " here...");
 						}
+						return true;
 					} catch(error) {
 						if (!isUpdate) {
 							Utils.exception(this, error);
@@ -95,6 +96,7 @@ export default (namespace, singular, plural, loadInitially = true) => {
 						}
 					}
 				}
+				return false;
 			}
 		}
 	};