dmolinari/SIG-CM2.0
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): UserEditPage con tabs Perfil+Permisos [UDT-009]

Browse Source
This commit is contained in:
dmolinari
2026-04-15 21:50:55 -03:00
parent 9dbf3e895d
commit b7882613a4
2 changed files with 149 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/web/src/features/users/pages/UserEditPage.tsx
View File

@@ -8,6 +8,7 @@ import { AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Alert, AlertDescription } from '@/components/ui/alert' import { Alert, AlertDescription } from '@/components/ui/alert'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { import {
Form, Form,
FormControl, FormControl,
@@ -19,6 +20,7 @@ import {
import { useUser } from '../hooks/useUser' import { useUser } from '../hooks/useUser'
import { useUpdateUser } from '../hooks/useUpdateUser' import { useUpdateUser } from '../hooks/useUpdateUser'
import { ResetPasswordModal } from '../components/ResetPasswordModal' import { ResetPasswordModal } from '../components/ResetPasswordModal'
import { PermisosEditor } from '../components/PermisosEditor'
import { useAuthStore } from '@/stores/authStore' import { useAuthStore } from '@/stores/authStore'
const editSchema = z.object({ const editSchema = z.object({
@@ -111,12 +113,14 @@ export function UserEditPage() {
) )
} }
const isSelf = loggedUserId === userId
return ( return (
<div className="max-w-xl space-y-6"> <div className="max-w-xl space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-xl font-semibold">Editar Usuario</h1> <h1 className="text-xl font-semibold">Editar Usuario</h1>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{loggedUserId !== userId && <ResetPasswordModal userId={userId} />} {!isSelf && <ResetPasswordModal userId={userId} />}
<Button variant="ghost" size="sm" onClick={() => navigate('/usuarios')}> <Button variant="ghost" size="sm" onClick={() => navigate('/usuarios')}>
Volver Volver
</Button> </Button>
@@ -129,105 +133,120 @@ export function UserEditPage() {
<p className="text-sm font-mono bg-muted rounded px-3 py-2">{user.username}</p> <p className="text-sm font-mono bg-muted rounded px-3 py-2">{user.username}</p>
</div> </div>
<Form {...form}> <Tabs defaultValue="perfil">
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4" noValidate> <TabsList>
{backendError && ( <TabsTrigger value="perfil">Perfil</TabsTrigger>
<Alert variant="destructive"> <TabsTrigger value="permisos" disabled={isSelf}>
<AlertCircle className="h-4 w-4" /> Permisos
<AlertDescription>{backendError}</AlertDescription> </TabsTrigger>
</Alert> </TabsList>
)}
<FormField <TabsContent value="perfil">
control={form.control} <Form {...form}>
name="nombre" <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4" noValidate>
render={({ field }) => ( {backendError && (
<FormItem> <Alert variant="destructive">
<FormLabel>Nombre</FormLabel> <AlertCircle className="h-4 w-4" />
<FormControl> <AlertDescription>{backendError}</AlertDescription>
<Input {...field} disabled={isPending} /> </Alert>
</FormControl> )}
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="apellido" name="nombre"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Apellido</FormLabel> <FormLabel>Nombre</FormLabel>
<FormControl> <FormControl>
<Input {...field} disabled={isPending} /> <Input {...field} disabled={isPending} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="email" name="apellido"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Email (opcional)</FormLabel> <FormLabel>Apellido</FormLabel>
<FormControl> <FormControl>
<Input {...field} type="email" disabled={isPending} /> <Input {...field} disabled={isPending} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="rol" name="email"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Rol</FormLabel> <FormLabel>Email (opcional)</FormLabel>
<FormControl> <FormControl>
<select <Input {...field} type="email" disabled={isPending} />
{...field} </FormControl>
disabled={isPending} <FormMessage />
aria-label="Rol" </FormItem>
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50" )}
> />
<option value="admin">Admin</option>
<option value="cajero">Cajero</option>
<option value="reportes">Reportes</option>
</select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="activo" name="rol"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-row items-center gap-3"> <FormItem>
<FormControl> <FormLabel>Rol</FormLabel>
<input <FormControl>
type="checkbox" <select
checked={field.value} {...field}
onChange={field.onChange} disabled={isPending}
disabled={isPending} aria-label="Rol"
aria-label="Activo" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
className="h-4 w-4" >
/> <option value="admin">Admin</option>
</FormControl> <option value="cajero">Cajero</option>
<FormLabel className="!mt-0">Activo</FormLabel> <option value="reportes">Reportes</option>
</FormItem> </select>
)} </FormControl>
/> <FormMessage />
</FormItem>
)}
/>
<Button type="submit" disabled={isPending} className="w-full"> <FormField
{isPending ? 'Guardando...' : 'Guardar cambios'} control={form.control}
</Button> name="activo"
</form> render={({ field }) => (
</Form> <FormItem className="flex flex-row items-center gap-3">
<FormControl>
<input
type="checkbox"
checked={field.value}
onChange={field.onChange}
disabled={isPending}
aria-label="Activo"
className="h-4 w-4"
/>
</FormControl>
<FormLabel className="!mt-0">Activo</FormLabel>
</FormItem>
)}
/>
<Button type="submit" disabled={isPending} className="w-full">
{isPending ? 'Guardando...' : 'Guardar cambios'}
</Button>
</form>
</Form>
</TabsContent>
<TabsContent value="permisos">
<PermisosEditor userId={userId} />
</TabsContent>
</Tabs>
</div> </div>
) )
} }

36
src/web/src/tests/features/users/UserEditPage.test.tsx
View File

@@ -162,4 +162,40 @@ describe('UserEditPage', () => {
await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument()) await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
expect(screen.queryByRole('button', { name: /resetear contraseña/i })).not.toBeInTheDocument() expect(screen.queryByRole('button', { name: /resetear contraseña/i })).not.toBeInTheDocument()
}) })
// FP-01: tabs Perfil and Permisos visible when editing another user
it('shows tabs "Perfil" and "Permisos" when editing another user', async () => {
server.use(
http.get(`${API_URL}/api/v1/users/5`, () => HttpResponse.json(mockUserDetail)),
http.get(`${API_URL}/api/v1/users/5/permisos`, () =>
HttpResponse.json({
usuarioId: 5, rol: 'cajero', rolPermisos: [], grant: [], deny: [], effective: [],
}),
),
http.get(`${API_URL}/api/v1/permisos`, () => HttpResponse.json([])),
)
renderEditPage(5)
await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
expect(screen.getByRole('tab', { name: /perfil/i })).toBeInTheDocument()
expect(screen.getByRole('tab', { name: /permisos/i })).toBeInTheDocument()
})
// FP-10: self-edit — tab Permisos is disabled
it('disables tab "Permisos" when editing own profile (self-edit)', async () => {
server.use(
http.get(`${API_URL}/api/v1/users/1`, () =>
HttpResponse.json({ ...mockUserDetail, id: 1, username: 'admin' }),
),
)
renderEditPage(1)
await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
const permisosTab = screen.getByRole('tab', { name: /permisos/i })
expect(permisosTab).toBeDisabled()
})
}) })