SAE3A_MemoryMap
/
front
5
0
Fork 0
Code Issues 6 Pull Requests Packages Projects 1 Releases Wiki Activity

add accept/deny and delete friend

Browse Source
pull/26/head
Maxence JOUANNET 4 months ago
parent 67070bee19
commit 6206b5d964
3 changed files with 81 additions and 31 deletions
Show Stats Download Patch File Download Diff File

47
src/app/components/friend-page/friend-page.component.html
Unescape View File

@ -48,25 +48,42 @@
</div> </div>
<div class="p-4 space-y-3"> <div class="p-4 space-y-3">
<p>Mes Amis</p>
<div *ngFor="let friend of listFriend" class="friend flex items-center justify-between space-x-3"> <div *ngFor="let friend of listFriend" class="friend flex items-center justify-between space-x-3">
<div class="friend flex items-center space-x-3"> <div *ngIf="friend.status == 'accepted'" class="flex justify-between items-center w-full space-x-2">
<img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2"> <div class="friend flex items-center space-x-3">
<span class="text-gray-900 dark:text-white">{{ friend.username }}</span> <img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
</div> <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
<div *ngIf="friend.status == 'pending'" class="flex space-x-2"> </div>
<button (click)="onAcceptOrDeny(friend.friend_user_id, 'accept')" class="p-2 bg-green-500 text-white rounded-full"> <button (click)="deleteFriend(friend.id)" class="p-2 bg-red-500 text-white rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> <path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h16zM10 11v6m4-6v6"/>
</svg>
</button>
<button (click)="onAcceptOrDeny(friend.friend_user_id, 'deny')" class="p-2 bg-red-500 text-white rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
<hr class="border-gray-300 my-3">
<p>Mes demandes d'amis</p>
<div *ngFor="let friend of listFriend">
<div *ngIf="friend.status == 'pending'" class="flex justify-between items-center w-full">
<div class="friend flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
<span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
</div>
<div class="flex space-x-2">
<button (click)="onAcceptOrDeny(friend.id, 'accept')" class="p-2 bg-green-500 text-white rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</button>
<button (click)="onAcceptOrDeny(friend.id, 'deny')" class="p-2 bg-red-500 text-white rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
</div> </div>
@ -74,7 +91,7 @@
<!-- Pied du modal --> <!-- Pied du modal -->
<div class="flex justify-end p-4 border-t dark:border-gray-700"> <div class="flex justify-end p-4 border-t dark:border-gray-700">
<button <button
data-modal-toggle="friends-modal" (click)="closeFriendModal()"
class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
> >
Fermer Fermer

24
src/app/components/friend-page/friend-page.component.ts
Unescape View File

@ -9,30 +9,35 @@ import { CommonModule } from '@angular/common';
styleUrls: ['./friend-page.component.css'] styleUrls: ['./friend-page.component.css']
}) })
export class FriendPageComponent implements OnInit { export class FriendPageComponent implements OnInit {
protected listFriend: {username: string, status: string, friend_user_id: string}[] = []; protected listFriend: {username: string, status: string, friend_user_id: string, id: string}[] = [];
userId: string = ""; userId: string = "";
status: string = ""; status: string = "";
isFriendModalOpen: boolean = false; isFriendModalOpen: boolean = false;
hasAcceptedFriends: boolean = false ;
hasPendingFriends: boolean = false;
constructor(private friendService: FriendsService) { constructor(private friendService: FriendsService) {
} }
ngOnInit(): void { ngOnInit(): void {
this.getFriendData(); this.getFriendData();
console.log(this.listFriend)
} }
private getFriendData(): void { private getFriendData(): void {
this.friendService.getFriend().subscribe((data: any[]) => { this.friendService.getFriend().subscribe((data: any[]) => {
if (data.length > 0) { if (data.length > 0) {
data.forEach(friend => { data.forEach(friend => {
console.log(friend)
let status = friend['status']; let status = friend['status'];
let userId = friend['friend_user_id']; let userId = friend['friend_user_id'];
let id = friend['id'];
this.friendService.getFriendById(userId).subscribe((friendData: any) => { this.friendService.getFriendById(userId).subscribe((friendData: any) => {
this.listFriend.push({ this.listFriend.push({
username: friendData.username, username: friendData.username,
status: status, status: status,
friend_user_id: userId friend_user_id: userId,
id: id
}); });
}); });
}); });
@ -40,8 +45,13 @@ export class FriendPageComponent implements OnInit {
}); });
} }
onAcceptOrDeny(friend_user_id: string, choice: string){ onAcceptOrDeny(id: string, choice: string){
this.friendService.acceptOrDenyFriendById(friend_user_id,choice).subscribe() if (choice == "accept"){
this.friendService.acceptFriendById(id).subscribe()
}
else {
this.friendService.denyFriendById(id).subscribe()
}
} }
openFriendModal() { openFriendModal() {
@ -51,4 +61,8 @@ export class FriendPageComponent implements OnInit {
closeFriendModal() { closeFriendModal() {
this.isFriendModalOpen = false; this.isFriendModalOpen = false;
} }
deleteFriend(id: string){
this.friendService.deleteFriend(id).subscribe();
}
} }

39
src/app/services/friends/friends.service.ts
Unescape View File

@ -1,21 +1,22 @@
import { Injectable } from '@angular/core'; import { Injectable, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment'; import { environment } from '../../../environments/environment';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class FriendsService { export class FriendsService {
private apiURL = environment.apiURL; private apiURL = environment.apiURL;
private token = localStorage.getItem('auth_token'); constructor(private http: HttpClient) {
constructor(private http: HttpClient) { } }
getFriend() { getFriend() {
console.log("getFriends");
const url = `${this.apiURL}/friends`; const url = `${this.apiURL}/friends`;
const headers = new HttpHeaders({ const headers = new HttpHeaders({
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: 'Bearer ' + this.token, Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
}); });
return this.http.get<any[]>(url, { headers }); return this.http.get<any[]>(url, { headers });
} }
@ -24,17 +25,35 @@ export class FriendsService {
const url = `${this.apiURL}/user/${id}`; const url = `${this.apiURL}/user/${id}`;
const headers = new HttpHeaders({ const headers = new HttpHeaders({
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: 'Bearer ' + this.token, Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
}); });
return this.http.get<any>(url, { headers }); return this.http.get<any>(url, { headers });
} }
acceptOrDenyFriendById(id: string,choice: string){ acceptFriendById(id: string){
const url = `${this.apiURL}/friend/${id}/${choice}`; const url = `${this.apiURL}/friend/${id}/accept`;
const headers = new HttpHeaders({ const headers = new HttpHeaders({
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: 'Bearer ' + this.token, Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
}); });
return this.http.get<any>(url, { headers }); return this.http.patch<any>(url, [], { headers });
}
denyFriendById(id: string){
const url = `${this.apiURL}/friend/${id}/deny`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
});
return this.http.post<any>(url, [], { headers });
}
deleteFriend(id: string){
const url = `${this.apiURL}/friend/${id}/delete`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
});
return this.http.delete<any>(url, { headers });
} }
} }

Write Preview
Loading…
Cancel
Save