diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/shared/components')
3 files changed, 89 insertions, 10 deletions
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue b/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue new file mode 100644 index 00000000000..01c2c751cac --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue @@ -0,0 +1,56 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import UrlSync from '~/vue_shared/components/url_sync.vue'; + +export default { + name: 'PersistedPagination', + components: { + GlKeysetPagination, + UrlSync, + }, + inheritAttrs: false, + props: { + pagination: { + type: Object, + default: () => ({}), + required: false, + }, + }, + computed: { + attrs() { + return { + ...this.pagination, + ...this.$attrs, + }; + }, + }, + methods: { + onPrev(updateQuery) { + updateQuery({ + before: this.pagination?.startCursor, + after: null, + }); + this.$emit('prev'); + }, + onNext(updateQuery) { + updateQuery({ + after: this.pagination?.endCursor, + before: null, + }); + this.$emit('next'); + }, + }, +}; +</script> + +<template> + <url-sync> + <template #default="{ updateQuery }"> + <gl-keyset-pagination + v-bind="attrs" + @prev="onPrev(updateQuery)" + @next="onNext(updateQuery)" + /> + </template> + </url-sync> +</template> diff --git a/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue index 363304c20ce..95343a3a09b 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue @@ -1,7 +1,11 @@ <script> import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import UrlSync from '~/vue_shared/components/url_sync.vue'; -import { extractFilterAndSorting, getQueryParams } from '~/packages_and_registries/shared/utils'; +import { + extractFilterAndSorting, + extractPageInfo, + getQueryParams, +} from '~/packages_and_registries/shared/utils'; export default { components: { RegistrySearch, UrlSync }, @@ -31,6 +35,7 @@ export default { orderBy: this.defaultOrder, sort: this.defaultSort, }, + pageInfo: {}, mountRegistrySearch: false, }; }, @@ -40,27 +45,49 @@ export default { return `${cleanOrderBy}_${this.sorting?.sort}`.toUpperCase(); }, }, + watch: { + $route(newValue, oldValue) { + if (newValue.fullPath !== oldValue.fullPath) { + this.updateDataFromUrl(); + this.emitUpdate(); + } + }, + }, mounted() { - const queryParams = getQueryParams(window.document.location.search); - const { sorting, filters } = extractFilterAndSorting(queryParams); - this.updateSorting(sorting); - this.updateFilters(filters); + this.updateDataFromUrl(); this.mountRegistrySearch = true; this.emitUpdate(); }, methods: { + updateDataFromUrl() { + const queryParams = getQueryParams(window.location.search); + const { sorting, filters } = extractFilterAndSorting(queryParams); + const pageInfo = extractPageInfo(queryParams); + this.updateSorting(sorting); + this.updateFilters(filters); + this.updatePageInfo(pageInfo); + }, updateFilters(newValue) { + this.updatePageInfo({}); this.filters = newValue; }, updateSorting(newValue) { + this.updatePageInfo({}); this.sorting = { ...this.sorting, ...newValue }; }, + updatePageInfo(newValue) { + this.pageInfo = newValue; + }, updateSortingAndEmitUpdate(newValue) { this.updateSorting(newValue); this.emitUpdate(); }, emitUpdate() { - this.$emit('update', { sort: this.parsedSorting, filters: this.filters }); + this.$emit('update', { + sort: this.parsedSorting, + filters: this.filters, + pageInfo: this.pageInfo, + }); }, }, }; diff --git a/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue b/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue index 1c8f80972df..f67bee77eb6 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue @@ -47,9 +47,6 @@ export default { }; }, computed: { - showPagination() { - return this.pagination.hasPreviousPage || this.pagination.hasNextPage; - }, disableDeleteButton() { return this.isLoading || this.selectedItems.length === 0; }, @@ -131,7 +128,6 @@ export default { <div class="gl-display-flex gl-justify-content-center"> <gl-keyset-pagination - v-if="showPagination" v-bind="pagination" class="gl-mt-3" @prev="$emit('prev-page')" |