CSC/ECE 517 Fall 2024 - E2488. Reimplement add TA

README.md

@@ -6,6 +6,9 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `npm install`
+Installs the dependencies required 
+
 ### `npm start`
 
 Runs the app in the development mode.\
@@ -44,3 +47,8 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
+
+## Contributers
+Makarand Pundlik <br>
+Anurag Gorkar <br>
+Rutvik Kulkarni <br>

src/components/ColumnButton.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+
+/**
+ * @author Rutvik Kulkarni on Nov, 2024
+ */
+
+interface ColumnButtonProps {
+    id: string;
+    label?: string;
+    tooltip?: string;
+    variant: string;
+    size?: "sm" | "lg"; // Matches React-Bootstrap Button prop
+    className?: string;
+    onClick: () => void;
+    icon: React.ReactNode;
+  }
+
+  const ColumnButton: React.FC<ColumnButtonProps> = (props) => {
+    const {
+      id,
+      label,
+      tooltip,
+      variant,
+      size,
+      className,
+      onClick,
+      icon,
+    } = props;
+
+    const displayButton = (
+      <Button
+        variant={variant}
+        size={size}
+        className={className}
+        onClick={onClick}
+        aria-label={label}
+      >
+        {icon}
+      </Button>
+    );
+
+    if (tooltip) {
+      return (
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id={`${id}-tooltip`}>{tooltip}</Tooltip>}
+        >
+          {displayButton}
+        </OverlayTrigger>
+      );
+    }
+
+    return displayButton;
+  };
+
+  export default ColumnButton;

src/pages/Courses/CourseColumns.tsx

@@ -3,6 +3,8 @@ import { Button } from "react-bootstrap";
 import { BsPencilFill, BsPersonXFill } from "react-icons/bs";
 import { MdContentCopy, MdDelete } from "react-icons/md";
 import { ICourseResponse as ICourse } from "../../utils/interfaces";
