user/project: show run/task tabelement only when loaded

This commit is contained in:
Simone Gotti 2019-07-10 17:11:03 +02:00
parent 3ff8a1350b
commit 9187efc9c9
2 changed files with 34 additions and 24 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/> <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref" />
<div class="mb-8"> <div class="mb-8">
<span class="text-3xl">{{projectName()}}</span> <span class="text-3xl">{{projectName()}}</span>
@ -9,18 +9,18 @@
<div class="flex justify-between"> <div class="flex justify-between">
<ul class="flex-grow tab"> <ul class="flex-grow tab">
<li class="tab-element-disabled"> <li class="tab-element-disabled">
<i class="mr-1 mdi mdi-run-fast"/> <i class="mr-1 mdi mdi-run-fast" />
<span>Runs</span> <span>Runs</span>
</li> </li>
<li> <li>
<tabarrow/> <tabarrow />
</li> </li>
<li <li
class="tab-element" class="tab-element"
:class="[{ 'tab-element-selected': $route.name.match('project runs') || $route.name.endsWith('project') }]" :class="[{ 'tab-element-selected': $route.name.match('project runs') || $route.name.endsWith('project') }]"
> >
<router-link :to="projectRunsLink(ownertype, ownername, projectref)"> <router-link :to="projectRunsLink(ownertype, ownername, projectref)">
<i class="mr-1 mdi mdi-asterisk"/> <i class="mr-1 mdi mdi-asterisk" />
<span>All</span> <span>All</span>
</router-link> </router-link>
</li> </li>
@ -29,7 +29,7 @@
:class="[{ 'tab-element-selected': $route.name.match('project branches runs') }]" :class="[{ 'tab-element-selected': $route.name.match('project branches runs') }]"
> >
<router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)"> <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> <span>Branches</span>
</router-link> </router-link>
</li> </li>
@ -38,7 +38,7 @@
:class="[{ 'tab-element-selected': $route.name.match('project tags runs') }]" :class="[{ 'tab-element-selected': $route.name.match('project tags runs') }]"
> >
<router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)"> <router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">
<i class="mr-1 mdi mdi-tag"/> <i class="mr-1 mdi mdi-tag" />
<span>Tags</span> <span>Tags</span>
</router-link> </router-link>
</li> </li>
@ -47,33 +47,39 @@
:class="[{ 'tab-element-selected': $route.name.match('project pull requests runs') }]" :class="[{ 'tab-element-selected': $route.name.match('project pull requests runs') }]"
> >
<router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)"> <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> <span>Pull Requests</span>
</router-link> </router-link>
</li> </li>
<li v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"> <li
<tabarrow/> v-if="run && ($route.name.endsWith('project run') || $route.name.endsWith('project run task'))"
>
<tabarrow />
</li> </li>
<li <li
class="tab-element" 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') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('project run') }]"
> >
<router-link :to="projectRunLink(ownertype, ownername, projectref, $route.params.runid)"> <router-link :to="projectRunLink(ownertype, ownername, projectref, $route.params.runid)">
<p v-if="run"> <p>
Run Run
<strong>#{{run.counter}}</strong> <strong>#{{run.counter}}</strong>
</p> </p>
</router-link> </router-link>
</li> </li>
<li v-if="$route.name.endsWith('project run task')"> <li v-if="run && $route.name.endsWith('project run task')">
<tabarrow/> <tabarrow />
</li> </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 <router-link
:to="projectRunTaskLink(ownertype, ownername, projectref, $route.params.runid, $route.params.taskid)" :to="projectRunTaskLink(ownertype, ownername, projectref, $route.params.runid, $route.params.taskid)"
> >
<p v-if="run"> <p>
Task Task
<strong>{{run.tasks[$route.params.taskid].name}}</strong> <strong>{{run.tasks[$route.params.taskid].name}}</strong>
</p> </p>
@ -85,7 +91,7 @@
:class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]"
> >
<router-link :to="projectSettingsLink(ownertype, ownername, projectref)"> <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> <span>Project Settings</span>
</router-link> </router-link>
</li> </li>
@ -101,7 +107,7 @@
<button <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" 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> <i class="mdi mdi-chevron-down"></i>
</button> </button>
</div> </div>
@ -115,7 +121,7 @@
class="block px-4 py-2 hover:bg-blue-500 hover:text-white" class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
:to="projectSettingsLink(ownertype, ownername, projectref)" :to="projectSettingsLink(ownertype, ownername, projectref)"
> >
<i class="mr-1 mdi mdi-settings"/> <i class="mr-1 mdi mdi-settings" />
<span>Project Settings</span> <span>Project Settings</span>
</router-link> </router-link>
</li> </li>
@ -168,6 +174,7 @@ export default {
}, },
watch: { watch: {
$route: async function(route) { $route: async function(route) {
this.run = null;
if (route.params.runid) { if (route.params.runid) {
let { data, error } = await fetchRun(route.params.runid); let { data, error } = await fetchRun(route.params.runid);
if (error) { if (error) {

View File

@ -39,33 +39,35 @@
<span>Direct Runs</span> <span>Direct Runs</span>
</router-link> </router-link>
</li> </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 /> <tabarrow />
</li> </li>
<li <li
class="tab-element" 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' }]" :class="[{ 'tab-element-selected': $route.name === 'user direct run' }]"
> >
<router-link :to="userDirectRunLink(username, $route.params.runid)"> <router-link :to="userDirectRunLink(username, $route.params.runid)">
<span v-if="run"> <span>
Run Run
<strong>#{{run.counter}}</strong> <strong>#{{run.counter}}</strong>
</span> </span>
</router-link> </router-link>
</li> </li>
<li v-if="$route.name === 'user direct run task'"> <li v-if="run && $route.name === 'user direct run task'">
<tabarrow /> <tabarrow />
</li> </li>
<li <li
class="tab-element" 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' }]" :class="[{ 'tab-element-selected': $route.name === 'user direct run task' }]"
> >
<router-link <router-link
:to="userDirectRunTaskLink(username, $route.params.runid, $route.params.taskid)" :to="userDirectRunTaskLink(username, $route.params.runid, $route.params.taskid)"
> >
<span v-if="run"> <span>
Task Task
<strong>{{run.tasks[$route.params.taskid].name}}</strong> <strong>{{run.tasks[$route.params.taskid].name}}</strong>
</span> </span>
@ -168,6 +170,7 @@ export default {
}, },
watch: { watch: {
$route: async function(route) { $route: async function(route) {
this.run = null;
if (route.params.runid) { if (route.params.runid) {
let { data, error } = await fetchRun(route.params.runid); let { data, error } = await fetchRun(route.params.runid);
if (error) { if (error) {