E2506. Merging UI for View Assignments in Courses

src/components/Form/FormSelect.tsx

@@ -8,7 +8,7 @@ import { IFormikFieldProps, IFormPropsWithOption } from "./interfaces";
  * @author Ankur Mundra on May, 2023
  */
 
-const FormSelect: React.FC<IFormPropsWithOption> = (props) => {
+const FormSelect: React.FC<IFormPropsWithOption & { onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void }> = (props) => {
   const {
     as,
     md,
@@ -21,6 +21,7 @@ const FormSelect: React.FC<IFormPropsWithOption> = (props) => {
     tooltipPlacement,
     disabled,
     inputGroupPrepend,
+    onChange, // Add onChange to props to detect chnage in selected institutions.
   } = props;
 
   const displayLabel = tooltip ? (
@@ -48,6 +49,12 @@ const FormSelect: React.FC<IFormPropsWithOption> = (props) => {
                 disabled={disabled}
                 isInvalid={isInvalid}
                 feedback={form.errors[field.name]}
+                onChange={(event) => {
+                  field.onChange(event); // Call Formik's onChange
+                  if (onChange) {
+                    onChange(event); // Call the passed onChange if provided
+                  }
+                }}
               >
                 {options.map((option) => {
                   return (

src/components/Form/interfaces.ts

@@ -25,6 +25,7 @@ export interface IFormOption {
 
 export interface IFormPropsWithOption extends IFormProps {
   options: IFormOption[];
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
 export interface IFormikFieldProps {

src/components/Table/GlobalFilter.tsx

@@ -8,14 +8,23 @@ import DebouncedInput from "./DebouncedInput";
 interface FilterProps {
   filterValue: string | number;
   setFilterValue: (value: string | number) => void;
+  isDisabled?: boolean; // New optional prop to disable the filter
 }
 
-const GlobalFilter: React.FC<FilterProps> = ({ filterValue, setFilterValue }) => {
+const GlobalFilter: React.FC<FilterProps> = ({
+  filterValue,
+  setFilterValue,
+  isDisabled = true, // Default to true for disabling
+}) => {
   const searchHandler = useCallback(
     (value: string | number) => setFilterValue(value),
     [setFilterValue]
   );
 
+  if (isDisabled) {
+    return null; // Render nothing when disabled
+  }
+
   return (
     <DebouncedInput
       onChange={searchHandler}

src/pages/Assignments/Assignment.tsx

@@ -1,16 +1,16 @@
-import { Button, Col, Container, Row } from "react-bootstrap";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Row as TRow } from "@tanstack/react-table";
+import Table from "components/Table/Table";
+import useAPI from "hooks/useAPI";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button, Col, Container, Row } from "react-bootstrap";
+import { BsFileText } from "react-icons/bs";
 import { useDispatch, useSelector } from "react-redux";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { alertActions } from "store/slices/alertSlice";
+import { RootState } from "../../store/store";
+import { IAssignmentResponse } from "../../utils/interfaces";
 import { assignmentColumns as ASSIGNMENT_COLUMNS } from "./AssignmentColumns";
-import { BsFileText } from "react-icons/bs";
 import DeleteAssignment from "./AssignmentDelete";
-import { IAssignmentResponse } from "../../utils/interfaces";
-import { RootState } from "../../store/store";
-import { Row as TRow } from "@tanstack/react-table";
-import Table from "components/Table/Table";
-import { alertActions } from "store/slices/alertSlice";
-import useAPI from "hooks/useAPI";
 
 
 const Assignments = () => {
@@ -31,6 +31,25 @@ const Assignments = () => {
     data?: IAssignmentResponse;
   }>({ visible: false });
 
+  /**
+   * At this moment the backend has deviated substantially from what the frontend
+   * assignment creator provides. However, the backend also does not accept an instructor_id
+   * when creating an assignment which is a required field so there is no way to create an 
+   * assignment using the frontend. This function is a placeholder to generate fake assignments
+   * until the backend is updated to allow for the creation of assignments.
+   */
+  const generateFakeAssignments = useCallback(() => {
+    return Array.from({ length: 10 + Math.floor(Math.random() * 10) }, (_, idx) => ({
+      id: idx + 1000,
+      name: "Fake Assignment " + (idx + 1),
+      description: "This is a fake assignment",
+      course_id: idx + 999,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      courseName: "Fake Course " + (idx + 1),
+    }));
+  }, []);
+
 
   const fetchData = useCallback(async () => {
     try {
@@ -58,9 +77,11 @@ const Assignments = () => {
       const course = coursesResponse.data.find((c: any) => c.id === assignment.course_id);
       return { ...assignment, courseName: course ? course.name : 'Unknown' };
     });
+
+    const fakeAssignments = generateFakeAssignments();
+    mergedData = mergedData.concat(fakeAssignments);
   }
-
-
+
 
   // Error alert
   useEffect(() => {
@@ -118,7 +139,6 @@ const Assignments = () => {
               columns={tableColumns}
               columnVisibility={{
                 id: false,
-
               }}
             />
           </Row>