From 9187efc9c91ab2f7e72e5ebce249044f0bb08550 Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Wed, 10 Jul 2019 17:11:03 +0200
Subject: [PATCH] user/project: show run/task tabelement only when loaded

---
 src/views/Project.vue | 43 +++++++++++++++++++++++++------------------
 src/views/User.vue    | 15 +++++++++------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/views/Project.vue b/src/views/Project.vue
index 4dd7239..4eb24ac 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
+    <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref" />
 
     <div class="mb-8">
       <span class="text-3xl">{{projectName()}}</span>
@@ -9,18 +9,18 @@
     <div class="flex justify-between">
       <ul class="flex-grow tab">
         <li class="tab-element-disabled">
-          <i class="mr-1 mdi mdi-run-fast"/>
+          <i class="mr-1 mdi mdi-run-fast" />
           <span>Runs</span>
         </li>
         <li>
-          <tabarrow/>
+          <tabarrow />
         </li>
         <li
           class="tab-element"
           :class="[{ 'tab-element-selected': $route.name.match('project runs') || $route.name.endsWith('project') }]"
         >
           <router-link :to="projectRunsLink(ownertype, ownername, projectref)">
-            <i class="mr-1 mdi mdi-asterisk"/>
+            <i class="mr-1 mdi mdi-asterisk" />
             <span>All</span>
           </router-link>
         </li>
@@ -29,7 +29,7 @@
           :class="[{ 'tab-element-selected': $route.name.match('project branches runs') }]"
         >
           <router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)">
-            <i class="mr-1 mdi mdi-source-branch"/>
+            <i class="mr-1 mdi mdi-source-branch" />
             <span>Branches</span>
           </router-link>
         </li>
@@ -38,7 +38,7 @@
           :class="[{ 'tab-element-selected': $route.name.match('project tags runs') }]"
         >
           <router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">
-            <i class="mr-1 mdi mdi-tag"/>
+            <i class="mr-1 mdi mdi-tag" />
             <span>Tags</span>
           </router-link>
         </li>
@@ -47,33 +47,39 @@
           :class="[{ 'tab-element-selected': $route.name.match('project pull requests runs') }]"
         >
           <router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)">
-            <i class="mr-1 mdi mdi-source-pull"/>
+            <i class="mr-1 mdi mdi-source-pull" />
             <span>Pull Requests</span>
           </router-link>
         </li>
-        <li v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')">
-          <tabarrow/>
+        <li
+          v-if="run && ($route.name.endsWith('project run') || $route.name.endsWith('project run task'))"
+        >
+          <tabarrow />
         </li>
         <li
           class="tab-element"
-          v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
+          v-if="run && ($route.name.endsWith('project run') || $route.name.endsWith('project run task'))"
           :class="[{ 'tab-element-selected': $route.name.endsWith('project run') }]"
         >
           <router-link :to="projectRunLink(ownertype, ownername, projectref, $route.params.runid)">
-            <p v-if="run">
+            <p>
               Run
               <strong>#{{run.counter}}</strong>
             </p>
           </router-link>
         </li>
-        <li v-if="$route.name.endsWith('project run task')">
-          <tabarrow/>
+        <li v-if="run && $route.name.endsWith('project run task')">
+          <tabarrow />
         </li>
-        <li class="tab-element" v-if="$route.name.endsWith('project run task')">
+        <li
+          class="tab-element"
+          v-if="run && $route.name.endsWith('project run task')"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('project run task') }]"
+        >
           <router-link
             :to="projectRunTaskLink(ownertype, ownername, projectref, $route.params.runid, $route.params.taskid)"
           >
-            <p v-if="run">
+            <p>
               Task
               <strong>{{run.tasks[$route.params.taskid].name}}</strong>
             </p>
@@ -85,7 +91,7 @@
           :class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]"
         >
           <router-link :to="projectSettingsLink(ownertype, ownername, projectref)">
-            <i class="mr-1 mdi mdi-settings"/>
+            <i class="mr-1 mdi mdi-settings" />
             <span>Project Settings</span>
           </router-link>
         </li>
@@ -101,7 +107,7 @@
               <button
                 class="relative flex items-center focus:outline-none bg-transparent hover:bg-gray-300 text-dark font-semibold hover:text-dark py-1 px-4 border border-gray-500 rounded"
               >
-                <i class="mr-4 mdi mdi-settings"/>
+                <i class="mr-4 mdi mdi-settings" />
                 <i class="mdi mdi-chevron-down"></i>
               </button>
             </div>
@@ -115,7 +121,7 @@
                     class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
                     :to="projectSettingsLink(ownertype, ownername, projectref)"
                   >
-                    <i class="mr-1 mdi mdi-settings"/>
+                    <i class="mr-1 mdi mdi-settings" />
                     <span>Project Settings</span>
                   </router-link>
                 </li>
@@ -168,6 +174,7 @@ export default {
   },
   watch: {
     $route: async function(route) {
+      this.run = null;
       if (route.params.runid) {
         let { data, error } = await fetchRun(route.params.runid);
         if (error) {
diff --git a/src/views/User.vue b/src/views/User.vue
index f3f1824..69b1bd8 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -39,33 +39,35 @@
             <span>Direct Runs</span>
           </router-link>
         </li>
-        <li v-if="$route.name === 'user direct run' || $route.name == 'user direct run task'">
+        <li
+          v-if="run && ($route.name === 'user direct run' || $route.name == 'user direct run task')"
+        >
           <tabarrow />
         </li>
         <li
           class="tab-element"
-          v-if="$route.name === 'user direct run' || $route.name == 'user direct run task'"
+          v-if="run && ($route.name === 'user direct run' || $route.name == 'user direct run task')"
           :class="[{ 'tab-element-selected': $route.name === 'user direct run' }]"
         >
           <router-link :to="userDirectRunLink(username, $route.params.runid)">
-            <span v-if="run">
+            <span>
               Run
               <strong>#{{run.counter}}</strong>
             </span>
           </router-link>
         </li>
-        <li v-if="$route.name === 'user direct run task'">
+        <li v-if="run && $route.name === 'user direct run task'">
           <tabarrow />
         </li>
         <li
           class="tab-element"
-          v-if="$route.name == 'user direct run task'"
+          v-if="run && $route.name == 'user direct run task'"
           :class="[{ 'tab-element-selected': $route.name === 'user direct run task' }]"
         >
           <router-link
             :to="userDirectRunTaskLink(username, $route.params.runid, $route.params.taskid)"
           >
-            <span v-if="run">
+            <span>
               Task
               <strong>{{run.tasks[$route.params.taskid].name}}</strong>
             </span>
@@ -168,6 +170,7 @@ export default {
   },
   watch: {
     $route: async function(route) {
+      this.run = null;
       if (route.params.runid) {
         let { data, error } = await fetchRun(route.params.runid);
         if (error) {