Skip to content

Commit

Permalink
adjust result page, factorize empty contents
Browse files Browse the repository at this point in the history
Signed-off-by: Julien Veyssier <[email protected]>
  • Loading branch information
julien-nc committed Nov 15, 2023
1 parent db97937 commit a0acb8f
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 67 deletions.
6 changes: 5 additions & 1 deletion src/assistant.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export async function openAssistantForm({ appId, identifier = '', taskType = nul
})
})
view.$on('cancel-sync-n-schedule', () => {
window.assistantAbortController.abort()
cancelCurrentSyncTask()
scheduleTask(appId, identifier, view.selectedTaskTypeId, view.input)
.then((response) => {
view.showSyncTaskRunning = false
Expand All @@ -104,6 +104,10 @@ export async function openAssistantForm({ appId, identifier = '', taskType = nul
})
}

export async function cancelCurrentSyncTask() {
window.assistantAbortController?.abort()
}

export async function runTask(appId, identifier, taskType, input) {
window.assistantAbortController = new AbortController()
const { default: axios } = await import(/* webpackChunkName: "axios-lazy" */'@nextcloud/axios')
Expand Down
5 changes: 1 addition & 4 deletions src/components/AssistantForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export default {
},
},
emits: [
'cancel',
'sync-submit',
'submit',
],
data() {
Expand Down Expand Up @@ -187,9 +187,6 @@ export default {
console.error(error)
})
},
onCancel() {
this.$emit('cancel')
},
onSubmit() {
this.$emit('submit', { input: this.myInput.trim(), taskTypeId: this.mySelectedTaskTypeId })
},
Expand Down
54 changes: 11 additions & 43 deletions src/components/AssistantModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,50 +16,21 @@
<CloseIcon />
</template>
</NcButton>
<NcEmptyContent
<RunningEmptyContent
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
@cancel="onCancelNSchedule" />
<ScheduledEmptyContent
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">
<template #action>
<NcButton
@click="onCancel">
<template #icon>
<CloseIcon />
</template>
{{ t('assistant', 'Close') }}
</NcButton>
</template>
<template #icon>
<AssistantIcon />
</template>
</NcEmptyContent>
:description="shortInput"
:show-close-button="true"
@close="onCancel" />
<AssistantForm
v-else
class="form"
:input="input"
:output="output"
:selected-task-type-id="selectedTaskTypeId"
:loading="loading"
@cancel="onCancel"
@submit="onSubmit"
@sync-submit="onSyncSubmit" />
</div>
Expand All @@ -70,27 +41,24 @@
<script>
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'
import AssistantForm from './AssistantForm.vue'
import RunningEmptyContent from './RunningEmptyContent.vue'
import ScheduledEmptyContent from './ScheduledEmptyContent.vue'
import { emit } from '@nextcloud/event-bus'
export default {
name: 'AssistantModal',
components: {
AssistantIcon,
ScheduledEmptyContent,
RunningEmptyContent,
AssistantForm,
NcModal,
NcButton,
NcEmptyContent,
CloseIcon,
NcLoadingIcon,
},
props: {
/**
Expand Down Expand Up @@ -118,7 +86,7 @@ export default {
},
showSyncTaskRunning: {
type: Boolean,
required: true,
default: false,
},
showScheduleConfirmation: {
type: Boolean,
Expand Down
63 changes: 63 additions & 0 deletions src/components/RunningEmptyContent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<NcEmptyContent
: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="$emit('cancel')">
<template #icon>
<CloseIcon />
</template>
{{ t('assistant', 'Run in the background') }}
</NcButton>
</template>
<template #icon>
<NcLoadingIcon />
</template>
</NcEmptyContent>
</template>

<script>
import CloseIcon from 'vue-material-design-icons/Close.vue'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
export default {
name: 'RunningEmptyContent',
components: {
NcButton,
NcEmptyContent,
CloseIcon,
NcLoadingIcon,
},
props: {
},
emits: [
'cancel',
],
data() {
return {
}
},
computed: {
},
mounted() {
},
methods: {
},
}
</script>

<style lang="scss">
// nothing yet
</style>
73 changes: 73 additions & 0 deletions src/components/ScheduledEmptyContent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<NcEmptyContent
:title="title"
:name="title"
:description="description">
<template v-if="showCloseButton" #action>
<NcButton
@click="$emit('close')">
<template #icon>
<CloseIcon />
</template>
{{ t('assistant', 'Close') }}
</NcButton>
</template>
<template #icon>
<AssistantIcon />
</template>
</NcEmptyContent>
</template>

<script>
import CloseIcon from 'vue-material-design-icons/Close.vue'
import AssistantIcon from './icons/AssistantIcon.vue'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
export default {
name: 'ScheduledEmptyContent',
components: {
AssistantIcon,
NcButton,
NcEmptyContent,
CloseIcon,
},
props: {
description: {
type: String,
required: true,
},
showCloseButton: {
type: Boolean,
default: false,
},
},
emits: [
'cancel',
],
data() {
return {
title: t('assistant', 'Your task has been scheduled, you will receive a notification when it has finished'),
}
},
computed: {
},
mounted() {
},
methods: {
},
}
</script>

<style lang="scss">
// nothing yet
</style>
52 changes: 33 additions & 19 deletions src/views/TaskResultPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@
<NcAppContent>
<div v-if="task?.id"
class="assistant-wrapper">
<NcEmptyContent
v-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">
<template #icon>
<AssistantIcon />
</template>
</NcEmptyContent>
<RunningEmptyContent
v-if="showSyncTaskRunning"
@cancel="onCancelNSchedule" />
<ScheduledEmptyContent
v-else-if="showScheduleConfirmation"
:description="shortInput"
:show-close-button="false" />
<AssistantForm
v-else
class="form"
Expand All @@ -27,27 +25,26 @@
</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 RunningEmptyContent from '../components/RunningEmptyContent.vue'
import ScheduledEmptyContent from '../components/ScheduledEmptyContent.vue'
import { showError } from '@nextcloud/dialogs'
import { loadState } from '@nextcloud/initial-state'
import { scheduleTask, runTask } from '../assistant.js'
import { scheduleTask, runTask, cancelCurrentSyncTask } from '../assistant.js'
export default {
name: 'TaskResultPage',
components: {
AssistantIcon,
ScheduledEmptyContent,
RunningEmptyContent,
AssistantForm,
NcContent,
NcAppContent,
NcEmptyContent,
},
props: {
Expand All @@ -56,6 +53,7 @@ export default {
data() {
return {
task: loadState('assistant', 'task'),
showSyncTaskRunning: false,
showScheduleConfirmation: false,
loading: false,
}
Expand All @@ -74,6 +72,19 @@ export default {
},
methods: {
onCancelNSchedule() {
cancelCurrentSyncTask()
scheduleTask(this.task.appId, this.task.identifier, this.task.type, this.task.input)
.then((response) => {
this.showSyncTaskRunning = false
this.showScheduleConfirmation = true
console.debug('scheduled task', response.data?.ocs?.data?.task)
})
.catch(error => {
console.error('Assistant scheduling error', error)
showError(t('assistant', 'Failed to schedule your task'))
})
},
onSubmit(data) {
scheduleTask(this.task.appId, this.task.identifier, data.taskTypeId, data.input)
.then((response) => {
Expand All @@ -87,16 +98,19 @@ export default {
})
},
onSyncSubmit(data) {
this.loading = true
this.showSyncTaskRunning = true
this.task.input = data.input
this.task.type = data.taskTypeId
runTask(this.task.appId, this.task.identifier, data.taskTypeId, data.input)
.then((response) => {
this.task.output = response.data
this.task.output = response.data?.task?.output ?? ''
this.showSyncTaskRunning = false
console.debug('Assistant SYNC result', response.data)
})
.catch(error => {
console.error('Assistant scheduling error', error)
})
.then(() => {
this.loading = false
})
},
},
Expand All @@ -109,7 +123,7 @@ export default {
justify-content: center;
margin: 24px 16px 16px 16px;
.form {
width: 550px;
width: 600px;
}
}
</style>

0 comments on commit a0acb8f

Please sign in to comment.