E2461: UI for 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/components/Table/Table.tsx

@@ -154,8 +154,7 @@ const Table: React.FC<TableProps> = ({
             )}
           </Col>
           <span style={{ marginLeft: "5px" }} onClick={toggleGlobalFilter}>
-            <FaSearch style={{ cursor: "pointer" }} />
-            {isGlobalFilterVisible ? " Hide" : " Show"}
+
           </span>{" "}
         </Row>
       </Container>