diff options
Diffstat (limited to 'app/assets/javascripts/search/topbar/components/group_filter.vue')
-rw-r--r-- | app/assets/javascripts/search/topbar/components/group_filter.vue | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/topbar/components/group_filter.vue b/app/assets/javascripts/search/topbar/components/group_filter.vue new file mode 100644 index 00000000000..fce9ec17d23 --- /dev/null +++ b/app/assets/javascripts/search/topbar/components/group_filter.vue @@ -0,0 +1,49 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { isEmpty } from 'lodash'; +import { visitUrl, setUrlParams } from '~/lib/utils/url_utility'; +import SearchableDropdown from './searchable_dropdown.vue'; +import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '../constants'; + +export default { + name: 'GroupFilter', + components: { + SearchableDropdown, + }, + props: { + initialData: { + type: Object, + required: false, + default: () => ({}), + }, + }, + computed: { + ...mapState(['groups', 'fetchingGroups']), + selectedGroup() { + return isEmpty(this.initialData) ? ANY_OPTION : this.initialData; + }, + }, + methods: { + ...mapActions(['fetchGroups']), + handleGroupChange(group) { + visitUrl( + setUrlParams({ [GROUP_DATA.queryParam]: group.id, [PROJECT_DATA.queryParam]: null }), + ); + }, + }, + GROUP_DATA, +}; +</script> + +<template> + <searchable-dropdown + :header-text="$options.GROUP_DATA.headerText" + :selected-display-value="$options.GROUP_DATA.selectedDisplayValue" + :items-display-value="$options.GROUP_DATA.itemsDisplayValue" + :loading="fetchingGroups" + :selected-item="selectedGroup" + :items="groups" + @search="fetchGroups" + @change="handleGroupChange" + /> +</template> |