show scheduling confirmation (empty content) in modal (instead of clo…

…sing it) and page Signed-off-by: Julien Veyssier <[email protected]>
nextcloud · Aug 5, 2023 · 803f65e · 803f65e
1 parent 4fa1e85
commit 803f65e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/src/assistant.js b/src/assistant.js
@@ -38,6 +38,7 @@ export async function openAssistantForm({ appId, identifier = '', taskType = nul
 				isInsideViewer,
 				input,
 				selectedTaskTypeId: taskType,
+				showScheduleConfirmation: false,
 			},
 		}).$mount(modalElement)
 
@@ -46,12 +47,13 @@ export async function openAssistantForm({ appId, identifier = '', taskType = nul
 			reject(new Error('User cancellation'))
 		})
 		view.$on('submit', (data) => {
-			view.$destroy()
 			scheduleTask(appId, identifier, data.taskTypeId, data.input)
 				.then((response) => {
+					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'))
 				})
@@ -140,19 +142,21 @@ async function openAssistantResult(task) {
 			input: task.input,
 			output: task.output ?? '',
 			selectedTaskTypeId: task.type,
+			showScheduleConfirmation: false,
 		},
 	}).$mount(modalElement)
 
 	view.$on('cancel', () => {
 		view.$destroy()
 	})
 	view.$on('submit', (data) => {
-		view.$destroy()
 		scheduleTask(task.appId, task.identifier, data.taskTypeId, data.input)
 			.then((response) => {
+				view.showScheduleConfirmation = true
 				console.debug('scheduled task', response.data?.ocs?.data?.task)
 			})
 			.catch(error => {
+				view.$destroy()
 				console.error('Assistant scheduling error', error)
 			})
 	})

diff --git a/src/components/AssistantModal.vue b/src/components/AssistantModal.vue
@@ -15,7 +15,26 @@
 						<CloseIcon />
 					</template>
 				</NcButton>
+				<NcEmptyContent
+					v-if="showScheduleConfirmation"
+					:title="t('textprocessing_assistant', 'Your task has been scheduled')"
+					:name="t('textprocessing_assistant', 'Your task has been scheduled')"
+					:description="t('textprocessing_assistant', 'You will receive a notification when it has finished')">
+					<template #action>
+						<NcButton
+							@click="onCancel">
+							<template #icon>
+								<CloseIcon />
+							</template>
+							{{ t('textprocessing_assistant', 'Close') }}
+						</NcButton>
+					</template>
+					<template #icon>
+						<AssistantIcon />
+					</template>
+				</NcEmptyContent>
 				<AssistantForm
+					v-else
 					class="form"
 					:input="input"
 					:output="output"
@@ -30,8 +49,11 @@
 <script>
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 
+import AssistantIcon from './icons/AssistantIcon.vue'
+
 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'
 
 import AssistantForm from './AssistantForm.vue'
 
@@ -40,9 +62,11 @@ import { emit } from '@nextcloud/event-bus'
 export default {
 	name: 'AssistantModal',
 	components: {
+		AssistantIcon,
 		AssistantForm,
 		NcModal,
 		NcButton,
+		NcEmptyContent,
 		CloseIcon,
 	},
 	props: {
@@ -65,6 +89,10 @@ export default {
 			type: [String, null],
 			default: null,
 		},
+		showScheduleConfirmation: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	emits: [
 		'cancel',
@@ -92,7 +120,7 @@ export default {
 			this.$emit('cancel')
 		},
 		onSubmit(params) {
-			this.show = false
+			// this.show = false
 			this.$emit('submit', params)
 		},
 	},

diff --git a/src/views/TaskResultPage.vue b/src/views/TaskResultPage.vue
@@ -3,7 +3,17 @@
 		<NcAppContent>
 			<div v-if="task?.id"
 				class="assistant-wrapper">
+				<NcEmptyContent
+					v-if="showScheduleConfirmation"
+					:title="t('textprocessing_assistant', 'Your task has been scheduled')"
+					:name="t('textprocessing_assistant', 'Your task has been scheduled')"
+					:description="t('textprocessing_assistant', 'You will receive a notification when it has finished')">
+					<template #icon>
+						<AssistantIcon />
+					</template>
+				</NcEmptyContent>
 				<AssistantForm
+					v-else
 					class="form"
 					:input="task.input"
 					:output="task.output ?? ''"
@@ -15,21 +25,27 @@
 </template>
 
 <script>
+import AssistantIcon from '../components/icons/AssistantIcon.vue'
+
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
 import AssistantForm from '../components/AssistantForm.vue'
 
+import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { scheduleTask } from '../assistant.js'
 
 export default {
 	name: 'TaskResultPage',
 
 	components: {
+		AssistantIcon,
 		AssistantForm,
 		NcContent,
 		NcAppContent,
+		NcEmptyContent,
 	},
 
 	props: {
@@ -38,6 +54,7 @@ export default {
 	data() {
 		return {
 			task: loadState('textprocessing_assistant', 'task'),
+			showScheduleConfirmation: false,
 		}
 	},
 
@@ -51,10 +68,12 @@ export default {
 		onSubmit(data) {
 			scheduleTask(this.task.appId, this.task.identifier, data.taskTypeId, data.input)
 				.then((response) => {
+					this.showScheduleConfirmation = true
 					console.debug('scheduled task', response.data?.ocs?.data?.task)
 				})
 				.catch(error => {
 					console.error('Assistant scheduling error', error)
+					showError(t('textprocessing_assistant', 'Failed to schedule your task'))
 				})
 		},
 	},