diff options
Diffstat (limited to 'app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue')
-rw-r--r-- | app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue new file mode 100644 index 00000000000..f869ecd392f --- /dev/null +++ b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue @@ -0,0 +1,26 @@ +<script> +import { mapState } from 'vuex'; +import MembersFilteredSearchBar from './members_filtered_search_bar.vue'; +import SortDropdown from './sort_dropdown.vue'; + +export default { + name: 'FilterSortContainer', + components: { MembersFilteredSearchBar, SortDropdown }, + computed: { + ...mapState(['filteredSearchBar', 'tableSortableFields']), + showContainer() { + return this.filteredSearchBar.show || this.showSortDropdown; + }, + showSortDropdown() { + return this.tableSortableFields.length; + }, + }, +}; +</script> + +<template> + <div v-if="showContainer" class="gl-bg-gray-10 gl-p-3 gl-display-md-flex"> + <members-filtered-search-bar v-if="filteredSearchBar.show" class="gl-p-3 gl-flex-grow-1" /> + <sort-dropdown v-if="showSortDropdown" class="gl-p-3 gl-flex-shrink-0" /> + </div> +</template> |