fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-16 15:37:32 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: ajustes en la ui del panel de admin

Browse Source
This commit is contained in:
fedpo
2025-12-30 13:59:32 -03:00
parent b7c52ed0b2
commit 324546b5f8
2 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/lib/components/TablaUsuarios.svelte
View File

@@ -9,6 +9,8 @@
import Button from './ui/button/button.svelte'; import Button from './ui/button/button.svelte';
import KeyIcon from '@lucide/svelte/icons/key'; import KeyIcon from '@lucide/svelte/icons/key';
import UserPen from '@lucide/svelte/icons/user-pen'; import UserPen from '@lucide/svelte/icons/user-pen';
import Search from '@lucide/svelte/icons/search';
import Plus from '@lucide/svelte/icons/plus';
import { Tooltip } from './ui/tooltip'; import { Tooltip } from './ui/tooltip';
import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte'; import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
import TooltipContent from './ui/tooltip/tooltip-content.svelte'; import TooltipContent from './ui/tooltip/tooltip-content.svelte';
@@ -21,6 +23,9 @@
import Input from './ui/input/input.svelte'; import Input from './ui/input/input.svelte';
import Trash_2 from '@lucide/svelte/icons/trash-2'; import Trash_2 from '@lucide/svelte/icons/trash-2';
import BorrarUsuario from './BorrarUsuario.svelte'; import BorrarUsuario from './BorrarUsuario.svelte';
import InputGroup from './ui/input-group/input-group.svelte';
import InputGroupAddon from './ui/input-group/input-group-addon.svelte';
import InputGroupInput from './ui/input-group/input-group-input.svelte';
interface Props { interface Props {
usuarios: UserResponseDto[]; usuarios: UserResponseDto[];
@@ -107,13 +112,12 @@
// $inspect(usuarios); // $inspect(usuarios);
</script> </script>
<div class="mb-4"> <div class="mb-4 flex gap-2">
<Input <InputGroup>
type="text" <InputGroupAddon align="inline-start"><Search></Search></InputGroupAddon>
placeholder="Buscar usuario..." <InputGroupInput type="text" placeholder="Buscar usuario..." bind:value={search} />
bind:value={search} </InputGroup>
class="w-full rounded border px-3 py-2" <Button variant="secondary" class="bg-blue-500/20"><Plus /></Button>
/>
</div> </div>
<Table> <Table>
@@ -135,52 +139,60 @@
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{#each usuariosFiltrados as usuario} {#if usuariosFiltrados.length == 0}
<TableRow> <TableRow>
<TableCell <TableCell colspan={5}>
>@<a href={'/' + usuario.username}> <p class="text-center">No hay usuarios por el nombre de: {search}</p>
{usuario.username}
</a>
</TableCell> </TableCell>
<TableCell>{usuario.displayName}</TableCell> </TableRow>{:else}
<TableCell class="text-center">{usuario.postsCount}</TableCell> {#each usuariosFiltrados as usuario}
<TableCell>{usuario.createdAt.replace('Z', ' ').replace('T', ' | ')}</TableCell> <TableRow>
<TableCell class="flex gap-2"> <TableCell
<Tooltip> >@<a href={'/' + usuario.username}>
<TooltipTrigger> {usuario.username}
<Button onclick={() => handleCambiarContraseña(usuario)}><KeyIcon></KeyIcon></Button> </a>
</TooltipTrigger> </TableCell>
<TooltipContent> <TableCell>{usuario.displayName}</TableCell>
<p>Recuperar Contraseña</p> <TableCell class="text-center">{usuario.postsCount}</TableCell>
</TooltipContent> <TableCell>{usuario.createdAt.replace('Z', ' ').replace('T', ' | ')}</TableCell>
</Tooltip> <TableCell class="flex gap-2">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<Button onclick={() => handleModificar(usuario)}><UserPen /></Button> <Button onclick={() => handleCambiarContraseña(usuario)}><KeyIcon></KeyIcon></Button
</TooltipTrigger> >
<TooltipContent> </TooltipTrigger>
<p>Modificar Usuario</p> <TooltipContent>
</TooltipContent> <p>Recuperar Contraseña</p>
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger> <Tooltip>
<Button <TooltipTrigger>
disabled={usuario.isAdmin} <Button onclick={() => handleModificar(usuario)}><UserPen /></Button>
onclick={() => handleBorrar(usuario)} </TooltipTrigger>
variant="destructive"><Trash_2 /></Button <TooltipContent>
> <p>Modificar Usuario</p>
</TooltipTrigger> </TooltipContent>
<TooltipContent> </Tooltip>
{#if usuario.isAdmin} <Tooltip>
No se pueden eliminar usuarios Admin <TooltipTrigger>
{:else} <Button
Eliminar Usuario disabled={usuario.isAdmin}
{/if} onclick={() => handleBorrar(usuario)}
</TooltipContent> variant="destructive"><Trash_2 /></Button
</Tooltip> >
</TableCell> </TooltipTrigger>
</TableRow> <TooltipContent>
{/each} {#if usuario.isAdmin}
No se pueden eliminar usuarios Admin
{:else}
Eliminar Usuario
{/if}
</TooltipContent>
</Tooltip>
</TableCell>
</TableRow>
{/each}
{/if}
</TableBody> </TableBody>
</Table> </Table>
<BorrarUsuario bind:open={openBorrar} usuario={usuarioBorrar} /> <BorrarUsuario bind:open={openBorrar} usuario={usuarioBorrar} />

8
src/lib/components/ui/button/button.svelte
View File

@@ -7,12 +7,12 @@
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
destructive: destructive:
"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white", "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
outline: outline:
"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border", "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline",
}, },