Design friends management pages (index, pending and create)

app/Http/Controllers/FriendshipsController.php

@@ -22,22 +22,10 @@ public function index()
             ->with(['user', 'friend'])
             ->get();
 
-        $pendingRequestsFromFriends = Friendship::where('friend_id', Auth::id())
-            ->where('status', 'pending')
-            ->with('user', 'friend')
-            ->get();
-
-        $pendingRequestsFromUser = Friendship::where('user_id', Auth::id())
-            ->where('status', 'pending')
-            ->with(['user', 'friend'])
-            ->get();
-
         $friends = $friendsFromFriends->merge($friendsFromUser);
-        $pendingRequests = $pendingRequestsFromFriends->merge($pendingRequestsFromUser);
 
         return view('friendships.index', [
             'friends' => $friends,
-            'pendingRequests' => $pendingRequests,
         ]);
     }
 
@@ -46,6 +34,25 @@ public function create()
         return view('friendships.create');
     }
 
+    public function pending()
+    {
+        $pendingRequestsFromFriends = Friendship::where('friend_id', Auth::id())
+        ->where('status', 'pending')
+        ->with('user', 'friend')
+        ->get();
+
+        $pendingRequestsFromUser = Friendship::where('user_id', Auth::id())
+        ->where('status', 'pending')
+        ->with(['user', 'friend'])
+        ->get();
+
+        $pendingRequests = $pendingRequestsFromFriends->merge($pendingRequestsFromUser);
+
+        return view('friendships.pending', data: [
+            'pendingRequests' => $pendingRequests,
+        ]);
+    }
+
     public function store(Request $request)
     {
         $validated = $request->validate([
@@ -55,7 +62,7 @@ public function store(Request $request)
         $friend = User::where('name', $validated['name'])->first();
 
         if ($friend->id === Auth::id()) {
-            return redirect()->route('friends.index')->with('error', 'You cannot add yourself.');
+            return back()->with('error', 'You cannot add yourself.');
         }
 
         $friendshipExists = Friendship::where(function ($query) use ($friend) {
@@ -67,7 +74,7 @@ public function store(Request $request)
         })->exists();
 
         if ($friendshipExists) {
-            return redirect()->route('friends.index')->with('error', 'You are already friends or a request is pending.');
+            return back()->with('error', 'You are already friends or a request is pending.');
         }
 
         Friendship::create([
@@ -76,7 +83,7 @@ public function store(Request $request)
             'status' => 'pending',
         ]);
 
-        return redirect()->route('friends.index')->with('success', 'Friend request sent!');
+        return back()->with('success', 'Friend request sent !');
     }
 
     public function accept(Request $request, $friendship_id)
@@ -86,10 +93,10 @@ public function accept(Request $request, $friendship_id)
         if ($friendship && $friendship->status === 'pending') {
             // Met à jour le statut directement
             $friendship->update(['status' => 'accepted']);
-            return redirect()->route('friends.index')->with('success', 'Friend request accepted!');
+            return back()->with('success', 'Friend request accepted!');
         }
 
-        return redirect()->route('friends.index')->with('error', 'Could not accept the friend request.');
+        return back()->with('error', 'Could not accept the friend request.');
     }
 
     public function decline(Request $request, $friendship_id)
@@ -98,21 +105,13 @@ public function decline(Request $request, $friendship_id)
 
         if ($friendship) {
             $friendship->delete();
-            return redirect()->route('friends.index')->with('success', 'Friend request declined!');
+            return back()->with('success', 'Friend request declined!');
         }
 
-        return redirect()->route('friends.index')->with('error', 'Could not decline the friend request.');
+        return back()->with('error', 'Could not decline the friend request.');
     }
 
     public function removeFriend(Request $request)
     {
     }
-
-    public function declineFriend(Request $request)
-    {
-    }
-
-    public function acceptFriend(Request $request)
-    {
-    }
 }

resources/css/app.css

@@ -20,3 +20,11 @@
 .navBar{
     background-color: #415A77;
 }
+
+.btn-inactive{
+    background-color: #778DA9;
+}
+
+.btn-active{
+    background-color: #1B263B;
+}

resources/views/components/navbar-friends.blade.php

