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:
parent
1e28ba4fee
commit
ce23810705
@ -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>
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user