diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect/components/groups_list.vue')
-rw-r--r-- | app/assets/javascripts/jira_connect/components/groups_list.vue | 32 |
1 files changed, 23 insertions, 9 deletions
diff --git a/app/assets/javascripts/jira_connect/components/groups_list.vue b/app/assets/javascripts/jira_connect/components/groups_list.vue index 275ff820419..d764f778a9d 100644 --- a/app/assets/javascripts/jira_connect/components/groups_list.vue +++ b/app/assets/javascripts/jira_connect/components/groups_list.vue @@ -1,7 +1,7 @@ <script> import { GlLoadingIcon, GlPagination, GlAlert, GlSearchBoxByType } from '@gitlab/ui'; import { fetchGroups } from '~/jira_connect/api'; -import { defaultPerPage } from '~/jira_connect/constants'; +import { DEFAULT_GROUPS_PER_PAGE, MINIMUM_SEARCH_TERM_LENGTH } from '~/jira_connect/constants'; import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; import GroupsListItem from './groups_list_item.vue'; @@ -25,24 +25,33 @@ export default { isLoadingInitial: true, isLoadingMore: false, page: 1, - perPage: defaultPerPage, totalItems: 0, errorMessage: null, + searchTerm: '', }; }, + computed: { + showPagination() { + return this.totalItems > this.$options.DEFAULT_GROUPS_PER_PAGE && this.groups.length > 0; + }, + }, mounted() { return this.loadGroups().finally(() => { this.isLoadingInitial = false; }); }, methods: { - loadGroups({ searchTerm } = {}) { - this.isLoadingMore = true; + loadGroups() { + // fetchGroups returns no results for search terms 0 < {length} < 3. + // The desired UX is to return the unfiltered results for searches {length} < 3. + // Here, we set the search to an empty string if {length} < 3 + const search = this.searchTerm?.length < MINIMUM_SEARCH_TERM_LENGTH ? '' : this.searchTerm; + this.isLoadingMore = true; return fetchGroups(this.groupsPath, { page: this.page, - perPage: this.perPage, - search: searchTerm, + perPage: this.$options.DEFAULT_GROUPS_PER_PAGE, + search, }) .then((response) => { const { page, total } = parseIntPagination(normalizeHeaders(response.headers)); @@ -58,9 +67,14 @@ export default { }); }, onGroupSearch(searchTerm) { - return this.loadGroups({ searchTerm }); + // keep a copy of the search term for pagination + this.searchTerm = searchTerm; + // reset the current page + this.page = 1; + return this.loadGroups(); }, }, + DEFAULT_GROUPS_PER_PAGE, }; </script> @@ -102,10 +116,10 @@ export default { <div class="gl-display-flex gl-justify-content-center gl-mt-5"> <gl-pagination - v-if="totalItems > perPage && groups.length > 0" + v-if="showPagination" v-model="page" class="gl-mb-0" - :per-page="perPage" + :per-page="$options.DEFAULT_GROUPS_PER_PAGE" :total-items="totalItems" @input="loadGroups" /> |