reafctor: pages for management and split components
This commit is contained in:
Julien Froidefond
3
components/admin/users/index.ts
Normal file
3
components/admin/users/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { UsersManagementPage } from "./users-management-page";
|
||||
export { UserFormDialog } from "./user-form-dialog";
|
||||
export { UsersList } from "./users-list";
|
||||
108
components/admin/users/user-form-dialog.tsx
Normal file
108
components/admin/users/user-form-dialog.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Team } from "@/services/admin-management-service";
|
||||
|
||||
interface UserFormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
teamId: string;
|
||||
}
|
||||
|
||||
interface UserFormDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: () => void;
|
||||
title: string;
|
||||
formData: UserFormData;
|
||||
onFormDataChange: (data: UserFormData) => void;
|
||||
teams: Team[];
|
||||
isSubmitting?: boolean;
|
||||
}
|
||||
|
||||
export function UserFormDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSubmit,
|
||||
title,
|
||||
formData,
|
||||
onFormDataChange,
|
||||
teams,
|
||||
isSubmitting = false,
|
||||
}: UserFormDialogProps) {
|
||||
const handleInputChange = (field: keyof UserFormData, value: string) => {
|
||||
onFormDataChange({ ...formData, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="user-first-name">Prénom *</Label>
|
||||
<Input
|
||||
id="user-first-name"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange("firstName", e.target.value)}
|
||||
placeholder="Prénom de l'utilisateur"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="user-last-name">Nom *</Label>
|
||||
<Input
|
||||
id="user-last-name"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange("lastName", e.target.value)}
|
||||
placeholder="Nom de l'utilisateur"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="user-team">Équipe</Label>
|
||||
<Select
|
||||
value={formData.teamId}
|
||||
onValueChange={(value) => handleInputChange("teamId", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une équipe (optionnel)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">Aucune équipe</SelectItem>
|
||||
{teams.map((team) => (
|
||||
<SelectItem key={team.id} value={team.id}>
|
||||
{team.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button variant="outline" onClick={onClose} disabled={isSubmitting}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={onSubmit} disabled={isSubmitting}>
|
||||
{isSubmitting ? "En cours..." : title.includes("Créer") ? "Créer" : "Mettre à jour"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
79
components/admin/users/users-list.tsx
Normal file
79
components/admin/users/users-list.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import { User, Building2 } from "lucide-react";
|
||||
import { TreeCategoryHeader, TreeItemRow } from "@/components/admin";
|
||||
|
||||
interface User {
|
||||
uuid: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
teamName?: string;
|
||||
hasEvaluations: boolean;
|
||||
}
|
||||
|
||||
interface UsersListProps {
|
||||
filteredUsersByTeam: Record<string, User[]>;
|
||||
expandedTeams: Set<string>;
|
||||
onToggleTeam: (teamName: string) => void;
|
||||
onDeleteUser: (user: User) => void;
|
||||
}
|
||||
|
||||
export function UsersList({
|
||||
filteredUsersByTeam,
|
||||
expandedTeams,
|
||||
onToggleTeam,
|
||||
onDeleteUser,
|
||||
}: UsersListProps) {
|
||||
return (
|
||||
<>
|
||||
{Object.entries(filteredUsersByTeam).map(
|
||||
([teamName, teamUsers], index) => (
|
||||
<div key={teamName}>
|
||||
<TreeCategoryHeader
|
||||
category={teamName}
|
||||
isExpanded={expandedTeams.has(teamName)}
|
||||
onToggle={() => onToggleTeam(teamName)}
|
||||
icon={<Building2 className="w-5 h-5 text-blue-400" />}
|
||||
itemCount={teamUsers.length}
|
||||
itemLabel="utilisateur"
|
||||
showSeparator={index > 0}
|
||||
canDelete={false}
|
||||
isDirection={false}
|
||||
/>
|
||||
|
||||
{/* Liste des utilisateurs de l'équipe */}
|
||||
{expandedTeams.has(teamName) && (
|
||||
<div className="bg-slate-950/30">
|
||||
{teamUsers.map((user, userIndex) => (
|
||||
<TreeItemRow
|
||||
key={user.uuid}
|
||||
icon={<User className="w-5 h-5 text-green-400" />}
|
||||
title={`${user.firstName} ${user.lastName}`}
|
||||
badges={[
|
||||
{
|
||||
text: user.hasEvaluations
|
||||
? "A des évaluations"
|
||||
: "Aucune évaluation",
|
||||
variant: user.hasEvaluations ? "default" : "outline",
|
||||
},
|
||||
]}
|
||||
onDelete={() => onDeleteUser(user)}
|
||||
canDelete={!user.teamName}
|
||||
showSeparator={userIndex > 0}
|
||||
additionalInfo={
|
||||
<p className="text-slate-500 text-xs">
|
||||
{user.teamName
|
||||
? `Équipe: ${user.teamName}`
|
||||
: "Aucune équipe"}
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
167
components/admin/users/users-management-page.tsx
Normal file
167
components/admin/users/users-management-page.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Users, Building2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Team } from "@/services/admin-management-service";
|
||||
import { TreeViewPage } from "../management/tree-view-page";
|
||||
import { useTreeView } from "@/hooks/use-tree-view";
|
||||
import { useFormDialog } from "@/hooks/use-form-dialog";
|
||||
import { useUsersManagement } from "@/hooks/use-users-management";
|
||||
import { UserFormDialog } from "./user-form-dialog";
|
||||
import { UsersList } from "./users-list";
|
||||
|
||||
interface UsersManagementPageProps {
|
||||
teams: Team[];
|
||||
}
|
||||
|
||||
export function UsersManagementPage({ teams }: UsersManagementPageProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const { isCreateDialogOpen, openCreateDialog, closeCreateDialog } = useFormDialog();
|
||||
|
||||
const {
|
||||
users,
|
||||
isLoading,
|
||||
error,
|
||||
userFormData,
|
||||
isSubmitting,
|
||||
setUserFormData,
|
||||
resetForm,
|
||||
handleCreateUser,
|
||||
handleDeleteUser,
|
||||
} = useUsersManagement(teams);
|
||||
|
||||
// Utilisation du hook factorisé pour la vue arborescente
|
||||
const {
|
||||
filteredDataByCategory: filteredUsersByTeam,
|
||||
expandedCategories: expandedTeams,
|
||||
toggleCategory: toggleTeam,
|
||||
expandAll,
|
||||
collapseAll,
|
||||
} = useTreeView({
|
||||
data: users,
|
||||
searchFields: ["firstName", "lastName"],
|
||||
groupBy: (user) => user.teamName || "Sans équipe",
|
||||
searchTerm,
|
||||
onSearchChange: setSearchTerm,
|
||||
});
|
||||
|
||||
const handleCreateSubmit = async () => {
|
||||
const success = await handleCreateUser();
|
||||
if (success) {
|
||||
closeCreateDialog();
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenCreateDialog = () => {
|
||||
resetForm();
|
||||
openCreateDialog();
|
||||
};
|
||||
|
||||
const headerActions = (
|
||||
<Button onClick={handleOpenCreateDialog}>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Créer un utilisateur
|
||||
</Button>
|
||||
);
|
||||
|
||||
const emptyState = (
|
||||
<div className="text-center py-8">
|
||||
<Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-slate-400 mb-1">
|
||||
{searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
{searchTerm
|
||||
? "Essayez de modifier vos critères de recherche"
|
||||
: "Commencez par créer votre premier utilisateur"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
Gestion des utilisateurs
|
||||
</h2>
|
||||
<Button disabled>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Créer un utilisateur
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-3 p-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-700 animate-pulse" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 bg-slate-700 rounded animate-pulse w-32" />
|
||||
<div className="h-3 bg-slate-700 rounded animate-pulse w-24" />
|
||||
</div>
|
||||
<div className="w-20 h-8 bg-slate-700 rounded animate-pulse" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
Gestion des utilisateurs
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
|
||||
<Users className="w-6 h-6 text-red-400" />
|
||||
</div>
|
||||
<p className="text-red-400 mb-4">{error}</p>
|
||||
<Button onClick={() => window.location.reload()} variant="outline">
|
||||
Réessayer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TreeViewPage
|
||||
title="Gestion des utilisateurs"
|
||||
description="Gérez les utilisateurs de votre organisation"
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
onExpandAll={expandAll}
|
||||
onCollapseAll={collapseAll}
|
||||
searchPlaceholder="Rechercher un utilisateur..."
|
||||
hasContent={Object.keys(filteredUsersByTeam).length > 0}
|
||||
emptyState={emptyState}
|
||||
headerActions={headerActions}
|
||||
>
|
||||
<UsersList
|
||||
filteredUsersByTeam={filteredUsersByTeam}
|
||||
expandedTeams={expandedTeams}
|
||||
onToggleTeam={toggleTeam}
|
||||
onDeleteUser={handleDeleteUser}
|
||||
/>
|
||||
</TreeViewPage>
|
||||
|
||||
{/* Dialog de création */}
|
||||
<UserFormDialog
|
||||
isOpen={isCreateDialogOpen}
|
||||
onClose={closeCreateDialog}
|
||||
onSubmit={handleCreateSubmit}
|
||||
title="Créer un nouvel utilisateur"
|
||||
formData={userFormData}
|
||||
onFormDataChange={setUserFormData}
|
||||
teams={teams}
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user