Merge pull request #131 from nextcloud/enh/noid/back-buttons-after-launching-task

Add back buttons after launching a task

Author: marcelklehr

src/assistant.js

@@ -156,6 +156,13 @@ export async function openAssistantForm({
 			}
 			view.$destroy()
 		})
+		view.$on('back-to-assistant', () => {
+			view.showScheduleConfirmation = false
+			view.showSyncTaskRunning = false
+			view.loading = false
+			view.outputs = null
+			lastTask = null
+		})
 	})
 }
 
@@ -419,6 +426,13 @@ export async function openAssistantTask(task, { isInsideViewer = undefined, acti
 		}
 		view.$destroy()
 	})
+	view.$on('back-to-assistant', () => {
+		view.showScheduleConfirmation = false
+		view.showSyncTaskRunning = false
+		view.loading = false
+		view.outputs = null
+		lastTask = null
+	})
 }
 
 export async function addAssistantMenuEntry() {

src/components/AssistantTextProcessingModal.vue

@@ -22,12 +22,14 @@
 					:description="shortInput"
 					:progress="progress"
 					@background-notify="$emit('background-notify')"
-					@cancel="$emit('cancel-task')" />
+					@cancel="$emit('cancel-task')"
+					@back="onBackToAssistant" />
 				<ScheduledEmptyContent
 					v-else-if="showScheduleConfirmation"
 					:description="shortInput"
 					:show-close-button="true"
-					@close="onCancel" />
+					@close="onCancel"
+					@back="onBackToAssistant" />
 				<AssistantTextProcessingForm
 					v-else
 					class="form"
@@ -122,6 +124,7 @@ export default {
 		'action-button-clicked',
 		'try-again',
 		'load-task',
+		'back-to-assistant',
 	],
 	data() {
 		return {
@@ -151,6 +154,9 @@ export default {
 		}
 	},
 	methods: {
+		onBackToAssistant() {
+			this.$emit('back-to-assistant')
+		},
 		onCancel() {
 			this.show = false
 			this.$emit('cancel')

src/components/RunningEmptyContent.vue

@@ -3,7 +3,7 @@
 		:name="t('assistant', 'Getting results…')"
 		:description="description">
 		<template #action>
-			<div class="actions">
+			<div class="running-actions">
 				<div v-if="progress !== null"
 					class="progress">
 					<span>{{ formattedProgress }} %</span>
@@ -12,11 +12,24 @@
 				</div>
 				<NcButton
 					@click="$emit('background-notify')">
-					{{ t('assistant', 'Run in the background and get notified') }}
+					<template #icon>
+						<ProgressClockIcon />
+					</template>
+					{{ t('assistant', 'Run task in the background and get notified') }}
+				</NcButton>
+				<NcButton
+					@click="$emit('back')">
+					<template #icon>
+						<ArrowLeftIcon />
+					</template>
+					{{ t('assistant', 'Back to the Assistant') }}
 				</NcButton>
 				<NcButton
 					@click="$emit('cancel')">
-					{{ t('assistant', 'Cancel') }}
+					<template #icon>
+						<CloseIcon />
+					</template>
+					{{ t('assistant', 'Cancel task') }}
 				</NcButton>
 			</div>
 		</template>
@@ -27,6 +40,10 @@
 </template>
 
 <script>
+import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import ProgressClockIcon from 'vue-material-design-icons/ProgressClock.vue'
+
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
@@ -40,6 +57,9 @@ export default {
 		NcEmptyContent,
 		NcLoadingIcon,
 		NcProgressBar,
+		ArrowLeftIcon,
+		CloseIcon,
+		ProgressClockIcon,
 	},
 
 	props: {
@@ -56,6 +76,7 @@ export default {
 	emits: [
 		'cancel',
 		'background-notify',
+		'back',
 	],
 
 	data() {
@@ -81,9 +102,10 @@ export default {
 </script>
 
 <style lang="scss">
-.actions {
+.running-actions {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	gap: 12px;
 
 	.progress {

src/components/ScheduledEmptyContent.vue

@@ -2,15 +2,23 @@
 	<NcEmptyContent
 		:name="title"
 		:description="t('assistant', 'You will receive a notification when it has finished')">
-		<template v-if="showCloseButton" #action>
-			<NcButton
-				type="tertiary"
-				@click="$emit('close')">
-				<template #icon>
-					<CloseIcon />
-				</template>
-				{{ t('assistant', 'Close') }}
-			</NcButton>
+		<template #action>
+			<div class="schedule-confirmation-actions">
+				<NcButton
+					@click="$emit('back')">
+					<template #icon>
+						<ArrowLeftIcon />
+					</template>
+					{{ t('assistant', 'Back to the Assistant') }}
+				</NcButton>
+				<NcButton v-if="showCloseButton"
+					@click="$emit('close')">
+					<template #icon>
+						<CloseIcon />
+					</template>
+					{{ t('assistant', 'Close') }}
+				</NcButton>
+			</div>
 		</template>
 		<template #icon>
 			<AssistantIcon />
@@ -20,6 +28,7 @@
 
 <script>
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
 
 import AssistantIcon from './icons/AssistantIcon.vue'
 
@@ -34,6 +43,7 @@ export default {
 		NcButton,
 		NcEmptyContent,
 		CloseIcon,
+		ArrowLeftIcon,
 	},
 
 	props: {
@@ -49,6 +59,7 @@ export default {
 
 	emits: [
 		'cancel',
+		'back',
 	],
 
 	data() {
@@ -69,5 +80,10 @@ export default {
 </script>
 
 <style lang="scss">
-// nothing yet
+.schedule-confirmation-actions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+}
 </style>

src/components/TaskListItem.vue

@@ -38,6 +38,7 @@
 				{{ t('assistant', 'Try again') }}
 			</NcActionButton>
 			<NcActionButton v-if="isScheduled || isRunning"
+				:close-after-click="true"
 				@click="$emit('cancel')">
 				<template #icon>
 					<CloseIcon />

src/views/AssistantPage.vue

@@ -7,11 +7,13 @@
 					:description="shortInput"
 					:progress="progress"
 					@background-notify="onBackgroundNotify"
-					@cancel="onCancel" />
+					@cancel="onCancel"
+					@back="onBackToAssistant" />
 				<ScheduledEmptyContent
 					v-else-if="showScheduleConfirmation"
 					:description="shortInput"
-					:show-close-button="false" />
+					:show-close-button="false"
+					@back="onBackToAssistant" />
 				<AssistantTextProcessingForm
 					v-else
 					class="form"
@@ -95,6 +97,11 @@ export default {
 			this.showSyncTaskRunning = false
 			setNotifyReady(this.task.id)
 		},
+		onBackToAssistant() {
+			this.showSyncTaskRunning = false
+			this.showScheduleConfirmation = false
+			this.task.output = null
+		},
 		onCancel() {
 			cancelTaskPolling()
 			cancelTask(this.task.id)