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 94 95 96 97 98 99 100 | 2x 9x 9x 9x 9x 9x 9x 9x 9x 10x 1x | <script>
import { GlSorting } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapActions, mapState } from 'vuex';
import { omit } from 'lodash';
import { __ } from '~/locale';
import GroupDependenciesFilteredSearch from 'ee/dependencies/components/filtered_search/group_dependencies_filtered_search.vue';
import { NAMESPACE_PROJECT } from '../constants';
import { DEPENDENCY_LIST_TYPES } from '../store/constants';
import {
SORT_FIELDS_PROJECT,
SORT_FIELDS_GROUP,
SORT_ASCENDING,
SORT_FIELD_LICENSE,
} from '../store/modules/list/constants';
export default {
i18n: {
sortDirectionLabel: __('Sort direction'),
},
name: 'DependenciesActions',
components: {
GlSorting,
GroupDependenciesFilteredSearch,
},
inject: ['namespaceType', 'belowGroupLimit'],
props: {
namespace: {
type: String,
required: true,
validator: (value) =>
Object.values(DEPENDENCY_LIST_TYPES).some(({ namespace }) => value === namespace),
},
},
computed: {
isSortAscending() {
return this.sortOrder === SORT_ASCENDING;
},
...mapState({
sortField(state) {
return state[this.namespace].sortField;
},
sortOrder(state) {
return state[this.namespace].sortOrder;
},
}),
sortFieldName() {
return this.sortFields[this.sortField];
},
sortFields() {
const groupFields = this.belowGroupLimit
? SORT_FIELDS_GROUP
: omit(SORT_FIELDS_GROUP, SORT_FIELD_LICENSE);
return this.isProjectNamespace ? SORT_FIELDS_PROJECT : groupFields;
},
sortOptions() {
return Object.keys(this.sortFields).map((key) => ({
text: this.sortFields[key],
value: key,
}));
},
isProjectNamespace() {
return this.namespaceType === NAMESPACE_PROJECT;
},
},
methods: {
...mapActions({
setSortField(dispatch, field) {
dispatch(`${this.namespace}/setSortField`, field);
},
toggleSortOrder(dispatch) {
dispatch(`${this.namespace}/toggleSortOrder`);
},
}),
},
};
</script>
<template>
<div
class="gl-display-flex gl-p-5 gl-bg-gray-10 gl-border-t-1 gl-border-t-solid gl-border-gray-100 gl-align-items-flex-start"
>
<group-dependencies-filtered-search
v-if="!isProjectNamespace"
class="gl-mr-3 gl-flex-grow-1 gl-min-w-0"
/>
<gl-sorting
:text="sortFieldName"
:is-ascending="isSortAscending"
:sort-direction-tool-tip="$options.i18n.sortDirectionLabel"
:sort-options="sortOptions"
:sort-by="sortField"
class="gl-ml-auto"
@sortDirectionChange="toggleSortOrder"
@sortByChange="setSortField"
/>
</div>
</template>
|