Add settings for the admin

.eslintrc.yml

@@ -9,6 +9,7 @@ plugins:
 
 extends:
   - 'plugin:react/recommended' # Uses the recommended rules from @eslint-plugin-react
+  - 'plugin:react-hooks/recommended'
   - 'plugin:@typescript-eslint/recommended' # Uses the recommended rules from the @typescript-eslint/eslint-plugin
   - 'plugin:import/typescript'
   - 'prettier/@typescript-eslint' # Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
@@ -48,13 +49,17 @@ rules:
   'constructor-super': 'error'
   'no-console': 'warn'
   'no-fallthrough': 'error'
+  'no-useless-rename': 'warn'
   'import/no-restricted-paths':
     - 'error'
     - zones:
         - target: './client'
           from: './server/src'
   'import/no-unresolved': 'off'
   'import/no-named-as-default': 'off'
+  'import/no-unused-modules':
+    - 'off'
+    - unusedExports: true
   'react/display-name': 'off'
   'react/jsx-no-duplicate-props':
     - 'warn'

.vscode/settings.json

@@ -4,6 +4,6 @@
   "debug.node.autoAttach": "off",
   "npm.packageManager": "yarn",
   "editor.codeActionsOnSave": {
-    "source.organizeImports": false
+    "source.organizeImports": true
   }
 }

client/src/components/ContextWrapper.tsx

@@ -9,6 +9,7 @@ import { MemoryRouterProps } from 'react-router';
 import { BrowserRouterProps } from 'react-router-dom';
 import DialogService, { getDialogOutsideContext } from '../hooks/DialogService';
 import { LoginContextProvider } from '../hooks/LoginService';
+import { SettingsProvider } from '../hooks/useSettings';
 import { RequireChildrenProp } from '../typings/RequireChildrenProp';
 import i18n from '../util/lang/configI18N';
 import { getRouteWithPrefix } from '../util/routePrefix';
@@ -82,11 +83,16 @@ function ContextWrapper({ children, Router }: PropsWithChildren<Props>): JSX.Ele
       <I18nextProvider i18n={i18n}>
         <CustomThemeProvider>
           <LoginContextProvider>
-            <MuiPickersUtilsProvider locale={navigator.language ?? 'de'} utils={LuxonUtils}>
-              <SnackbarProvider maxSnack={3}>
-                <DialogService>{children}</DialogService>
-              </SnackbarProvider>
-            </MuiPickersUtilsProvider>
+            <SettingsProvider>
+              <MuiPickersUtilsProvider locale={navigator.language ?? 'de'} utils={LuxonUtils}>
+                <SnackbarProvider
+                  maxSnack={3}
+                  anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                >
+                  <DialogService>{children}</DialogService>
+                </SnackbarProvider>
+              </MuiPickersUtilsProvider>
+            </SettingsProvider>
           </LoginContextProvider>
         </CustomThemeProvider>
       </I18nextProvider>

client/src/components/DateOfTutorialSelection.tsx

@@ -42,8 +42,8 @@ function DateOfTutorialSelection({
       className={className}
       FormControlProps={other}
       items={availableDates}
-      itemToString={(date) => date.toLocaleString(DateTime.DATE_MED)}
-      itemToValue={(date) => date.toISODate()}
+      itemToString={(date) => date.toLocaleString(DateTime.DATE_MED) ?? 'DATE_NOTE_PARSEABLE'}
+      itemToValue={(date) => date.toISODate() ?? 'DATE_NOTE_PARSEABLE'}
     />
   );
 }

client/src/components/GridDivider.tsx

@@ -0,0 +1,8 @@
+import { Divider } from '@material-ui/core';
+import React from 'react';
+
+function GridDivider(): JSX.Element {
+  return <Divider style={{ gridColumn: '1 / -1' }} />;
+}
+
+export default GridDivider;

client/src/components/SplitButton.tsx

@@ -1,18 +1,32 @@
 import {
   Button,
   ButtonGroup,
+  ButtonGroupProps,
   ButtonProps,
   ClickAwayListener,
   Grow,
   MenuItem,
   MenuList,
   Paper,
   Popper,
-  ButtonGroupProps,
 } from '@material-ui/core';
