flamenco/web/app/src/components/TaskActionsBar.vue
Sybren A. Stüvel cc10d3e4bb Web: also let Vue Router track the active task
This basically does the same as 63ac7287321a101c3f601eeb151be73154ef7720
but then for tasks.
2022-05-11 15:02:02 +02:00

51 lines
1.4 KiB
Vue

<template>
<section class="btn-bar tasks">
<button class="btn cancel" :disabled="!tasks.canCancel" v-on:click="onButtonCancel">Cancel Task</button>
<button class="btn requeue" :disabled="!tasks.canRequeue" v-on:click="onButtonRequeue">Requeue</button>
</section>
</template>
<script>
import { useTasks } from '@/stores/tasks';
import { useNotifs } from '@/stores/notifications';
export default {
name: "TaskActionsBar",
data: () => ({
tasks: useTasks(),
notifs: useNotifs(),
}),
computed: {
},
methods: {
onButtonCancel() {
return this._handleTaskActionPromise(
this.tasks.cancelTasks(), "cancelled");
},
onButtonRequeue() {
return this._handleTaskActionPromise(
this.tasks.requeueTasks(), "requeued");
},
_handleTaskActionPromise(promise, description) {
// const numTasks = this.tasks.numSelected;
const numTasks = 1;
return promise
.then(() => {
let message;
if (numTasks == 1) {
message = `Task ${description}`;
} else {
message = `${numTasks} tasks ${description}`;
}
this.notifs.add(message);
})
.catch((error) => {
const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
this.notifs.add(`Error: ${errorMsg}`);
})
},
}
}
</script>