Program4_E2490

src/App.tsx

@@ -40,6 +40,11 @@ import ViewSubmissions from "pages/Assignments/ViewSubmissions";
 import ViewScores from "pages/Assignments/ViewScores";
 import ViewReports from "pages/Assignments/ViewReports";
 import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+
+import AddEdit_Participants_Home from "./pages/AddEdit_Participants/AddEdit_Participants_Home";
+import AddEdit_Participants_Editor from "./pages/AddEdit_Participants/AddEdit_Participants_Editor";
+import { loadUserDataRolesAndInstitutions_1 } from "./pages/AddEdit_Participants/AddEditUtil";
+
 function App() {
   const router = createBrowserRouter([
     {
@@ -50,6 +55,10 @@ function App() {
         { index: true, element: <ProtectedRoute element={<Home />} /> },
         { path: "login", element: <Login /> },
         { path: "logout", element: <ProtectedRoute element={<Logout />} /> },
+        // {
+        //   path: "addedit_participants",
+        //   element: <ProtectedRoute element={<AddEdit_Participants_Home />} />,
+        // },
         // Add the ViewTeamGrades route
         {
           path: "view-team-grades",
@@ -122,6 +131,22 @@ function App() {
             },
           ],
         },
+        {
+          path: "addedit_participants",
+          element: <ProtectedRoute element={<AddEdit_Participants_Home />} leastPrivilegeRole={ROLE.TA} />,
+          children: [
+            {
+              path: "new",
+              element: <AddEdit_Participants_Editor mode="create" />,
+              loader: loadUserDataRolesAndInstitutions,
+            },
+            {
+              path: "edit/:id",
+              element: <AddEdit_Participants_Editor mode="update" />,
+              loader: loadUserDataRolesAndInstitutions,
+            },
+          ],
+        },
         {
           path: "student_tasks/participants",
           element: <Participants type="student_tasks" id={1} />,

src/components/Table/Pagination.tsx

@@ -17,6 +17,7 @@ interface PaginationProps {
   setPageSize: (pageSize: number) => void;
   getPageCount: () => number;
   getState: () => TableState;
+  totalRows: number;
 }
 
 const Pagination: React.FC<PaginationProps> = (props) => {
@@ -29,7 +30,14 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     setPageSize,
     getPageCount,
     getState,
+    totalRows
   } = props;
+
+  // Only show pagination if total rows exceed 25
+  if (totalRows <= 25) {
+    return null; // Don't render pagination controls
+  }
+
   return (
     <Row className="justify-content-center">
       <Col xs="auto">
@@ -66,9 +74,9 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         <Select
           id="pageSize"
           options={[
-            { label: "Show 10", value: "10" },
             { label: "Show 25", value: "25" },
             { label: "Show 50", value: "50" },
+            { label: "Show all", value: "1000" },
           ]}
           input={{
             value: getState().pagination.pageSize,

src/components/Table/Table.tsx

@@ -103,6 +103,11 @@ const Table: React.FC<TableProps> = ({
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 25, // Set the default page size to 25
+      },
+    },
   });
 
   const {
@@ -144,6 +149,9 @@ const Table: React.FC<TableProps> = ({
     setIsGlobalFilterVisible(!isGlobalFilterVisible);
   };
 
+  // Get the total rows
+  const totalRows = initialData.length;
+
   return (
     <>
       <Container>
@@ -154,8 +162,8 @@ const Table: React.FC<TableProps> = ({
             )}
           </Col>
           <span style={{ marginLeft: "5px" }} onClick={toggleGlobalFilter}>
-            <FaSearch style={{ cursor: "pointer" }} />
-            {isGlobalFilterVisible ? " Hide" : " Show"}
+            {/* <FaSearch style={{ cursor: "pointer" }} /> */}
+            {/* {isGlobalFilterVisible ? " Hide" : " Show"} */}
           </span>{" "}
         </Row>
       </Container>
@@ -222,6 +230,7 @@ const Table: React.FC<TableProps> = ({
                 setPageSize={setPageSize}
                 getPageCount={getPageCount}
                 getState={getState}
+                totalRows={totalRows} // Pass totalRows here
               />
             )}
           </Col>

src/layout/Header.tsx

@@ -122,6 +122,9 @@ const Header: React.FC = () => {
                     <NavDropdown.Item as={Link} to="/users">
                       Users
                     </NavDropdown.Item>
+                    <NavDropdown.Item as={Link} to="/addedit_participants">
+                      addedit_participants
+                    </NavDropdown.Item>
                     <NavDropdown.Item as={Link} to="/courses">
                       Courses
                     </NavDropdown.Item>

src/pages/AddEdit_Participants/AddEditUtil.ts

@@ -0,0 +1,124 @@
+import { IFormOption } from "components/Form/interfaces";
+import axiosClient from "../../utils/axios_client";
+import { IInstitution, IRole, IUserRequest, IUserResponse } from "../../utils/interfaces";
+
+/**
+ * @author Ankur Mundra on April, 2023
+ */
+
+export enum EmailPreference {
+  EMAIL_ON_REVIEW = "email_on_review",
+  EMAIL_ON_SUBMISSION = "email_on_submission",
+  EMAIL_ON_META_REVIEW = "email_on_review_of_review",
+}
+
+type PermittedEmailPreferences =
+  | EmailPreference.EMAIL_ON_REVIEW
+  | EmailPreference.EMAIL_ON_SUBMISSION
+  | EmailPreference.EMAIL_ON_META_REVIEW;
+
+export interface IUserFormValues {
+  id?: number;
+  name: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role_id: number;
+  parent_id?: number | null;
+  institution_id: number;
+  emailPreferences: Array<PermittedEmailPreferences>;
+}
+
+export const emailOptions: IFormOption[] = [
+  { label: "When someone else reviews my work", value: EmailPreference.EMAIL_ON_REVIEW },
+  {
+    label: "When someone else submits work I am assigned to review",
+    value: EmailPreference.EMAIL_ON_SUBMISSION,
+  },
+  {
+    label: "When someone else reviews one of my reviews (meta-reviews my work)",
+    value: EmailPreference.EMAIL_ON_META_REVIEW,
+  },
+];
+
+export const transformInstitutionsResponse = (institutionsList: string) => {
+  let institutionsData: IFormOption[] = [{ label: "Select an Institution", value: "" }];
+  let institutions: IInstitution[] = JSON.parse(institutionsList);
+  institutions.forEach((institution) =>
+    institutionsData.push({ label: institution.name, value: institution.id! })
+  );
+  return institutionsData;
+};
+
+export const transformRolesResponse = (rolesList: string) => {
+  let rolesData: IFormOption[] = [{ label: "Select a Role", value: "" }];
+  let roles: IRole[] = JSON.parse(rolesList);
+  roles.forEach((role) => rolesData.push({ label: role.name, value: role.id! }));
+  return rolesData;
+};
+
+export const transformUserRequest = (values: IUserFormValues) => {
+  // const parent_id = values.parent_id ? values.parent_id : null;
+  const user: IUserRequest = {
+    name: values.name,
+    email: values.email,
+    role_id: values.role_id,
+    parent_id: values.parent_id,
+    institution_id: values.institution_id,
+    full_name: values.lastName + ", " + values.firstName,
+    email_on_review: values.emailPreferences.includes(EmailPreference.EMAIL_ON_REVIEW),
+    email_on_submission: values.emailPreferences.includes(EmailPreference.EMAIL_ON_SUBMISSION),
+    email_on_review_of_review: values.emailPreferences.includes(
+      EmailPreference.EMAIL_ON_META_REVIEW
+    ),
+  };
+  return JSON.stringify(user);
+};
+
+export const transformUserResponse = (userResponse: string) => {
+  const user: IUserResponse = JSON.parse(userResponse);
+  const parent_id = user.parent.id ? user.parent.id : null;
+  const institution_id = user.institution.id ? user.institution.id : -1;
+  const userValues: IUserFormValues = {
+    id: user.id,
+    name: user.name,
+    email: user.email,
+    firstName: user.full_name.split(",")[1].trim(),
+    lastName: user.full_name.split(",")[0].trim(),
+    role_id: user.role.id,
+    parent_id: parent_id,
+    institution_id: institution_id,
+    emailPreferences: [],
+  };
+  if (user.email_on_review) {
+    userValues.emailPreferences.push(EmailPreference.EMAIL_ON_REVIEW);
+  }
+  if (user.email_on_submission) {
+    userValues.emailPreferences.push(EmailPreference.EMAIL_ON_SUBMISSION);
+  }
+  if (user.email_on_review_of_review) {
+    userValues.emailPreferences.push(EmailPreference.EMAIL_ON_META_REVIEW);
+  }
+  return userValues;
+};
+
+export async function loadUserDataRolesAndInstitutions_1({ params }: any) {
+  let userData = {};
+  // if params contains id, then we are editing a user, so we need to load the user data
+  if (params.id) {
+    const userResponse = await axiosClient.get(`/users/${params.id}`, {
+      transformResponse: transformUserResponse,
+    });
+    userData = await userResponse.data;
+  }
+  const institutionsResponse = await axiosClient.get("/institutions", {
+    transformResponse: transformInstitutionsResponse,
+  });
+  const rolesResponse = await axiosClient.get("/roles/subordinate_roles", {
+    transformResponse: transformRolesResponse,
+  });
+
+  const institutions = await institutionsResponse.data;
+  const roles = await rolesResponse.data;
+  return { userData, roles, institutions };
+}