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

Created the new permissions as an example

Browse Source
This commit is contained in:
Tiago Ribeiro
2025-02-06 18:48:31 +00:00
parent 63604b68e2
commit 36afde8aa4
3 changed files with 368 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/pages/approval-workflows/index.tsx
View File

@@ -4,64 +4,63 @@ import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
import { Module, ModuleTypeLabels } from "@/interfaces";
import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
import { Entity, EntityWithRoles } from "@/interfaces/entity";
import { User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
import { getEntities } from "@/utils/entities.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getSpecificUsers } from "@/utils/users.be";
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import {useAllowedEntities, useAllowedEntitiesSomePermissions, useEntityPermission} from "@/hooks/useEntityPermissions";
import {Module, ModuleTypeLabels} from "@/interfaces";
import {ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel} from "@/interfaces/approval.workflow";
import {Entity, EntityWithRoles} from "@/interfaces/entity";
import {User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session";
import {redirect, serialize} from "@/utils";
import {requestUser} from "@/utils/api";
import {getApprovalWorkflows} from "@/utils/approval.workflows.be";
import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {findAllowedEntities} from "@/utils/permissions";
import {getSpecificUsers} from "@/utils/users.be";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
import { withIronSessionSsr } from "iron-session/next";
import {withIronSessionSsr} from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { useEffect, useState } from "react";
import { BsTrash } from "react-icons/bs";
import { FaRegEdit } from "react-icons/fa";
import { IoIosAddCircleOutline } from "react-icons/io";
import { toast, ToastContainer } from "react-toastify";
import {useEffect, useState} from "react";
import {BsTrash} from "react-icons/bs";
import {FaRegEdit} from "react-icons/fa";
import {IoIosAddCircleOutline} from "react-icons/io";
import {toast, ToastContainer} from "react-toastify";
const columnHelper = createColumnHelper<ApprovalWorkflow>();
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
const user = await requestUser(req, res)
if (!user) return redirect("/login")
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = await requestUser(req, res);
if (!user) return redirect("/login");
if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
return redirect("/")
if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) return redirect("/");
const workflows = await getApprovalWorkflows("active-workflows");
const allAssigneeIds: string[] = [
...new Set(
workflows
.map(workflow => workflow.steps
.map(step => step.assignees)
.flat()
).flat()
)
];
const allAssigneeIds: string[] = [...new Set(workflows.map((workflow) => workflow.steps.map((step) => step.assignees).flat()).flat())];
const entities = await getEntitiesWithRoles(user.entities.map((entity) => entity.id));
const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
return {
props: serialize({
user,
initialWorkflows: workflows,
workflowsAssignees: await getSpecificUsers(allAssigneeIds),
userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
userEntitiesWithLabel: entities,
}),
};
}, sessionOptions);
const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
approved: "bg-green-100 text-green-800 border border-green-300 before:content-[''] before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:inline-block before:mr-2",
pending: "bg-orange-100 text-orange-800 border border-orange-300 before:content-[''] before:w-2 before:h-2 before:bg-orange-500 before:rounded-full before:inline-block before:mr-2",
rejected: "bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
const StatusClassNames: {[key in ApprovalWorkflowStatus]: string} = {
approved:
"bg-green-100 text-green-800 border border-green-300 before:content-[''] before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:inline-block before:mr-2",
pending:
"bg-orange-100 text-orange-800 border border-orange-300 before:content-[''] before:w-2 before:h-2 before:bg-orange-500 before:rounded-full before:inline-block before:mr-2",
rejected:
"bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
};
type CustomStatus = ApprovalWorkflowStatus | undefined;
@@ -86,15 +85,14 @@ const STATUS_OPTIONS = [
];
interface Props {
user: User,
initialWorkflows: ApprovalWorkflow[],
workflowsAssignees: User[],
userEntitiesWithLabel: Entity[],
user: User;
initialWorkflows: ApprovalWorkflow[];
workflowsAssignees: User[];
userEntitiesWithLabel: EntityWithRoles[];
}
export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
const { workflows, reload } = useApprovalWorkflows();
export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel}: Props) {
const {workflows, reload} = useApprovalWorkflows();
const currentWorkflows = workflows || initialWorkflows;
const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
@@ -103,9 +101,12 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
const [nameFilter, setNameFilter] = useState<string>("");
const allowedEntities = useAllowedEntities(user, userEntitiesWithLabel, "view_workflows");
const allowedSomeEntities = useAllowedEntitiesSomePermissions(user, userEntitiesWithLabel, ["view_workflows", "create_workflow"]);
const ENTITY_OPTIONS = [
...userEntitiesWithLabel
.map(entity => ({
.map((entity) => ({
label: entity.label,
value: entity.id,
filter: (x: ApprovalWorkflow) => x.entityId === entity.id,
@@ -131,18 +132,16 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
}
if (nameFilter.trim() !== "") {
const nameFilterFunction = (workflow: ApprovalWorkflow) =>
workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
const nameFilterFunction = (workflow: ApprovalWorkflow) => workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
filters.push(nameFilterFunction);
}
// Apply all filters
const filtered = currentWorkflows.filter(workflow => filters.every(filterFn => filterFn(workflow)));
const filtered = currentWorkflows.filter((workflow) => filters.every((filterFn) => filterFn(workflow)));
setFilteredWorkflows(filtered);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentWorkflows, statusFilter, entityFilter, nameFilter]);
const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
setNameFilter(name);
};
@@ -166,17 +165,13 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
toast.error("Something went wrong, please try again later.");
}
return;
})
});
};
const columns = [
columnHelper.accessor("name", {
header: "EXAM NAME",
cell: (info) => (
<span className="font-medium">
{info.getValue()}
</span>
),
cell: (info) => <span className="font-medium">{info.getValue()}</span>,
}),
columnHelper.accessor("modules", {
header: "MODULES",
@@ -185,8 +180,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
{info.getValue().map((module: Module, index: number) => (
<span
key={index}
className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900"
>
className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900">
{ModuleTypeLabels[module]}
</span>
))}
@@ -196,18 +190,18 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
columnHelper.accessor("status", {
header: "STATUS",
cell: (info) => (
<span className={clsx("inline-block rounded-full px-3 py-1 text-sm font-medium text-left w-[110px]", StatusClassNames[info.getValue()])}>
<span
className={clsx(
"inline-block rounded-full px-3 py-1 text-sm font-medium text-left w-[110px]",
StatusClassNames[info.getValue()],
)}>
{ApprovalWorkflowStatusLabel[info.getValue()]}
</span>
),
}),
columnHelper.accessor("entityId", {
header: "ENTITY",
cell: (info) => (
<span className="font-medium">
{userEntitiesWithLabel.find((entity) => entity.id === info.getValue())?.label}
</span>
),
cell: (info) => <span className="font-medium">{userEntitiesWithLabel.find((entity) => entity.id === info.getValue())?.label}</span>,
}),
columnHelper.accessor("steps", {
id: "currentAssignees",
@@ -229,8 +223,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
{assignees?.map((assigneeName: string, index: number) => (
<span
key={index}
className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900"
>
className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900">
{assigneeName}
</span>
))}
@@ -248,9 +241,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
return (
<span className="font-medium">
{currentStep && !rejected
? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}`
: "Completed"}
{currentStep && !rejected ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}` : "Completed"}
</span>
);
},
@@ -258,7 +249,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
columnHelper.accessor("steps", {
header: "ACTIONS",
id: "actions",
cell: ({ row }) => {
cell: ({row}) => {
const steps = row.original.steps;
const currentStep = steps.find((step) => !step.completed);
const rejected = steps.find((step) => step.rejected);
@@ -271,8 +262,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
onClick={(e) => {
e.stopPropagation();
deleteApprovalWorkflow(row.original._id?.toString(), row.original.name);
}}
>
}}>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</button>
@@ -281,15 +271,14 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
onClick={(e) => e.stopPropagation()}
data-tip="Edit"
href={`/approval-workflows/${row.original._id?.toString()}/edit`}
className="cursor-pointer tooltip"
>
className="cursor-pointer tooltip">
<FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</Link>
)}
</div>
);
},
})
}),
];
const table = useReactTable({
@@ -314,11 +303,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
<div className="flex flex-row">
<Link href={"/approval-workflows/create"}>
<Button
color="purple"
variant="solid"
className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
>
<Button color="purple" variant="solid" className="min-w-fit text-lg font-medium flex items-center gap-2 text-left">
<IoIosAddCircleOutline className="size-6" />
Configure Workflows
</Button>
@@ -328,13 +313,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
<div className="flex w-full items-center gap-4">
<div className="flex w-full flex-col gap-3">
<label className="text-mti-gray-dim text-base font-normal">Name</label>
<Input
name="nameFilter"
type="text"
value={nameFilter}
onChange={handleNameFilterChange}
placeholder="Filter by name..."
/>
<Input name="nameFilter" type="text" value={nameFilter} onChange={handleNameFilterChange} placeholder="Filter by name..." />
</div>
<div className="flex w-full flex-col gap-3">
<label className="text-mti-gray-dim text-base font-normal">Status</label>
@@ -361,21 +340,13 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
<Tip text="An exam submission will instantiate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
<div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
<table
className="w-full table-auto border-separate border-spacing-y-2"
style={{ tableLayout: "auto" }}
>
<table className="w-full table-auto border-separate border-spacing-y-2" style={{tableLayout: "auto"}}>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} className="px-3 py-2 text-left text-mti-purple-ultradark">
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
@@ -385,10 +356,9 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
{table.getRowModel().rows.map((row) => (
<tr
key={row.id}
onClick={() => window.location.href = `/approval-workflows/${row.original._id?.toString()}`}
style={{ cursor: "pointer" }}
className="bg-purple-50"
>
onClick={() => (window.location.href = `/approval-workflows/${row.original._id?.toString()}`)}
style={{cursor: "pointer"}}
className="bg-purple-50">
{row.getVisibleCells().map((cell, cellIndex) => {
const lastCellIndex = row.getVisibleCells().length - 1;
@@ -409,7 +379,6 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
</tr>
))}
</tbody>
</table>
</div>
</>

31
src/pages/entities/[id]/roles/[role].tsx
View File

@@ -107,6 +107,13 @@ const ASSIGNMENT_MANAGEMENT: PermissionLayout[] = [
{label: "Archive Assignments", key: "archive_assignment"},
];
const WORKFLOW_MANAGEMENT: PermissionLayout[] = [
{label: "View Workflows", key: "view_workflows"},
{label: "Create Workflow", key: "create_workflow"},
{label: "Edit Workflow", key: "edit_workflow"},
{label: "Delete Workflow", key: "delete_workflow"},
];
export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
const user = await requestUser(req, res);
if (!user) return redirect("/login");
@@ -399,6 +406,30 @@ export default function EntityRole({user, entity, role, userCount, disableEdit}:
))}
</div>
</div>
<div className="flex flex-col gap-4">
<div className="w-full flex items-center justify-between">
<b>Workflow Management</b>
<Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(WORKFLOW_MANAGEMENT, "key").every((k) => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(WORKFLOW_MANAGEMENT, "key").filter(enableCheckbox))}>
Select all
</Checkbox>
</div>
<Separator />
<div className="grid grid-cols-2 gap-4">
{WORKFLOW_MANAGEMENT.map(({label, key}) => (
<Checkbox
disabled={!enableCheckbox(key)}
key={key}
isChecked={permissions.includes(key)}
onChange={() => togglePermissions(key)}>
{label}
</Checkbox>
))}
</div>
</div>
</section>
</section>
</>

10
src/resources/entityPermissions.ts
View File

@@ -67,7 +67,11 @@ export type RolePermission =
| "pay_entity"
| "view_payment_record"
| "view_approval_workflows"
| "update_exam_privacy";
| "update_exam_privacy"
| "view_workflows"
| "create_workflow"
| "edit_workflow"
| "delete_workflow";
export const DEFAULT_PERMISSIONS: RolePermission[] = [
"view_students",
@@ -149,4 +153,8 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
"pay_entity",
"view_payment_record",
"update_exam_privacy",
"create_workflow",
"view_workflows",
"edit_workflow",
"delete_workflow",
];