refactor(admin): replace parameterized routes with modal-based editing for users and roles

2026-04-22 16:15:43 -04:00
parent 16edecdc56
commit f54b2640ad
10 changed files with 643 additions and 680 deletions
@@ -0,0 +1,180 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Input, Textarea, Switch, Modal } from '@zen/core/shared/components';
+import { useToast } from '@zen/core/toast';
+import { getPermissionGroups } from '@zen/core/users/constants';
+
+const PERMISSION_GROUPS = getPermissionGroups();
+
+const RoleEditModal = ({ roleId, isOpen, onClose, onSaved }) => {
+    const toast = useToast();
+    const isNew = !roleId || roleId === 'new';
+
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [isSystem, setIsSystem] = useState(false);
+
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [color, setColor] = useState('#6b7280');
+    const [selectedPerms, setSelectedPerms] = useState([]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        if (isNew) {
+            setName('');
+            setDescription('');
+            setColor('#6b7280');
+            setSelectedPerms([]);
+            setIsSystem(false);
+            return;
+        }
+        fetchRole();
+    }, [isOpen, roleId]);
+
+    const fetchRole = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch(`/zen/api/roles/${roleId}`, { credentials: 'include' });
+            if (!response.ok) {
+                toast.error('Rôle introuvable');
+                onClose();
+                return;
+            }
+            const data = await response.json();
+            const role = data.role;
+            setName(role.name || '');
+            setDescription(role.description || '');
+            setColor(role.color || '#6b7280');
+            setSelectedPerms(role.permission_keys || []);
+            setIsSystem(role.is_system || false);
+        } catch {
+            toast.error('Impossible de charger ce rôle');
+            onClose();
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const togglePerm = (key) => {
+        setSelectedPerms(prev =>
+            prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
+        );
+    };
+
+    const handleSubmit = async () => {
+        if (!name.trim()) {
+            toast.error('Le nom du rôle est requis');
+            return;
+        }
+        try {
+            setSaving(true);
+            const url = isNew ? '/zen/api/roles' : `/zen/api/roles/${roleId}`;
+            const method = isNew ? 'POST' : 'PUT';
+
+            const response = await fetch(url, {
+                method,
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name: name.trim(),
+                    description: description.trim() || null,
+                    color,
+                    permissionKeys: selectedPerms,
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                toast.error(data.message || 'Impossible de sauvegarder ce rôle');
+                return;
+            }
+            toast.success(isNew ? 'Rôle créé' : 'Rôle mis à jour');
+            onSaved?.();
+            onClose();
+        } catch {
+            toast.error('Impossible de sauvegarder ce rôle');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const title = isNew ? 'Nouveau rôle' : `Modifier "${name}"`;
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title={title}
+            onSubmit={handleSubmit}
+            submitLabel={isNew ? 'Créer le rôle' : 'Sauvegarder'}
+            loading={saving}
+            disabled={loading}
+            size="lg"
+        >
+            {loading ? (
+                <div className="flex flex-col gap-4 animate-pulse">
+                    <div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                    <div className="h-20 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                    <div className="h-40 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                </div>
+            ) : (
+                <div className="flex flex-col gap-6">
+                    <div className="flex flex-col gap-4">
+                        <Input
+                            label="Nom du rôle"
+                            value={name}
+                            onChange={setName}
+                            disabled={isSystem}
+                            placeholder="Éditeur, Modérateur..."
+                            required
+                        />
+                        <Textarea
+                            label="Description"
+                            value={description}
+                            onChange={setDescription}
+                            rows={2}
+                            placeholder="Description optionnelle..."
+                        />
+                        <div className="flex items-center gap-3">
+                            <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
+                                Couleur
+                            </label>
+                            <input
+                                type="color"
+                                value={color}
+                                onChange={(e) => setColor(e.target.value)}
+                                className="w-8 h-8 rounded cursor-pointer border border-neutral-200 dark:border-neutral-700"
+                            />
+                            <span className="text-xs text-neutral-500">{color}</span>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                        <p className="text-xs font-semibold text-neutral-900 dark:text-white">Permissions</p>
+                        {Object.entries(PERMISSION_GROUPS).map(([group, perms]) => (
+                            <div key={group} className="flex flex-col">
+                                <p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide py-1">
+                                    {group}
+                                </p>
+                                <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
+                                    {perms.map((perm) => (
+                                        <Switch
+                                            key={perm.key}
+                                            checked={selectedPerms.includes(perm.key)}
+                                            onChange={() => togglePerm(perm.key)}
+                                            label={perm.name}
+                                            description={perm.key}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default RoleEditModal;