From 0d94d7c20a91672509971154a60f5ef0b191356f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Fri, 15 Apr 2022 17:21:20 +0200
Subject: [PATCH] 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).
---
 web/app/src/components/JobDetails.vue | 48 ++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/web/app/src/components/JobDetails.vue b/web/app/src/components/JobDetails.vue
index 85490952..16eb013f 100644
--- a/web/app/src/components/JobDetails.vue
+++ b/web/app/src/components/JobDetails.vue
@@ -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>