Skip to content

Commit

Permalink
Display dynamically profile pictures and discussion pictures
Browse files Browse the repository at this point in the history
  • Loading branch information
@max15015
max15015 committed Nov 24, 2024
1 parent 614d917 commit 178e37a
Show file tree
Hide file tree
Showing 9 changed files with 85 additions and 41 deletions.
31 changes: 24 additions & 7 deletions app/Http/Controllers/ChatController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,30 @@ class ChatController extends Controller
public function index()
{
$discussions = auth()->user()->chats()
->with([
'messages' => function ($query) {
$query->latest()->limit(1);
}
])
->latest()
->get();
->with(['messages' => function ($query) {
$query->latest()->limit(1);
}, 'members']) // Assure-toi que la relation members est chargée
->latest()
->get()
->map(function ($discussion) {
// Vérifie si la discussion est un chat individuel (2 membres)
if ($discussion->members->count() == 2) {
// Détermine l'image en fonction des membres
$otherMember = $discussion->members->first()->id == auth()->id()
? $discussion->members->skip(1)->first()
: $discussion->members->first();

// Ajoute l'image sélectionnée comme propriété de la discussion
$discussion->discussionPicture = $otherMember->image
? asset('storage/' . $otherMember->image)
: asset('source/assets/avatar/avatar.png');
} else {
// Utilise une image par défaut pour les groupes
$discussion->discussionPicture = asset('source/assets/images/group.png');
}

return $discussion;
});

// Récupérer les amis acceptés
$friends = Friendship::where(function ($query) {
Expand Down
5 changes: 5 additions & 0 deletions app/Models/Chat.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ public function users()
return $this->belongsToMany(User::class, 'user_chat');
}

public function members()
{
return $this->users();
}

/**
* Messages in the chat
*
Expand Down
Binary file added public/source/assets/images/group.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 25 additions & 15 deletions resources/views/components/messaging/discussion-sidebar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,48 @@
Discussions
</div>
<div>
<button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-chat-modal')" class="flex items-center justify-center">
<button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-chat-modal')"
class="flex items-center justify-center">
<img src="{{ asset('source/assets/images/add.png') }}" alt="Add button" class="h-6 w-6">
</button>

<x-modal name="create-chat-modal" focusable>
<form method="post" action="{{ route('chats.store') }}" class="p-6" x-data="chatForm()" x-on:submit.prevent="validateForm">
<form method="post" action="{{ route('chats.store') }}" class="p-6" x-data="chatForm()"
x-on:submit.prevent="validateForm">
@csrf

<!-- Champ pour le nom du chat -->
<div class="mb-4">
<x-input-label for="chat-name" value="Nom de la discussion" />
<x-text-input id="chat-name" name="chat_name" type="text" class="block w-full mt-1" required x-model="chatName" />
<p x-show="errors.chatName" class="text-red-500 text-sm mt-1">Le nom de la discussion est requis.</p>
<x-text-input id="chat-name" name="chat_name" type="text" class="block w-full mt-1"
required x-model="chatName" />
<p x-show="errors.chatName" class="text-red-500 text-sm mt-1">Le nom de la discussion
est requis.</p>
</div>

<!-- Liste des amis avec des cases à cocher -->
<div class="mb-4">
<p class="font-medium text-white">Sélectionnez le/les amis à ajouter à la discussion</p>
<div class="mt-2 overflow-y-auto max-h-48 scrollbar-hide rounded p-2">
@foreach($friends as $friend)
<div class="flex items-center justify-between mb-2 p-2 rounded hover:bg-gray-700 transition-colors">
@foreach ($friends as $friend)
<div
class="flex items-center justify-between mb-2 p-2 rounded hover:bg-gray-700 transition-colors">
<div class="flex items-center">
<img src="{{ asset('source/assets/images/profile.png') }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@if ($friend->image)
<img src="{{ asset('storage/' . $friend->image) }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@else
<img src="{{ asset('source/assets/avatar/avatar.png') }}"
alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@endif
<span class="text-white font-medium">{{ $friend->name }}</span>
</div>
<input type="checkbox" name="friends[]" value="{{ $friend->id }}" class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray-500" x-model="selectedFriends">
<input type="checkbox" name="friends[]" value="{{ $friend->id }}"
class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray-500"
x-model="selectedFriends">
</div>
@endforeach
<p x-show="errors.friends" class="text-red-500 text-sm mt-1">Sélectionnez au moins un ami.</p>
<p x-show="errors.friends" class="text-red-500 text-sm mt-1">Sélectionnez au moins
un ami.</p>
</div>
</div>

<!-- Boutons d'action -->
<div class="mt-6 flex justify-end">
<x-secondary-button x-on:click="$dispatch('close')">
Expand All @@ -54,9 +64,9 @@
</li>
@foreach ($discussions as $discussion)
<li class="flex items-center p-2 border-b border-black overflow-hidden mr-2 cursor-pointer"
onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', {{ true }})">
<img src="{{ asset('source/assets/images/profile.png') }}" alt="Avatar"
class="w-10 h-10 rounded-full mr-3 flex-shrink-0"> <!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', '{{ $discussion->discussionPicture }}', {{ true }})">
<img src="{{ $discussion->discussionPicture }}" alt="Avatar" class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
<!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
<div class="flex-1">
<div class="font-bold">{{ $discussion->name }}</div>
<div class="text-sm text-gray-400 whitespace-nowrap">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/messaging/header.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="flex background-app border-b border-black h-12 items-center justify-start p-4 gap-x-4">
<img src="source/assets/images/profile.png" alt="Profile Photo" class="w-10 h-10 rounded-full">
<span class="text-white font-semibold headerTitle">Eddy</span>
<img src="" alt="Discussion Picture" class="w-10 h-10 rounded-full headerImage">
<span class="text-white font-semibold headerTitle"></span>
</div>
7 changes: 5 additions & 2 deletions resources/views/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
let isLoading = false; // Flag pour éviter les chargements simultanés
// Fonction pour charger la discussion
function loadChat(chatId, discussionName, newOpening = true) {
function loadChat(chatId, discussionName, discussionPicture, newOpening = true) {
if (isLoading) return; // Empêcher les requêtes simultanées
isLoading = true;
Expand All @@ -39,6 +39,9 @@ function loadChat(chatId, discussionName, newOpening = true) {
if (newOpening) {
const headerTitle = document.querySelector('.headerTitle');
if (headerTitle) headerTitle.textContent = discussionName;
const headerImage = document.querySelector('.headerImage');
if(headerImage) headerImage.src = discussionPicture;
}
fetch(`/chat/${chatId}/messages`, {
Expand Down Expand Up @@ -122,7 +125,7 @@ function loadChat(chatId, discussionName, newOpening = true) {
function startAutoRefresh(intervalTime = 3000) {
if (interval) clearInterval(interval);
interval = setInterval(() => {
if (currentChatId) loadChat(currentChatId, null, false);
if (currentChatId) loadChat(currentChatId, null, null, false);
}, intervalTime);
}
Expand Down
2 changes: 1 addition & 1 deletion resources/views/friendships/create.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<x-app-layout>
<x-friendships.navbar-friends />
<div class="pt-10 w-full max-w-md mx-auto">
<div class="mt-4 pt-10 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

Expand Down
35 changes: 22 additions & 13 deletions resources/views/friendships/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,44 @@
<x-friendships.navbar-friends />

<!-- Décalage du contenu pour éviter la superposition avec la barre rouge -->
<div class="pt-10 w-full">
@if(session('error'))
<div class="mt-4 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

@if(session('success'))
@if (session('success'))
<div class="bg-green-500 text-white p-4 rounded mb-4 mx-4">
{{ session('success') }}
</div>
@endif

<!-- Liste d'amis en format ligne pleine largeur avec séparateurs -->
@if($friends->isEmpty())
@if ($friends->isEmpty())
<p class="text-white px-4">You have no friends yet.</p>
@else
@foreach($friends as $friend)
@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 items-center">
@php
$image = $friend->user_id == Auth::id() ? $friend->friend->image : $friend->user->image;
@endphp
@if ($image)
<img src="{{ asset('storage/' . $image) }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@else
<img src="{{ asset('source/assets/avatar/avatar.png') }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@endif

<span class="text-white">
{{ $friend->user_id == Auth::id() ? $friend->friend->name : $friend->user->name }}
</span>
</div>

<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">
<img src="{{ asset('source/assets/images/delete_friend_icon.png') }}" alt="Supprimer"
class="h-10 w-10">
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/friendships/pending.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<x-friendships.navbar-friends />

<!-- Décalage du contenu pour éviter la superposition avec la barre rouge -->
<div class="pt-10 w-full">
<div class="mt-4 pt-10 w-full">
@if(session('error'))
<div class="bg-red-500 text-white p-4 rounded mb-4 mx-4">
{{ session('error') }}
Expand Down

0 comments on commit 178e37a

Please sign in to comment.