Roles and permissions view completed

frontend/app/(auth)/dashboard/settings/roles/page.tsx

@@ -15,84 +15,62 @@ import {
 } from "@/components/ui/dialog";
 import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-react";
 import { toTitleCase } from "@/lib/utils";
-import { useApi } from "@/hooks/use-api";
+import { request, useApi } from "@/hooks/use-api";
 
-type Action = "create" | "read" | "update" | "delete";
+type Action = string;
 
 interface Permission {
 	resource: string;
-	actions: Action[];
+	action: Action;
 }
 
 interface Role {
+	id: string;
 	name: string;
-	permissions: Permission[];
+	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[];
+	[key: string]: 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[]>(
+	const { data: permissions } = useApi<PermissionsGrouped>(
 		"/permissions/grouped",
 		{},
 		true,
 	);
 
-	const addNewRole = () => {
+	const { data: roles, mutate: rolesMutate } = useApi<Role[]>(
+		"/roles",
+		{},
+		true,
+	);
+
+	const addNewRole = async () => {
 		if (newRoleName.trim() === "") return;
 
-		const newRole: Role = {
-			name: newRoleName.trim(),
-			permissions: [
-				{ resource: "users", actions: [] },
-				{ resource: "events", actions: [] },
-				{ resource: "blogs", actions: [] },
-			],
-		};
-		setRoles([...roles, newRole]);
+		const res = await request("/roles/new", {
+			requiresAuth: true,
+			method: "POST",
+			body: { name: newRoleName },
+		});
+
+		if (res.status === "Success") rolesMutate();
+
 		setNewRoleName("");
 		setIsDialogOpen(false);
 	};
 
-	const deleteRole = (index: number) => {
-		const updatedRoles = roles.filter((_, i) => i !== index);
-		setRoles(updatedRoles);
+	const deleteRole = async (id: string) => {
+		const res = await request(`/roles/${id}/delete`, {
+			method: "DELETE",
+			requiresAuth: true,
+		});
+		if (res.status === "Success") rolesMutate();
 	};
 
 	return (
@@ -127,13 +105,16 @@ export default function RolesAndPermissions() {
 					</DialogContent>
 				</Dialog>
 			</div>
-			{roles.map((role, index) => (
-				<RoleCard
-					key={index}
-					role={role}
-					onDelete={() => deleteRole(index)}
-				/>
-			))}
+			{permissions &&
+				roles &&
+				roles.map((role, index) => (
+					<RoleCard
+						key={index}
+						role={role}
+						permissions={permissions}
+						onDelete={() => deleteRole(role.id)}
+					/>
+				))}
 		</div>
 	);
 }
@@ -141,25 +122,30 @@ export default function RolesAndPermissions() {
 interface RoleCardProps {
 	role: Role;
 	onDelete: () => void;
+	permissions: PermissionsGrouped;
 }
 
-function RoleCard({ role, onDelete }: RoleCardProps) {
+function RoleCard({ role, onDelete, permissions }: RoleCardProps) {
 	return (
 		<Card>
 			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-				<CardTitle>{role.name}</CardTitle>
+				<CardTitle>{toTitleCase(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}
-					/>
-				))}
+				{Object.entries(permissions).map(([res, actions]) => {
+					console.log(role.permissions);
+					return (
+						<ResourceSection
+							key={res}
+							resource={res}
+							defaultActions={actions}
+							role={role}
+						/>
+					);
+				})}
 			</CardContent>
 		</Card>
 	);
@@ -167,12 +153,48 @@ function RoleCard({ role, onDelete }: RoleCardProps) {
 
 interface ResourceSectionProps {
 	resource: string;
-	actions: Action[];
+	defaultActions: string[];
+	role: Role;
 }
 
-function ResourceSection({ resource, actions }: ResourceSectionProps) {
+function ResourceSection({
+	resource,
+	defaultActions,
+	role,
+}: ResourceSectionProps) {
 	const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
+	const a = (role.permissions ?? [])
+		.map((p) => (p.resource === resource ? p.action : null))
+		.filter((a) => a !== null);
+
+	const ActionCheckbox = ({ action }: { action: Action }) => {
+		const [checked, setChecked] = useState(a.includes(action));
+		return (
+			<div key={action} className="flex items-center space-x-2">
+				<Checkbox
+					onCheckedChange={async (e) => {
+						if (typeof e === "boolean") {
+							const res = await request(
+								`/roles/${role.id}/permissions/${resource}/${action}/${e ? "add" : "remove"}`,
+								{ method: "PATCH", requiresAuth: true },
+							);
+							if (res.status === "Success") setChecked(e);
+						}
+					}}
+					checked={checked}
+					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>
+		);
+	};
+
 	return (
 		<div className="mb-4">
 			<button
@@ -188,19 +210,11 @@ function ResourceSection({ resource, actions }: ResourceSectionProps) {
 			</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>
+					{defaultActions.map((action) => (
+						<ActionCheckbox
+							key={`${resource}:${action}`}
+							action={action}
+						/>
 					))}
 				</div>
 			)}