Add wizard / UI to generate multiple tutorials & users at once

.vscode/launch.json

@@ -27,7 +27,7 @@
       "args": ["start"],
       "port": 9229,
       "restart": true,
-      "protocol": "inspector",
+      "protocol": "legacy",
       "console": "integratedTerminal",
       "sourceMaps": true
     },

client/craco.config.js

@@ -50,7 +50,7 @@ module.exports = {
         (plugin) => !(plugin instanceof ModuleScopePlugin)
       );
 
-      config.output.publicPath = isEnvProduction ? '#{ROUTE_PREFIX}' : '';
+      config.output.publicPath = isEnvProduction ? '/#{ROUTE_PREFIX}' : '/';
       config.plugins = config.plugins.map((plugin) => {
         if (!(plugin instanceof HtmlWebpackPlugin)) {
           return plugin;

client/src/components/CustomSelect.tsx

@@ -1,6 +1,7 @@
 import {
   Checkbox,
   Chip,
+  CircularProgress,
   FormControl,
   FormHelperText,
   InputLabel,
@@ -30,20 +31,29 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-type ItemToString<T> = (item: T) => string;
+export interface ItemDisabledInformation {
+  isDisabled: boolean;
+  reason?: string;
+}
+
+export type ItemToString<T> = (item: T) => string;
+export type ItemToBoolean<T> = (item: T) => boolean;
+export type IsItemDisabledFunction<T> = (item: T) => ItemDisabledInformation;
 
 export interface CustomSelectProps<T>
   extends Omit<SelectProps, 'variant' | 'input' | 'children' | 'renderValue'> {
   name?: string;
   label: string;
-  emptyPlaceholder: string;
+  emptyPlaceholder?: string;
   nameOfNoneItem?: string;
   helperText?: React.ReactNode;
   items: T[];
   itemToString: ItemToString<T>;
   itemToValue: ItemToString<T>;
-  isItemSelected?: (item: T) => boolean;
+  isItemDisabled?: IsItemDisabledFunction<T>;
+  isItemSelected?: ItemToBoolean<T>;
   FormControlProps?: Omit<FormControlProps, 'variant' | 'className'>;
+  showLoadingIndicator?: boolean;
 }
 
 export type OnChangeHandler = CustomSelectProps<{}>['onChange'];
@@ -93,14 +103,16 @@ function CustomSelect<T>({
   itemToString,
   itemToValue,
   nameOfNoneItem,
+  isItemDisabled,
   isItemSelected,
   multiple,
   FormControlProps,
   classes: classesFromProps,
+  showLoadingIndicator,
   ...other
 }: CustomSelectProps<T>): JSX.Element {
   if (multiple && !isItemSelected) {
-    console.error(
+    console.warn(
       `[CustomSelect] -- You have set the Select '${name}' to allow multiple selections but you have not passed an isItemSelected function via props. Therefore Checkboxes won't be shown for the items.`
     );
   }
@@ -128,9 +140,16 @@ function CustomSelect<T>({
 
   return (
     <FormControl {...FormControlProps} className={className} variant='outlined' error={error}>
-      <InputLabel ref={inputLabel}>{label}</InputLabel>
+      <InputLabel required={other.required} ref={inputLabel}>
+        {label}
+      </InputLabel>
       <Select
         fullWidth
+        IconComponent={
+          showLoadingIndicator
+            ? (props: any) => <CircularProgress {...props} size={24} />
+            : undefined
+        }
         {...other}
         name={name}
         onChange={onChange}
@@ -163,13 +182,16 @@ function CustomSelect<T>({
 
           const itemString: string = itemToString(item);
           const itemValue: string = itemToValue(item);
+          const { isDisabled, reason }: ItemDisabledInformation = isItemDisabled?.(item) ?? {
+            isDisabled: false,
+          };
 
           return (
-            <MenuItem key={itemValue} value={itemValue}>
+            <MenuItem key={itemValue} value={itemValue} disabled={isDisabled}>
               {multiple ? (
                 <>
                   {isItemSelected && <Checkbox checked={isItemSelected(item)} />}
-                  <ListItemText primary={itemString} />
+                  <ListItemText primary={itemString} secondary={isDisabled ? reason : undefined} />
                 </>
               ) : (
                 itemString
@@ -180,7 +202,7 @@ function CustomSelect<T>({
 
         {items.length === 0 && (
           <MenuItem value='' disabled>
-            <ListItemText primary={emptyPlaceholder} />
+            <ListItemText primary={emptyPlaceholder ?? 'Keine Items verfügbar'} />
           </MenuItem>
         )}
       </Select>

client/src/components/TableWithPadding.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export interface TableWithPaddingProps<T> extends TableProps {
   items: T[];
-  createRowFromItem: (item: T) => React.ReactNode;
+  createRowFromItem: (item: T, idx: number) => React.ReactNode;
   placeholder?: string;
 }
 
@@ -50,7 +50,7 @@ function TableWithPadding<T>({
               <React.Fragment key={idx}>
                 {idx !== 0 && <TableRow className={classes.spacingRow} />}
 
-                {createRowFromItem(item)}
+                {createRowFromItem(item, idx)}
               </React.Fragment>
             ))}
           </TableBody>

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { KeyboardDatePicker, KeyboardDatePickerProps } from '@material-ui/pickers';
+import { DateTimeFormatOptions, DateTime } from 'luxon';
+
+const DATE_FORMAT: DateTimeFormatOptions = {
+  weekday: 'short',
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+};
+
+export type CustomDatePickerProps = KeyboardDatePickerProps;
+
+function CustomDatePicker(props: CustomDatePickerProps): JSX.Element {
+  const labelFunc = (date: DateTime | null, invalidLabel: string) => {
+    if (!date || !date.isValid) {
+      return invalidLabel;
+    }
+
+    return date.toLocaleString(DATE_FORMAT);
+  };
+
+  return (
+    <KeyboardDatePicker
+      variant='inline'
+      format='dd.MM.yyyy'
+      labelFunc={labelFunc}
+      fullWidth
+      inputVariant='outlined'
+      {...props}
+    />
+  );
+}
+
+export default CustomDatePicker;