Better UX for selecting supervisors for a thesis

UniversityOfHelsinkiCS · May 3, 2024 · 715b9ea · 715b9ea
1 parent 7bc6fe3
commit 715b9ea
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 43 deletions.
diff --git a/src/client/components/ThesisPage/SupervisorSelect.tsx b/src/client/components/ThesisPage/SupervisorSelect.tsx
@@ -52,52 +52,71 @@ const SupervisorSelect: React.FC<{
       0
     )
   const totalPercentage = getTotalPercentage()
+  const selectedSupervisorIds = supervisorSelections.map(
+    (selection) => selection.userId
+  )
 
   return (
     <Stack spacing={3}>
-      {supervisorSelections.map((selection, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <Stack key={index} spacing={1} direction="row">
-          <FormControl fullWidth>
-            <InputLabel id={`supervisor-select-label-${index}`}>
-              Select supervisor
-            </InputLabel>
-            <Select
+      {supervisorSelections.map((selection, index) => {
+        // filter out supervisors that are already selected
+        const supervisorOptions = supervisors.filter(
+          (supervisor) =>
+            supervisor.id === selection.userId ||
+            !selectedSupervisorIds.includes(supervisor.id)
+        )
+
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          <Stack key={index} spacing={1} direction="row">
+            <FormControl fullWidth>
+              <InputLabel id={`supervisor-select-label-${index}`}>
+                Select supervisor
+              </InputLabel>
+              <Select
+                required
+                value={selection.userId}
+                label="Select supervisor"
+                name={`supervisorId-${index}`}
+                onChange={(event) =>
+                  handleSupervisorChange(index, event.target.value as string)
+                }
+              >
+                {supervisorOptions.map((supervisor) => (
+                  <MenuItem key={supervisor.id} value={supervisor.id}>
+                    {supervisor.firstName} {supervisor.lastName}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <TextField
               required
-              value={selection.userId}
-              label="Select supervisor"
-              name={`supervisorId-${index}`}
+              type="number"
+              sx={{ width: 125 }}
+              inputProps={{ min: 1, max: 100 }}
+              label="Percentage"
+              value={selection.percentage}
               onChange={(event) =>
-                handleSupervisorChange(index, event.target.value as string)
+                handlePercentageChange(index, parseInt(event.target.value, 10))
               }
-            >
-              {supervisors.map((supervisor) => (
-                <MenuItem key={supervisor.id} value={supervisor.id}>
-                  {supervisor.firstName} {supervisor.lastName}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <TextField
-            required
-            type="number"
-            sx={{ width: 125 }}
-            inputProps={{ min: 1, max: 100 }}
-            label="Percentage"
-            value={selection.percentage}
-            onChange={(event) =>
-              handlePercentageChange(index, parseInt(event.target.value, 10))
-            }
-          />
-          <Button onClick={() => handleRemoveSupervisor(index)}>Remove</Button>
-        </Stack>
-      ))}
+            />
+            <Button onClick={() => handleRemoveSupervisor(index)}>
+              Remove
+            </Button>
+          </Stack>
+        )
+      })}
       {totalPercentage !== 100 && (
         <Alert icon={<ErrorIcon fontSize="inherit" />} severity="error">
           {t('thesisForm:supervisionPercentageError')}
         </Alert>
       )}
-      <Button onClick={handleAddSupervisor}>Add Supervisor</Button>
+      <Button
+        disabled={supervisorSelections.length === supervisors.length}
+        onClick={handleAddSupervisor}
+      >
+        Add Supervisor
+      </Button>
     </Stack>
   )
 }

diff --git a/src/client/components/ThesisPage/ThesisEditForm.tsx b/src/client/components/ThesisPage/ThesisEditForm.tsx
@@ -27,7 +27,7 @@ const ThesisEditForm: React.FC<{
   onSubmit: (data: ThesisData) => Promise<void>
 }> = ({ initialThesis, supervisors, onSubmit, onClose }) => {
   const { t } = useTranslation()
-  const [editedTesis, setEditedThesis] = useState<ThesisData | null>(
+  const [editedThesis, setEditedThesis] = useState<ThesisData | null>(
     initialThesis
   )
 
@@ -42,7 +42,7 @@ const ThesisEditForm: React.FC<{
         onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {
           event.preventDefault()
 
-          await onSubmit(editedTesis)
+          await onSubmit(editedThesis)
         },
       }}
     >
@@ -56,7 +56,7 @@ const ThesisEditForm: React.FC<{
             id="topic"
             name="topic"
             label={t('topicHeader')}
-            value={editedTesis.topic}
+            value={editedThesis.topic}
             onChange={(event) => {
               setEditedThesis((oldThesis) => ({
                 ...oldThesis,
@@ -72,7 +72,7 @@ const ThesisEditForm: React.FC<{
             </InputLabel>
             <Select
               required
-              value={editedTesis.programId}
+              value={editedThesis.programId}
               label="Program"
               name="programId"
               onChange={(event) => {
@@ -91,7 +91,7 @@ const ThesisEditForm: React.FC<{
           </FormControl>
 
           <SupervisorSelect
-            supervisorSelections={editedTesis.supervisions}
+            supervisorSelections={editedThesis.supervisions}
             setSupervisorSelections={(newSupervisions) =>
               setEditedThesis((oldThesis) => ({
                 ...oldThesis,
@@ -107,7 +107,7 @@ const ThesisEditForm: React.FC<{
             </InputLabel>
             <Select
               required
-              value={editedTesis.status}
+              value={editedThesis.status}
               label={t('statusHeader')}
               name="status"
               onChange={(event) => {
@@ -128,7 +128,7 @@ const ThesisEditForm: React.FC<{
             <DatePicker
               label={t('startDateHeader')}
               name="startDate"
-              value={dayjs(editedTesis.startDate)}
+              value={dayjs(editedThesis.startDate)}
               format="DD.MM.YYYY"
               onChange={(date) => {
                 setEditedThesis((oldThesis) => ({
@@ -140,7 +140,7 @@ const ThesisEditForm: React.FC<{
             <DatePicker
               label={t('targetDateHeader')}
               name="targetDate"
-              value={dayjs(editedTesis.targetDate)}
+              value={dayjs(editedThesis.targetDate)}
               format="DD.MM.YYYY"
               onChange={(date) => {
                 setEditedThesis((oldThesis) => ({