diff options
Diffstat (limited to 'app/assets/javascripts/organizations/index/components/app.vue')
-rw-r--r-- | app/assets/javascripts/organizations/index/components/app.vue | 41 |
1 files changed, 37 insertions, 4 deletions
diff --git a/app/assets/javascripts/organizations/index/components/app.vue b/app/assets/javascripts/organizations/index/components/app.vue index c47f4ed52c5..4935e0122e3 100644 --- a/app/assets/javascripts/organizations/index/components/app.vue +++ b/app/assets/javascripts/organizations/index/components/app.vue @@ -2,6 +2,7 @@ import { GlButton } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import { createAlert } from '~/alert'; +import { DEFAULT_PER_PAGE } from '~/api'; import organizationsQuery from '../graphql/organizations.query.graphql'; import OrganizationsView from './organizations_view.vue'; @@ -21,14 +22,23 @@ export default { inject: ['newOrganizationUrl'], data() { return { - organizations: [], + organizations: {}, + pagination: { + first: DEFAULT_PER_PAGE, + after: null, + last: null, + before: null, + }, }; }, apollo: { organizations: { query: organizationsQuery, + variables() { + return this.pagination; + }, update(data) { - return data.currentUser.organizations.nodes; + return data.currentUser.organizations; }, error(error) { createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true }); @@ -37,12 +47,30 @@ export default { }, computed: { showHeader() { - return this.loading || this.organizations.length; + return this.loading || this.organizations.nodes?.length; }, loading() { return this.$apollo.queries.organizations.loading; }, }, + methods: { + onNext(endCursor) { + this.pagination = { + first: DEFAULT_PER_PAGE, + after: endCursor, + last: null, + before: null, + }; + }, + onPrev(startCursor) { + this.pagination = { + first: null, + after: null, + last: DEFAULT_PER_PAGE, + before: startCursor, + }; + }, + }, }; </script> @@ -56,6 +84,11 @@ export default { }}</gl-button> </div> </div> - <organizations-view :organizations="organizations" :loading="loading" /> + <organizations-view + :organizations="organizations" + :loading="loading" + @next="onNext" + @prev="onPrev" + /> </section> </template> |