diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer/pages/list.vue')
-rw-r--r-- | app/assets/javascripts/registry/explorer/pages/list.vue | 30 |
1 files changed, 25 insertions, 5 deletions
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue index 625d491db6a..589b88d7bbe 100644 --- a/app/assets/javascripts/registry/explorer/pages/list.vue +++ b/app/assets/javascripts/registry/explorer/pages/list.vue @@ -11,6 +11,8 @@ import { import { get } from 'lodash'; import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql'; import createFlash from '~/flash'; +import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; +import { extractFilterAndSorting } from '~/packages_and_registries/shared/utils'; import Tracking from '~/tracking'; import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import DeleteImage from '../components/delete_image.vue'; @@ -81,6 +83,9 @@ export default { searchConfig: SORT_FIELDS, apollo: { baseImages: { + skip() { + return !this.fetchBaseQuery; + }, query: getContainerRepositoriesQuery, variables() { return this.queryVariables; @@ -124,15 +129,19 @@ export default { sorting: { orderBy: 'UPDATED', sort: 'desc' }, name: null, mutationLoading: false, + fetchBaseQuery: false, fetchAdditionalDetails: false, }; }, computed: { images() { - return this.baseImages.map((image, index) => ({ - ...image, - ...get(this.additionalDetails, index, {}), - })); + if (this.baseImages) { + return this.baseImages.map((image, index) => ({ + ...image, + ...get(this.additionalDetails, index, {}), + })); + } + return []; }, graphqlResource() { return this.config.isGroupPage ? 'group' : 'project'; @@ -171,8 +180,15 @@ export default { }, }, mounted() { + const { sorting, filters } = extractFilterAndSorting(this.$route.query); + + this.filter = [...filters]; + this.name = filters[0]?.value.data; + this.sorting = { ...this.sorting, ...sorting }; + // If the two graphql calls - which are not batched - resolve togheter we will have a race // condition when apollo sets the cache, with this we give the 'base' call an headstart + this.fetchBaseQuery = true; setTimeout(() => { this.fetchAdditionalDetails = true; }, 200); @@ -241,9 +257,12 @@ export default { }; }, doFilter() { - const search = this.filter.find((i) => i.type === 'filtered-search-term'); + const search = this.filter.find((i) => i.type === FILTERED_SEARCH_TERM); this.name = search?.value?.data; }, + updateUrlQueryString(query) { + this.$router.push({ query }); + }, }, }; </script> @@ -303,6 +322,7 @@ export default { @sorting:changed="updateSorting" @filter:changed="filter = $event" @filter:submit="doFilter" + @query:changed="updateUrlQueryString" /> <div v-if="isLoading" class="gl-mt-5"> |