refactor(lab): prefer navigation lists for researcher listing

BastiDood · Jul 11, 2024 · 93b3c22 · 93b3c22
1 parent 814187f
commit 93b3c22
Showing 1 changed file with 18 additions and 20 deletions.
diff --git a/src/routes/dashboard/(draft)/students/+page.svelte b/src/routes/dashboard/(draft)/students/+page.svelte
@@ -16,8 +16,6 @@
 
     $: suffix = getOrdinalSuffix(curr_round);
 
-    // [x]: Prevent the user from selecting too many.
-    // Resolved: Refer to the HTML TODO below
     let draftees: string[] = [];
     $: remainingQuota = quota - researchers.length;
     $: remainingDraftees = remainingQuota - draftees.length;
@@ -100,25 +98,25 @@
         </form>
     </div>
 {:else}
-    <!-- [x]: Show the currently drafted students under this lab. -->
-    <!-- Resolved: Added disabled ListBox with already-selected researchers -->
-    <!-- TODO: Please verify if this works -->
     <WarningAlert
         >No students have selected this lab in this round. No action is required until the next round.</WarningAlert
     >
-    <h3>My Selected Researchers:</h3>
-    <ListBox multiple rounded="rounded" disabled>
-        {#each researchers as { email, given_name, family_name, avatar, student_number } (email)}
-            <ListBoxItem bind:group={draftees} name="students" value={email}>
-                <Avatar slot="lead" src={avatar} />
-                <div class="flex flex-col">
-                    <strong><span class="uppercase">{family_name}</span>, {given_name}</strong>
-                    {#if student_number !== null}
-                        <span class="text-sm opacity-50">{student_number}</span>
-                    {/if}
-                    <span class="text-xs opacity-50">{email}</span>
-                </div>
-            </ListBoxItem>
-        {/each}
-    </ListBox>
+    <h3 class="h3">Drafted Students from Previous Rounds</h3>
+    <nav class="list-nav">
+        <ul>
+            {#each researchers as { email, given_name, family_name, avatar, student_number } (email)}
+                <a href="mailto:{email}">
+                    <Avatar src={avatar} />
+                    <div class="flex flex-col">
+                        <strong><span class="uppercase">{family_name}</span>, {given_name}</strong>
+                        {#if student_number !== null}
+                            <span class="text-sm opacity-50">{student_number}</span>
+                        {/if}
+                        <span class="text-xs opacity-50">{email}</span>
+                    </div>
+                </a>
+            {/each}
+        </ul>
+    </nav>
+    <ListBox multiple rounded="rounded" disabled></ListBox>
 {/if}