Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | <script>
import { GlSorting } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapState } from 'vuex';
import { visitUrl } from '~/lib/utils/url_utility';
import { FIELDS } from '~/members/constants';
import { parseSortParam, buildSortHref } from '~/members/utils';
import { SORT_DIRECTION_UI } from '~/search/sort/constants';
export default {
name: 'SortDropdown',
components: { GlSorting },
inject: ['namespace'],
computed: {
...mapState({
tableSortableFields(state) {
return state[this.namespace].tableSortableFields;
},
filteredSearchBar(state) {
return state[this.namespace].filteredSearchBar;
},
}),
sort() {
return parseSortParam(this.tableSortableFields);
},
activeOption() {
return FIELDS.find((field) => field.key === this.sort.sortByKey);
},
activeOptionLabel() {
return this.activeOption?.label;
},
activeOptionKey() {
return this.activeOption?.key;
},
isAscending() {
return !this.sort.sortDesc;
},
sortDirectionData() {
return this.isAscending ? SORT_DIRECTION_UI.asc : SORT_DIRECTION_UI.desc;
},
filteredOptions() {
return FIELDS.filter(
(field) => this.tableSortableFields.includes(field.key) && field.sort,
).map((field) => ({
text: field.label,
value: field.key,
}));
},
},
methods: {
isActive(key) {
return this.activeOption.key === key;
},
handleSortDirectionChange() {
visitUrl(
buildSortHref({
sortBy: this.activeOption.key,
sortDesc: !this.sort.sortDesc,
filteredSearchBarTokens: this.filteredSearchBar.tokens,
filteredSearchBarSearchParam: this.filteredSearchBar.searchParam,
}),
);
},
handleSortingItemClick(value) {
visitUrl(
buildSortHref({
sortBy: value,
sortDesc: false,
filteredSearchBarTokens: this.filteredSearchBar.tokens,
filteredSearchBarSearchParam: this.filteredSearchBar.searchParam,
}),
);
},
},
};
</script>
<template>
<gl-sorting
class="gl-display-flex"
dropdown-class="gl-w-full"
block
data-testid="members-sort-dropdown"
:text="activeOptionLabel"
:is-ascending="isAscending"
:sort-direction-tool-tip="sortDirectionData.tooltip"
:sort-options="filteredOptions"
:sort-by="activeOptionKey"
@sortByChange="handleSortingItemClick"
@sortDirectionChange="handleSortDirectionChange"
/>
</template>
|