From 2bbe1148b75ed5a60cae39ef1eaade9fe370eed9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 19 Apr 2022 15:55:47 +0200
Subject: [PATCH] Web: Job details, avoid error when job data not yet loaded

---
 web/app/src/components/JobDetails.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/app/src/components/JobDetails.vue b/web/app/src/components/JobDetails.vue
index 4b1457d5..a5ce7b7d 100644
--- a/web/app/src/components/JobDetails.vue
+++ b/web/app/src/components/JobDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <h2 class="column-title">Job Details</h2>
-  <div class="job-details">
+  <div v-if="hasJobData" class="job-details">
     <table class="details">
       <tr class="field-id">
         <th>ID</th>
@@ -55,6 +55,9 @@
     </table>
 
   </div>
+  <div v-else class="no-job-selected">
+    <p>No job selected, pick one from the list on the left.</p>
+  </div>
 </template>
 
 <script lang="js">
@@ -91,6 +94,9 @@ export default {
     }
   },
   computed: {
+    hasJobData() {
+      return !!this.jobData && !!this.jobData.id;
+    },
     hasMetadata() {
       return this.jobData && !objectEmpty(this.jobData.metadata);
     },