Roles and permissions view completed

backend/api/permissions/resource_actions.go

@@ -34,17 +34,14 @@ func HandleResourceActions(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	result := make([]map[string]interface{}, 0)
+	result := make(map[string]interface{}, 0)
 
 	for _, gp := range groupedPermissions {
 		var actions []string
 
 		_ = gp.Actions.AssignTo(&actions)
 
-		result = append(result, map[string]interface{}{
+		result[gp.Resource] = actions
-			"resource": gp.Resource,
-			"actions":  actions,
-		})
 	}
 
 	core.JSONSuccess{

backend/api/roles/add_permission.go

@@ -3,20 +3,19 @@ package roles
 import (
 	"context"
 	"net/http"
-	"strconv"
 
 	"fr.latosa-escrima/core"
 	"fr.latosa-escrima/core/models"
-	"github.com/google/uuid"
 )
 
 func HandleAddPermission(w http.ResponseWriter, r *http.Request) {
 	ctx := context.Background()
 	role_id := r.PathValue("role_uuid")
-	permission_id := r.PathValue("permission_id")
+	resource := r.PathValue("resource")
+	action := r.PathValue("action")
 	var permission models.Permission
 	count, err := core.DB.NewSelect().Model(&permission).
-		Where("id = ?", permission_id).
+		Where("resource = ? AND action = ?", resource, action).
 		Limit(1).ScanAndCount(ctx)
 	if count == 0 {
 		core.JSONError{
@@ -39,11 +38,9 @@ func HandleAddPermission(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	pid, err := strconv.Atoi(permission_id)
-	rid, err := uuid.Parse(role_id)
 	permissionRole := models.PermissionToRole{
-		PermissionID: pid,
+		PermissionID: permission.ID,
-		RoleID:       rid,
+		RoleID:       role.ID,
 	}
 	_, err = core.DB.NewInsert().Model(&permissionRole).Ignore().
 		Exec(ctx)

backend/api/roles/remove_permission.go

@@ -11,10 +11,22 @@ import (
 func HandleRemovePermission(w http.ResponseWriter, r *http.Request) {
 	ctx := context.Background()
 	role_id := r.PathValue("role_uuid")
-	permission_id := r.PathValue("permission_id")
+	resource := r.PathValue("resource")
+	action := r.PathValue("action")
+	var permission models.Permission
+	count, err := core.DB.NewSelect().Model(&permission).
+		Where("resource = ? AND action = ?", resource, action).
+		Limit(1).ScanAndCount(ctx)
+	if count == 0 {
+		core.JSONError{
+			Status:  core.Error,
+			Message: "Permission doesn't exist.",
+		}.Respond(w, http.StatusNotFound)
+		return
+	}
 
-	_, err := core.DB.NewDelete().Model((*models.PermissionToRole)(nil)).
+	_, err = core.DB.NewDelete().Model((*models.PermissionToRole)(nil)).
-		Where("permission_id = ? AND role_id = ?", permission_id, role_id).
+		Where("permission_id = ? AND role_id = ?", permission.ID, role_id).
 		Exec(ctx)
 
 	if err != nil {

backend/api/roles_routes.go

@@ -30,11 +30,11 @@ var RolesRoutes = map[string]core.Handler{
 		Handler:     roles.HandleRolePermissions,
 		Middlewares: []core.Middleware{Methods("GET"), AuthJWT},
 	},
-	"/roles/{role_uuid}/permissions/{permission_id}/add": {
+	"/roles/{role_uuid}/permissions/{resource}/{action}/add": {
 		Handler:     roles.HandleAddPermission,
 		Middlewares: []core.Middleware{Methods("PATCH"), AuthJWT},
 	},
-	"/roles/{role_uuid}/permissions/{permission_id}/remove": {
+	"/roles/{role_uuid}/permissions/{resource}/{action}/remove": {
 		Handler:     roles.HandleRemovePermission,
 		Middlewares: []core.Middleware{Methods("PATCH"), AuthJWT},
 	},

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;
+	[key: string]: 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[]>(
+	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 = {
+		const res = await request("/roles/new", {
-			name: newRoleName.trim(),
+			requiresAuth: true,
-			permissions: [
+			method: "POST",
-				{ resource: "users", actions: [] },
+			body: { name: newRoleName },
-				{ resource: "events", actions: [] },
+		});
-				{ resource: "blogs", actions: [] },
+
-			],
+		if (res.status === "Success") rolesMutate();
-		};
+
-		setRoles([...roles, newRole]);
 		setNewRoleName("");
 		setIsDialogOpen(false);
 	};
 
-	const deleteRole = (index: number) => {
+	const deleteRole = async (id: string) => {
-		const updatedRoles = roles.filter((_, i) => i !== index);
+		const res = await request(`/roles/${id}/delete`, {
-		setRoles(updatedRoles);
+			method: "DELETE",
+			requiresAuth: true,
+		});
+		if (res.status === "Success") rolesMutate();
 	};
 
 	return (
@@ -127,11 +105,14 @@ export default function RolesAndPermissions() {
 					</DialogContent>
 				</Dialog>
 			</div>
-			{roles.map((role, index) => (
+			{permissions &&
+				roles &&
+				roles.map((role, index) => (
 					<RoleCard
 						key={index}
 						role={role}
-					onDelete={() => deleteRole(index)}
+						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) => (
+				{Object.entries(permissions).map(([res, actions]) => {
+					console.log(role.permissions);
+					return (
 						<ResourceSection
-						key={permission.resource}
+							key={res}
-						resource={permission.resource}
+							resource={res}
-						actions={permission.actions}
+							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) => (
+					{defaultActions.map((action) => (
-						<div
+						<ActionCheckbox
-							key={action}
+							key={`${resource}:${action}`}
-							className="flex items-center space-x-2"
+							action={action}
-						>
+						/>
-							<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>
 			)}