merge friend branch to master

src/app/components/friend-page/friend-page.component.html

@@ -0,0 +1,101 @@
+<!-- Bouton d'ouverture du modal -->
+<button
+  (click)="openFriendModal()"
+  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+  type="button"
+>
+  Amis
+</button>
+
+<!-- Fond assombri -->
+<div
+  class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
+  [ngClass]="{'opacity-0 pointer-events-none': !isFriendModalOpen, 'opacity-100': isFriendModalOpen}"
+  (click)="closeFriendModal()"
+></div>
+
+<!-- Modal principal -->
+<div
+  id="friends-modal"
+  tabindex="-1"
+  aria-hidden="true"
+  [ngClass]="{
+    'opacity-0 scale-50 pointer-events-none': !isFriendModalOpen,
+    'opacity-100 scale-100': isFriendModalOpen
+  }"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform duration-300 ease-in-out"
+>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full">
+    <!-- En-tête du modal -->
+    <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Liste d'amis</h3>
+      <button
+        (click)="closeFriendModal()"
+        class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+      >
+        ✕
+      </button>
+    </div>
+
+    <!-- Barre de recherche -->
+    <div class="p-4">
+      <input
+        type="text"
+        id="search-friends"
+        class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"
+        placeholder="Rechercher un ami..."
+      />
+    </div>
+
+    <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 *ngIf="friend.status == 'accepted'" class="flex justify-between items-center w-full space-x-2">
+          <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>
+          <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" stroke-width="2">
+              <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>    
+        </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>    
+
+    
+    
+    <!-- Pied du modal -->
+    <div class="flex justify-end p-4 border-t dark:border-gray-700">
+      <button
+      (click)="closeFriendModal()"
+        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+      >
+        Fermer
+      </button>
+    </div>
+  </div>
+</div>

src/app/components/friend-page/friend-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FriendPageComponent } from './friend-page.component';
+
+describe('FriendPageComponent', () => {
+  let component: FriendPageComponent;
+  let fixture: ComponentFixture<FriendPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FriendPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FriendPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/friend-page/friend-page.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { FriendsService } from '../../services/friends/friends.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-friend-page',
+  imports: [CommonModule],
+  templateUrl: './friend-page.component.html',
+  styleUrls: ['./friend-page.component.css']
+})
+export class FriendPageComponent implements OnInit {
+  protected listFriend: {username: string, status: string, friend_user_id: string, id: string}[] = [];
+  userId: string = "";
+  status: string = "";
+  isFriendModalOpen: boolean = false;
+  hasAcceptedFriends: boolean = false ;
+  hasPendingFriends: boolean = false;
+
+
+  constructor(private friendService: FriendsService) {
+  }
+
+  ngOnInit(): void {
+    this.getFriendData();
+  }
+
+  private getFriendData(): void {
+    this.friendService.getFriend().subscribe((data: any[]) => {
+      if (data.length > 0) {
+        data.forEach(friend => {
+          console.log(friend)
+          let status = friend['status'];
+          let userId = friend['friend_user_id'];
+          let id = friend['id'];
+          this.friendService.getFriendById(userId).subscribe((friendData: any) => {
+            this.listFriend.push({
+              username: friendData.username,
+              status: status,
+              friend_user_id: userId,
+              id: id
+            });
+          });
+        });
+      }
+    });
+  }
+
+  onAcceptOrDeny(id: string, choice: string){
+    if (choice == "accept"){
+      this.friendService.acceptFriendById(id).subscribe()
+    }
+    else {
+      this.friendService.denyFriendById(id).subscribe()
+    }
+  }
+  
+  openFriendModal() {
+    this.isFriendModalOpen = true;
+  }
+
+  closeFriendModal() {
+    this.isFriendModalOpen = false;
+  }
+
+  deleteFriend(id: string){
+    this.friendService.deleteFriend(id).subscribe();
+  }
+}

src/app/components/navbar/navbar.component.html

@@ -174,10 +174,7 @@
           <app-add-pin-popup></app-add-pin-popup>
         </li>
         <li>
-          <a
-            class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-            >Amis</a
-          >
+          <app-friend-page></app-friend-page>
         </li>
       </ul>
     </div>

src/app/components/navbar/navbar.component.ts

@@ -23,13 +23,14 @@ import { Pin } from '../../model/Pin';
 import { LocalStorageService } from '../../services/localstorage.service';
 import { PinService } from '../../services/pin.service';
 import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
+import { FriendPageComponent } from "../friend-page/friend-page.component";
 
 @Component({
   selector: 'app-navbar',
   imports: [
     AddPinPopupComponent,
     NgIf,
-    RouterLink,
+    FriendPageComponent,
     CommonModule,
     ReactiveFormsModule,
   ],

src/app/services/friends/friends.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FriendsService } from './friends.service';
+
+describe('FriendsService', () => {
+  let service: FriendsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FriendsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/friends/friends.service.ts

@@ -0,0 +1,59 @@
+import { Injectable, OnInit } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FriendsService  {
+
+  private apiURL = environment.apiURL;
+  constructor(private http: HttpClient) {
+   }
+
+  getFriend() {
+    console.log("getFriends");
+    const url = `${this.apiURL}/friends`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
+    });
+    return this.http.get<any[]>(url, { headers });
+  }
+
+  getFriendById(id: string) {
+    const url = `${this.apiURL}/user/${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
+    });
+    return this.http.get<any>(url, { headers });
+  }
+
+  acceptFriendById(id: string){
+    const url = `${this.apiURL}/friend/${id}/accept`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
+    });
+    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 });
+  }
+}