Mathis/memegoat
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Activity

feat(admin): add edit dialogs for users, contents, and categories

Browse Source 
- Implemented edit functionality for users, contents, and categories, including modals for updating records.
- Enhanced table actions with edit buttons alongside delete.
- Improved user, content, and category fetching with `useCallback` to optimize re-renders.
- Added skeleton loaders and UI updates for better user experience.
This commit is contained in:
Mathis HERRIOT
2026-01-21 13:19:29 +01:00
parent 3a5550d6eb
commit 9b714716f6
3 changed files with 181 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/app/(dashboard)/admin/categories/page.tsx
View File

@@ -1,6 +1,9 @@
"use client";
import { useEffect, useState } from "react";
import { Edit, Plus, Trash2 } from "lucide-react";
import Image from "next/image";
import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
@@ -12,24 +15,57 @@ import {
} from "@/components/ui/table";
import { CategoryService } from "@/services/category.service";
import type { Category } from "@/types/content";
import { CategoryDialog } from "./category-dialog";
export default function AdminCategoriesPage() {
const [categories, setCategories] = useState<Category[]>([]);
const [loading, setLoading] = useState(true);
const [dialogOpen, setDialogOpen] = useState(false);
const [selectedCategory, setSelectedCategory] = useState<Category | null>(
null,
);
useEffect(() => {
const fetchCategories = useCallback(() => {
setLoading(true);
CategoryService.getAll()
.then(setCategories)
.catch((err) => console.error(err))
.finally(() => setLoading(false));
}, []);
useEffect(() => {
fetchCategories();
}, [fetchCategories]);
const handleDelete = async (id: string) => {
if (!confirm("Êtes-vous sûr de vouloir supprimer cette catégorie ?")) return;
try {
await CategoryService.remove(id);
setCategories(categories.filter((c) => c.id !== id));
} catch (error) {
console.error(error);
}
};
const handleEdit = (category: Category) => {
setSelectedCategory(category);
setDialogOpen(true);
};
const handleCreate = () => {
setSelectedCategory(null);
setDialogOpen(true);
};
return (
<div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
<div className="flex items-center justify-between">
<h2 className="text-3xl font-bold tracking-tight">
Catégories ({categories.length})
</h2>
<Button onClick={handleCreate}>
<Plus className="mr-2 h-4 w-4" /> Ajouter une catégorie
</Button>
</div>
<div className="rounded-md border bg-card">
<Table>
@@ -38,6 +74,7 @@ export default function AdminCategoriesPage() {
<TableHead>Nom</TableHead>
<TableHead>Slug</TableHead>
<TableHead>Description</TableHead>
<TableHead className="w-[100px]"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -54,11 +91,14 @@ export default function AdminCategoriesPage() {
<TableCell>
<Skeleton className="h-4 w-[250px]" />
</TableCell>
<TableCell>
<Skeleton className="h-8 w-8 rounded-full" />
</TableCell>
</TableRow>
))
) : categories.length === 0 ? (
<TableRow>
<TableCell colSpan={3} className="text-center h-24">
<TableCell colSpan={4} className="text-center h-24">
Aucune catégorie trouvée.
</TableCell>
</TableRow>
@@ -66,18 +106,55 @@ export default function AdminCategoriesPage() {
categories.map((category) => (
<TableRow key={category.id}>
<TableCell className="font-medium whitespace-nowrap">
{category.name}
<div className="flex items-center gap-2">
{category.iconUrl && (
<div className="relative h-6 w-6">
<Image
src={category.iconUrl}
alt=""
fill
className="rounded object-cover"
/>
</div>
)}
{category.name}
</div>
</TableCell>
<TableCell className="whitespace-nowrap">{category.slug}</TableCell>
<TableCell className="text-muted-foreground">
{category.description || "Aucune description"}
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => handleEdit(category)}
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDelete(category.id)}
className="text-destructive hover:text-destructive hover:bg-destructive/10"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
<CategoryDialog
open={dialogOpen}
onOpenChange={setDialogOpen}
category={selectedCategory}
onSuccess={fetchCategories}
/>
</div>
);
}

64
frontend/src/app/(dashboard)/admin/contents/page.tsx
View File

@@ -2,8 +2,15 @@
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { Download, Eye, Image as ImageIcon, Trash2, Video } from "lucide-react";
import { useEffect, useState } from "react";
import {
Download,
Edit,
Eye,
Image as ImageIcon,
Trash2,
Video,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
@@ -17,13 +24,17 @@ import {
} from "@/components/ui/table";
import { ContentService } from "@/services/content.service";
import type { Content } from "@/types/content";
import { ContentEditDialog } from "./content-edit-dialog";
export default function AdminContentsPage() {
const [contents, setContents] = useState<Content[]>([]);
const [loading, setLoading] = useState(true);
const [totalCount, setTotalCount] = useState(0);
const [selectedContent, setSelectedContent] = useState<Content | null>(null);
const [dialogOpen, setDialogOpen] = useState(false);
useEffect(() => {
const fetchContents = useCallback(() => {
setLoading(true);
ContentService.getExplore({ limit: 20 })
.then((res) => {
setContents(res.data);
@@ -33,6 +44,10 @@ export default function AdminContentsPage() {
.finally(() => setLoading(false));
}, []);
useEffect(() => {
fetchContents();
}, [fetchContents]);
const handleDelete = async (id: string) => {
if (!confirm("Êtes-vous sûr de vouloir supprimer ce contenu ?")) return;
@@ -45,6 +60,11 @@ export default function AdminContentsPage() {
}
};
const handleEdit = (content: Content) => {
setSelectedContent(content);
setDialogOpen(true);
};
return (
<div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
<div className="flex items-center justify-between">
@@ -61,7 +81,7 @@ export default function AdminContentsPage() {
<TableHead>Auteur</TableHead>
<TableHead>Stats</TableHead>
<TableHead>Date</TableHead>
<TableHead className="w-[50px]"></TableHead>
<TableHead className="w-[100px]"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -84,11 +104,14 @@ export default function AdminContentsPage() {
<TableCell>
<Skeleton className="h-4 w-[100px]" />
</TableCell>
<TableCell>
<Skeleton className="h-8 w-8 rounded-full" />
</TableCell>
</TableRow>
))
) : contents.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className="text-center h-24">
<TableCell colSpan={6} className="text-center h-24">
Aucun contenu trouvé.
</TableCell>
</TableRow>
@@ -132,14 +155,23 @@ export default function AdminContentsPage() {
{format(new Date(content.createdAt), "dd/MM/yyyy", { locale: fr })}
</TableCell>
<TableCell>
<Button
variant="ghost"
size="icon"
onClick={() => handleDelete(content.id)}
className="text-destructive hover:text-destructive hover:bg-destructive/10"
>
<Trash2 className="h-4 w-4" />
</Button>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => handleEdit(content)}
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDelete(content.id)}
className="text-destructive hover:text-destructive hover:bg-destructive/10"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
@@ -147,6 +179,12 @@ export default function AdminContentsPage() {
</TableBody>
</Table>
</div>
<ContentEditDialog
content={selectedContent}
open={dialogOpen}
onOpenChange={setDialogOpen}
onSuccess={fetchContents}
/>
</div>
);
}

63
frontend/src/app/(dashboard)/admin/users/page.tsx
View File

@@ -2,8 +2,8 @@
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { Trash2 } from "lucide-react";
import { useEffect, useState } from "react";
import { Edit, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
@@ -17,13 +17,17 @@ import {
} from "@/components/ui/table";
import { UserService } from "@/services/user.service";
import type { User } from "@/types/user";
import { UserEditDialog } from "./user-edit-dialog";
export default function AdminUsersPage() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [totalCount, setTotalCount] = useState(0);
const [selectedUser, setSelectedUser] = useState<User | null>(null);
const [dialogOpen, setDialogOpen] = useState(false);
useEffect(() => {
const fetchUsers = useCallback(() => {
setLoading(true);
UserService.getUsersAdmin()
.then((res) => {
setUsers(res.data);
@@ -35,6 +39,10 @@ export default function AdminUsersPage() {
.finally(() => setLoading(false));
}, []);
useEffect(() => {
fetchUsers();
}, [fetchUsers]);
const handleDelete = async (uuid: string) => {
if (
!confirm(
@@ -52,6 +60,11 @@ export default function AdminUsersPage() {
}
};
const handleEdit = (user: User) => {
setSelectedUser(user);
setDialogOpen(true);
};
return (
<div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
<div className="flex items-center justify-between">
@@ -68,7 +81,7 @@ export default function AdminUsersPage() {
<TableHead>Rôle</TableHead>
<TableHead>Status</TableHead>
<TableHead>Date d'inscription</TableHead>
<TableHead className="w-[50px]"></TableHead>
<TableHead className="w-[100px]"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -91,11 +104,14 @@ export default function AdminUsersPage() {
<TableCell>
<Skeleton className="h-4 w-[100px]" />
</TableCell>
<TableCell>
<Skeleton className="h-8 w-8 rounded-full" />
</TableCell>
</TableRow>
))
) : users.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className="text-center h-24">
<TableCell colSpan={6} className="text-center h-24">
Aucun utilisateur trouvé.
</TableCell>
</TableRow>
@@ -113,7 +129,15 @@ export default function AdminUsersPage() {
</Badge>
</TableCell>
<TableCell>
<Badge variant={user.status === "active" ? "success" : "destructive"}>
<Badge
variant={
user.status === "active"
? "success"
: user.status === "suspended"
? "destructive"
: "secondary"
}
>
{user.status}
</Badge>
</TableCell>
@@ -121,14 +145,19 @@ export default function AdminUsersPage() {
{format(new Date(user.createdAt), "PPP", { locale: fr })}
</TableCell>
<TableCell>
<Button
variant="ghost"
size="icon"
onClick={() => handleDelete(user.uuid)}
className="text-destructive hover:text-destructive hover:bg-destructive/10"
>
<Trash2 className="h-4 w-4" />
</Button>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon" onClick={() => handleEdit(user)}>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDelete(user.uuid)}
className="text-destructive hover:text-destructive hover:bg-destructive/10"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
@@ -136,6 +165,12 @@ export default function AdminUsersPage() {
</TableBody>
</Table>
</div>
<UserEditDialog
user={selectedUser}
open={dialogOpen}
onOpenChange={setDialogOpen}
onSuccess={fetchUsers}
/>
</div>
);
}