Merge branch 'development'

cybernetisk · Jul 31, 2024 · 2d818a2 · 2d818a2
2 parents f47eb63 + bbcc6ae
commit 2d818a2
Show file tree

Hide file tree

Showing 45 changed files with 1,581 additions and 824 deletions.
diff --git a/app/api/auth/[...nextauth]/route.js b/app/api/auth/[...nextauth]/route.js
@@ -53,6 +53,14 @@ const handler = NextAuth({
         }
       })
 
+      const semesters = await prisma.semester.findMany({
+        orderBy: {
+          id: "desc"
+        },
+        take: 1,
+      })
+      const currentSemester = await semesters[0];
+
       if (cybUser) {
         session.user.name = `${cybUser.firstName} ${cybUser.lastName}`
         delete session.user.name;
@@ -61,10 +69,15 @@ const handler = NextAuth({
           ...session.user,
           ...cybUser,
           roles: cybUser.roles.map((e) => e.role),
-          name: `${cybUser.firstName} ${cybUser.lastName}`
+          name: `${cybUser.firstName} ${cybUser.lastName ? cybUser.lastName : ""}`
         }
       }
 
+      // console.log(currentSemester);
+      if (currentSemester) {
+        session.semester = currentSemester;
+      }
+
       return session
     }
   },

diff --git a/app/components/Login/LoginButton.js b/app/components/Login/LoginButton.js
@@ -7,6 +7,7 @@ import {
   Card,
   CardActionArea,
   CardContent,
+  IconButton,
   // Icon,
   Stack,
   SvgIcon,
@@ -42,37 +43,57 @@ export default function LoginButton() {
     bgcolor: cybTheme.palette.primary.main,
   };
 
+
+
   return (
-    <Card sx={{ display: "flex", flexDirection: "row",  }}>
-      <CardActionArea onClick={handleClick}>
-        <CardContent>
-          <Stack
-            spacing={2}
-            direction="row"
-            alignContent="center"
-            alignItems="center"
-          >
-            {/* <Typography sx={{ flexGrow: 0 }}>
-              {session.data != undefined ? "Logged in" : "Login"}
-            </Typography> */}
-
-            <Typography variant="body1" width="3em" sx={{ display: { xs: "none", md: "flex"  } }} >
-              {session.data != undefined ? "Profile" : "Login"}
-            </Typography>
+    <>
+      <Card sx={{ display: { xs: "none", md: "block" } }}>
+        <CardActionArea onClick={handleClick}>
+          <CardContent>
+            <Stack
+              spacing={2}
+              direction="row"
+              alignContent="center"
+              alignItems="center"
+            >
+              <Typography
+                variant="body1"
+                width="3em"
+                sx={{ display: { xs: "none", md: "flex" } }}
+              >
+                {session.data != undefined ? "Profile" : "Login"}
+              </Typography>
+
+              {session.status == "authenticated" ? (
+                <Avatar alt="Image of user" sx={{ ...avatarProps, p: 1 }}>
+                  <Icon
+                    path={mdiPenguin}
+                    color={cybTheme.palette.background.main}
+                  />
+                </Avatar>
+              ) : (
+                <Avatar sx={{ ...avatarProps }}>
+                  <Person sx={{ color: cybTheme.palette.background.main }} />
+                </Avatar>
+              )}
+            </Stack>
+          </CardContent>
+        </CardActionArea>
+      </Card>
 
-            {session.status == "authenticated" ? (
-              <Avatar alt="Image of user" sx={{ ...avatarProps, p:1 }}>
-                <Icon path={mdiPenguin} color={cybTheme.palette.background.main }/>
-                {/* <icon component={mdiPenguin}/> */}
-              </Avatar>
-            ) : (
-              <Avatar sx={{ ...avatarProps }}>
-                <Person sx={{ color: cybTheme.palette.background.main }} />
-              </Avatar>
-            )}
-          </Stack>
-        </CardContent>
-      </CardActionArea>
-    </Card>
+      <Box sx={{ display: { xs: "block", md: "none" }, py:1 }}>
+        <IconButton onClick={handleClick}>
+          {session.status == "authenticated" ? (
+            <Avatar alt="Image of user" sx={{ ...avatarProps, p: 1 }}>
+              <Icon path={mdiPenguin} color={cybTheme.palette.background.main} />
+            </Avatar>
+          ) : (
+            <Avatar sx={{ ...avatarProps }}>
+              <Person sx={{ color: cybTheme.palette.background.main }} />
+            </Avatar>
+          )}
+        </IconButton>
+      </Box>
+    </>
   );
 }
