Started implementing the roles permissions

src/pages/entities/[id]/index.tsx

@@ -1,19 +1,23 @@
 /* eslint-disable @next/next/no-img-element */
 import CardList from "@/components/High/CardList";
 import Layout from "@/components/High/Layout";
+import Select from "@/components/Low/Select";
 import Tooltip from "@/components/Low/Tooltip";
+import { useEntityPermission } from "@/hooks/useEntityPermissions";
 import {useListSearch} from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
 import {Entity, EntityWithRoles, Role} from "@/interfaces/entity";
 import {GroupWithUsers, User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import {USER_TYPE_LABELS} from "@/resources/user";
+import { findBy, redirect, serialize } from "@/utils";
 import {getEntityWithRoles} from "@/utils/entities.be";
 import {convertToUsers, getGroup} from "@/utils/groups.be";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import {checkAccess, doesEntityAllow, getTypesOfUser} from "@/utils/permissions";
 import {getUserName} from "@/utils/users";
 import {getEntityUsers, getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import {withIronSessionSsr} from "iron-session/next";
@@ -28,6 +32,7 @@ import {
 	BsClockFill,
 	BsEnvelopeFill,
 	BsFillPersonVcardFill,
+	BsPerson,
 	BsPlus,
 	BsSquare,
 	BsStopwatchFill,
@@ -40,54 +45,31 @@ import {toast, ToastContainer} from "react-toastify";
 export const getServerSideProps = withIronSessionSsr(async ({req, params}) => {
 	const user = req.session.user as User;
 
-	if (!user) {
-		return {
-			redirect: {
-				destination: "/login",
-				permanent: false,
-			},
-		};
-	}
-
-	if (shouldRedirectHome(user)) {
-		return {
-			redirect: {
-				destination: "/",
-				permanent: false,
-			},
-		};
-	}
+	if (!user) return redirect("/login")
+	if (shouldRedirectHome(user)) return redirect("/")
 
 	const {id} = params as {id: string};
 
-	const entityWithRoles = await getEntityWithRoles(id);
-	if (!entityWithRoles || (checkAccess(user, getTypesOfUser(["admin", "developer"])) && !user.entities.map((x) => x.id).includes(id))) {
-		return {
-			redirect: {
-				destination: "/entities",
-				permanent: false,
-			},
-		};
-	}
+	const entity = await getEntityWithRoles(id);
+	if (!entity) return redirect("/entities")
 
-	const {entity, roles} = entityWithRoles;
+	if (!doesEntityAllow(user, entity, "view_entities")) return redirect(`/entities`)
 
 	const linkedUsers = await getLinkedUsers(user.id, user.type);
 	const entityUsers = await getEntityUsers(id);
 
 	const usersWithRole = entityUsers.map((u) => {
 		const e = u.entities.find((e) => e.id === id);
-		return {...u, role: roles.find((r) => r.id === e?.role)};
+		return {...u, role: findBy(entity.roles, 'id', e?.role)};
 	});
 
 	return {
-		props: {
+		props: serialize({
 			user,
-			entity: JSON.parse(JSON.stringify(entity)),
-			roles: JSON.parse(JSON.stringify(roles)),
-			users: JSON.parse(JSON.stringify(usersWithRole)),
-			linkedUsers: JSON.parse(JSON.stringify(linkedUsers.users)),
-		},
+			entity,
+			users: usersWithRole,
+			linkedUsers: linkedUsers.users,
+		}),
 	};
 }, sessionOptions);
 
@@ -95,26 +77,32 @@ type UserWithRole = User & {role?: Role};
 
 interface Props {
 	user: User;
-	entity: Entity;
-	roles: Role[];
+	entity: EntityWithRoles;
 	users: UserWithRole[];
 	linkedUsers: User[];
 }
 
-export default function Home({user, entity, roles, users, linkedUsers}: Props) {
+export default function Home({user, entity, users, linkedUsers}: Props) {
 	const [isAdding, setIsAdding] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
 
 	const router = useRouter();
 
-	const allowEntityEdit = useMemo(() => checkAccess(user, ["admin", "developer"]), [user]);
+	const canRenameEntity = useEntityPermission(user, entity, "rename_entity")
+	const canViewRoles = useEntityPermission(user, entity, "view_entity_roles")
+	const canDeleteEntity = useEntityPermission(user, entity, "delete_entity")
+
+	const canAddMembers = useEntityPermission(user, entity, "add_to_entity")
+	const canRemoveMembers = useEntityPermission(user, entity, "remove_from_entity")
+
+	const canAssignRole = useEntityPermission(user, entity, "assign_to_role")
 
 	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
 
 	const removeParticipants = () => {
 		if (selectedUsers.length === 0) return;
-		if (!allowEntityEdit) return;
+		if (!canRemoveMembers) return;
 		if (!confirm(`Are you sure you want to remove ${selectedUsers.length} member${selectedUsers.length === 1 ? "" : "s"} from this entity?`))
 			return;
 
@@ -136,13 +124,14 @@ export default function Home({user, entity, roles, users, linkedUsers}: Props) {
 
 	const addParticipants = () => {
 		if (selectedUsers.length === 0) return;
-		if (!allowEntityEdit || !isAdding) return;
+		if (!canAddMembers || !isAdding) return;
 		if (!confirm(`Are you sure you want to add ${selectedUsers.length} member${selectedUsers.length === 1 ? "" : "s"} to this entity?`)) return;
 
 		setIsLoading(true);
+		const defaultRole = findBy(entity.roles, 'isDefault', true)!
 
 		axios
-			.patch(`/api/entities/${entity.id}/users`, {add: true, members: selectedUsers, role: "90ce8f08-08c8-41e4-9848-f1500ddc3930"})
+			.patch(`/api/entities/${entity.id}/users`, {add: true, members: selectedUsers, role: defaultRole.id})
 			.then(() => {
 				toast.success("The entity has been updated successfully!");
 				router.replace(router.asPath);
@@ -156,14 +145,14 @@ export default function Home({user, entity, roles, users, linkedUsers}: Props) {
 	};
 
 	const renameGroup = () => {
-		if (!allowEntityEdit) return;
+		if (!canRenameEntity) return;
 
-		const name = prompt("Rename this entity:", entity.label);
-		if (!name) return;
+		const label = prompt("Rename this entity:", entity.label);
+		if (!label) return;
 
 		setIsLoading(true);
 		axios
-			.patch(`/api/entities/${entity.id}`, {name})
+			.patch(`/api/entities/${entity.id}`, {label})
 			.then(() => {
 				toast.success("The entity has been updated successfully!");
 				router.replace(router.asPath);
@@ -176,7 +165,7 @@ export default function Home({user, entity, roles, users, linkedUsers}: Props) {
 	};
 
 	const deleteGroup = () => {
-		if (!allowEntityEdit) return;
+		if (!canDeleteEntity) return;
 		if (!confirm("Are you sure you want to delete this entity?")) return;
 
 		setIsLoading(true);
@@ -194,11 +183,29 @@ export default function Home({user, entity, roles, users, linkedUsers}: Props) {
 			.finally(() => setIsLoading(false));
 	};
 
+	const assignUsersToRole = (role: string) => {
+		if (!canAssignRole) return
+		if (selectedUsers.length === 0) return
+
+		setIsLoading(true);
+		axios
+			.post(`/api/roles/${role}/users`, {users: selectedUsers})
+			.then(() => {
+				toast.success("The role has been assigned successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	}
+
 	const renderCard = (u: UserWithRole) => {
 		return (
 			<button
 				onClick={() => toggleUser(u)}
-				disabled={!allowEntityEdit}
+				disabled={isAdding ? !canAddMembers : !canRemoveMembers}
 				key={u.id}
 				className={clsx(
 					"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
@@ -255,89 +262,111 @@ export default function Home({user, entity, roles, users, linkedUsers}: Props) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<ToastContainer />
-			{user && (
-				<Layout user={user}>
-					<section className="flex flex-col gap-0">
-						<div className="flex flex-col gap-3">
-							<div className="flex items-end justify-between">
-								<div className="flex items-center gap-2">
-									<Link
-										href="/entities"
-										className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-										<BsChevronLeft />
-									</Link>
-									<h2 className="font-bold text-2xl">{entity.label}</h2>
-								</div>
-							</div>
-							{allowEntityEdit && !isAdding && (
-								<div className="flex items-center gap-2">
-									<button
-										onClick={renameGroup}
-										disabled={isLoading}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsTag />
-										<span className="text-xs">Rename Entity</span>
-									</button>
-									<button
-										onClick={deleteGroup}
-										disabled={isLoading}
-										className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsTrash />
-										<span className="text-xs">Delete Entity</span>
-									</button>
-								</div>
-							)}
-						</div>
-						<Divider />
-						<div className="flex items-center justify-between mb-4">
-							<span className="font-semibold text-xl">Members ({users.length})</span>
-							{allowEntityEdit && !isAdding && (
-								<div className="flex items-center gap-2">
-									<button
-										onClick={() => setIsAdding(true)}
-										disabled={isLoading}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsPlus />
-										<span className="text-xs">Add Members</span>
-									</button>
-									<button
-										onClick={removeParticipants}
-										disabled={selectedUsers.length === 0 || isLoading}
-										className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsTrash />
-										<span className="text-xs">Remove Members</span>
-									</button>
-								</div>
-							)}
-							{allowEntityEdit && isAdding && (
-								<div className="flex items-center gap-2">
-									<button
-										onClick={() => setIsAdding(false)}
-										disabled={isLoading}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsX />
-										<span className="text-xs">Discard Selection</span>
-									</button>
-									<button
-										onClick={addParticipants}
-										disabled={selectedUsers.length === 0 || isLoading}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsPlus />
-										<span className="text-xs">Add Members ({selectedUsers.length})</span>
-									</button>
-								</div>
-							)}
-						</div>
 
-						<CardList<User | UserWithRole>
-							list={isAdding ? linkedUsers : users}
-							renderCard={renderCard}
-							searchFields={[["name"], ["corporateInformation", "companyInformation", "name"], ["role", "label"], ["type"]]}
-						/>
-					</section>
-				</Layout>
-			)}
+			<Layout user={user}>
+				<section className="flex flex-col gap-0">
+					<div className="flex flex-col gap-3">
+						<div className="flex items-end justify-between">
+							<div className="flex items-center gap-2">
+								<Link
+									href="/entities"
+									className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+									<BsChevronLeft />
+								</Link>
+								<h2 className="font-bold text-2xl">{entity.label}</h2>
+							</div>
+						</div>
+						<div className="flex items-center gap-2">
+							<button
+								onClick={renameGroup}
+								disabled={isLoading || !canRenameEntity}
+								className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsTag />
+								<span className="text-xs">Rename Entity</span>
+							</button>
+							<button
+								onClick={() => router.push(`/entities/${entity.id}/roles`)}
+								disabled={isLoading || !canViewRoles}
+								className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsPerson />
+								<span className="text-xs">Edit Roles</span>
+							</button>
+							<button
+								onClick={deleteGroup}
+								disabled={isLoading || !canDeleteEntity}
+								className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+								<BsTrash />
+								<span className="text-xs">Delete Entity</span>
+							</button>
+						</div>
+					</div>
+					<Divider />
+					<div className="flex items-center justify-between mb-4">
+						<span className="font-semibold text-xl">Members ({users.length})</span>
+						{!isAdding && (
+							<div className="flex items-center gap-2">
+								<button
+									onClick={() => setIsAdding(true)}
+									disabled={isLoading || !canAddMembers}
+									className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsPlus />
+									<span className="text-xs">Add Members</span>
+								</button>
+
+								<Menu>
+									<MenuButton
+										disabled={isLoading || !canAssignRole || selectedUsers.length === 0}
+										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+										<BsPerson />
+										<span className="text-xs">Assign Role</span>
+									</MenuButton>
+									<MenuItems anchor="bottom" className="bg-white rounded-xl shadow drop-shadow border mt-1 flex flex-col">
+										{entity.roles.map((role) => (
+											<MenuItem key={role.id}>
+												<button onClick={() => assignUsersToRole(role.id)} className="p-4 hover:bg-neutral-100 w-32">
+													{ role.label }
+												</button>
+											</MenuItem>
+										))}
+									</MenuItems>
+								</Menu>
+
+								<button
+									onClick={removeParticipants}
+									disabled={selectedUsers.length === 0 || isLoading || !canRemoveMembers}
+									className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsTrash />
+									<span className="text-xs">Remove Members</span>
+								</button>
+							</div>
+						)}
+						{isAdding && (
+							<div className="flex items-center gap-2">
+								<button
+									onClick={() => setIsAdding(false)}
+									disabled={isLoading}
+									className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsX />
+									<span className="text-xs">Discard Selection</span>
+								</button>
+								<button
+									onClick={addParticipants}
+									disabled={selectedUsers.length === 0 || isLoading || !canAddMembers}
+									className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsPlus />
+									<span className="text-xs">Add Members ({selectedUsers.length})</span>
+								</button>
+							</div>
+						)}
+					</div>
+
+					<CardList<User | UserWithRole>
+						list={isAdding ? linkedUsers : users}
+						renderCard={renderCard}
+						searchFields={[["name"], ["corporateInformation", "companyInformation", "name"], ["role", "label"], ["type"]]}
+					/>
+				</section>
+			</Layout>
 		</>
 	);
 }