Cleanup: move JS code close to HTML

Move the JavaScript code in `PopoverEditableJobPriority.vue` up so it sits
next to the HTML.
This commit is contained in:
Sybren A. Stüvel 2022-10-18 10:50:26 +02:00
parent 1e28ba4fee
commit ce23810705

View File

@ -22,6 +22,48 @@
</div> </div>
</template> </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';
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>
<style scoped> <style scoped>
.popover-toggle { .popover-toggle {
cursor: pointer; cursor: pointer;
@ -91,45 +133,3 @@
color: var(--color-danger); color: var(--color-danger);
} }
</style> </style>
<script setup>
import { ref } from 'vue';
import { useNotifs } from '@/stores/notifications';
import { apiClient } from '@/stores/api-query-count';
import { JobsApi, JobPriorityChange } from '@/manager-api';
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>