diff --git a/app/components/input/CustomAutocomplete.js b/app/components/input/CustomAutocomplete.js
@@ -1,29 +1,124 @@
 
-import { Autocomplete, TextField } from "@mui/material";
+import { Autocomplete, Box, createFilterOptions, Paper, Stack, TextField, Typography } from "@mui/material";
 import { Component } from "react";
 
 export default class CustomAutoComplete extends Component {
   render() {
-    const { label, value, data, dataLabel, callback, defaultValue, error } =
-      this.props;
+    const {
+      label,
+      value,
+      data,
+      dataLabel,
+      subDataLabel,
+      allowAdding,
+      callback,
+      defaultValue,
+      error,
+    } = this.props;
 
     let displayValue = null;
     if (defaultValue != undefined) {
       displayValue = defaultValue;
-    } else if (value != undefined && value[dataLabel]) {
-      displayValue = value[dataLabel]
+    } else if (value != undefined && value) {
+      displayValue = value
     }
 
+    // console.log(data, data.length);
+    // console.log(Math.min([data.length, 10]), Math.min(data.length, 10));
+
+    const maxSuggestions = data ? Math.min(data.length, 10) : 10;
+    const filterOptions = createFilterOptions();
+
     return (
       <Autocomplete
         disabled={defaultValue != undefined}
         size="small"
         fullWidth
         disablePortal
-        options={data.map((e) => e[dataLabel])}
         value={displayValue}
+        options={data}
+
+        // when a dropdown item is selected
         onChange={(e, v) => {
-          callback(data.filter((e) => e[dataLabel] == v)[0]);
+          // console.log(v);
+          callback(v);
+          // if (typeof v == "string") {
+          // } else {
+          // }
+        }}
+
+        // when looking for an item
+        filterOptions={(options, state) => {
+          let newOptions = filterOptions(options, state).slice(
+            0,
+            maxSuggestions
+          );
+
+          if (allowAdding && state.inputValue != "") {
+            let item = {
+              [dataLabel]: `Add "${state.inputValue}"`,
+              inputValue: state.inputValue,
+              newOption: true,
+            };
+
+            newOptions.push(item);
+          }
+
+          return newOptions;
+        }}
+
+        // when matching value with dropdown item
+        isOptionEqualToValue={(option, value) => {
+          if (subDataLabel) {
+            return option[subDataLabel] == value[subDataLabel];
+          }
+          return option[dataLabel] == value[dataLabel];
+        }}
+
+        // setting text for dropdown item
+        getOptionLabel={(option) => {
+          if (option.newOption) {
+            return option.inputValue;
+          }
+          return option[dataLabel];
+        }}
+
+        // dropdown item element
+        renderOption={(props, option) => {
+          // console.log(props, option);
+          return (
+            <Box
+              {...props}
+              key={props.id}
+              component="li"
+              color="InfoBackground"
+              // flexDirection="column"
+              // alignContent="start"
+              // alignItems="flex-start"
+              // onClick={}
+              // key={`option_box_${props.key}`}
+            >
+              <Stack direction="column" alignItems="start">
+                <Typography
+                  key={`option_box_name_${props.id}`}
+                  color="MenuText"
+                >
+                  {option[dataLabel]}
+                </Typography>
+                {subDataLabel ? (
+                  <Typography
+                    key={`option_box_email_${props.id}`}
+                    variant="caption"
+                    color="GrayText"
+                  >
+                    {option[subDataLabel]}
+                  </Typography>
+                ) : (
+                  <></>
+                )}
+              </Stack>
+            </Box>
+          );
         }}
         renderInput={(params) => (
           <TextField
@@ -33,6 +128,7 @@ export default class CustomAutoComplete extends Component {
             label={label}
           />
         )}
+        PaperComponent={(props) => <Paper elevation={3} {...props} />}
       />
     );
   }

diff --git a/app/components/layout/AppBar.js b/app/components/layout/AppBar.js
@@ -20,13 +20,10 @@ import cybLogo from "./../../icon.png";
 import Image from "next/image";
 import Link from "next/link";
 import LoginButton from "../Login/LoginButton";
-import { useRouter } from "next/navigation";
 
 export class NavBar extends Component {
   render() {
     const { currentPath, navItems } = this.props;
-
-    // const router = useRouter();
 
     return (
       <AppBar position="absolute">
@@ -61,13 +58,7 @@ export class NavBar extends Component {
             </Grid>
 
             <Grid item>
-              <Box
-                sx={
-                  {
-                    // marginLeft: "auto"
-                  }
-                }
-              >
+              <Box>
                 <SessionProvider>
                   <LoginButton />
                 </SessionProvider>