diff options
Diffstat (limited to 'app/assets/javascripts/organizations/index/components/organizations_list.vue')
-rw-r--r-- | app/assets/javascripts/organizations/index/components/organizations_list.vue | 42 |
1 files changed, 34 insertions, 8 deletions
diff --git a/app/assets/javascripts/organizations/index/components/organizations_list.vue b/app/assets/javascripts/organizations/index/components/organizations_list.vue index 539a4fcfe29..971d4710be2 100644 --- a/app/assets/javascripts/organizations/index/components/organizations_list.vue +++ b/app/assets/javascripts/organizations/index/components/organizations_list.vue @@ -1,26 +1,52 @@ <script> +import { GlKeysetPagination } from '@gitlab/ui'; +import { __ } from '~/locale'; import OrganizationsListItem from './organizations_list_item.vue'; export default { name: 'OrganizationsList', components: { OrganizationsListItem, + GlKeysetPagination, + }, + i18n: { + prev: __('Prev'), + next: __('Next'), }, props: { organizations: { - type: Array, + type: Object, required: true, }, }, + computed: { + nodes() { + return this.organizations.nodes || []; + }, + pageInfo() { + return this.organizations.pageInfo || {}; + }, + }, }; </script> <template> - <ul class="gl-p-0 gl-list-style-none"> - <organizations-list-item - v-for="organization in organizations" - :key="organization.id" - :organization="organization" - /> - </ul> + <div> + <ul class="gl-p-0 gl-list-style-none"> + <organizations-list-item + v-for="organization in nodes" + :key="organization.id" + :organization="organization" + /> + </ul> + <div v-if="pageInfo.hasNextPage || pageInfo.hasPreviousPage" class="gl-text-center gl-mt-5"> + <gl-keyset-pagination + v-bind="pageInfo" + :prev-text="$options.i18n.prev" + :next-text="$options.i18n.next" + @prev="$emit('prev', $event)" + @next="$emit('next', $event)" + /> + </div> + </div> </template> |