forked from RiseUP/riseup-squad23
mudanças2
This commit is contained in:
parent
3833764438
commit
97840ebed4
@ -1,206 +1,107 @@
|
|||||||
// src/pages/ProfilePage.jsx
|
// src/pages/ProfilePage.jsx
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from "react";
|
||||||
import { useLocation, useNavigate } from 'react-router-dom';
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
// import { useAuth } from '../components/utils/AuthProvider'; // <-- NOVO: Se você puder importar isso.
|
import "./style/ProfilePage.css";
|
||||||
|
|
||||||
// --- SIMULAÇÃO DE DADOS DE USUÁRIO ---
|
|
||||||
// COMO NÃO PODEMOS IMPORTAR O useAuth SEM MEXER EM OUTROS ARQUIVOS, VAMOS USAR ESTA SIMULAÇÃO:
|
|
||||||
const simulatedUserData = {
|
const simulatedUserData = {
|
||||||
// ESTA SIMULAÇÃO DEVERIA SER SUBTITUÍDA PELO SEU CONTEXTO DE AUTENTICAÇÃO REAL.
|
email: "admin@squad23.com",
|
||||||
// O EMAIL REALMENTE LOGADO VEM DO CONTEXTO DE AUTENTICAÇÃO (useAuth)
|
role: "Administrador",
|
||||||
email: 'admin@squad23.com',
|
|
||||||
role: 'Administrador' // Vamos forçar um valor para fins de visualização
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const ProfilePage = () => {
|
const ProfilePage = () => {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
// const { user } = useAuth(); // Descomente esta linha e comente o bloco simulatedUserData se puder usar o useAuth!
|
|
||||||
|
|
||||||
// --- Lógica de Cargo (AGORA CORRIGIDA PARA PEGAR DA URL SE O CONTEXTO FALHAR) ---
|
|
||||||
const getRoleFromPath = () => {
|
const getRoleFromPath = () => {
|
||||||
const path = location.pathname;
|
const path = location.pathname;
|
||||||
if (path.includes('/admin')) return 'Administrador';
|
if (path.includes("/admin")) return "Administrador";
|
||||||
if (path.includes('/secretaria')) return 'Secretária';
|
if (path.includes("/secretaria")) return "Secretária";
|
||||||
if (path.includes('/medico')) return 'Médico';
|
if (path.includes("/medico")) return "Médico";
|
||||||
if (path.includes('/financeiro')) return 'Financeiro';
|
if (path.includes("/financeiro")) return "Financeiro";
|
||||||
return 'Usuário Padrão';
|
return "Usuário Padrão";
|
||||||
};
|
};
|
||||||
|
|
||||||
// Use a simulação ou o dado real:
|
|
||||||
const userRole = simulatedUserData.role || getRoleFromPath();
|
const userRole = simulatedUserData.role || getRoleFromPath();
|
||||||
const userEmail = simulatedUserData.email || 'email.nao.encontrado@mediconnect.com';
|
const userEmail = simulatedUserData.email || "email.nao.encontrado@example.com";
|
||||||
|
|
||||||
// --- Estados do Componente ---
|
const [userName, setUserName] = useState("Admin Padrão");
|
||||||
|
|
||||||
// Se o nome do usuário vier do contexto de autenticação, use-o aqui
|
|
||||||
const [userName, setUserName] = useState('Admin Padrão');
|
|
||||||
const [isEditingName, setIsEditingName] = useState(false);
|
const [isEditingName, setIsEditingName] = useState(false);
|
||||||
|
|
||||||
// --- Funções de Interação ---
|
const handleNameKeyDown = (e) => {
|
||||||
|
if (e.key === "Enter") setIsEditingName(false);
|
||||||
const handleNameChange = (e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
setIsEditingName(false);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => navigate(-1);
|
||||||
navigate(-1); // Volta para a página anterior
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={styles.overlay}>
|
<div className="profile-overlay" role="dialog" aria-modal="true">
|
||||||
<div style={styles.modalContainer}>
|
<div className="profile-modal">
|
||||||
|
<button
|
||||||
{/* Botão de Fechar (X) */}
|
className="profile-close"
|
||||||
<button onClick={handleClose} style={styles.closeButton} aria-label="Fechar Perfil">
|
onClick={handleClose}
|
||||||
×
|
aria-label="Fechar Perfil"
|
||||||
|
>
|
||||||
|
×
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* 1. Área da Foto de Perfil (Quadrada) */}
|
<div className="profile-content">
|
||||||
<div style={styles.profilePictureContainer}>
|
<div className="profile-left">
|
||||||
<div style={styles.profilePicturePlaceholder}></div>
|
<div className="avatar-wrapper">
|
||||||
|
<div className="avatar-square" />
|
||||||
|
<button
|
||||||
|
className="avatar-edit-btn"
|
||||||
|
title="Editar foto"
|
||||||
|
aria-label="Editar foto"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
✏️
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={styles.infoContainer}>
|
<div className="profile-right">
|
||||||
|
<div className="profile-name-row">
|
||||||
{/* 2. Nome do Usuário com Edição */}
|
|
||||||
<div style={styles.nameSection}>
|
|
||||||
{isEditingName ? (
|
{isEditingName ? (
|
||||||
<input
|
<input
|
||||||
type="text"
|
className="profile-name-input"
|
||||||
value={userName}
|
value={userName}
|
||||||
onChange={(e) => setUserName(e.target.value)}
|
onChange={(e) => setUserName(e.target.value)}
|
||||||
onBlur={() => setIsEditingName(false)}
|
onBlur={() => setIsEditingName(false)}
|
||||||
onKeyPress={handleNameChange}
|
onKeyDown={handleNameKeyDown}
|
||||||
autoFocus
|
autoFocus
|
||||||
style={styles.nameInput}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<h2 style={styles.userName}>{userName}</h2>
|
<h2 className="profile-username">{userName}</h2>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
className="profile-edit-inline"
|
||||||
onClick={() => setIsEditingName(!isEditingName)}
|
onClick={() => setIsEditingName(!isEditingName)}
|
||||||
style={styles.editButton}
|
aria-label="Editar nome"
|
||||||
aria-label="Editar Nome"
|
type="button"
|
||||||
>
|
>
|
||||||
<span role="img" aria-label="lapis">✏️</span>
|
✏️
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 3. Email (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */}
|
<p className="profile-email">
|
||||||
<p style={styles.emailText}>Email: <strong>{userEmail}</strong></p>
|
Email: <strong>{userEmail}</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
{/* 4. Cargo (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */}
|
<p className="profile-role">
|
||||||
<p style={styles.roleText}>Cargo: <strong>{userRole}</strong></p>
|
Cargo: <strong>{userRole}</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="profile-actions-row">
|
||||||
|
<button className="btn btn-close" onClick={handleClose}>
|
||||||
|
Fechar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Estilos Atualizados para Aumentar o Tamanho do Modal
|
|
||||||
const styles = {
|
|
||||||
overlay: {
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
zIndex: 1100,
|
|
||||||
},
|
|
||||||
modalContainer: {
|
|
||||||
position: 'relative',
|
|
||||||
padding: '50px 70px', // Aumentado o padding
|
|
||||||
backgroundColor: 'white',
|
|
||||||
borderRadius: '15px',
|
|
||||||
boxShadow: '0 8px 30px rgba(0, 0, 0, 0.3)',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
minWidth: '400px',
|
|
||||||
width: '60%', // Aumentando a largura para cobrir mais a tela
|
|
||||||
maxWidth: '500px', // Limite máximo para não ficar gigante em telas grandes
|
|
||||||
height: 'auto',
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
position: 'absolute',
|
|
||||||
top: '15px',
|
|
||||||
right: '20px',
|
|
||||||
background: 'none',
|
|
||||||
border: 'none',
|
|
||||||
fontSize: '30px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: '#666',
|
|
||||||
lineHeight: '1',
|
|
||||||
},
|
|
||||||
// ... (Os estilos de profilePictureContainer, infoContainer, etc., permanecem iguais)
|
|
||||||
profilePictureContainer: {
|
|
||||||
width: '120px',
|
|
||||||
height: '120px',
|
|
||||||
borderRadius: '15px',
|
|
||||||
overflow: 'hidden',
|
|
||||||
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.15)',
|
|
||||||
marginBottom: '20px',
|
|
||||||
},
|
|
||||||
profilePicturePlaceholder: {
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
backgroundColor: '#A9A9A9',
|
|
||||||
backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23FFFFFF" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3c0 16.7 13.5 30.2 30.2 30.2h387.6c16.7 0 30.2-13.5 30.2-30.2 0-98.5-79.8-178.3-178.3-178.3h-45.7z"/></svg>\')',
|
|
||||||
backgroundSize: '80%',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
},
|
|
||||||
infoContainer: {
|
|
||||||
textAlign: 'center',
|
|
||||||
maxWidth: '400px',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
nameSection: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
marginBottom: '10px',
|
|
||||||
},
|
|
||||||
userName: {
|
|
||||||
margin: '0 5px 0 0',
|
|
||||||
fontSize: '1.8rem',
|
|
||||||
color: '#333',
|
|
||||||
},
|
|
||||||
nameInput: {
|
|
||||||
fontSize: '1.8rem',
|
|
||||||
padding: '5px',
|
|
||||||
border: '1px solid #ccc',
|
|
||||||
borderRadius: '5px',
|
|
||||||
textAlign: 'center',
|
|
||||||
marginRight: '5px',
|
|
||||||
},
|
|
||||||
editButton: {
|
|
||||||
background: 'none',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: '1.2rem',
|
|
||||||
marginLeft: '5px',
|
|
||||||
},
|
|
||||||
emailText: {
|
|
||||||
fontSize: '1rem',
|
|
||||||
color: '#666',
|
|
||||||
margin: '5px 0',
|
|
||||||
},
|
|
||||||
roleText: {
|
|
||||||
fontSize: '1.1rem',
|
|
||||||
color: '#333',
|
|
||||||
marginTop: '15px',
|
|
||||||
paddingTop: '10px',
|
|
||||||
borderTop: '1px solid #eee',
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProfilePage;
|
export default ProfilePage;
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
/* src/pages/ProfilePage.css */
|
||||||
|
|
||||||
|
/* Overlay que cobre toda a tela */
|
||||||
|
.profile-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.65);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 20000; /* acima de header, vlibras, botões de acessibilidade */
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card central (estilo modal amplo parecido com a 4ª foto) */
|
||||||
|
.profile-modal {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 18px;
|
||||||
|
width: min(1100px, 96%);
|
||||||
|
max-width: 1100px;
|
||||||
|
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Botão fechar (X) no canto do card */
|
||||||
|
.profile-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 14px;
|
||||||
|
right: 14px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Conteúdo dividido em 2 colunas: esquerda avatar / direita infos */
|
||||||
|
.profile-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 28px;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 22px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coluna esquerda - avatar */
|
||||||
|
.profile-left {
|
||||||
|
width: 220px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Avatar quadrado com sombra (estilo da foto 4) */
|
||||||
|
.avatar-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-square {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #d0d0d0;
|
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23FFFFFF' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3c0 16.7 13.5 30.2 30.2 30.2h387.6c16.7 0 30.2-13.5 30.2-30.2 0-98.5-79.8-178.3-178.3-178.3h-45.7z'/></svg>");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 55%;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Botão editar sobre o avatar — círculo pequeno */
|
||||||
|
.avatar-edit-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: -8px;
|
||||||
|
bottom: -8px;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
border: none;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 8px 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coluna direita - informações */
|
||||||
|
.profile-right {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 280px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nome e botão de editar inline */
|
||||||
|
.profile-name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-username {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.9rem;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-edit-inline {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* input de edição do nome */
|
||||||
|
.profile-name-input {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* email/role */
|
||||||
|
.profile-email,
|
||||||
|
.profile-role {
|
||||||
|
margin: 6px 0;
|
||||||
|
color: #555;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-role {
|
||||||
|
margin-top: 14px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid #f1f1f1;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ações (apenas fechar aqui) */
|
||||||
|
.profile-actions-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* botões */
|
||||||
|
.btn {
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close {
|
||||||
|
background: #f0f0f0;
|
||||||
|
color: #222;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsividade */
|
||||||
|
@media (max-width: 880px) {
|
||||||
|
.profile-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.profile-left { width: 100%; }
|
||||||
|
.avatar-wrapper { width: 140px; height: 140px; }
|
||||||
|
.profile-right { width: 100%; text-align: center; }
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user