fix: foto perfil url

This commit is contained in:
2025-11-12 14:26:51 -03:00
parent 87b59af8da
commit 553fc578a6
5 changed files with 972 additions and 1114 deletions

View File

@@ -9,6 +9,7 @@
import { generateAvatarGallery } from '$lib/utils/avatars';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import { X, Calendar } from 'lucide-svelte';
import type { FunctionReturnType } from 'convex/server';
const client = useConvexClient();
const currentUser = useQuery(api.auth.getCurrentUser, {});
@@ -28,11 +29,6 @@
let avatarSelecionado = $state<string>('');
let mostrarBotaoCamera = $state(false);
// Estados locais para atualização imediata
let fotoPerfilLocal = $state<string | null>(null);
let avatarLocal = $state<string | null>(null);
let perfilCarregado = $state(false);
// Estados para Minhas Férias
let mostrarWizard = $state(false);
let filtroStatusFerias = $state<string>('todos');
@@ -47,29 +43,6 @@
// Galeria de avatares (30 avatares profissionais 3D realistas)
const avatarGallery = generateAvatarGallery(30);
// Carregar perfil ao montar a página para garantir dados atualizados (apenas uma vez)
$effect(() => {
if (currentUser?.data && !perfilCarregado) {
perfilCarregado = true;
}
});
// Sincronizar com currentUser - atualiza automaticamente quando o usuário muda
$effect(() => {
const usuario = currentUser?.data;
if (usuario) {
// Atualizar foto de perfil (pode ser null ou string)
fotoPerfilLocal = usuario.fotoPerfil ?? null;
// Atualizar avatar (pode ser undefined ou string)
avatarLocal = usuario.avatar ?? null;
} else {
// Se não há usuário, limpar estados locais
fotoPerfilLocal = null;
avatarLocal = null;
perfilCarregado = false; // Reset para permitir recarregar quando houver usuário novamente
}
});
// FuncionarioId disponível diretamente do usuário atual
const funcionarioIdDisponivel = $derived(currentUser?.data?.funcionarioId ?? null);
@@ -238,14 +211,6 @@
erroUpload = '';
try {
// 1. Criar preview local IMEDIATAMENTE para feedback visual
const reader = new FileReader();
reader.onload = (e) => {
fotoPerfilLocal = e.target?.result as string;
avatarLocal = null;
};
reader.readAsDataURL(file);
// 2. Gerar URL de upload
const uploadUrl = await client.mutation(api.usuarios.uploadFotoPerfil, {});
@@ -271,12 +236,6 @@
// 5. Aguardar um pouco para garantir que o backend processou
await new Promise((resolve) => setTimeout(resolve, 300));
// 6. Atualizar localmente com a URL retornada pelo backend (ou pelo currentUser)
if (currentUser?.data?.fotoPerfil) {
fotoPerfilLocal = currentUser.data.fotoPerfil;
avatarLocal = null;
}
// 8. Limpar o input para permitir novo upload
input.value = '';
@@ -299,12 +258,8 @@
} catch (e: unknown) {
const errorMessage = e instanceof Error ? e.message : String(e);
erroUpload = errorMessage || 'Erro ao fazer upload da foto';
// Reverter mudança local se houver erro
fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
avatarLocal = currentUser?.data?.avatar || null;
} finally {
uploadandoFoto = false;
}
uploadandoFoto = false;
}
async function handleSelecionarAvatar(avatarUrl: string) {
@@ -312,25 +267,12 @@
erroUpload = '';
try {
// 1. Atualizar localmente IMEDIATAMENTE para feedback visual instantâneo
avatarLocal = avatarUrl;
fotoPerfilLocal = null;
// 2. Salvar avatar selecionado no backend
await client.mutation(api.usuarios.atualizarPerfil, {
avatar: avatarUrl,
fotoPerfil: undefined // Remove foto se colocar avatar
});
// 3. Aguardar um pouco para garantir que o backend processou
await new Promise((resolve) => setTimeout(resolve, 300));
// 4. Garantir que os estados locais estão sincronizados com o usuário atual
if (currentUser?.data?.avatar) {
avatarLocal = currentUser.data.avatar;
fotoPerfilLocal = null;
}
// 6. Fechar modal após sucesso
mostrarModalFoto = false;
@@ -350,9 +292,6 @@
} catch (e: unknown) {
const errorMessage = e instanceof Error ? e.message : String(e);
erroUpload = errorMessage || 'Erro ao salvar avatar';
// Reverter mudança local se houver erro
avatarLocal = currentUser?.data?.avatar || null;
fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
} finally {
uploadandoFoto = false;
}
@@ -391,6 +330,7 @@
onmouseenter={() => (mostrarBotaoCamera = true)}
onmouseleave={() => (mostrarBotaoCamera = false)}
>
s
<button
type="button"
class="avatar cursor-pointer border-0 bg-transparent p-0"
@@ -399,10 +339,14 @@
<div
class="animate-float h-40 w-40 rounded-full shadow-2xl ring-4 ring-white ring-offset-4 ring-offset-transparent transition-all duration-300 hover:scale-105 hover:ring-8"
>
{#if fotoPerfilLocal}
<img src={fotoPerfilLocal} alt="Foto de perfil" class="object-cover" />
{:else if avatarLocal}
<img src={avatarLocal} alt="Avatar" class="object-cover" />
{#if currentUser.data?.fotoPerfilUrl}
<img
src={currentUser.data.fotoPerfilUrl}
alt="Foto de perfil"
class="object-cover"
/>
{:else if currentUser.data?.avatar}
<img src={currentUser.data.avatar} alt="Avatar" class="object-cover" />
{:else}
<div class="flex items-center justify-center bg-white text-purple-700">
<span class="text-5xl font-black"
@@ -2038,10 +1982,10 @@
<div
class="ring-primary ring-offset-base-100 h-32 w-32 rounded-full shadow-2xl ring-4 ring-offset-4"
>
{#if fotoPerfilLocal}
<img src={fotoPerfilLocal} alt="Foto atual" class="object-cover" />
{:else if avatarLocal}
<img src={avatarLocal} alt="Avatar atual" class="object-cover" />
{#if currentUser.data?.fotoPerfilUrl}
<img src={currentUser.data.fotoPerfilUrl} alt="Foto atual" class="object-cover" />
{:else if currentUser.data?.avatar}
<img src={currentUser.data.avatar} alt="Avatar atual" class="object-cover" />
{:else}
<div class="bg-primary text-primary-content flex items-center justify-center">
<span class="text-4xl font-bold"