138 lines
3.8 KiB
Vue
138 lines
3.8 KiB
Vue
<template>
|
|
<div class="btn-bar jobs">
|
|
<div class="btn-bar-popover" v-if="deleteInfo != null">
|
|
<p v-if="deleteInfo.shaman_checkout">Delete job, including Shaman checkout?</p>
|
|
<p v-else>Delete job? The job files will be kept.</p>
|
|
<div class="inner-btn-bar">
|
|
<button class="btn cancel" v-on:click="_hideDeleteJobPopup">Cancel</button>
|
|
<button class="btn delete dangerous" v-on:click="onButtonDeleteConfirmed">Delete</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn cancel" :disabled="!jobs.canCancel" v-on:click="onButtonCancel">Cancel Job</button>
|
|
<button class="btn requeue" :disabled="!jobs.canRequeue" v-on:click="onButtonRequeue">Requeue</button>
|
|
<button class="action delete dangerous" title="Mark this job for deletion, after asking for a confirmation."
|
|
:disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete...</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useJobs } from '@/stores/jobs';
|
|
import { useNotifs } from '@/stores/notifications';
|
|
import { getAPIClient } from "@/api-client";
|
|
import { JobsApi } from '@/manager-api';
|
|
import { JobDeletionInfo } from '@/manager-api';
|
|
|
|
|
|
export default {
|
|
name: "JobActionsBar",
|
|
props: [
|
|
"activeJobID",
|
|
],
|
|
data: () => ({
|
|
jobs: useJobs(),
|
|
notifs: useNotifs(),
|
|
jobsAPI: new JobsApi(getAPIClient()),
|
|
|
|
deleteInfo: null,
|
|
}),
|
|
computed: {
|
|
},
|
|
watch: {
|
|
activeJobID() {
|
|
this._hideDeleteJobPopup();
|
|
},
|
|
},
|
|
methods: {
|
|
onButtonDelete() {
|
|
this._startJobDeletionFlow();
|
|
},
|
|
onButtonDeleteConfirmed() {
|
|
return this.jobs.deleteJobs()
|
|
.then(() => {
|
|
this.notifs.add("job marked for deletion");
|
|
})
|
|
.catch((error) => {
|
|
const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
|
|
this.notifs.add(`Error: ${errorMsg}`);
|
|
})
|
|
.finally(this._hideDeleteJobPopup)
|
|
;
|
|
},
|
|
onButtonCancel() {
|
|
return this._handleJobActionPromise(
|
|
this.jobs.cancelJobs(), "marked for cancellation");
|
|
},
|
|
onButtonRequeue() {
|
|
return this._handleJobActionPromise(
|
|
this.jobs.requeueJobs(), "requeueing");
|
|
},
|
|
|
|
_handleJobActionPromise(promise, description) {
|
|
return promise
|
|
.then(() => {
|
|
// There used to be a call to `this.notifs.add(message)` here, but now
|
|
// that job status changes are logged in the notifications anyway,
|
|
// it's no longer necessary.
|
|
// This function is still kept, in case we want to bring back the
|
|
// notifications when multiple jobs can be selected. Then a summary
|
|
// ("N jobs requeued") could be logged here.btn-bar-popover
|
|
})
|
|
},
|
|
|
|
_startJobDeletionFlow() {
|
|
if (!this.activeJobID) {
|
|
this.notifs.add("No active job, unable to delete anything");
|
|
return;
|
|
}
|
|
|
|
this.jobsAPI.deleteJobWhatWouldItDo(this.activeJobID)
|
|
.then(this._showDeleteJobPopup)
|
|
.catch((error) => {
|
|
const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
|
|
this.notifs.add(`Error: ${errorMsg}`);
|
|
})
|
|
;
|
|
},
|
|
|
|
/**
|
|
* @param { JobDeletionInfo } deleteInfo
|
|
*/
|
|
_showDeleteJobPopup(deleteInfo) {
|
|
this.deleteInfo = deleteInfo;
|
|
},
|
|
|
|
_hideDeleteJobPopup() {
|
|
this.deleteInfo = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn-bar-popover {
|
|
align-items: center;
|
|
background-color: var(--color-background-popover);
|
|
border-radius: var(--border-radius);
|
|
border: var(--border-color) var(--border-width);
|
|
color: var(--color-text);
|
|
display: flex;
|
|
height: 3.5em;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 1rem 1rem;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.btn-bar-popover p {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.btn-bar-popover .inner-btn-bar {
|
|
flex-grow: 0;
|
|
}
|
|
</style>
|