@@ -0,0 +1,20 @@
+
+<div class="absolute top-0 left-0 w-full h-12 flex items-center justify-between px-4 navBar">
+    <div class="flex items-center space-x-4">
+        <a href="{{ route('friends.index') }}" class="text-white font-semibold py-1 px-3 rounded-full
+        {{ Route::currentRouteName() === 'friends.index' ? 'btn-active' : 'btn-inactive' }}">
+            Amis
+        </a>
+        <a href="{{ route('friends.pending') }}" class="text-white font-semibold py-1 px-3 rounded-full
+        {{ Route::currentRouteName() === 'friends.pending' ? 'btn-active' : 'btn-inactive' }}">
+            En attente
+        </a>
+    </div>
+    <!-- Bouton "Ajouter" aligné à droite -->
+    <div class="ml-auto">
+        <a href="{{ route('friends.create') }}" class="text-white btn-inactive font-semibold py-1 px-3 rounded-full
+            {{ Route::currentRouteName() === 'friends.create' ? 'btn-active' : 'btn-inactive' }}">
+            Ajouter
+        </a>
+    </div>
+</div>

resources/views/friendships/create.blade.php

@@ -1,28 +1,40 @@
 <x-app-layout>
-    <h1 class="text-2xl font-bold mb-4">Add a Friend</h1>
+    <x-navbar-friends />
+    <div class="pt-16 w-full max-w-md mx-auto">
+        <form action="{{ route('friends.store') }}" method="POST" class="space-y-6 dark:bg-gray-800 p-6 rounded-lg shadow-md">
+            @csrf
 
-    @if(session('success'))
-        <div class="bg-green-500 text-white p-4 rounded mb-4">
-            {{ session('success') }}
-        </div>
-    @elseif(session('error'))
-        <div class="bg-red-500 text-white p-4 rounded mb-4">
-            {{ session('error') }}
-        </div>
-    @endif
+            <div class="space-y-2">
+                <input type="text" name="name" id="name" value="{{ old('name') }}" required
+                       class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
+                       placeholder="Enter friend's username">
 
-    <form action="{{ route('friends.store') }}" method="POST" class="space-y-4">
-        @csrf
-        <div>
-            <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
-            <input type="text" name="name" id="name" required
-                   class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
-        </div>
+                @error('name')
+                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
+                @enderror
+            </div>
 
-        <div>
-            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
-                Add Friend
-            </button>
-        </div>
-    </form>
+            <div>
+                <button type="submit" class="w-full text-white py-2 navBar transition-colors duration-200">
+                    Add Friend
+                </button>
+            </div>
+
+            <!-- Affichage du message de succès ou d'erreur sous le champ de saisie -->
+            <div>
+                @if(session('success'))
+                    <p class="text-green-500 mt-1">
+                        {{ session('success') }}
+                    </p>
+                @endif
+
+                @if(session('error'))
+                    <p class="text-red-500 mt-1">
+                        {{ session('error') }}
+                    </p>
+                @endif
+            </div>
+
+        </form>
+    </div>
 </x-app-layout>

resources/views/friendships/index.blade.php

@@ -1,73 +1,40 @@
 <x-app-layout>
-    <h1 class="text-2xl font-bold mb-4">Friends List</h1>
-    <div>
-        <x-nav-link :href="route('friends.create')" :active="request()->routeIs('friends.create')">
-            Add a friend
-        </x-nav-link>
-    </div>
-    <div></div>
-
-    @if(session('error'))
-        <div class="bg-red-500 text-white p-4 rounded mb-4">
-            {{ session('error') }}
-        </div>
-    @endif
-
-    @if(session('success'))
-        <div class="bg-green-500 text-white p-4 rounded mb-4">
-            {{ session('success') }}
-        </div>
-    @endif
+    <x-navbar-friends />
 
-    @if(!$pendingRequests->isEmpty())
-    @foreach($pendingRequests as $request)
-        @if($request->user_id != Auth::id())
-        <tr class="border-b">
-            <td class="text-center px-4 py-2 border-r">
-                {{ $request->user->name }}
-            </td>
-            <td class="text-center px-4 py-2">
-                <form action="{{ route('friends.accept', $request->id) }}" method="POST" class="inline">
-                    @csrf
-                    <button type="submit" class="bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">
-                        Accept
-                    </button>
-                </form>
-                <form action="{{ route('friends.decline', $request->id) }}" method="POST" class="inline">
-                    @csrf
-                    <button type="submit" class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
-                        Decline
-                    </button>
-                </form>
-            </td>
-        </tr>
+    <!-- Décalage du contenu pour éviter la superposition avec la barre rouge -->
+    <div class="pt-10 w-full">
+        @if(session('error'))
+            <div class="bg-red-500 text-white p-4 rounded mb-4 mx-4">
+                {{ session('error') }}
+            </div>
         @endif
