From 50f19e0d64ffe08bac4c6c58f6358945239eed11 Mon Sep 17 00:00:00 2001
From: Bilal Dieumegard <bilal.dieumegard@gmail.com>
Date: Mon, 16 Dec 2024 14:27:10 +0100
Subject: [PATCH] Ajout des profileCard dans la page de message

---
 src/lib/components/ui/ProfileCard.svelte | 102 ++++++++++++++++-------
 src/lib/components/ui/UserChat.svelte    |   7 +-
 src/routes/chats/+page.svelte            |   2 +-
 src/routes/chats/[id]/+page.svelte       |  25 +++++-
 4 files changed, 103 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/ui/ProfileCard.svelte b/src/lib/components/ui/ProfileCard.svelte
index 3794768..385e251 100644
--- a/src/lib/components/ui/ProfileCard.svelte
+++ b/src/lib/components/ui/ProfileCard.svelte
@@ -1,22 +1,15 @@
 <script>
-	import Button  from '$lib/components/ui/button/button.svelte';
+	import Button from '$lib/components/ui/button/button.svelte';
 
 	export let user;
-	export let userId;
+	export let userSessionId;
 	export let show = false; // Contrôle si la carte est visible
 	export let onClose = () => {}; // Fonction pour fermer la carte
 
-
 	const disconnect = async () => {
 		try {
-			// Envoyer une requête POST à l'endpoint /disconnect
-			const response = await fetch('/disconnect', {
-				method: 'POST',
-			});
-
-			// Vérifier si la déconnexion a réussi (ici, on se base sur le code de redirection)
+			const response = await fetch('/disconnect', { method: 'POST' });
 			if (response.redirected) {
-				// Si la redirection est effectuée, vous pouvez rediriger manuellement côté client
 				window.location.href = response.url;
 			}
 		} catch (error) {
@@ -32,21 +25,31 @@
 {#if show}
 	<div class="overlay" role="dialog" aria-labelledby="profile-card-title" on:click={onClose}>
 		<div class="profile-card flex flex-col gap-5" on:click|stopPropagation>
-			<div class="flex flex-col gap-2">
-				<div class="profile-header">
-					<!-- Image de profil -->
-					<img src="http://localhost:5173/{user.profilePicture}" alt="Profile" class="profile-image" />
-					<h2 id="profile-card-title" class="profile-name">{user.username}</h2>
+			<div class="profile-header">
+				<img src="http://localhost:5173/{user.profilePicture}" alt="Profile" class="profile-image" />
+				<h2 id="profile-card-title" class="profile-name">{user.username}</h2>
+			</div>
+			<div class="profile-info">
+				<div class="info-row">
+					<span class="info-label">Nom :</span>
+					<span class="info-value">{user.surname}</span>
+				</div>
+				<div class="info-row">
+					<span class="info-label">Prénom :</span>
+					<span class="info-value">{user.name}</span>
+				</div>
+				<div class="info-row">
+					<span class="info-label">Email :</span>
+					<span class="info-value">{user.email}</span>
 				</div>
-				<p>{user.name} {user.surname}</p>
-				<p>{user.email}</p>
-			</div>
-
-			<div class="flex flex-col gap-3">
-				<Button on:click={editProfile}>Editer</Button>
-				<Button on:click={disconnect} variant="destructive">Déconnexion</Button>
 			</div>
 
+			{#if user.id === userSessionId}
+				<div class="actions">
+					<Button on:click={editProfile}>Éditer</Button>
+					<Button on:click={disconnect} variant="destructive">Déconnexion</Button>
+				</div>
+			{/if}
 		</div>
 	</div>
 {/if}
@@ -58,7 +61,7 @@
         left: 0;
         width: 100vw;
         height: 100vh;
-        background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec opacité */
+        background-color: rgba(0, 0, 0, 0.7);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -70,14 +73,14 @@
         padding: 30px;
         border-radius: 15px;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
-        text-align: center;
-        width: 400px; /* Taille de la carte ajustée */
-        max-width: 90%; /* Limite la largeur */
+        text-align: left;
+        width: 400px;
+        max-width: 90%;
     }
 
     .profile-header {
         display: flex;
-        justify-content: left;
+        justify-content: flex-start;
         align-items: center;
         margin-bottom: 20px;
     }
@@ -85,13 +88,52 @@
     .profile-image {
         width: 80px;
         height: 80px;
-        border-radius: 50%; /* Rendre l'image ronde */
-        object-fit: cover; /* Pour que l'image remplisse bien le cercle */
+        border-radius: 50%;
+        object-fit: cover;
         margin-right: 15px;
     }
 
     .profile-name {
-        font-size: 1.5rem;
+        font-size: 1.8rem;
         font-weight: bold;
+        color: #333;
+    }
+
+    .profile-info {
+        margin: 20px 0;
+        padding: 15px;
+        background-color: #f9f9f9;
+        border-radius: 10px;
+    }
+
+    .info-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 0;
+        border-bottom: 1px solid #eaeaea;
+    }
+
+    .info-row:last-child {
+        border-bottom: none;
+    }
+
+    .info-label {
+        font-weight: 600;
+        color: #555;
+        font-size: 0.9rem;
+    }
+
+    .info-value {
+        font-weight: 400;
+        color: #333;
+        font-size: 0.95rem;
+    }
+
+    .actions {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 15px;
     }
 </style>
diff --git a/src/lib/components/ui/UserChat.svelte b/src/lib/components/ui/UserChat.svelte
index 63e4735..27bf7d4 100644
--- a/src/lib/components/ui/UserChat.svelte
+++ b/src/lib/components/ui/UserChat.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
 	export let user;
+
+	export let openProfileCard = () => {};
 </script>
 
-<div class="flex items-center gap-4 justify-between p-3 cursor-pointer hover:bg-gray-100 rounded-lg border border-gray-300 shadow-sm">
+<div
+	class="flex items-center gap-4 justify-between p-3 cursor-pointer hover:bg-gray-100 rounded-lg border border-gray-300 shadow-sm"
+	on:click={openProfileCard}
+>
 	<div class="flex items-center gap-4">
 		<img
 			src={`http://localhost:5173/${user.profilePicture}`}
diff --git a/src/routes/chats/+page.svelte b/src/routes/chats/+page.svelte
index 2573938..eb06a54 100644
--- a/src/routes/chats/+page.svelte
+++ b/src/routes/chats/+page.svelte
@@ -108,7 +108,7 @@
 
 </div>
 <CreateChat show={showCreateChat} socket={socket} onClose={closeCreateChat} listRef={chatListRef} />
-<ProfileCard user={data.user} userId={data.userId} show={showProfileCard} onClose={closeProfileCard} />
+<ProfileCard user={data.user} userSessionId={data.userId} show={showProfileCard} onClose={closeProfileCard} />
 
 <style>
     .h-full {
diff --git a/src/routes/chats/[id]/+page.svelte b/src/routes/chats/[id]/+page.svelte
index 51e032d..21dd724 100644
--- a/src/routes/chats/[id]/+page.svelte
+++ b/src/routes/chats/[id]/+page.svelte
@@ -8,6 +8,7 @@
     import { initSocket } from '$lib/stores/socket';
     import { ArrowLeft } from 'lucide-svelte';
     import { messagesStore } from '$lib/stores/messagesStore';
+    import ProfileCard from '$lib/components/ui/ProfileCard.svelte';
 
     export let data;
 
@@ -22,6 +23,25 @@
     let messageText = '';
 
     let activeProfileId = null;
+    let userChatSelected = {
+        id: '',
+        username: '',
+        name: '',
+        surname: '',
+        email: '',
+        profilePicture: '',
+        state: '',
+    };
+    let showProfileCard = false;
+
+    function openProfileCard(user) {
+        userChatSelected = user;
+        showProfileCard = true;
+    }
+
+    function closeProfileCard() {
+        showProfileCard = false;
+    }
 
     function setActiveProfile(id) {
         activeProfileId = id;
@@ -201,7 +221,7 @@
 
     messagesStore.subscribe(async () => {
         await tick();
-        await scrollToBottom();
+        await scrollToBottom(); // Scroll to the bottom after the message is added
     });
 
     onMount(async () => {
@@ -222,6 +242,7 @@
             {#each users as u (u.id)}
                 <UserChat
                   user={u}
+                  openProfileCard={() => openProfileCard(u)}
                 />
             {/each}
         </div>
@@ -268,6 +289,8 @@
     </div>
 </div>
 
+<ProfileCard user={userChatSelected} userSessionId={data.userId} show={showProfileCard} onClose={closeProfileCard}></ProfileCard>
+
 <style>
     .h-full {
         height: 100%;