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,194 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Input, Select, TagInput, Modal } from '@zen/core/shared/components';
+import { useToast } from '@zen/core/toast';
+
+const UserEditModal = ({ userId, isOpen, onClose, onSaved }) => {
+    const toast = useToast();
+
+    const [userData, setUserData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+
+    const [formData, setFormData] = useState({ name: '', email_verified: 'false' });
+    const [errors, setErrors] = useState({});
+
+    const [allRoles, setAllRoles] = useState([]);
+    const [selectedRoleIds, setSelectedRoleIds] = useState([]);
+    const [initialRoleIds, setInitialRoleIds] = useState([]);
+
+    const emailVerifiedOptions = [
+        { value: 'false', label: 'Non vérifié' },
+        { value: 'true', label: 'Vérifié' },
+    ];
+
+    useEffect(() => {
+        if (!isOpen || !userId) return;
+        loadAll();
+    }, [isOpen, userId]);
+
+    const loadAll = async () => {
+        try {
+            setLoading(true);
+            setErrors({});
+            const [userRes, rolesRes, userRolesRes] = await Promise.all([
+                fetch(`/zen/api/users/${userId}`, { credentials: 'include' }),
+                fetch('/zen/api/roles', { credentials: 'include' }),
+                fetch(`/zen/api/users/${userId}/roles`, { credentials: 'include' }),
+            ]);
+            const [userJson, rolesJson, userRolesJson] = await Promise.all([
+                userRes.json(),
+                rolesRes.json(),
+                userRolesRes.json(),
+            ]);
+
+            if (userJson.user) {
+                setUserData(userJson.user);
+                setFormData({
+                    name: userJson.user.name || '',
+                    email_verified: userJson.user.email_verified ? 'true' : 'false',
+                });
+            } else {
+                toast.error(userJson.message || 'Utilisateur introuvable');
+                onClose();
+                return;
+            }
+
+            setAllRoles(rolesJson.roles || []);
+
+            const ids = (userRolesJson.roles || []).map(r => r.id);
+            setSelectedRoleIds(ids);
+            setInitialRoleIds(ids);
+        } catch {
+            toast.error("Impossible de charger l'utilisateur");
+            onClose();
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleInputChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        if (errors[field]) setErrors(prev => ({ ...prev, [field]: null }));
+    };
+
+    const validate = () => {
+        const newErrors = {};
+        if (!formData.name?.trim()) newErrors.name = 'Le nom est requis';
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async () => {
+        if (!validate()) return;
+        try {
+            setSaving(true);
+
+            const userRes = await fetch(`/zen/api/users/${userId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    name: formData.name.trim(),
+                    email_verified: formData.email_verified === 'true',
+                }),
+            });
+            const userResData = await userRes.json();
+            if (!userRes.ok) {
+                toast.error(userResData.message || userResData.error || "Impossible de mettre à jour l'utilisateur");
+                return;
+            }
+
+            const toAdd = selectedRoleIds.filter(id => !initialRoleIds.includes(id));
+            const toRemove = initialRoleIds.filter(id => !selectedRoleIds.includes(id));
+
+            await Promise.all([
+                ...toAdd.map(roleId =>
+                    fetch(`/zen/api/users/${userId}/roles`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        credentials: 'include',
+                        body: JSON.stringify({ roleId }),
+                    })
+                ),
+                ...toRemove.map(roleId =>
+                    fetch(`/zen/api/users/${userId}/roles/${roleId}`, {
+                        method: 'DELETE',
+                        credentials: 'include',
+                    })
+                ),
+            ]);
+
+            toast.success('Utilisateur mis à jour');
+            onSaved?.();
+            onClose();
+        } catch {
+            toast.error("Impossible de mettre à jour l'utilisateur");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const roleOptions = allRoles.map(r => ({
+        value: r.id,
+        label: r.name,
+        color: r.color || '#6b7280',
+        description: r.description || undefined,
+    }));
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title="Modifier l'utilisateur"
+            onSubmit={handleSubmit}
+            submitLabel="Mettre à jour"
+            loading={saving}
+            disabled={loading}
+            size="md"
+        >
+            {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-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                    <div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+                </div>
+            ) : (
+                <div className="flex flex-col gap-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <Input
+                            label="Nom *"
+                            value={formData.name}
+                            onChange={(value) => handleInputChange('name', value)}
+                            placeholder="Nom de l'utilisateur"
+                            error={errors.name}
+                        />
+                        <Input
+                            label="Email"
+                            value={userData?.email || ''}
+                            disabled
+                        />
+                    </div>
+
+                    <Select
+                        label="Email vérifié"
+                        value={formData.email_verified}
+                        onChange={(value) => handleInputChange('email_verified', value)}
+                        options={emailVerifiedOptions}
+                    />
+
+                    <TagInput
+                        label="Rôles attribués"
+                        options={roleOptions}
+                        value={selectedRoleIds}
+                        onChange={setSelectedRoleIds}
+                        placeholder="Rechercher un rôle..."
+                    />
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default UserEditModal;