devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Continued creating the permission system

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-10-11 10:47:35 +01:00
parent 55204e2ce1
commit a53ee79c0a
12 changed files with 196 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/classrooms/[id].tsx
View File

@@ -1,18 +1,21 @@
/* eslint-disable @next/next/no-img-element */
import Layout from "@/components/High/Layout";
import Tooltip from "@/components/Low/Tooltip";
import { useEntityPermission } from "@/hooks/useEntityPermissions";
import {useListSearch} from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import { EntityWithRoles } from "@/interfaces/entity";
import {GroupWithUsers, User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session";
import {USER_TYPE_LABELS} from "@/resources/user";
import { redirect } from "@/utils";
import { mapBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getEntitiesWithRoles, 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, findAllowedEntities, getTypesOfUser} from "@/utils/permissions";
import {getUserName} from "@/utils/users";
import {getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
import {getEntityUsers, getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
import axios from "axios";
import clsx from "clsx";
import {withIronSessionSsr} from "iron-session/next";
@@ -34,21 +37,20 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res, params})
const {id} = params as {id: string};
const group = await getGroup(id);
if (!group || (checkAccess(user, getTypesOfUser(["admin", "developer"])) && group.admin !== user.id && !group.participants.includes(user.id))) {
return {
redirect: {
destination: "/groups",
permanent: false,
},
};
}
if (!group || !group.entity) return redirect("/classrooms")
const linkedUsers = await getLinkedUsers(user.id, user.type);
const entity = await getEntityWithRoles(group.entity)
if (!entity) return redirect("/classrooms")
const canView = doesEntityAllow(user, entity, "view_classrooms")
if (!canView) return redirect("/")
const linkedUsers = await getEntityUsers(entity.id)
const users = await getSpecificUsers([...group.participants, group.admin]);
const groupWithUser = convertToUsers(group, users);
return {
props: {user, group: JSON.parse(JSON.stringify(groupWithUser)), users: JSON.parse(JSON.stringify(linkedUsers.users))},
props: serialize({user, group: groupWithUser, users: linkedUsers, entity}),
};
}, sessionOptions);
@@ -56,13 +58,19 @@ interface Props {
user: User;
group: GroupWithUsers;
users: User[];
entity: EntityWithRoles
}
export default function Home({user, group, users}: Props) {
export default function Home({user, group, users, entity}: Props) {
const [isAdding, setIsAdding] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
const canAddParticipants = useEntityPermission(user, entity, "add_to_classroom")
const canRemoveParticipants = useEntityPermission(user, entity, "remove_from_classroom")
const canRenameClassroom = useEntityPermission(user, entity, "rename_classrooms")
const canDeleteClassroom = useEntityPermission(user, entity, "delete_classroom")
const nonParticipantUsers = useMemo(
() => users.filter((x) => ![...group.participants.map((g) => g.id), group.admin.id, user.id].includes(x.id)),
[users, group.participants, group.admin.id, user.id],
@@ -82,7 +90,7 @@ export default function Home({user, group, users}: Props) {
const removeParticipants = () => {
if (selectedUsers.length === 0) return;
if (!allowGroupEdit) return;
if (!canRemoveParticipants) return;
if (!confirm(`Are you sure you want to remove ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} from this group?`))
return;
@@ -103,7 +111,7 @@ export default function Home({user, group, users}: Props) {
const addParticipants = () => {
if (selectedUsers.length === 0) return;
if (!allowGroupEdit || !isAdding) return;
if (!canAddParticipants || !isAdding) return;
if (!confirm(`Are you sure you want to add ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} to this group?`))
return;
@@ -123,7 +131,7 @@ export default function Home({user, group, users}: Props) {
};
const renameGroup = () => {
if (!allowGroupEdit) return;
if (!canRenameClassroom) return;
const name = prompt("Rename this group:", group.name);
if (!name) return;
@@ -143,7 +151,7 @@ export default function Home({user, group, users}: Props) {
};
const deleteGroup = () => {
if (!allowGroupEdit) return;
if (!canDeleteClassroom) return;
if (!confirm("Are you sure you want to delete this group?")) return;
setIsLoading(true);
@@ -192,18 +200,18 @@ export default function Home({user, group, users}: Props) {
<BsFillPersonVcardFill className="text-xl" /> {getUserName(group.admin)}
</span>
</div>
{allowGroupEdit && !isAdding && (
{!isAdding && (
<div className="flex items-center gap-2">
<button
onClick={renameGroup}
disabled={isLoading}
disabled={isLoading || !canRenameClassroom}
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 Group</span>
</button>
<button
onClick={deleteGroup}
disabled={isLoading}
disabled={isLoading || !canDeleteClassroom}
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 Group</span>
@@ -214,25 +222,25 @@ export default function Home({user, group, users}: Props) {
<Divider />
<div className="flex items-center justify-between mb-4">
<span className="font-semibold text-xl">Participants</span>
{allowGroupEdit && !isAdding && (
{!isAdding && (
<div className="flex items-center gap-2">
<button
onClick={() => setIsAdding(true)}
disabled={isLoading}
disabled={isLoading || !canAddParticipants}
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 Participants</span>
</button>
<button
onClick={removeParticipants}
disabled={selectedUsers.length === 0 || isLoading}
disabled={selectedUsers.length === 0 || isLoading || !canRemoveParticipants}
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 Participants</span>
</button>
</div>
)}
{allowGroupEdit && isAdding && (
{isAdding && (
<div className="flex items-center gap-2">
<button
onClick={() => setIsAdding(false)}
@@ -243,7 +251,7 @@ export default function Home({user, group, users}: Props) {
</button>
<button
onClick={addParticipants}
disabled={selectedUsers.length === 0 || isLoading}
disabled={selectedUsers.length === 0 || isLoading || !canAddParticipants}
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 Participants</span>
@@ -261,7 +269,7 @@ export default function Home({user, group, users}: Props) {
{items.map((u) => (
<button
onClick={() => toggleUser(u)}
disabled={!allowGroupEdit}
disabled={isAdding ? !canAddParticipants : !canRemoveParticipants}
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",

12
src/pages/classrooms/create.tsx
View File

@@ -5,12 +5,12 @@ import Select from "@/components/Low/Select";
import Tooltip from "@/components/Low/Tooltip";
import {useListSearch} from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import {Entity} from "@/interfaces/entity";
import {Entity, EntityWithRoles} from "@/interfaces/entity";
import {User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session";
import {USER_TYPE_LABELS} from "@/resources/user";
import {mapBy, redirect, serialize} from "@/utils";
import {getEntities} from "@/utils/entities.be";
import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {getUserName} from "@/utils/users";
import {getLinkedUsers} from "@/utils/users.be";
@@ -26,6 +26,7 @@ import {useState} from "react";
import {BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill} from "react-icons/bs";
import {toast, ToastContainer} from "react-toastify";
import { requestUser } from "@/utils/api";
import { findAllowedEntities } from "@/utils/permissions";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = await requestUser(req, res)
@@ -34,17 +35,18 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
if (shouldRedirectHome(user)) return redirect("/")
const linkedUsers = await getLinkedUsers(user.id, user.type);
const entities = await getEntities(mapBy(user.entities, "id"));
const entities = await getEntitiesWithRoles(mapBy(user.entities, "id"));
const allowedEntities = findAllowedEntities(user, entities, "create_classroom")
return {
props: serialize({user, entities, users: linkedUsers.users.filter((x) => x.id !== user.id)}),
props: serialize({user, entities: allowedEntities, users: linkedUsers.users.filter((x) => x.id !== user.id)}),
};
}, sessionOptions);
interface Props {
user: User;
users: User[];
entities: Entity[];
entities: EntityWithRoles[];
}
export default function Home({user, users, entities}: Props) {

25
src/pages/classrooms/index.tsx
View File

@@ -14,8 +14,12 @@ import {uniq} from "lodash";
import {BsPlus} from "react-icons/bs";
import CardList from "@/components/High/CardList";
import Separator from "@/components/Low/Separator";
import {mapBy, redirect} from "@/utils";
import {mapBy, redirect, serialize} from "@/utils";
import { requestUser } from "@/utils/api";
import { findAllowedEntities } from "@/utils/permissions";
import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
import { EntityWithRoles } from "@/interfaces/entity";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = await requestUser(req, res)
@@ -24,13 +28,16 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
if (shouldRedirectHome(user)) return redirect("/")
const entityIDS = mapBy(user.entities, "id");
const groups = await getGroupsForEntities(entityIDS);
const entities = await getEntitiesWithRoles(entityIDS)
const allowedEntities = findAllowedEntities(user, entities, "view_classrooms")
const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id'));
const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants.slice(0, 5), g.admin])));
const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users));
return {
props: {user, groups: JSON.parse(JSON.stringify(groupsWithUsers))},
props: serialize({user, groups: groupsWithUsers, entities: allowedEntities}),
};
}, sessionOptions);
@@ -47,8 +54,11 @@ const SEARCH_FIELDS = [
interface Props {
user: User;
groups: GroupWithUsers[];
entities: EntityWithRoles[]
}
export default function Home({user, groups}: Props) {
export default function Home({user, groups, entities}: Props) {
const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_classroom')
const renderCard = (group: GroupWithUsers) => (
<Link
href={`/classrooms/${group.id}`}
@@ -98,7 +108,12 @@ export default function Home({user, groups}: Props) {
<Separator />
</div>
<CardList<GroupWithUsers> list={groups} searchFields={SEARCH_FIELDS} renderCard={renderCard} firstCard={firstCard} />
<CardList<GroupWithUsers>
list={groups}
searchFields={SEARCH_FIELDS}
renderCard={renderCard}
firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
/>
</section>
</Layout>
</>