Add remove friend functionality

master
Max 5 years ago
parent 3ff4b070c4
commit 906cff5f24

@ -53,12 +53,18 @@
</div> </div>
<span id="username">{{userProfile.username}}</span> <span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</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" class="request-button"
(click)="sendFriendRequest(userProfile)" (click)="sendFriendRequest(userProfile)">
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon> <mat-icon>person_add</mat-icon>
</button> </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>
<mat-toolbar-row> <mat-toolbar-row>
<div class="info-box"> <div class="info-box">

@ -6,6 +6,7 @@ import {RequestService} from 'src/app/services/request/request.service';
import {DatasharingService} from '../../services/datasharing.service'; import {DatasharingService} from '../../services/datasharing.service';
import {ProfileService} from 'src/app/services/profile/profile.service'; import {ProfileService} from 'src/app/services/profile/profile.service';
import {HttpClient} from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import {SocialService} from 'src/app/services/social/social.service';
import {SelfService} from '../../services/selfservice/self.service'; import {SelfService} from '../../services/selfservice/self.service';
import {MatDialog} from '@angular/material'; import {MatDialog} from '@angular/material';
import {DialogFileUploadComponent} from './fileUpload/fileUpload.component'; import {DialogFileUploadComponent} from './fileUpload/fileUpload.component';
@ -24,7 +25,7 @@ export class ProfileComponent implements OnInit {
id: string; id: string;
rankname: string; rankname: string;
profileNotFound = false; profileNotFound = false;
isFriendOfSelf = false;
loading = false; loading = false;
constructor( constructor(
@ -33,6 +34,7 @@ export class ProfileComponent implements OnInit {
private requestService: RequestService, private requestService: RequestService,
private data: DatasharingService, private data: DatasharingService,
private profileService: ProfileService, private profileService: ProfileService,
private socialService: SocialService,
private lightbox: Lightbox, private lightbox: Lightbox,
public dialog: MatDialog) { public dialog: MatDialog) {
router.events.forEach((event) => { 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.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
this.data.currentUser.subscribe(user => { this.data.currentUser.subscribe(user => {
this.self = user; this.self = user;
this.checkIfUserIsFriend();
}); });
this.profileService.getUserData(this.id); this.profileService.getUserData(this.id);
this.profileService.proflile.subscribe(response => { 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) { public sendFriendRequest(user: User) {
user.allowedToSendRequest = false; user.allowedToSendRequest = false;
this.requestService.sendFriendRequest(user); 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 * Opens the file upload dialog
*/ */

@ -4,15 +4,24 @@
<div id="friendlist"> <div id="friendlist">
<mat-card class="friend-card" *ngFor="let friend of user.friends" <mat-card class="friend-card" *ngFor="let friend of user.friends"
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)" [class.selected]="friend === selectedFriend"
tabindex="0" tabindex="0">
matRipple>
<mat-card-header> <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"/> <img class="profile-picture" [src]="friend.profilePicture"/>
</div> </div>
<mat-card-title>{{friend.name}}</mat-card-title> <mat-card-title (click)="showFriendProfile(friend)">{{friend.name}}</mat-card-title>
<mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle> <mat-card-subtitle (click)="showFriendProfile(friend)">{{friend.rankname}}</mat-card-subtitle>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>
</div> </div>

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

@ -1,5 +1,6 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {DatasharingService} from 'src/app/services/datasharing.service'; 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 {FriendInfo} from 'src/app/models/friendinfo';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {User} from 'src/app/models/user'; import {User} from 'src/app/models/user';
@ -12,7 +13,7 @@ import {User} from 'src/app/models/user';
export class FriendsComponent implements OnInit { export class FriendsComponent implements OnInit {
user: User; user: User;
constructor(private data: DatasharingService, private router: Router) { constructor(private data: DatasharingService, private router: Router, private socialService: SocialService) {
} }
ngOnInit() { ngOnInit() {
@ -25,4 +26,8 @@ export class FriendsComponent implements OnInit {
this.router.navigate(['profile/' + pFriend.id]); 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.friends.push(friend);
user.friendCount++; user.friendCount++;
this.currentUser.next(user); 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) { setDarkMode(active: boolean) {
const user: User = this.currentUser.getValue(); const user: User = this.currentUser.getValue();

@ -2,6 +2,8 @@ import {Injectable} from '@angular/core';
import {environment} from 'src/environments/environment'; import {environment} from 'src/environments/environment';
import {HttpClient} from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import {BaseService} from '../base.service'; 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!) { const graphqlCreateGroupQuery = `mutation($name: String!) {
createGroup(name: $name) { createGroup(name: $name) {
@ -14,7 +16,8 @@ const graphqlCreateGroupQuery = `mutation($name: String!) {
}) })
export class SocialService extends BaseService { export class SocialService extends BaseService {
constructor(http: HttpClient) { constructor(http: HttpClient,
private data: DatasharingService) {
super(http); super(http);
} }
@ -38,4 +41,18 @@ export class SocialService extends BaseService {
const body = SocialService.buildGroupCreateBody(name); const body = SocialService.buildGroupCreateBody(name);
return this.postGraphql(body); 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