164 lines
4.0 KiB
TypeScript
164 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { MoreHorizontal } from "lucide-react";
|
|
import type IShortcode from "@/interfaces/IShortcode";
|
|
import ShortcodeDialog from "@/components/shortcode-dialogue";
|
|
import { useState } from "react";
|
|
import IUser from "@/interfaces/IUser";
|
|
import hasPermissions from "@/lib/hasPermissions";
|
|
import {
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
} from "@radix-ui/react-hover-card";
|
|
import Image from "next/image";
|
|
|
|
interface ShortcodeTableProps {
|
|
user: IUser;
|
|
shortcodes: IShortcode[];
|
|
onUpdate: (shortcode: IShortcode) => void;
|
|
onDelete: (id: string) => void;
|
|
onAdd: (shortcode: Omit<IShortcode, "id">) => void;
|
|
}
|
|
|
|
export function ShortcodeTable({
|
|
shortcodes,
|
|
onUpdate,
|
|
onDelete,
|
|
onAdd,
|
|
user,
|
|
}: ShortcodeTableProps) {
|
|
const permissions = hasPermissions(user.roles, {
|
|
shortcodes: ["insert", "update", "delete"],
|
|
} as const);
|
|
const [shortcodeSelected, setUpdateDialog] = useState<IShortcode | null>(
|
|
null,
|
|
);
|
|
const [addDialog, setAddDialog] = useState<boolean>(false);
|
|
|
|
return (
|
|
<div>
|
|
{permissions.shortcodes.insert && (
|
|
<div className="mb-4">
|
|
<Button
|
|
onClick={() => {
|
|
setAddDialog(true);
|
|
}}
|
|
>
|
|
Ajouter
|
|
</Button>
|
|
<ShortcodeDialog
|
|
onSave={onAdd}
|
|
open={addDialog}
|
|
setOpen={() => setAddDialog(false)}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>ID</TableHead>
|
|
<TableHead>Code</TableHead>
|
|
<TableHead>Type</TableHead>
|
|
<TableHead>Valeur</TableHead>
|
|
<TableHead>Media ID</TableHead>
|
|
<TableHead className="w-[80px]">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{shortcodes.map((shortcode) => (
|
|
<TableRow key={shortcode.id}>
|
|
<TableCell>{shortcode.id}</TableCell>
|
|
<TableCell>{shortcode.code}</TableCell>
|
|
<TableCell>{shortcode.type}</TableCell>
|
|
<TableCell>
|
|
{shortcode.value || "N/A"}
|
|
</TableCell>
|
|
<TableCell>
|
|
<HoverCard>
|
|
<HoverCardTrigger className="underline decoration-dotted cursor-pointer">
|
|
{shortcode.media_id || "N/A"}
|
|
</HoverCardTrigger>
|
|
{shortcode.media && (
|
|
<HoverCardContent>
|
|
<Image
|
|
src={shortcode.media.url}
|
|
alt={shortcode.media.alt}
|
|
width={200}
|
|
height={200}
|
|
/>
|
|
</HoverCardContent>
|
|
)}
|
|
</HoverCard>
|
|
</TableCell>
|
|
<TableCell>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<span className="sr-only">
|
|
Ouvrir le menu
|
|
</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{permissions.shortcodes.update && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
setUpdateDialog(
|
|
shortcode,
|
|
)
|
|
}
|
|
>
|
|
Mettre à jour
|
|
</DropdownMenuItem>
|
|
)}
|
|
{permissions.shortcodes.delete && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
onDelete(shortcode.code)
|
|
}
|
|
>
|
|
Supprimer
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
{shortcodeSelected && (
|
|
<ShortcodeDialog
|
|
onSave={onUpdate}
|
|
shortcode={shortcodeSelected}
|
|
open={shortcodeSelected ? true : false}
|
|
setOpen={() => setUpdateDialog(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|