From 9bce000c7b5799837fac15bd6339dfd27401b630 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 5 Sep 2021 23:57:27 -0500
Subject: Add ability to assign labs to PTs

---
 src/components/EditorLists.svelte | 99 ++++++++++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 28 deletions(-)

(limited to 'src/components/EditorLists.svelte')

diff --git a/src/components/EditorLists.svelte b/src/components/EditorLists.svelte
index 2d9b9e9..1b2084a 100644
--- a/src/components/EditorLists.svelte
+++ b/src/components/EditorLists.svelte
@@ -7,8 +7,11 @@
     SecondaryText,
     Text,
   } from "@smui/list";
+  import type PeerTeacher from "../models/PeerTeacher";
   import { labStore, ptStore } from "../stores";
 
+  let selectedPeerTeacher: PeerTeacher | undefined;
+
   $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
     a.lastname.toUpperCase() === b.lastname.toUpperCase()
       ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
@@ -17,7 +20,44 @@
 
   $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
 
-  const nothing: any[] = [];
+  $: assignedLabs = [...(selectedPeerTeacher?.labs.values() ?? [])]
+    .flatMap((labId) => {
+      const lab = $labStore.get(labId);
+      return lab === undefined ? [] : [lab];
+    })
+    .sort((a, b) => a.id - b.id);
+
+  $: compatibleLabs = labs.filter(
+    (lab) =>
+      !selectedPeerTeacher?.labs.has(lab.id) &&
+      !selectedPeerTeacher?.conflictsWith(lab.event) &&
+      !assignedLabs.some((assignment) =>
+        assignment.event.conflictsWith(lab.event)
+      )
+  );
+
+  function deletePT(id: number) {
+    if (selectedPeerTeacher?.id === id) {
+      selectedPeerTeacher = undefined;
+    }
+
+    ptStore.update((val) => {
+      val.delete(id);
+      return val;
+    });
+  }
+
+  function assignLab(id: number) {
+    selectedPeerTeacher?.labs.add(id);
+    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
+    selectedPeerTeacher = selectedPeerTeacher;
+  }
+
+  function unassignLab(id: number) {
+    selectedPeerTeacher?.labs.delete(id);
+    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
+    selectedPeerTeacher = selectedPeerTeacher;
+  }
 </script>
 
 <div id="editor-lists">
@@ -25,21 +65,20 @@
     <h3 class="col-header">Peer Teachers</h3>
     <List twoLine singleSelection class="editor-list">
       {#each peerTeachers as pt}
-        <Item>
+        <Item on:SMUI:action={() => (selectedPeerTeacher = pt)}>
           <Text>
-            <PrimaryText>{pt.firstname} {pt.lastname}</PrimaryText>
+            <PrimaryText>{pt.name}</PrimaryText>
             <SecondaryText>{pt.id}</SecondaryText>
           </Text>
           <Meta>
             <IconButton
               class="material-icons"
               on:click$stopPropagation={() => {
-                ptStore.update((val) => {
-                  val.delete(pt.id);
-                  return val;
-                });
-              }}>remove_circle</IconButton
+                deletePT(pt.id);
+              }}
             >
+              remove_circle
+            </IconButton>
           </Meta>
         </Item>
       {/each}
@@ -48,45 +87,49 @@
   <div class="column">
     <h3 class="col-header">Labs</h3>
     <List threeLine class="editor-list">
-      {#each labs as lab}
+      {#each compatibleLabs as lab}
         <Item>
           <Text>
             <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
             <SecondaryText>{lab.time}</SecondaryText>
             <SecondaryText>{lab.location}</SecondaryText>
           </Text>
-          <Meta class="material-icons"
-            ><IconButton
+          <Meta class="material-icons">
+            <IconButton
               class="material-icons"
               on:click$stopPropagation={() => {
-                console.log("hello");
-              }}>add_circle</IconButton
-            ></Meta
-          >
+                assignLab(lab.id);
+              }}
+            >
+              add_circle
+            </IconButton>
+          </Meta>
         </Item>
       {/each}
     </List>
   </div>
   <div class="column">
-    <h3 class="col-header">PT - Assigned Labs</h3>
+    <h3 class="col-header">
+      {selectedPeerTeacher?.name ?? "PT"} - Assigned Labs
+    </h3>
     <List threeLine class="editor-list">
-      {#each nothing as n}
+      {#each assignedLabs as lab}
         <Item>
           <Text>
-            <PrimaryText>{n.course} {n.section}</PrimaryText>
-            <SecondaryText>
-              {n.event.days}
-              {n.event.start}-{n.event.end}
-            </SecondaryText>
+            <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
+            <SecondaryText>{lab.time}</SecondaryText>
+            <SecondaryText>{lab.location}</SecondaryText>
           </Text>
-          <Meta class="material-icons"
-            ><IconButton
+          <Meta class="material-icons">
+            <IconButton
               class="material-icons"
               on:click$stopPropagation={() => {
-                console.log("hello");
-              }}>remove_circle</IconButton
-            ></Meta
-          >
+                unassignLab(lab.id);
+              }}
+            >
+              remove_circle
+            </IconButton>
+          </Meta>
         </Item>
       {/each}
     </List>
-- 
cgit v1.2.3