fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -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 KeyIcon from '@lucide/svelte/icons/key';
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 TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
import TooltipContent from './ui/tooltip/tooltip-content.svelte';
@@ -21,6 +23,9 @@
import Input from './ui/input/input.svelte';
import Trash_2 from '@lucide/svelte/icons/trash-2';
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 {
usuarios: UserResponseDto[];
@@ -107,13 +112,12 @@
// $inspect(usuarios);
</script>
<div class="mb-4">
<Input
type="text"
placeholder="Buscar usuario..."
bind:value={search}
class="w-full rounded border px-3 py-2"
/>
<div class="mb-4 flex gap-2">
<InputGroup>
<InputGroupAddon align="inline-start"><Search></Search></InputGroupAddon>
<InputGroupInput type="text" placeholder="Buscar usuario..." bind:value={search} />
</InputGroup>
<Button variant="secondary" class="bg-blue-500/20"><Plus /></Button>
</div>
<Table>
@@ -135,52 +139,60 @@
</TableRow>
</TableHeader>
<TableBody>
{#each usuariosFiltrados as usuario}
{#if usuariosFiltrados.length == 0}
<TableRow>
<TableCell
>@<a href={'/' + usuario.username}>
{usuario.username}
</a>
<TableCell colspan={5}>
<p class="text-center">No hay usuarios por el nombre de: {search}</p>
</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>
<Tooltip>
<TooltipTrigger>
<Button onclick={() => handleModificar(usuario)}><UserPen /></Button>
</TooltipTrigger>
<TooltipContent>
<p>Modificar Usuario</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button
disabled={usuario.isAdmin}
onclick={() => handleBorrar(usuario)}
variant="destructive"><Trash_2 /></Button
>
</TooltipTrigger>
<TooltipContent>
{#if usuario.isAdmin}
No se pueden eliminar usuarios Admin
{:else}
Eliminar Usuario
{/if}
</TooltipContent>
</Tooltip>
</TableCell>
</TableRow>
{/each}
</TableRow>{:else}
{#each usuariosFiltrados as usuario}
<TableRow>
<TableCell
>@<a href={'/' + usuario.username}>
{usuario.username}
</a>
</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>
<Tooltip>
<TooltipTrigger>
<Button onclick={() => handleModificar(usuario)}><UserPen /></Button>
</TooltipTrigger>
<TooltipContent>
<p>Modificar Usuario</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button
disabled={usuario.isAdmin}
onclick={() => handleBorrar(usuario)}
variant="destructive"><Trash_2 /></Button
>
</TooltipTrigger>
<TooltipContent>
{#if usuario.isAdmin}
No se pueden eliminar usuarios Admin
{:else}
Eliminar Usuario
{/if}
</TooltipContent>
</Tooltip>
</TableCell>
</TableRow>
{/each}
{/if}
</TableBody>
</Table>
<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",
variants: {
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:
"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:
"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
"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 hover:bg-secondary/80 shadow-xs",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},