+import { createStyles, fade, makeStyles } from '@material-ui/core/styles';
 import { MenuDown as ArrowDropDownIcon } from 'mdi-material-ui';
 import React from 'react';
 
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    button: {
+      '&:hover': {
+        background: fade(theme.palette.primary.main, 0.8),
+      },
+      '&:not(:last-child)': {
+        borderRightColor: theme.palette.getContrastText(theme.palette.primary.main),
+      },
+    },
+  })
+);
+
 interface ButtonOption {
   label: string;
   disabled?: boolean;
@@ -29,6 +43,7 @@ function SplitButton({ options, variant, color, ...props }: Props): JSX.Element
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const classes = useStyles();
 
   const { ButtonProps: buttonProps } = options[selectedIndex];
 
@@ -60,6 +75,7 @@ function SplitButton({ options, variant, color, ...props }: Props): JSX.Element
         ref={anchorRef}
         aria-label='split button'
         {...props}
+        classes={{ grouped: classes.button }}
       >
         <Button {...buttonProps}>{options[selectedIndex].label}</Button>
         <Button

client/src/components/attendance-controls/AttendanceControls.tsx

@@ -1,25 +1,23 @@
 import { Box, BoxProps } from '@material-ui/core';
 import React from 'react';
-import { IAttendance, AttendanceState } from 'shared/model/Attendance';
-import { Role } from 'shared/model/Role';
-import { useLogin } from '../../hooks/LoginService';
-import AttendanceButton from '../../view/attendance/components/AttendanceButton';
+import { AttendanceState, IAttendance } from 'shared/model/Attendance';
+import AttendanceButton from '../../pages/attendance/components/AttendanceButton';
 import AttendanceNotePopper, { NoteFormCallback } from './components/AttendanceNotePopper';
 
 export interface AttendanceControlsProps extends BoxProps {
   attendance?: IAttendance;
   onAttendanceChange: (attendance?: AttendanceState) => void;
   onNoteChange: NoteFormCallback;
+  excuseDisabled: boolean;
 }
 
 function AttendanceControls({
   attendance,
   onAttendanceChange,
   onNoteChange,
+  excuseDisabled,
   ...props
 }: AttendanceControlsProps): JSX.Element {
-  const { userData } = useLogin();
-
   const handleAttendanceClick = (newState: AttendanceState) => {
     if (newState === attendance?.state) {
       onAttendanceChange(undefined);
@@ -36,11 +34,7 @@ function AttendanceControls({
         attendanceState={AttendanceState.PRESENT}
         isSelected={attendance?.state === AttendanceState.PRESENT}
         onClick={() => handleAttendanceClick(AttendanceState.PRESENT)}
-        disabled={
-          userData &&
-          !userData.roles.includes(Role.ADMIN) &&
-          attendance?.state === AttendanceState.EXCUSED
-        }
+        disabled={excuseDisabled && attendance?.state === AttendanceState.EXCUSED}
       >
         Anwesend
       </AttendanceButton>
@@ -49,7 +43,7 @@ function AttendanceControls({
         attendanceState={AttendanceState.EXCUSED}
         isSelected={attendance?.state === AttendanceState.EXCUSED}
         onClick={() => handleAttendanceClick(AttendanceState.EXCUSED)}
-        disabled={userData && userData.roles.includes(Role.ADMIN) ? false : true}
+        disabled={excuseDisabled}
       >
         Entschuldigt
       </AttendanceButton>
@@ -58,11 +52,7 @@ function AttendanceControls({
         attendanceState={AttendanceState.UNEXCUSED}
         isSelected={attendance?.state === AttendanceState.UNEXCUSED}
         onClick={() => handleAttendanceClick(AttendanceState.UNEXCUSED)}
-        disabled={
-          userData &&
-          !userData.roles.includes(Role.ADMIN) &&
-          attendance?.state === AttendanceState.EXCUSED
-        }
+        disabled={excuseDisabled && attendance?.state === AttendanceState.EXCUSED}
       >
         Unentschuldigt
       </AttendanceButton>

client/src/components/date-picker/DatePicker.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { KeyboardDatePicker, KeyboardDatePickerProps } from '@material-ui/pickers';
-import { DateTimeFormatOptions, DateTime } from 'luxon';
+import { DateTime, DateTimeFormatOptions } from 'luxon';
+import React from 'react';
 
 const DATE_FORMAT: DateTimeFormatOptions = {
   weekday: 'short',
@@ -13,11 +13,9 @@ export type CustomDatePickerProps = KeyboardDatePickerProps;
 
 function CustomDatePicker(props: CustomDatePickerProps): JSX.Element {
   const labelFunc = (date: DateTime | null, invalidLabel: string) => {
-    if (!date || !date.isValid) {
-      return invalidLabel;
-    }
+    const label = date?.toLocaleString(DATE_FORMAT);
 
-    return date.toLocaleString(DATE_FORMAT);
+    return !!label ? label : invalidLabel;
   };
 
   return (

client/src/components/forms/ScheinExamForm.tsx

@@ -36,7 +36,7 @@ export function getInitialExamFormState(
       scheinExamNo: exam.scheinExamNo.toString(),
       exercises,
       percentageNeeded: exam.percentageNeeded,
-      date: exam.date.toISODate(),
+      date: exam.date.toISODate() ?? '',
     };
   }
 
@@ -48,7 +48,7 @@ export function getInitialExamFormState(
   return {
     scheinExamNo: (lastScheinExamNo + 1).toString(),
     exercises: [],
-    date: DateTime.local().toISODate(),
+    date: DateTime.local().toISODate() ?? '',
     percentageNeeded: 0.5,
   };
 }