-    @endforeach
-    @endif
 
+        @if(session('success'))
+            <div class="bg-green-500 text-white p-4 rounded mb-4 mx-4">
+                {{ session('success') }}
+            </div>
+        @endif
 
-@if($friends->isEmpty())
-        <p class="text-gray-600">You have no friends yet.</p>
-    @else
-        <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200">
-                <thead>
-                <tr class="bg-gray-100 border-b">
-                    <th scope="col" class="text-center px-4 py-2 border-r text-sm font-medium text-gray-700">Name</th>
-                    <th scope="col" class="text-center px-4 py-2 text-sm font-medium text-gray-700">Action</th>
-                </tr>
-                </thead>
-                <tbody>
-                @foreach($friends as $friend)
-                    <tr class="border-b">
-                        <td class="text-center px-4 py-2 border-r">
-                            {{-- Affichage du nom de l'ami --}}
-                            {{ $friend->user_id == Auth::id() ? $friend->friend->name : $friend->user->name }}
-                        </td>
-                    </tr>
-                @endforeach
-                </tbody>
-            </table>
-        </div>
-    @endif
+        <!-- Liste d'amis en format ligne pleine largeur avec séparateurs -->
+        @if($friends->isEmpty())
+            <p class="text-white px-4">You have no friends yet.</p>
+        @else
+            @foreach($friends as $friend)
+                <div class="flex items-center justify-between py-4 border-b border-gray-300 w-full px-4">
+                    <span class="text-white">
+                        {{ $friend->user_id == Auth::id() ? $friend->friend->name : $friend->user->name }}
+                    </span>
+                    <div class="flex space-x-2">
+                        <!-- Boutons d'action en icônes -->
+                        <button>
+                            <img src="{{ asset('source/assets/images/message_friend_icon.png') }}" alt="Message" class="h-10 w-10">
+                        </button>
+                        <button>
+                            <img src="{{ asset('source/assets/images/delete_friend_icon.png') }}" alt="Supprimer" class="h-10 w-10">
+                        </button>
+                    </div>
+                </div>
+            @endforeach
+        @endif
+    </div>
 </x-app-layout>

resources/views/friendships/pending.blade.php

@@ -0,0 +1,43 @@
+<x-app-layout>
+    <x-navbar-friends />
+
+    <!-- Décalage du contenu pour éviter la superposition avec la barre rouge -->
+    <div class="pt-16 w-full">
+        @if(session('error'))
+            <div class="bg-red-500 text-white p-4 rounded mb-4 mx-4">
+                {{ session('error') }}
+            </div>
+        @endif
+
+        @if(session('success'))
+            <div class="bg-green-500 text-white p-4 rounded mb-4 mx-4">
+                {{ session('success') }}
+            </div>
+        @endif
+
+        <!-- Affichage des demandes en attente -->
+        @if(!$pendingRequests->isEmpty())
+            @foreach($pendingRequests as $request)
+                @if($request->user_id != Auth::id())
+                    <div class="flex items-center justify-between py-2 border-b border-gray-300 w-full px-4">
+                        <span class="text-white">{{ $request->user->name }}</span>
+                        <div class="flex space-x-2">
+                            <form action="{{ route('friends.accept', $request->id) }}" method="POST">
+                                @csrf
+                                <button type="submit">
+                                    <img src="{{ asset('source/assets/images/accept_icon.png') }}" alt="Accepter" class="h-10 w-10">
+                                </button>
+                            </form>
+                            <form action="{{ route('friends.decline', $request->id) }}" method="POST">
+                                @csrf
+                                <button type="submit">
+                                    <img src="{{ asset('source/assets/images/decline_icon.png') }}" alt="Refuser" class="h-10 w-10">
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                @endif
+            @endforeach
+        @endif
+    </div>
+</x-app-layout>