Skip to content
Snippets Groups Projects

Allow (un)following someone in the user popover

4 files
+ 53
3
Compare changes
  • Side-by-side
  • Inline
Files
4
@@ -6,7 +6,9 @@ import {
GlIcon,
GlSafeHtmlDirective,
GlSprintf,
GlButton,
} from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
import { glEmojiTag } from '../../../emoji';
import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
@@ -24,6 +26,7 @@ export default {
UserAvatarImage,
UserNameWithStatus,
GlSprintf,
GlButton,
},
directives: {
SafeHtml: GlSafeHtmlDirective,
@@ -59,6 +62,23 @@ export default {
availabilityStatus() {
return this.user?.status?.availability || '';
},
isNotCurrentUser() {
return !this.userIsLoading && this.user.username !== gon.current_username;
},
},
methods: {
async follow() {
this.$emit('follow');
await axios
.post(`/users/${encodeURIComponent(this.user.username)}/follow.json`)
.catch(() => this.$emit('unfollow'));
},
async unfollow() {
this.$emit('unfollow');
await axios
.post(`/users/${encodeURIComponent(this.user.username)}/unfollow.json`)
.catch(() => this.$emit('follow'));
},
},
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
};
@@ -68,8 +88,18 @@ export default {
<!-- 200ms delay so not every mouseover triggers Popover -->
<gl-popover :target="target" :delay="200" boundary="viewport" placement="top">
<div class="gl-p-3 gl-line-height-normal gl-display-flex" data-testid="user-popover">
<div class="gl-p-2 flex-shrink-1">
<user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="gl-mr-3!" />
<div
class="gl-p-2 gl-mr-3! flex-shrink-1 gl-display-flex gl-flex-direction-column align-items-center"
>
<user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="gl-mr-0!" />
<div v-if="isNotCurrentUser" class="gl-mt-3">
<gl-button v-if="user.isFollowed" size="small" @click="unfollow">{{
__('Unfollow')
}}</gl-button>
<gl-button v-else variant="confirm" size="small" @click="follow">{{
__('Follow')
}}</gl-button>
</div>
</div>
<div class="gl-p-2 gl-w-full gl-min-w-0">
<template v-if="userIsLoading">
Loading