1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<script>
import { GlTabs, GlTab } from '@gitlab/ui';
import { isString } from 'lodash';
import { __ } from '~/locale';
import GroupsStore from '../store/groups_store';
import GroupsService from '../service/groups_service';
import {
ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
ACTIVE_TAB_SHARED,
ACTIVE_TAB_ARCHIVED,
} from '../constants';
import GroupsApp from './app.vue';
export default {
components: { GlTabs, GlTab, GroupsApp },
inject: ['endpoints'],
data() {
return {
tabs: [
{
title: this.$options.i18n[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS],
key: ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
renderEmptyState: true,
lazy: false,
service: new GroupsService(this.endpoints[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]),
store: new GroupsStore({ showSchemaMarkup: true }),
},
{
title: this.$options.i18n[ACTIVE_TAB_SHARED],
key: ACTIVE_TAB_SHARED,
renderEmptyState: false,
lazy: true,
service: new GroupsService(this.endpoints[ACTIVE_TAB_SHARED]),
store: new GroupsStore(),
},
{
title: this.$options.i18n[ACTIVE_TAB_ARCHIVED],
key: ACTIVE_TAB_ARCHIVED,
renderEmptyState: false,
lazy: true,
service: new GroupsService(this.endpoints[ACTIVE_TAB_ARCHIVED]),
store: new GroupsStore(),
},
],
activeTabIndex: 0,
};
},
mounted() {
const activeTabIndex = this.tabs.findIndex((tab) => tab.key === this.$route.name);
if (activeTabIndex === -1) {
return;
}
this.activeTabIndex = activeTabIndex;
},
methods: {
handleTabInput(tabIndex) {
if (tabIndex === this.activeTabIndex) {
return;
}
this.activeTabIndex = tabIndex;
const tab = this.tabs[tabIndex];
tab.lazy = false;
// Vue router will convert `/` to `%2F` if you pass a string as a param
// If you pass an array as a param it will concatenate them with a `/`
// This makes sure we are always passing an array for the group param
const groupParam = isString(this.$route.params.group)
? this.$route.params.group.split('/')
: this.$route.params.group;
this.$router.push({ name: tab.key, params: { group: groupParam } });
},
},
i18n: {
[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]: __('Subgroups and projects'),
[ACTIVE_TAB_SHARED]: __('Shared projects'),
[ACTIVE_TAB_ARCHIVED]: __('Archived projects'),
},
};
</script>
<template>
<gl-tabs content-class="gl-pt-0" :value="activeTabIndex" @input="handleTabInput">
<gl-tab
v-for="{ key, title, renderEmptyState, lazy, service, store } in tabs"
:key="key"
:title="title"
:lazy="lazy"
>
<groups-app
:action="key"
:service="service"
:store="store"
:hide-projects="false"
:render-empty-state="renderEmptyState"
/>
</gl-tab>
</gl-tabs>
</template>
|
