diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue')
-rw-r--r-- | app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue new file mode 100644 index 00000000000..efc60c9c037 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue @@ -0,0 +1,57 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue'; +import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; + +export default { + components: { + VersionRow, + GlKeysetPagination, + PackagesListLoader, + }, + props: { + versions: { + type: Array, + required: true, + default: () => [], + }, + pageInfo: { + type: Object, + required: true, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + showPagination() { + return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage; + }, + isListEmpty() { + return this.versions.length === 0; + }, + }, +}; +</script> +<template> + <div> + <div v-if="isLoading"> + <packages-list-loader /> + </div> + <slot v-else-if="isListEmpty" name="empty-state"></slot> + <div v-else> + <version-row v-for="version in versions" :key="version.id" :package-entity="version" /> + <div class="gl-display-flex gl-justify-content-center"> + <gl-keyset-pagination + v-if="showPagination" + v-bind="pageInfo" + class="gl-mt-3" + @prev="$emit('prev-page')" + @next="$emit('next-page')" + /> + </div> + </div> + </div> +</template> |