Files
minix-front/src/lib/components/TablaUsuarios.svelte

76 lines
2.4 KiB
Svelte

<script lang="ts">
import TableBody from '@/components/ui/table/table-body.svelte';
import TableCell from '@/components/ui/table/table-cell.svelte';
import TableHead from '@/components/ui/table/table-head.svelte';
import TableHeader from '@/components/ui/table/table-header.svelte';
import TableRow from '@/components/ui/table/table-row.svelte';
import Table from '@/components/ui/table/table.svelte';
import type { UserResponseDto } from '../../types';
import Button from './ui/button/button.svelte';
import KeyIcon from '@lucide/svelte/icons/key';
import { Tooltip } from './ui/tooltip';
import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
import TooltipContent from './ui/tooltip/tooltip-content.svelte';
import RecuperarContraseña from './admin/RecuperarContraseña.svelte';
import { Dialog } from './ui/dialog';
import DialogContent from './ui/dialog/dialog-content.svelte';
interface Props {
usuarios: UserResponseDto[];
}
let { usuarios }: Props = $props();
let open = $state(false);
//si ponia contraseña en español quedaba muy largo el nombre
let usuarioCambioPass: UserResponseDto | null = $state(null);
$effect(() => {
if (!open) {
usuarioCambioPass = null;
}
});
function handleCambiarContraseña(usuario: UserResponseDto) {
open = true;
usuarioCambioPass = usuario;
}
</script>
<!-- {$inspect(usuarios)} -->
<Table>
<TableHeader>
<TableRow>
<TableHead>Usuario</TableHead>
<TableHead>Nombre</TableHead>
<TableHead>Cantidad de posts</TableHead>
<TableHead>Fecha de Creacion</TableHead>
<TableHead>Acciones</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#each usuarios as usuario}
<TableRow>
<TableCell>@{usuario.username}</TableCell>
<TableCell>{usuario.displayName}</TableCell>
<TableCell class="text-center">{usuario.postsCount}</TableCell>
<TableCell>{usuario.createdAt.replace('Z', ' ').replace('T', ' | ')}</TableCell>
<TableCell class="flex gap-2">
<Tooltip>
<TooltipTrigger>
<Button onclick={() => handleCambiarContraseña(usuario)}><KeyIcon></KeyIcon></Button>
</TooltipTrigger>
<TooltipContent>
<p>Recuperar Contraseña</p>
</TooltipContent>
</Tooltip>
<Button></Button>
<Button></Button>
</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
<RecuperarContraseña bind:open usuario={usuarioCambioPass} />