+import ColumnButton from "../../components/ColumnButton";
+
 
 /**
  * @author Atharva Thorve, on December, 2023
@@ -53,28 +55,41 @@ export const courseColumns = (handleEdit: Fn, handleDelete: Fn, handleTA: Fn, ha
     header: "Actions",
     cell: ({ row }) => (
       <>
-        <Button variant="outline-warning" size="sm" onClick={() => handleEdit(row)}>
-          <BsPencilFill />
-        </Button>
-        <Button
+        <ColumnButton
+          id="edit"
+          variant="outline-warning"
+          size="sm"
+          onClick={() => handleEdit(row)}
+          tooltip="Edit this course"
+          icon={<BsPencilFill />}
+        />
+        <ColumnButton
+          id="delete"
           variant="outline-danger"
           size="sm"
           className="ms-sm-2"
           onClick={() => handleDelete(row)}
-        >
-          <MdDelete />
-        </Button>
-        <Button variant="outline-info" size="sm" className="ms-sm-2" onClick={() => handleTA(row)}>
-          <BsPersonXFill />
-        </Button>
-        <Button
+          tooltip="Delete this course"
+          icon={<MdDelete />}
+        />
+        <ColumnButton
+          id="assign-ta"
+          variant="outline-info"
+          size="sm"
+          className="ms-sm-2"
+          onClick={() => handleTA(row)}
+          tooltip="Assign a TA to this course"
+          icon={<BsPersonXFill />}
+        />
+        <ColumnButton
+          id="copy"
           variant="outline-primary"
           size="sm"
           className="ms-sm-2"
           onClick={() => handleCopy(row)}
-        >
-          <MdContentCopy />
-        </Button>
+          tooltip="Copy course details"
+          icon={<MdContentCopy />}
+        />
       </>
     ),
   }),

src/pages/TA/TA.tsx

@@ -12,6 +12,7 @@ import { alertActions } from "store/slices/alertSlice";
 import { RootState } from "../../store/store";
 import { ITAResponse, ROLE } from "../../utils/interfaces";
 import { TAColumns as TA_COLUMNS } from "./TAColumns";
+import ColumnButton from "../../components/ColumnButton";
 import DeleteTA from "./TADelete";
 
 /**
@@ -85,26 +86,37 @@ const TAs = () => {
               <hr />
             </Row>
             <Row>
-              <Col md={{ span: 1, offset: 11 }} style={{paddingBottom: "10px"}}>
-                <Button variant="outline-success" onClick={() => navigate("new")}>
-                  <BsPersonFillAdd />
-                </Button>
+              <Col md={{ span: 1, offset: 11 }} style={{ paddingBottom: "10px" }}>
+                <ColumnButton
+                  id="add-ta"
+                  variant="outline-success"
+                  size="lg"
+                  className="ms-sm-2"
+                  onClick={() => navigate("new")}
+                  tooltip="Add TA to this course"
+                  icon={<BsPersonFillAdd />}
+                />
               </Col>
-              {showDeleteConfirmation.visible && (
-                <DeleteTA TAData={showDeleteConfirmation.data!} onClose={onDeleteTAHandler} />
-              )}
-            </Row>
-            <Row>
-              <Table
-                showGlobalFilter={false}
-                data={tableData}
-                columns={tableColumns}
-                columnVisibility={{
-                  id: false,
-                  institution: auth.user.role === ROLE.SUPER_ADMIN.valueOf(),
-                }}
-              />
             </Row>
+            {tableData.length === 0 ? (
+              <Row className="mt-md-2 mb-md-2 text-center">
+                <Col>
+                  <h3>No TAs are assigned for this course.</h3>
+                </Col>
+              </Row>
+            ) : (
+              <Row>
+                <Table
+                  showGlobalFilter={false}
+                  data={tableData}
+                  columns={tableColumns}
+                  columnVisibility={{
+                    id: false,
+                    institution: auth.user.role === ROLE.SUPER_ADMIN.valueOf(),
+                  }}
+                />
+              </Row>
+            )}
           </Container>
         </main>
       </Modal.Body>

src/pages/TA/TAColumns.tsx

@@ -3,6 +3,7 @@ import { createColumnHelper, Row } from "@tanstack/react-table";
 import { Button } from "react-bootstrap";
 import { BsPersonXFill } from "react-icons/bs";
 import { ITAResponse as ITA } from "../../utils/interfaces";
+import ColumnButton from "../../components/ColumnButton";
 
 /**
  * @author Atharva Thorve, on December, 2023
@@ -38,14 +39,15 @@ export const TAColumns = (handleDelete: Fn) => [
     header: "Actions",
     cell: ({ row }) => (
       <>
-        <Button
+        <ColumnButton
+          id="delete-ta"
           variant="outline-danger"
           size="sm"
           className="ms-sm-2"
           onClick={() => handleDelete(row)}
-        >
-          <BsPersonXFill />
-        </Button>
+          tooltip="Delete TA"
+          icon={<BsPersonXFill />}
+        />
       </>
     ),
   }),

src/pages/TA/TAUtil.ts

@@ -17,7 +17,7 @@ export interface ITAFormValues {
 }
 
 export const transformTAResponse = (taList: string) => {
-  let taData: IFormOption[] = [{ label: "Select a TA", value: "" }]; 
+  let taData: IFormOption[] = []; 
   let tas: ITA[] = JSON.parse(taList);
   tas.forEach((ta) => taData.push({ label: ta.name, value: ta.id! }));
   return taData;
@@ -37,7 +37,7 @@ export async function loadTAs({ params }: any) {
   const taRoleUsersResponse = await axiosClient.get(`/users/role/Teaching Assistant`, {
     transformResponse: transformTAResponse
   });
-  const taUsers = taRoleUsersResponse.data;
-
+  let taUsers = taRoleUsersResponse.data;
+  taUsers = [{label: "Select a TA", value: ""},...taUsers];
   return { taUsers };
 }