add initial filters

UniversityOfHelsinkiCS · Feb 3, 2025 · 38accab · 38accab
1 parent 70391cc
commit 38accab
Show file tree

Hide file tree

Showing 4 changed files with 256 additions and 0 deletions.
diff --git a/client/components/V1/Generic/FacultySelectComponent.tsx b/client/components/V1/Generic/FacultySelectComponent.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            width: 250,
+        },
+    },
+};
+
+const faculties = [
+    'Matemaattis-luonnontieteellinen',
+    'Humanistinen',
+    'Oikeustieteellinen',
+];
+
+const getStyles = (faculty: string, facultyName: readonly string[], theme: Theme) => {
+    return {
+        fontWeight: facultyName.includes(faculty)
+            ? theme.typography.fontWeightMedium
+            : theme.typography.fontWeightRegular,
+    };
+}
+
+const FacultySelectComponent = () => {
+    const theme = useTheme();
+    const [facultyName, setPersonName] = React.useState<string[]>([]);
+
+    const handleChange = (event: SelectChangeEvent<typeof facultyName>) => {
+        const {
+            target: { value },
+        } = event;
+        setPersonName(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value,
+        );
+    };
+
+    return (
+        <div>
+            <FormControl sx={{ width: 250 }}>
+                <Select
+                    multiple
+                    displayEmpty
+                    value={facultyName}
+                    onChange={handleChange}
+                    input={<OutlinedInput />}
+                    renderValue={(selected) => {
+                        if (selected.length === 0) {
+                            return <em>Placeholder</em>;
+                        }
+
+                        return selected.join(', ');
+                    }}
+                    MenuProps={MenuProps}
+                    inputProps={{ 'aria-label': 'Without label' }}
+                >
+                    <MenuItem disabled value="">
+                        <em>Placeholder</em>
+                    </MenuItem>
+                    {faculties.map((faculty) => (
+                        <MenuItem
+                            key={faculty}
+                            value={faculty}
+                            style={getStyles(faculty, facultyName, theme)}
+                        >
+                            {faculty}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </FormControl>
+        </div>
+    );
+}
+
+export default FacultySelectComponent
diff --git a/client/components/V1/Generic/LevelSelectComponent.tsx b/client/components/V1/Generic/LevelSelectComponent.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            width: 250,
+        },
+    },
+};
+
+const levels = [
+    'Kandi',
+    'Maisteri',
+];
+
+const getStyles = (level: string, levelName: readonly string[], theme: Theme) => {
+    return {
+        fontWeight: levelName.includes(level)
+            ? theme.typography.fontWeightMedium
+            : theme.typography.fontWeightRegular,
+    };
+}
+
+const LevelSelectComponent = () => {
+    const theme = useTheme();
+    const [levelName, setLevelName] = React.useState<string[]>([]);
+
+    const handleChange = (event: SelectChangeEvent<typeof levelName>) => {
+        const {
+            target: { value },
+        } = event;
+        setLevelName(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value,
+        );
+    };
+
+    return (
+        <div>
+            <FormControl sx={{ width: 250 }}>
+                <Select
+                    //   multiple
+                    displayEmpty
+                    value={levelName}
+                    onChange={handleChange}
+                    input={<OutlinedInput />}
+                    renderValue={(selected) => {
+                        if (selected.length === 0) {
+                            return <em>Placeholder</em>;
+                        }
+
+                        return selected.join(', ');
+                    }}
+                    MenuProps={MenuProps}
+                    inputProps={{ 'aria-label': 'Without label' }}
+                >
+                    <MenuItem disabled value="">
+                        <em>Placeholder</em>
+                    </MenuItem>
+                    {levels.map((level) => (
+                        <MenuItem
+                            key={level}
+                            value={level}
+                            style={getStyles(level, levelName, theme)}
+                        >
+                            {level}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </FormControl>
+        </div>
+    );
+}
+
+export default LevelSelectComponent
diff --git a/client/components/V1/Generic/YearSelectComponent.tsx b/client/components/V1/Generic/YearSelectComponent.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            width: 250,
+        },
+    },
+};
+
+const years = [
+  '2024',
+  '2025',
+];
+
+const getStyles = (year: string, personName: readonly string[], theme: Theme) => {
+  return {
+    fontWeight: personName.includes(year)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
+  };
+}
+
+const YearSelectComponent = () => {
+  const theme = useTheme();
+  const [personName, setPersonName] = React.useState<string[]>([]);
+
+  const handleChange = (event: SelectChangeEvent<typeof personName>) => {
+    const {
+      target: { value },
+    } = event;
+    setPersonName(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  return (
+    <div>
+      <FormControl sx={{ width: 200 }}>
+        <Select
+          multiple
+          displayEmpty
+          value={personName}
+          onChange={handleChange}
+          input={<OutlinedInput />}
+          renderValue={(selected) => {
+            if (selected.length === 0) {
+              return <em>Placeholder</em>;
+            }
+
+            return selected.join(', ');
+          }}
+          MenuProps={MenuProps}
+          inputProps={{ 'aria-label': 'Without label' }}
+        >
+          <MenuItem disabled value="">
+            <em>Select year</em>
+          </MenuItem>
+          {years.map((year) => (
+            <MenuItem
+              key={year}
+              value={year}
+              style={getStyles(year, personName, theme)}
+            >
+              {year}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default YearSelectComponent
diff --git a/client/components/V1/Overview/index.tsx b/client/components/V1/Overview/index.tsx
@@ -1,6 +1,9 @@
 import { useLocation } from "react-router"
 
 import DataComponent from "./DataComponent"
+import YearSelectComponent from "../Generic/YearSelectComponent"
+import FacultySelectComponent from "../Generic/FacultySelectComponent"
+import LevelSelectComponent from "../Generic/LevelSelectComponent"
 
 const OverviewPage = () => {
   const location = useLocation()
@@ -18,6 +21,9 @@ const OverviewPage = () => {
         <h1 style={{margin: 0}}>VUOSISEURANTA</h1>
 
         {/* Filters */}
+        <LevelSelectComponent />
+        <FacultySelectComponent />
+        <YearSelectComponent />
       </div>
 
       <DataComponent programLevel={programLevel} faculty={faculty} year={parseInt(year)}/>