Webapp: UI to update Job priority

web/app/src/components/PopoverEditableJobPriority.vue

@@ -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>

web/app/src/components/jobs/JobDetails.vue

@@ -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 {