run sync and allow cancel+scheduling while loading

Signed-off-by: Julien Veyssier <[email protected]>
nextcloud · Nov 15, 2023 · db97937 · db97937
1 parent 9fd4cc3
commit db97937
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 7 deletions.
diff --git a/src/assistant.js b/src/assistant.js
@@ -42,6 +42,7 @@ export async function openAssistantForm({ appId, identifier = '', taskType = nul
 				input,
 				selectedTaskTypeId,
 				showScheduleConfirmation: false,
+				showSyncTaskRunning: false,
 			},
 		}).$mount(modalElement)
 
@@ -64,34 +65,58 @@ export async function openAssistantForm({ appId, identifier = '', taskType = nul
 		})
 		view.$on('sync-submit', (data) => {
 			view.loading = true
+			view.showSyncTaskRunning = true
+			view.input = data.input
+			view.selectedTaskTypeId = data.taskTypeId
 			runTask(appId, identifier, data.taskTypeId, data.input)
 				.then((response) => {
 					resolve(response.data?.task)
 					view.output = response.data?.task?.output
+					view.loading = false
+					view.showSyncTaskRunning = false
+				})
+				.catch(error => {
+					if (error?.code === 'ERR_CANCELED') {
+						view.output = ''
+					} else {
+						view.$destroy()
+						console.error('Assistant sync run error', error)
+						reject(new Error('Assistant sync run error'))
+					}
+				})
+				.then(() => {
+				})
+		})
+		view.$on('cancel-sync-n-schedule', () => {
+			window.assistantAbortController.abort()
+			scheduleTask(appId, identifier, view.selectedTaskTypeId, view.input)
+				.then((response) => {
+					view.showSyncTaskRunning = false
+					view.showScheduleConfirmation = true
+					resolve(response.data?.ocs?.data?.task)
 				})
 				.catch(error => {
 					view.$destroy()
 					console.error('Assistant scheduling error', error)
 					reject(new Error('Assistant scheduling error'))
 				})
-				.then(() => {
-					view.loading = false
-				})
 		})
 	})
 }
 
 export async function runTask(appId, identifier, taskType, input) {
+	window.assistantAbortController = new AbortController()
 	const { default: axios } = await import(/* webpackChunkName: "axios-lazy" */'@nextcloud/axios')
 	const { generateUrl } = await import(/* webpackChunkName: "router-gen-lazy" */'@nextcloud/router')
+	saveLastSelectedTaskType(taskType)
 	const url = generateUrl('/apps/assistant/run')
 	const params = {
 		input,
 		type: taskType,
 		appId,
 		identifier,
 	}
-	return axios.post(url, params)
+	return axios.post(url, params, { signal: window.assistantAbortController.signal })
 }
 
 /**

diff --git a/src/components/AssistantForm.vue b/src/components/AssistantForm.vue
@@ -48,7 +48,7 @@
 					<CreationIcon v-else />
 				</template>
 			</NcButton>
-			<NcButton
+			<!--NcButton
 				v-if="showSubmit"
 				:type="submitButtonType"
 				class="submit-button"
@@ -60,7 +60,7 @@
 				<template #icon>
 					<CreationIcon />
 				</template>
-			</NcButton>
+			</NcButton-->
 			<NcButton
 				v-if="showCopy"
 				type="primary"

diff --git a/src/components/AssistantModal.vue b/src/components/AssistantModal.vue
@@ -17,7 +17,25 @@
 					</template>
 				</NcButton>
 				<NcEmptyContent
-					v-if="showScheduleConfirmation"
+					v-if="showSyncTaskRunning"
+					:title="t('assistant', 'Your task is running')"
+					:name="t('assistant', 'Your task is running')"
+					:description="t('assistant', 'If it takes too long...')">
+					<template #action>
+						<NcButton
+							@click="onCancelNSchedule">
+							<template #icon>
+								<CloseIcon />
+							</template>
+							{{ t('assistant', 'Run in the background') }}
+						</NcButton>
+					</template>
+					<template #icon>
+						<NcLoadingIcon />
+					</template>
+				</NcEmptyContent>
+				<NcEmptyContent
+					v-else-if="showScheduleConfirmation"
 					:title="t('assistant', 'Your task has been scheduled, you will receive a notification when it has finished')"
 					:name="t('assistant', 'Your task has been scheduled, you will receive a notification when it has finished')"
 					:description="shortInput">
@@ -54,6 +72,7 @@ import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 import AssistantIcon from './icons/AssistantIcon.vue'
 
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
@@ -71,6 +90,7 @@ export default {
 		NcButton,
 		NcEmptyContent,
 		CloseIcon,
+		NcLoadingIcon,
 	},
 	props: {
 		/**
@@ -96,6 +116,10 @@ export default {
 			type: [String, null],
 			default: null,
 		},
+		showSyncTaskRunning: {
+			type: Boolean,
+			required: true,
+		},
 		showScheduleConfirmation: {
 			type: Boolean,
 			required: true,
@@ -139,6 +163,9 @@ export default {
 		onSyncSubmit(params) {
 			this.$emit('sync-submit', params)
 		},
+		onCancelNSchedule() {
+			this.$emit('cancel-sync-n-schedule')
+		},
 	},
 }
 </script>