diff options
Diffstat (limited to 'app/assets/javascripts/profile/components/followers_tab.vue')
-rw-r--r-- | app/assets/javascripts/profile/components/followers_tab.vue | 54 |
1 files changed, 52 insertions, 2 deletions
diff --git a/app/assets/javascripts/profile/components/followers_tab.vue b/app/assets/javascripts/profile/components/followers_tab.vue index 5b69f835294..1fa579bc611 100644 --- a/app/assets/javascripts/profile/components/followers_tab.vue +++ b/app/assets/javascripts/profile/components/followers_tab.vue @@ -1,16 +1,59 @@ <script> import { GlBadge, GlTab } from '@gitlab/ui'; import { s__ } from '~/locale'; +import { getUserFollowers } from '~/rest_api'; +import { createAlert } from '~/alert'; +import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; +import Follow from './follow.vue'; export default { i18n: { title: s__('UserProfile|Followers'), + errorMessage: s__( + 'UserProfile|An error occurred loading the followers. Please refresh the page to try again.', + ), }, components: { GlBadge, GlTab, + Follow, + }, + inject: ['followersCount', 'userId'], + data() { + return { + followers: [], + loading: true, + totalItems: 0, + page: 1, + }; + }, + watch: { + page: { + async handler() { + this.loading = true; + + try { + const { data: followers, headers } = await getUserFollowers(this.userId, { + page: this.page, + }); + const { total } = parseIntPagination(normalizeHeaders(headers)); + + this.followers = followers; + this.totalItems = total; + } catch (error) { + createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true }); + } finally { + this.loading = false; + } + }, + immediate: true, + }, + }, + methods: { + onPaginationInput(page) { + this.page = page; + }, }, - inject: ['followers'], }; </script> @@ -18,7 +61,14 @@ export default { <gl-tab> <template #title> <span>{{ $options.i18n.title }}</span> - <gl-badge size="sm" class="gl-ml-2">{{ followers }}</gl-badge> + <gl-badge size="sm" class="gl-ml-2">{{ followersCount }}</gl-badge> </template> + <follow + :users="followers" + :loading="loading" + :page="page" + :total-items="totalItems" + @pagination-input="onPaginationInput" + /> </gl-tab> </template> |