Delete PT functionality, cleanup table, add `email` to PTs (currently leave it at undefined and add them manually later)

2 files changed, 56 insertions, 30 deletions

diff --git a/src/components/PeerTeachers/PeerTeachers.svelte b/src/components/PeerTeachers/PeerTeachers.svelte
index 28648d5..713af26 100644
--- a/src/components/PeerTeachers/PeerTeachers.svelte
+++ b/src/components/PeerTeachers/PeerTeachers.svelte
@@ -1,41 +1,67 @@
 <script lang="ts">
-  import { each } from "svelte/internal";
   import { labStore, ptStore } from "../../stores";
-  import type PeerTeacher from "src/models/PeerTeacher";
+  import type PeerTeacher from "../../models/PeerTeacher";
+
+  let selected_pt: PeerTeacher | undefined;
 
   $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
     a.lastname.toUpperCase() === b.lastname.toUpperCase()
       ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
       : a.lastname.toUpperCase().localeCompare(b.lastname.toUpperCase())
   );
-  const headers = ["", "Name", "UIN", "Labs"];
+
+  function deletePT(id: number) {
+    // if (selected_pt.id != id) return;
+    // Unassign all labs assigned to this Peer Teacher
+    $ptStore.get(id)?.labs.forEach((lab_id) => {
+      const lab = $labStore?.get(lab_id);
+      lab.assigned = false;
+    });
+
+    // Yeet the Peer Teacher
+    ptStore.update((map) => {
+      map.delete(id);
+      return map;
+    });
+  }
+
+  const headers = ["", "First", "Last", "UIN", "Email", "Lab Hours", ""];
 </script>
 
-<div class="overflow-scroll">
-  <div class="overflow-auto ">
-    <table class="table w-full">
-      <!-- head -->
-      <thead>
-        <tr>
-          {#each headers as header}
-            <th>{header}</th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#each peerTeachers as pt, i}
-          <tr>
-            <th>{i + 1}</th>
-            <th>{pt.name}</th>
-            <th>{pt.id}</th>
-            <th>
-              {#each Array.from(pt.labs) as lab_id}
-                {lab_id}, 
-              {/each}
-            </th>
-          </tr>
+<div class="overflow-auto h-full">
+  <table class="table w-full">
+    <!-- head -->
+    <thead>
+      <tr>
+        {#each headers as header}
+          <th>{header}</th>
         {/each}
-      </tbody>
-    </table>
-  </div>
+      </tr>
+    </thead>
+    <tbody>
+      {#each peerTeachers as pt, i}
+        <tr
+          on:click={() => {
+            selected_pt = pt;
+          }}
+          class={selected_pt == pt ? "active" : "hover"}
+        >
+          <th>{i + 1}</th>
+          <th>{pt.firstname}</th>
+          <th>{pt.lastname}</th>
+          <th>{pt.id}</th>
+          <th>{pt.email}</th>
+          <th>
+            {pt.lab_hours}
+          </th>
+          <th
+            ><button
+              on:click={() => deletePT(pt.id)}
+              class="btn btn-ghost btn-xs">Delete</button
+            ></th
+          >
+        </tr>
+      {/each}
+    </tbody>
+  </table>
 </div>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index ed07ff2..f40332f 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -69,7 +69,7 @@
   </div>
 
   <!-- Chosen Section / Component -->
-  <div class="flex-auto">
+  <div class="flex-auto h-full">
     <svelte:component this={selected.component} />
   </div>
 </div>