diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-14 21:08:53 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-14 21:08:53 +0300 |
commit | 5b62f8e3ee531f63ce3c49cae03e2a618ba51615 (patch) | |
tree | 2d2553232fe0663957ee4d1054211cc71cb07679 /app/assets/javascripts/profile | |
parent | cdb41961fd2bc233d36c5b30f89d087c2efa9818 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/profile')
-rw-r--r-- | app/assets/javascripts/profile/components/overview_tab.vue | 30 | ||||
-rw-r--r-- | app/assets/javascripts/profile/components/profile_tabs.vue | 27 | ||||
-rw-r--r-- | app/assets/javascripts/profile/index.js | 4 |
3 files changed, 58 insertions, 3 deletions
diff --git a/app/assets/javascripts/profile/components/overview_tab.vue b/app/assets/javascripts/profile/components/overview_tab.vue index 76fb13919df..8eede317344 100644 --- a/app/assets/javascripts/profile/components/overview_tab.vue +++ b/app/assets/javascripts/profile/components/overview_tab.vue @@ -1,18 +1,44 @@ <script> -import { GlTab } from '@gitlab/ui'; +import { GlTab, GlLoadingIcon, GlLink } from '@gitlab/ui'; import { s__ } from '~/locale'; +import ProjectsList from '~/vue_shared/components/projects_list/projects_list.vue'; import ActivityCalendar from './activity_calendar.vue'; export default { i18n: { title: s__('UserProfile|Overview'), + personalProjects: s__('UserProfile|Personal projects'), + viewAll: s__('UserProfile|View all'), + }, + components: { GlTab, GlLoadingIcon, GlLink, ActivityCalendar, ProjectsList }, + props: { + personalProjects: { + type: Array, + required: true, + }, + personalProjectsLoading: { + type: Boolean, + required: true, + }, }, - components: { GlTab, ActivityCalendar }, }; </script> <template> <gl-tab :title="$options.i18n.title"> <activity-calendar /> + <div class="gl-mx-n3 gl-display-flex gl-flex-wrap-wrap"> + <div class="gl-px-3 gl-w-full gl-lg-w-half"></div> + <div class="gl-px-3 gl-w-full gl-lg-w-half" data-testid="personal-projects-section"> + <div + class="gl-display-flex gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid" + > + <h4 class="gl-flex-grow-1">{{ $options.i18n.personalProjects }}</h4> + <gl-link href="">{{ $options.i18n.viewAll }}</gl-link> + </div> + <gl-loading-icon v-if="personalProjectsLoading" class="gl-mt-5" size="md" /> + <projects-list v-else :projects="personalProjects" /> + </div> + </div> </gl-tab> </template> diff --git a/app/assets/javascripts/profile/components/profile_tabs.vue b/app/assets/javascripts/profile/components/profile_tabs.vue index b39bfabb832..25b94d7dc7f 100644 --- a/app/assets/javascripts/profile/components/profile_tabs.vue +++ b/app/assets/javascripts/profile/components/profile_tabs.vue @@ -1,6 +1,10 @@ <script> import { GlTabs } from '@gitlab/ui'; +import { getUserProjects } from '~/rest_api'; +import { s__ } from '~/locale'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { createAlert } from '~/alert'; import OverviewTab from './overview_tab.vue'; import ActivityTab from './activity_tab.vue'; import GroupsTab from './groups_tab.vue'; @@ -12,6 +16,11 @@ import FollowersTab from './followers_tab.vue'; import FollowingTab from './following_tab.vue'; export default { + i18n: { + personalProjectsErrorMessage: s__( + 'UserProfile|An error occurred loading the personal projects. Please refresh the page to try again.', + ), + }, components: { GlTabs, OverviewTab, @@ -62,6 +71,22 @@ export default { component: FollowingTab, }, ], + inject: ['userId'], + data() { + return { + personalProjectsLoading: true, + personalProjects: [], + }; + }, + async mounted() { + try { + const response = await getUserProjects(this.userId, { per_page: 10 }); + this.personalProjects = convertObjectPropsToCamelCase(response.data, { deep: true }); + this.personalProjectsLoading = false; + } catch (error) { + createAlert({ message: this.$options.i18n.personalProjectsErrorMessage }); + } + }, }; </script> @@ -72,6 +97,8 @@ export default { v-for="{ key, component } in $options.tabs" :key="key" class="container-fluid container-limited" + :personal-projects="personalProjects" + :personal-projects-loading="personalProjectsLoading" /> </gl-tabs> </template> diff --git a/app/assets/javascripts/profile/index.js b/app/assets/javascripts/profile/index.js index fbe0e3534d8..101e52c873e 100644 --- a/app/assets/javascripts/profile/index.js +++ b/app/assets/javascripts/profile/index.js @@ -13,15 +13,17 @@ export const initProfileTabs = () => { if (!el) return false; - const { followees, followers, userCalendarPath, utcOffset } = el.dataset; + const { followees, followers, userCalendarPath, utcOffset, userId } = el.dataset; return new Vue({ el, + name: 'ProfileRoot', provide: { followees: parseInt(followers, 10), followers: parseInt(followees, 10), userCalendarPath, utcOffset, + userId, }, render(createElement) { return createElement(ProfileTabs); |