Webapp: UI to update Job priority
This commit is contained in:
parent
10583310c7
commit
4389b60197
54
web/app/src/components/PopoverEditableJobPriority.vue
Normal file
54
web/app/src/components/PopoverEditableJobPriority.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<span @click="togglePopover">{{ priority }}</span>
|
||||
<div v-show="showPopover">
|
||||
<input type="number" v-model="priorityState">
|
||||
<button @click="updateJobPriority">Update</button>
|
||||
<button @click="togglePopover">Cancel</button>
|
||||
<span v-if="errorMessage">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useNotifs } from '@/stores/notifications';
|
||||
import { apiClient } from '@/stores/api-query-count';
|
||||
import { JobsApi, JobPriorityChange } from '@/manager-api';
|
||||
import postcss from 'postcss';
|
||||
|
||||
const props = defineProps({
|
||||
jobId: String,
|
||||
priority: Number
|
||||
});
|
||||
|
||||
// Init notification state
|
||||
const notifs = useNotifs();
|
||||
|
||||
// Init internal state
|
||||
const priorityState = ref(props.priority);
|
||||
const showPopover = ref(false);
|
||||
const errorMessage = ref('');
|
||||
|
||||
// Methods
|
||||
function updateJobPriority() {
|
||||
const jobPriorityChange = new JobPriorityChange(priorityState.value);
|
||||
const jobsAPI = new JobsApi(apiClient);
|
||||
return jobsAPI.setJobPriority(props.jobId, jobPriorityChange)
|
||||
.then(() => {
|
||||
notifs.add(`Updated job priority to ${priorityState.value}`)
|
||||
showPopover.value = false;
|
||||
errorMessage.value = '';
|
||||
})
|
||||
.catch((err) => {
|
||||
errorMessage.value = err.body.message;
|
||||
});
|
||||
}
|
||||
|
||||
function togglePopover() {
|
||||
// 'reset' the priorityState to match the actual priority
|
||||
priorityState.value = props.priority;
|
||||
showPopover.value = !showPopover.value;
|
||||
}
|
||||
</script>
|
@ -42,7 +42,7 @@
|
||||
<dd>{{ jobType ? jobType.label : jobData.type }}</dd>
|
||||
|
||||
<dt class="field-priority" title="Priority">Priority</dt>
|
||||
<dd>{{ jobData.priority }}</dd>
|
||||
<dd><PopoverEditableJobPriority :jobId="jobData.id" :priority="jobData.priority" /></dd>
|
||||
|
||||
<dt class="field-created" title="Created">Created</dt>
|
||||
<dd>{{ datetime.relativeTime(jobData.created) }}</dd>
|
||||
@ -73,6 +73,7 @@ import LastRenderedImage from '@/components/jobs/LastRenderedImage.vue'
|
||||
import Blocklist from './Blocklist.vue'
|
||||
import TabItem from '@/components/TabItem.vue'
|
||||
import TabsWrapper from '@/components/TabsWrapper.vue'
|
||||
import PopoverEditableJobPriority from '@/components/PopoverEditableJobPriority.vue'
|
||||
import { copyElementText } from '@/clipboard';
|
||||
|
||||
export default {
|
||||
@ -87,6 +88,7 @@ export default {
|
||||
TabItem,
|
||||
TabsWrapper,
|
||||
Blocklist,
|
||||
PopoverEditableJobPriority,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
Loading…
Reference in New Issue
Block a user