Add remove friend functionality

master
Max 5 years ago
parent 3ff4b070c4
commit 906cff5f24

@ -53,12 +53,18 @@
</div>
<span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</span>
<button mat-icon-button
<button mat-icon-button *ngIf="userProfile.allowedToSendRequest"
matTooltip="send friend request" matTooltipShowDelay="200"
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
(click)="sendFriendRequest(userProfile)">
<mat-icon>person_add</mat-icon>
</button>
<button mat-icon-button *ngIf="isFriendOfSelf"
matTooltip="remove friend" matTooltipShowDelay="200"
class="request-button"
(click)="removeFriend(userProfile)">
<mat-icon>person_add_disabled</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">

@ -6,6 +6,7 @@ import {RequestService} from 'src/app/services/request/request.service';
import {DatasharingService} from '../../services/datasharing.service';
import {ProfileService} from 'src/app/services/profile/profile.service';
import {HttpClient} from '@angular/common/http';
import {SocialService} from 'src/app/services/social/social.service';
import {SelfService} from '../../services/selfservice/self.service';
import {MatDialog} from '@angular/material';
import {DialogFileUploadComponent} from './fileUpload/fileUpload.component';
@ -24,7 +25,7 @@ export class ProfileComponent implements OnInit {
id: string;
rankname: string;
profileNotFound = false;
isFriendOfSelf = false;
loading = false;
constructor(
@ -33,6 +34,7 @@ export class ProfileComponent implements OnInit {
private requestService: RequestService,
private data: DatasharingService,
private profileService: ProfileService,
private socialService: SocialService,
private lightbox: Lightbox,
public dialog: MatDialog) {
router.events.forEach((event) => {
@ -52,6 +54,7 @@ export class ProfileComponent implements OnInit {
this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
this.data.currentUser.subscribe(user => {
this.self = user;
this.checkIfUserIsFriend();
});
this.profileService.getUserData(this.id);
this.profileService.proflile.subscribe(response => {
@ -68,11 +71,29 @@ export class ProfileComponent implements OnInit {
});
}
checkIfUserIsFriend() {
this.isFriendOfSelf = false;
for (const friend of this.self.friends) {
if (friend.id.toString() === this.id) {
this.isFriendOfSelf = true;
break;
}
}
}
public sendFriendRequest(user: User) {
user.allowedToSendRequest = false;
this.requestService.sendFriendRequest(user);
}
removeFriend(user: User) {
this.socialService.removeFriend(user.userID).subscribe(response => {
this.checkIfUserIsFriend();
// tslint:disable-next-line:max-line-length
this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
});
}
/**
* Opens the file upload dialog
*/

@ -4,15 +4,24 @@
<div id="friendlist">
<mat-card class="friend-card" *ngFor="let friend of user.friends"
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
tabindex="0"
matRipple>
[class.selected]="friend === selectedFriend"
tabindex="0">
<mat-card-header>
<div mat-card-avatar>
<div id="button-box">
<button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="removeFriend(friend)">
<span>remove friend</span>
</button>
</mat-menu>
</div>
<div mat-card-avatar (click)="showGroupProfile(group)">
<img class="profile-picture" [src]="friend.profilePicture"/>
</div>
<mat-card-title>{{friend.name}}</mat-card-title>
<mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
<mat-card-title (click)="showFriendProfile(friend)">{{friend.name}}</mat-card-title>
<mat-card-subtitle (click)="showFriendProfile(friend)">{{friend.rankname}}</mat-card-subtitle>
</mat-card-header>
</mat-card>
</div>

@ -12,6 +12,10 @@
cursor: pointer
outline: none
user-select: none
#button-box
text-align: right
margin-left: auto
width: auto
::ng-deep .mat-card-header-text
margin: 0 24px

@ -1,5 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {DatasharingService} from 'src/app/services/datasharing.service';
import {SocialService} from 'src/app/services/social/social.service';
import {FriendInfo} from 'src/app/models/friendinfo';
import {Router} from '@angular/router';
import {User} from 'src/app/models/user';
@ -12,7 +13,7 @@ import {User} from 'src/app/models/user';
export class FriendsComponent implements OnInit {
user: User;
constructor(private data: DatasharingService, private router: Router) {
constructor(private data: DatasharingService, private router: Router, private socialService: SocialService) {
}
ngOnInit() {
@ -25,4 +26,8 @@ export class FriendsComponent implements OnInit {
this.router.navigate(['profile/' + pFriend.id]);
}
removeFriend(friend: FriendInfo) {
this.socialService.removeFriend(friend.id).subscribe();
}
}

@ -44,7 +44,18 @@ export class DatasharingService {
user.friends.push(friend);
user.friendCount++;
this.currentUser.next(user);
}
}
removeFriendFromUser(id: number) {
const user: User = this.currentUser.getValue();
for (let i = 0; i < user.friends.length; i++) {
if (user.friends[i].id === id) {
user.friends.splice(i, 1);
return;
}
}
this.currentUser.next(user);
}
setDarkMode(active: boolean) {
const user: User = this.currentUser.getValue();

@ -2,6 +2,8 @@ import {Injectable} from '@angular/core';
import {environment} from 'src/environments/environment';
import {HttpClient} from '@angular/common/http';
import {BaseService} from '../base.service';
import { tap } from 'rxjs/internal/operators/tap';
import {DatasharingService} from 'src/app/services/datasharing.service';
const graphqlCreateGroupQuery = `mutation($name: String!) {
createGroup(name: $name) {
@ -14,7 +16,8 @@ const graphqlCreateGroupQuery = `mutation($name: String!) {
})
export class SocialService extends BaseService {
constructor(http: HttpClient) {
constructor(http: HttpClient,
private data: DatasharingService) {
super(http);
}
@ -38,4 +41,18 @@ export class SocialService extends BaseService {
const body = SocialService.buildGroupCreateBody(name);
return this.postGraphql(body);
}
public removeFriend(id: number) {
const body = {
query: `mutation($id: ID!) {
removeFriend(friendId: $id)
}`, variables: {
id
}
};
return this.postGraphql(body)
.pipe(tap(response => {
this.data.removeFriendFromUser(id);
}));
}
}

Loading…
Cancel
Save