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

feat(categories): enhance table UI and add dropdown menu for actions

Browse Source 
- Improved table responsiveness by hiding columns on smaller screens.
- Replaced action buttons with a `DropdownMenu` for better accessibility.
- Updated skeleton loaders to match the new table layout.
This commit is contained in:
Mathis HERRIOT
2026-01-21 15:43:00 +01:00
parent 4e61b0de9a
commit 939448d15c
1 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,17 @@
"use client";
import { Edit, Plus, Trash2 } from "lucide-react";
import { Edit, MoreHorizontal, Plus, Trash2 } from "lucide-react";
import Image from "next/image";
import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
@@ -72,8 +80,8 @@ export default function AdminCategoriesPage() {
<TableHeader>
<TableRow>
<TableHead>Nom</TableHead>
<TableHead>Slug</TableHead>
<TableHead>Description</TableHead>
<TableHead className="hidden sm:table-cell">Slug</TableHead>
<TableHead className="hidden md:table-cell">Description</TableHead>
<TableHead className="w-[100px]"></TableHead>
</TableRow>
</TableHeader>
@@ -85,10 +93,10 @@ export default function AdminCategoriesPage() {
<TableCell>
<Skeleton className="h-4 w-[150px]" />
</TableCell>
<TableCell>
<TableCell className="hidden sm:table-cell">
<Skeleton className="h-4 w-[150px]" />
</TableCell>
<TableCell>
<TableCell className="hidden md:table-cell">
<Skeleton className="h-4 w-[250px]" />
</TableCell>
<TableCell>
@@ -120,28 +128,34 @@ export default function AdminCategoriesPage() {
{category.name}
</div>
</TableCell>
<TableCell className="whitespace-nowrap">{category.slug}</TableCell>
<TableCell className="text-muted-foreground">
<TableCell className="whitespace-nowrap hidden sm:table-cell">
{category.slug}
</TableCell>
<TableCell className="text-muted-foreground hidden md:table-cell">
{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>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => handleEdit(category)}>
<Edit className="mr-2 h-4 w-4" /> Modifier
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDelete(category.id)}
className="text-destructive focus:text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" /> Supprimer
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))