CRUD Events and React interaction

frontend/components/shortcodes-table.tsx

@@ -18,6 +18,7 @@ import {
 import { MoreHorizontal } from "lucide-react";
 import type IShortcode from "@/interfaces/IShortcode";
 import ShortcodeDialog from "@/components/shortcode-dialogue";
+import { useState } from "react";
 
 interface ShortcodeTableProps {
 	shortcodes: IShortcode[];
@@ -32,10 +33,25 @@ export function ShortcodeTable({
 	onDelete,
 	onAdd,
 }: ShortcodeTableProps) {
+	const [shortcodeSelected, setUpdateDialog] = useState<IShortcode | null>(
+		null,
+	);
+	const [addDialog, setAddDialog] = useState<boolean>(false);
 	return (
 		<div>
 			<div className="mb-4">
-				<ShortcodeDialog onSave={onAdd} />
+				<Button
+					onClick={() => {
+						setAddDialog(true);
+					}}
+				>
+					Ajouter
+				</Button>
+				<ShortcodeDialog
+					onSave={onAdd}
+					open={addDialog}
+					setOpen={() => setAddDialog(false)}
+				/>
 			</div>
 			<div className="rounded-md border">
 				<Table>
@@ -44,7 +60,7 @@ export function ShortcodeTable({
 							<TableHead>ID</TableHead>
 							<TableHead>Code</TableHead>
 							<TableHead>Type</TableHead>
-							<TableHead>Value</TableHead>
+							<TableHead>Valeur</TableHead>
 							<TableHead>Media ID</TableHead>
 							<TableHead className="w-[80px]">Actions</TableHead>
 						</TableRow>
@@ -69,7 +85,7 @@ export function ShortcodeTable({
 												className="h-8 w-8 p-0"
 											>
 												<span className="sr-only">
-													Open menu
+													Ouvrir le menu
 												</span>
 												<MoreHorizontal className="h-4 w-4" />
 											</Button>
@@ -77,17 +93,17 @@ export function ShortcodeTable({
 										<DropdownMenuContent align="end">
 											<DropdownMenuItem
 												onClick={() =>
-													onUpdate(shortcode)
+													setUpdateDialog(shortcode)
 												}
 											>
-												Update
+												Mettre à jour
 											</DropdownMenuItem>
 											<DropdownMenuItem
 												onClick={() =>
 													onDelete(shortcode.code)
 												}
 											>
-												Delete
+												Supprimer
 											</DropdownMenuItem>
 										</DropdownMenuContent>
 									</DropdownMenu>
@@ -96,6 +112,15 @@ export function ShortcodeTable({
 						))}
 					</TableBody>
 				</Table>
+
+				{shortcodeSelected && (
+					<ShortcodeDialog
+						onSave={onUpdate}
+						shortcode={shortcodeSelected}
+						open={shortcodeSelected ? true : false}
+						setOpen={() => setUpdateDialog(null)}
+					/>
+				)}
 			</div>
 		</div>
 	);