diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/navigation_tabs.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/navigation_tabs.vue | 87 |
1 files changed, 24 insertions, 63 deletions
diff --git a/app/assets/javascripts/pipelines/components/navigation_tabs.vue b/app/assets/javascripts/pipelines/components/navigation_tabs.vue index 73f7e3a0cad..07befd23500 100644 --- a/app/assets/javascripts/pipelines/components/navigation_tabs.vue +++ b/app/assets/javascripts/pipelines/components/navigation_tabs.vue @@ -2,16 +2,8 @@ export default { name: 'PipelineNavigationTabs', props: { - scope: { - type: String, - required: true, - }, - count: { - type: Object, - required: true, - }, - paths: { - type: Object, + tabs: { + type: Array, required: true, }, }, @@ -23,68 +15,37 @@ // 0 is valid in a badge, but evaluates to false, we need to check for undefined return count !== undefined; }, + + onTabClick(tab) { + this.$emit('onChangeTab', tab.scope); + }, }, }; </script> <template> <ul class="nav-links scrolling-tabs"> <li - class="js-pipelines-tab-all" - :class="{ active: scope === 'all'}"> - <a :href="paths.allPath"> - All - <span - v-if="shouldRenderBadge(count.all)" - class="badge js-totalbuilds-count"> - {{count.all}} - </span> - </a> - </li> - <li - class="js-pipelines-tab-pending" - :class="{ active: scope === 'pending'}"> - <a :href="paths.pendingPath"> - Pending - <span - v-if="shouldRenderBadge(count.pending)" - class="badge"> - {{count.pending}} - </span> - </a> - </li> - <li - class="js-pipelines-tab-running" - :class="{ active: scope === 'running'}"> - <a :href="paths.runningPath"> - Running - <span - v-if="shouldRenderBadge(count.running)" - class="badge"> - {{count.running}} - </span> - </a> - </li> - <li - class="js-pipelines-tab-finished" - :class="{ active: scope === 'finished'}"> - <a :href="paths.finishedPath"> - Finished + v-for="(tab, i) in tabs" + :key="i" + :class="{ + active: tab.isActive, + }" + > + <a + role="button" + @click="onTabClick(tab)" + :class="`js-pipelines-tab-${tab.scope}`" + > + {{ tab.name }} + <span - v-if="shouldRenderBadge(count.finished)" - class="badge"> - {{count.finished}} + v-if="shouldRenderBadge(tab.count)" + class="badge" + > + {{tab.count}} </span> + </a> </li> - <li - class="js-pipelines-tab-branches" - :class="{ active: scope === 'branches'}"> - <a :href="paths.branchesPath">Branches</a> - </li> - <li - class="js-pipelines-tab-tags" - :class="{ active: scope === 'tags'}"> - <a :href="paths.tagsPath">Tags</a> - </li> </ul> </template> |