Starting to implement permissions into frontend

2025-01-30 15:50:58 +01:00
parent 8d2214e5dd
commit 0e707e8721
16 changed files with 715 additions and 35 deletions
--- a/frontend/app/(auth)/dashboard/settings/roles/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/roles/page.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+	DialogFooter,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-react";
+import { toTitleCase } from "@/lib/utils";
+import { useApi } from "@/hooks/use-api";
+
+type Action = "create" | "read" | "update" | "delete";
+
+interface Permission {
+	resource: string;
+	actions: Action[];
+}
+
+interface Role {
+	name: string;
+	permissions: Permission[];
+}
+
+// Sample data
+const initialRoles: Role[] = [
+	{
+		name: "Admin",
+		permissions: [
+			{
+				resource: "users",
+				actions: ["create", "read", "update", "delete"],
+			},
+			{
+				resource: "events",
+				actions: ["create", "read", "update", "delete"],
+			},
+			{
+				resource: "blogs",
+				actions: ["create", "read", "update", "delete"],
+			},
+		],
+	},
+	{
+		name: "Editor",
+		permissions: [
+			{ resource: "users", actions: ["read"] },
+			{ resource: "events", actions: ["create", "read", "update"] },
+			{ resource: "blogs", actions: ["create", "read", "update"] },
+		],
+	},
+];
+
+interface PermissionsGrouped {
+	resource: string;
+	actions: string[];
+}
+
+export default function RolesAndPermissions() {
+	const [roles, setRoles] = useState<Role[]>(initialRoles);
+	const [newRoleName, setNewRoleName] = useState<string>("");
+	const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+
+	const { data: permissions } = useApi<PermissionsGrouped[]>(
+		"/permissions/grouped",
+		{},
+		true,
+	);
+
+	const addNewRole = () => {
+		if (newRoleName.trim() === "") return;
+
+		const newRole: Role = {
+			name: newRoleName.trim(),
+			permissions: [
+				{ resource: "users", actions: [] },
+				{ resource: "events", actions: [] },
+				{ resource: "blogs", actions: [] },
+			],
+		};
+		setRoles([...roles, newRole]);
+		setNewRoleName("");
+		setIsDialogOpen(false);
+	};
+
+	const deleteRole = (index: number) => {
+		const updatedRoles = roles.filter((_, i) => i !== index);
+		setRoles(updatedRoles);
+	};
+
+	return (
+		<div className="container mx-auto p-4 space-y-6">
+			<div className="flex justify-between items-center">
+				<h1 className="text-2xl font-bold">Rôles et Permissions</h1>
+				<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+					<DialogTrigger asChild>
+						<Button>
+							<Plus className="mr-2 h-4 w-4" /> Nouveau rôle
+						</Button>
+					</DialogTrigger>
+					<DialogContent>
+						<DialogHeader>
+							<DialogTitle>Nouveau rôle</DialogTitle>
+						</DialogHeader>
+						<div className="py-4">
+							<Input
+								placeholder="Nom du rôle"
+								value={newRoleName}
+								onChange={(e) => setNewRoleName(e.target.value)}
+							/>
+						</div>
+						<DialogFooter>
+							<Button
+								onClick={addNewRole}
+								disabled={newRoleName.trim() === ""}
+							>
+								Ajouter
+							</Button>
+						</DialogFooter>
+					</DialogContent>
+				</Dialog>
+			</div>
+			{roles.map((role, index) => (
+				<RoleCard
+					key={index}
+					role={role}
+					onDelete={() => deleteRole(index)}
+				/>
+			))}
+		</div>
+	);
+}
+
+interface RoleCardProps {
+	role: Role;
+	onDelete: () => void;
+}
+
+function RoleCard({ role, onDelete }: RoleCardProps) {
+	return (
+		<Card>
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+				<CardTitle>{role.name}</CardTitle>
+				<Button variant="destructive" size="icon" onClick={onDelete}>
+					<Trash2 className="h-4 w-4" />
+				</Button>
+			</CardHeader>
+			<CardContent>
+				{role.permissions.map((permission) => (
+					<ResourceSection
+						key={permission.resource}
+						resource={permission.resource}
+						actions={permission.actions}
+					/>
+				))}
+			</CardContent>
+		</Card>
+	);
+}
+
+interface ResourceSectionProps {
+	resource: string;
+	actions: Action[];
+}
+
+function ResourceSection({ resource, actions }: ResourceSectionProps) {
+	const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+	return (
+		<div className="mb-4">
+			<button
+				className="flex items-center text-lg font-semibold mb-2"
+				onClick={() => setIsExpanded(!isExpanded)}
+			>
+				{isExpanded ? (
+					<ChevronDown className="mr-2" />
+				) : (
+					<ChevronRight className="mr-2" />
+				)}
+				{toTitleCase(resource)}
+			</button>
+			{isExpanded && (
+				<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 ml-6">
+					{actions.map((action) => (
+						<div
+							key={action}
+							className="flex items-center space-x-2"
+						>
+							<Checkbox id={`${resource}-${action}`} />
+							<label
+								htmlFor={`${resource}-${action}`}
+								className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+							>
+								{action}
+							</label>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}