Web: load job type info from backend
Load job type info from the backend, whenever the job type changes (i.e. when a job is selected that has a different type than the previous one).
This commit is contained in:
parent
6f9a422511
commit
0d94d7c20a
@ -38,7 +38,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3 class="sub-title">Meta-data</h3>
|
||||
<h3 class="sub-title" v-if="hasMetadata">Meta-data</h3>
|
||||
<table class="metadata">
|
||||
<tr v-for="value, key in jobData.metadata" :class="`field-${key}`">
|
||||
<th>{{ key }}</th>
|
||||
@ -46,9 +46,9 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3 class="sub-title">Settings</h3>
|
||||
<h3 class="sub-title" v-if="hasSettings">Settings</h3>
|
||||
<table class="settings">
|
||||
<tr v-for="value, key in jobData.settings" :class="`field-${key}`">
|
||||
<tr v-for="value, key in settings" :class="`field-${key}`">
|
||||
<th>{{ key }}</th>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
@ -59,21 +59,61 @@
|
||||
|
||||
<script lang="js">
|
||||
import * as datetime from "../datetime";
|
||||
import * as API from "../manager-api";
|
||||
|
||||
function objectEmpty(o) {
|
||||
if (!o) return true;
|
||||
return Object.entries(o).length == 0;
|
||||
}
|
||||
|
||||
export default {
|
||||
props: [
|
||||
"apiClient", // Flamenco Manager API client.
|
||||
"jobData", // Job data to show.
|
||||
],
|
||||
data: () => {
|
||||
data() {
|
||||
return {
|
||||
datetime: datetime, // So that the template can access it.
|
||||
settings: null, // Object with filtered job settings, or null if there is no job.
|
||||
jobsApi: new API.JobsApi(this.apiClient),
|
||||
jobType: null, // API.AvailableJobType object for the current job type.
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// Allow testing from the JS console:
|
||||
window.jobDetailsVue = this;
|
||||
},
|
||||
computed: {
|
||||
hasMetadata() {
|
||||
return this.jobData && !objectEmpty(this.jobData.metadata);
|
||||
},
|
||||
hasSettings() {
|
||||
return this.jobData && !objectEmpty(this.settings);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
jobData(newJobData) {
|
||||
if (objectEmpty(newJobData)) {
|
||||
this.settings = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.settings = newJobData.settings;
|
||||
|
||||
// Only fetch the job type if it's different from what's already loaded.
|
||||
if (objectEmpty(this.jobType) || this.jobType.name != newJobData.type) {
|
||||
this.jobsApi.getJobType(newJobData.type)
|
||||
.then(this.onJobTypeLoaded)
|
||||
.catch((error) => { console.warn(error) });
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onJobTypeLoaded(jobType) {
|
||||
console.log("Job type loaded: ", jobType);
|
||||
this.jobType = jobType;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user