Skip to content
Snippets Groups Projects

Change admin users search filter

7 files
+ 186
75
Compare changes
  • Side-by-side
  • Inline
Files
7
<script>
import { GlFilteredSearch, GlFilteredSearchToken } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
export const ADMIN_FILTER_TYPES = {
Admins: 'admins',
Enabled2FA: 'two_factor_enabled',
Disabled2FA: 'two_factor_disabled',
External: 'external',
Blocked: 'blocked',
Banned: 'banned',
BlockedPendingApproval: 'blocked_pending_approval',
Deactivated: 'deactivated',
Wop: 'wop',
Trusted: 'trusted',
};
export default {
name: 'AdminUsersFilterApp',
components: {
GlFilteredSearch,
},
data() {
return {
filterValue: [],
availableTokens: [
{
title: s__('AdminUsers|Access level'),
type: 'admins',
token: GlFilteredSearchToken,
operators: OPERATORS_IS,
unique: true,
options: [{ value: ADMIN_FILTER_TYPES.Admins, title: s__('AdminUsers|Administrator') }],
},
{
title: s__('AdminUsers|Two-factor Authentication'),
type: '2fa',
token: GlFilteredSearchToken,
operators: OPERATORS_IS,
unique: true,
options: [
{ value: ADMIN_FILTER_TYPES.Enabled2FA, title: __('On') },
{ value: ADMIN_FILTER_TYPES.Disabled2FA, title: __('Off') },
],
},
{
title: __('Status'),
type: 'status',
token: GlFilteredSearchToken,
operators: OPERATORS_IS,
unique: true,
options: [
{ value: ADMIN_FILTER_TYPES.External, title: s__('AdminUsers|External') },
{ value: ADMIN_FILTER_TYPES.Blocked, title: s__('AdminUsers|Blocked') },
{ value: ADMIN_FILTER_TYPES.Banned, title: s__('AdminUsers|Banned') },
{
value: ADMIN_FILTER_TYPES.BlockedPendingApproval,
title: s__('AdminUsers|Pending approval'),
},
{ value: ADMIN_FILTER_TYPES.Deactivated, title: s__('AdminUsers|Deactivated') },
{ value: ADMIN_FILTER_TYPES.Wop, title: s__('AdminUsers|Without projects') },
{ value: ADMIN_FILTER_TYPES.Trusted, title: s__('AdminUsers|Trusted') },
],
},
],
};
},
computed: {
/**
* Currently BE support only one filter at the time
* https://gitlab.com/gitlab-org/gitlab/-/issues/254377
*/
filteredAvailableTokens() {
const anySelectedFilter = this.filterValue.find((selectedFilter) => {
return Object.values(ADMIN_FILTER_TYPES).includes(selectedFilter.value?.data);
});
if (anySelectedFilter) {
return this.availableTokens.filter((token) => {
return token.options.find((option) => option.value === anySelectedFilter.value?.data);
});
}
return this.availableTokens;
},
isAdminTab() {
return this.$route.query.filter === ADMIN_FILTER_TYPES.Admins;
},
},
created() {
if (this.$route.query.filter) {
const filter = this.availableTokens.find((token) => {
return token.options.find((option) => option.value === this.$route.query.filter);
});
if (filter) {
this.filterValue.push({
type: filter.type,
value: {
data: this.$route.query.filter,
operator: filter.operators[0].value,
},
});
}
}
if (this.$route.query.search_query) {
this.filterValue.push(this.$route.query.search_query);
}
},
methods: {
handleSearch(filters) {
const newUrl = new URL(window.location);
newUrl.searchParams.delete('page');
newUrl.searchParams.delete('filter');
newUrl.searchParams.delete('search_query');
filters?.forEach((filter) => {
if (typeof filter === 'string') {
newUrl.searchParams.set('search_query', filter);
} else {
newUrl.searchParams.set('filter', filter.value.data);
}
});
window.location = newUrl;
},
},
};
</script>
<template>
<gl-filtered-search
v-model="filterValue"
class="gl-mb-4"
:placeholder="s__('AdminUsers|Search by name, email, or username')"
:available-tokens="filteredAvailableTokens"
@submit="handleSearch"
/>
</template>
Loading