Add search functionality

UniversityOfHelsinkiCS · Feb 7, 2025 · a50f3cd · a50f3cd
1 parent 3cf2209
commit a50f3cd
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 21 deletions.
diff --git a/client/components/V1/Generic/SearchInput.tsx b/client/components/V1/Generic/SearchInput.tsx
@@ -0,0 +1,34 @@
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import Search from '@mui/icons-material/Search';
+
+interface SearchAutocompleteInputProps {
+    placeholder: string,
+    setSearchValue: React.Dispatch<React.SetStateAction<string>>
+}
+
+export default function SearchInput({ placeholder, setSearchValue }: SearchAutocompleteInputProps) {
+    const handleOnKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const value = (event.target as HTMLInputElement).value;
+        setSearchValue(value);
+    }
+
+    return (
+        <TextField
+            style={{ width: 600 }}
+            placeholder={placeholder}
+            slotProps={{
+                input: {
+                    type: 'search',
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <Search />
+                        </InputAdornment>
+                    ),
+                },
+            }}
+            onKeyUp={handleOnKeyUp}
+        />
+
+    );
+}
diff --git a/client/components/V1/Generic/TableComponent.tsx b/client/components/V1/Generic/TableComponent.tsx
@@ -76,26 +76,14 @@ export const TableCell = ({
     itemAlign?: "left" | "center" | "right",
     disabled?: boolean
 }) => {
-
-    let margin = "0 auto";
-
-    switch (itemAlign) {
-        case "left":
-            margin = "0 auto 0 0";
-            break;
-        case "right":
-            margin = "0 0 0 auto";
-            break;
-        case "center":
-            margin = "0 auto";
-            break;
-    }
-
     return (
         <div style={{
-            margin,
             opacity: disabled ? '0.5' : '1',
-            pointerEvents: disabled ? 'none' : 'auto'
+            pointerEvents: disabled ? 'none' : 'auto',
+            display: "flex",
+            justifyContent: itemAlign,
+            textAlign: itemAlign,
+            width: "100%"
         }}>{children}</div>
     )
 }
diff --git a/client/components/V1/Overview/DataComponent.tsx b/client/components/V1/Overview/DataComponent.tsx
@@ -1,10 +1,13 @@
+import { useState } from 'react'
 import { CircularProgress } from '@mui/material'
 import useFetchKeyData from '../../../hooks/useFetchKeyData'
 import { Link } from 'react-router-dom'
 import { TrafficLight } from '../Generic/TrafficLightComponent'
+import _ from 'lodash'
 
 import { Table, TableRow, TableCell } from '../Generic/TableComponent'
 import { KeyDataProgramme } from '@/client/lib/types'
+import SearchInput from '../Generic/SearchInput'
 
 interface KeyDataTableProps {
   facultyFilter: string[],
@@ -20,6 +23,7 @@ const KeyFigureTableComponent = ({
 
 
   const keyData = useFetchKeyData()
+  const [searchValue, setSearchValue] = useState("")
 
   if (!keyData) {
     return <CircularProgress />
@@ -32,7 +36,11 @@ const KeyFigureTableComponent = ({
   // Convert to set for faster lookup
   const allowedFacultiesSet = new Set(facultyFilter);
 
-  const filteredData = programmeData.filter((programmeData: KeyDataProgramme) => {
+  // Default sort by koulutusohjelma (ascending alphabetic order)
+  const sortedData = _.sortBy(programmeData, ['koulutusohjelma']);
+
+  // Filter by faculty, year and program level
+  const filteredData = sortedData.filter((programmeData: KeyDataProgramme) => {
     // This filter assumes that kouluohjelmakoodi is in the format <Level><FacultyCode>_xxx
     // example: KH10_001, where K is the level, H10 is the faculty code
 
@@ -64,12 +72,27 @@ const KeyFigureTableComponent = ({
     return facultyMatches && levelMatches;
   });
 
+  // Filter by search input
+  const searchFilteredData = filteredData.filter((programmeData: KeyDataProgramme) => {
+    return programmeData.koulutusohjelma.toLowerCase().startsWith(searchValue.toLowerCase()) || programmeData.koulutusohjelmakoodi.toLowerCase().startsWith(searchValue.toLowerCase());
+  })
 
   return (
     <div>
+      <div style={{ marginBottom: "1rem", marginTop: "4rem" }}>
+        <SearchInput
+          placeholder="Hae koulutusohjelmaa nimellä tai koodilla"
+          setSearchValue={setSearchValue} />
+      </div>
+
       <Table>
         <TableRow isHeader>
-          <TableCell></TableCell>
+          <TableCell>
+            <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
+              <span>Koulutusohjelma</span>
+              <span style={{ paddingRight: "20px" }}>Koodi</span>
+            </div>
+          </TableCell>
           <TableCell>Attractiveness</TableCell>
           <TableCell>Throughput and Graduation</TableCell>
           <TableCell>Student Feedback and Employment</TableCell>
@@ -78,10 +101,13 @@ const KeyFigureTableComponent = ({
           <TableCell>Tukiprosessi</TableCell>
         </TableRow>
 
-        {filteredData.map((programmeData: KeyDataProgramme) => (
+        {searchFilteredData.map((programmeData: KeyDataProgramme) => (
           <TableRow key={programmeData.koulutusohjelmakoodi}>
             <TableCell itemAlign='left'>
-              <Link to={`/v1/programmes/${programmeData.koulutusohjelmakoodi}`}>{programmeData.koulutusohjelma}</Link>
+              <div style={{ display: "flex", justifyContent: "space-between", width: "100%", gap: "2rem" }}>
+                <Link to={`/v1/programmes/${programmeData.koulutusohjelmakoodi}`}>{programmeData.koulutusohjelma}</Link>
+                <Link to={`/v1/programmes/${programmeData.koulutusohjelmakoodi}`}>{programmeData.koulutusohjelmakoodi}</Link>
+              </ div>
             </TableCell>
             <TableCell>
               <TrafficLight color={programmeData.vetovoimaisuus}></TrafficLight>