debian-mirror-gitlab/app/assets/javascripts/members/components/members_tabs.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

145 lines
3.9 KiB
Vue
Raw Normal View History

2021-06-08 01:23:25 +05:30
<script>
2021-10-27 15:23:28 +05:30
import { GlTabs, GlTab, GlBadge, GlButton } from '@gitlab/ui';
2021-06-08 01:23:25 +05:30
import { mapState } from 'vuex';
import { __ } from '~/locale';
2022-08-13 15:12:31 +05:30
import { queryToObject } from '~/lib/utils/url_utility';
import {
MEMBER_TYPES,
ACTIVE_TAB_QUERY_PARAM_NAME,
TAB_QUERY_PARAM_VALUES,
EE_TABS,
} from 'ee_else_ce/members/constants';
2021-06-08 01:23:25 +05:30
import MembersApp from './app.vue';
const countComputed = (state, namespace) => state[namespace]?.pagination?.totalItems || 0;
2022-08-13 15:12:31 +05:30
export const TABS = [
{
namespace: MEMBER_TYPES.user,
title: __('Members'),
},
{
namespace: MEMBER_TYPES.group,
title: __('Groups'),
attrs: { 'data-qa-selector': 'groups_list_tab' },
queryParamValue: TAB_QUERY_PARAM_VALUES.group,
},
{
namespace: MEMBER_TYPES.invite,
title: __('Invited'),
canManageMembersPermissionsRequired: true,
queryParamValue: TAB_QUERY_PARAM_VALUES.invite,
},
{
namespace: MEMBER_TYPES.accessRequest,
title: __('Access requests'),
canManageMembersPermissionsRequired: true,
queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest,
},
...EE_TABS,
];
2021-06-08 01:23:25 +05:30
export default {
name: 'MembersTabs',
2021-09-30 23:02:18 +05:30
ACTIVE_TAB_QUERY_PARAM_NAME,
2022-08-13 15:12:31 +05:30
TABS,
2021-10-27 15:23:28 +05:30
components: { MembersApp, GlTabs, GlTab, GlBadge, GlButton },
inject: ['canManageMembers', 'canExportMembers', 'exportCsvPath'],
2021-06-08 01:23:25 +05:30
data() {
return {
selectedTabIndex: 0,
};
},
computed: {
2022-08-13 15:12:31 +05:30
...mapState(
Object.values(MEMBER_TYPES).reduce((getters, memberType) => {
return {
...getters,
// eslint-disable-next-line @gitlab/require-i18n-strings
[`${memberType}Count`](state) {
return countComputed(state, memberType);
},
};
}, {}),
),
2021-06-08 01:23:25 +05:30
urlParams() {
2021-10-27 15:23:28 +05:30
return Object.keys(queryToObject(window.location.search, { gatherArrays: true }));
2021-06-08 01:23:25 +05:30
},
activeTabIndexCalculatedFromUrlParams() {
2021-09-30 23:02:18 +05:30
return this.$options.TABS.findIndex(({ namespace }) => {
2021-06-08 01:23:25 +05:30
return this.getTabUrlParams(namespace).some((urlParam) =>
this.urlParams.includes(urlParam),
);
});
},
},
methods: {
getTabUrlParams(namespace) {
const state = this.$store.state[namespace];
const urlParams = [];
if (state?.filteredSearchBar?.searchParam) {
urlParams.push(state.filteredSearchBar.searchParam);
}
2022-07-23 23:45:48 +05:30
if (state?.filteredSearchBar?.tokens) {
urlParams.push(...state.filteredSearchBar.tokens);
}
2021-06-08 01:23:25 +05:30
return urlParams;
},
getTabCount({ namespace }) {
return this[`${namespace}Count`];
},
showTab(tab, index) {
if (tab.namespace === MEMBER_TYPES.user) {
return true;
}
const { canManageMembersPermissionsRequired = false } = tab;
const tabCanBeShown =
this.getTabCount(tab) > 0 || this.activeTabIndexCalculatedFromUrlParams === index;
if (canManageMembersPermissionsRequired) {
return this.canManageMembers && tabCanBeShown;
}
return tabCanBeShown;
},
},
};
</script>
<template>
2021-09-30 23:02:18 +05:30
<gl-tabs
v-model="selectedTabIndex"
sync-active-tab-with-query-params
:query-param-name="$options.ACTIVE_TAB_QUERY_PARAM_NAME"
>
<template v-for="(tab, index) in $options.TABS">
<gl-tab
v-if="showTab(tab, index)"
:key="tab.namespace"
:title-link-attributes="tab.attrs"
:query-param-value="tab.queryParamValue"
>
<template #title>
2021-06-08 01:23:25 +05:30
<span>{{ tab.title }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ getTabCount(tab) }}</gl-badge>
</template>
2021-09-30 23:02:18 +05:30
<members-app :namespace="tab.namespace" :tab-query-param-value="tab.queryParamValue" />
2021-06-08 01:23:25 +05:30
</gl-tab>
</template>
2021-10-27 15:23:28 +05:30
<template #tabs-end>
<gl-button
v-if="canExportMembers"
class="gl-align-self-center gl-ml-auto"
icon="export"
:href="exportCsvPath"
>
{{ __('Export as CSV') }}
</gl-button>
</template>
2021-06-08 01:23:25 +05:30
</gl-tabs>
</template>