feat: Mui Alert signalizing that lecture name is identical to lecture…

… code Added Alert signalizing that a lecture should be renamed for readability reasons. Tooltip of the cog button hasn't been removed, hanging over cog button if lecture still hasn't been renamed, will still state that the the name of the lecture is the same as lecture code. To decide if we want to remove the tooltip. Refs: #18
TU-Wien-dataLAB · Jan 31, 2024 · 5e1bd69 · 5e1bd69
1 parent 4cb32e2
commit 5e1bd69
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 33 deletions.
diff --git a/src/components/coursemanage/lecture.tsx b/src/components/coursemanage/lecture.tsx
@@ -12,13 +12,14 @@ import {
   TableCell,
   TableRow,
   Typography,
-  Tooltip
+  Tooltip,
+  Alert
 } from '@mui/material';
 import * as React from 'react';
 import { Assignment } from '../../model/assignment';
 import { Lecture } from '../../model/lecture';
 import { deleteAssignment } from '../../services/assignments.service';
-import { CreateDialog, EditLectureDialog } from '../util/dialog';
+import { CreateDialog, EditLectureDialog, IEditLectureProps } from '../util/dialog';
 import { updateLecture } from '../../services/lectures.service';
 import { red, grey } from '@mui/material/colors';
 import { enqueueSnackbar } from 'notistack';
@@ -157,6 +158,26 @@ export const LectureComponent = () => {
 
   const [lectureState, setLecture] = React.useState(lecture);
   const [assignmentsState, setAssignments] = React.useState(assignments);
+  const [isEditDialogOpen, setEditDialogOpen] = React.useState(false);
+
+  const handleOpenEditDialog = () => {
+    setEditDialogOpen(true);
+  };
+
+
+  const handleUpdateLecture = (updatedLecture) => {
+    updateLecture(updatedLecture).then(
+      (response) => {
+        setLecture(response);
+      },
+      (error) => {
+        enqueueSnackbar(error.message, {
+          variant: 'error',
+        });
+      }
+    );
+  };
+
 
   if (navigation.state === 'loading') {
     return (
@@ -186,38 +207,42 @@ export const LectureComponent = () => {
         ) : null}
       </Typography>
       <Stack
-        direction={'row'}
-        justifyContent={'flex-end'}
-        alignItems={'center'}
-        spacing={2}
-        sx={{ mb: 1 }}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ mt: 2, mb: 1 }}
       >
-        <CreateDialog
-          lecture={lectureState}
-          handleSubmit={assigment => {
-            setAssignments((oldAssignments: Assignment[]) => [
-              ...oldAssignments,
-              assigment
-            ]);
-          }}
-        />
-        <EditLectureDialog
-          lecture={lectureState}
-          handleSubmit={updatedLecture => {
-            updateLecture(updatedLecture).then(
-              response => {
-                setLecture(response);
-              },
-              error => {
-                enqueueSnackbar(error.message, {
-                  variant: 'error'
-                });
-              }
-            );
-          }}
-        />
+        <Stack direction="row" alignItems="center" spacing={2}>
+          {lecture.code === lecture.name ? (
+            <Alert severity="info">
+              The name of the lecture is identical to the lecture code.{' '}
+              <span style={{ cursor: 'pointer', textDecoration: 'underline', fontWeight: 'bold' }} onClick={handleOpenEditDialog}>
+                Rename Lecture.
+              </span>
+            </Alert>
+          ) : null}
+        </Stack>
+
+        <Stack direction="row" alignItems="center" spacing={2}>
+          <CreateDialog
+            lecture={lectureState}
+            handleSubmit={assigment => {
+              setAssignments((oldAssignments: Assignment[]) => [
+                ...oldAssignments,
+                assigment
+              ]);
+            }}
+          />
+          <EditLectureDialog
+            lecture={lectureState}
+            handleSubmit={handleUpdateLecture}
+            open={isEditDialogOpen}
+            handleClose={() => setEditDialogOpen(false)}
+          />
+        </Stack>
       </Stack>
 
+
       <Stack>
         <Typography variant={'h6'}>Assignments</Typography>
       </Stack>

diff --git a/src/components/util/dialog.tsx b/src/components/util/dialog.tsx
@@ -88,6 +88,8 @@ const validationSchemaLecture = yup.object({
 export interface IEditLectureProps {
   lecture: Lecture;
   handleSubmit: (updatedLecture: Lecture) => void;
+  open: boolean;
+  handleClose: () => void;
 }
 
 const EditLectureNameTooltip = styled(
@@ -114,7 +116,12 @@ export const EditLectureDialog = (props: IEditLectureProps) => {
     }
   });
 
+  const { open, handleClose } = props;
   const [openDialog, setOpen] = React.useState(false);
+  const openDialogFunction = () => {
+    setOpen(true);
+  };
+
 
   return (
     <div>
@@ -138,15 +145,16 @@ export const EditLectureDialog = (props: IEditLectureProps) => {
         <IconButton
           onClick={e => {
             e.stopPropagation();
-            setOpen(true);
+            openDialogFunction();
           }}
           onMouseDown={event => event.stopPropagation()}
           aria-label="edit"
         >
           <SettingsIcon />
         </IconButton>
       </EditLectureNameTooltip>
-      <Dialog open={openDialog} onBackdropClick={() => setOpen(false)}>
+      <Dialog open={open || openDialog} 
+              onBackdropClick={() => { setOpen(false); handleClose(); }}>
         <DialogTitle>Edit Lecture</DialogTitle>
         <form onSubmit={formik.handleSubmit}>
           <DialogContent>
@@ -182,6 +190,7 @@ export const EditLectureDialog = (props: IEditLectureProps) => {
               variant="outlined"
               onClick={() => {
                 setOpen(false);
+                handleClose();
               }}
             >
               Cancel