Ajout des profileCard dans la page de message
This commit is contained in:
Bilal Dieumegard
parent
b1d3cbd786
commit
50f19e0d64
4 changed files with 103 additions and 33 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}`}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue