From d5cae6e88c432ec7139caee2de2c7aee30af9c1b Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 31 Jul 2022 15:21:55 -0500
Subject: Copy all emails button, PT and Labs table data not bold anymore.

---
 src/components/Labs.svelte         | 24 ++++++++------
 src/components/PeerTeachers.svelte | 64 +++++++++++++++++++++++++++++---------
 src/components/helpers/Icon.svelte |  5 +++
 3 files changed, 69 insertions(+), 24 deletions(-)

(limited to 'src')

diff --git a/src/components/Labs.svelte b/src/components/Labs.svelte
index 0cd685a..f38cd7e 100644
--- a/src/components/Labs.svelte
+++ b/src/components/Labs.svelte
@@ -73,8 +73,14 @@
         {#each headers as header, i}
           {#if i == 0}
             <th>
-              {labs.length}
-              <Icon name="download" class="h-4 w-4" handleClick={download} />
+              <div class="flex flex-row">
+                {labs.length}
+                <Icon
+                  name="download"
+                  class="h-4 w-4 ml-2"
+                  handleClick={download}
+                />
+              </div>
             </th>
           {:else}
             <th>{header}</th>
@@ -90,13 +96,13 @@
           }}
           class={selected_lab == l.lab ? "active" : "hover"}
         >
-          <th>{i + 1}</th>
-          <th>{l.lab?.course} - {l.lab?.section}</th>
-          <th>{l.lab?.time}</th>
-          <th>{l.lab?.location}</th>
-          <th>{displayFaculty(l.lab)}</th>
-          <th>{l.pt?.name ?? "UNASSIGNED"}</th>
-          <th><button class="btn btn-ghost btn-xs">Delete</button></th>
+          <td>{i + 1}</td>
+          <td>{l.lab?.course} - {l.lab?.section}</td>
+          <td>{l.lab?.time}</td>
+          <td>{l.lab?.location}</td>
+          <td>{displayFaculty(l.lab)}</td>
+          <td>{l.pt?.name ?? "UNASSIGNED"}</td>
+          <td><button class="btn btn-ghost btn-xs">Delete</button></td>
         </tr>
       {/each}
     </tbody>
diff --git a/src/components/PeerTeachers.svelte b/src/components/PeerTeachers.svelte
index 0ff7f47..56da10f 100644
--- a/src/components/PeerTeachers.svelte
+++ b/src/components/PeerTeachers.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
   import { labStore, ptStore } from "../stores";
   import type PeerTeacher from "../models/PeerTeacher";
+  import Icon from "./helpers/Icon.svelte";
+  import type { SnackbarComponentDev } from "@smui/snackbar";
+  import Snackbar, { Label, Actions } from "@smui/snackbar";
+  import IconButton from "@smui/icon-button";
 
   let selected_pt: PeerTeacher | undefined;
   let editing: boolean = false;
 
+  let snackbarSuccess: SnackbarComponentDev;
+
   $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
     a.lastname.toUpperCase() === b.lastname.toUpperCase()
       ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
@@ -12,7 +18,6 @@
   );
 
   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);
@@ -26,6 +31,12 @@
     });
   }
 
+  function handleEmail() {
+    const emails = peerTeachers.flatMap((pt) => pt.email).join(",");
+    navigator.clipboard.writeText(emails);
+    if (snackbarSuccess) snackbarSuccess.open();
+  }
+
   let headers = [
     "",
     "First",
@@ -49,7 +60,23 @@
     <thead>
       <tr>
         {#each headers as header, i}
-          <th> {i == 0 ? peerTeachers.length : header}</th>
+          <th>
+            {#if i == 0}
+              {peerTeachers.length}
+            {:else if header == "Email"}
+              <div class="flex flex-row items-center">
+                {header}
+                <Icon
+                  name="clipboard-copy"
+                  class="h-4 w-4 ml-2 mt-0.5"
+                  handleClick={handleEmail}
+                />
+                <!-- </Button> -->
+              </div>
+            {:else}
+              {header}
+            {/if}
+          </th>
         {/each}
       </tr>
     </thead>
@@ -61,8 +88,8 @@
           }}
           class={selected_pt == pt ? "active" : "hover"}
         >
-          <th>{i + 1}</th>
-          <th>
+          <td>{i + 1}</td>
+          <td>
             {#if editing && selected_pt == pt}
               <input
                 bind:value={pt.firstname}
@@ -75,17 +102,17 @@
                 {pt.firstname}
               </div>
             {/if}
-          </th>
-          <th>{pt.lastname}</th>
-          <th>{pt.email}</th>
-          <th>{pt.id}</th>
-          <th>{pt.phone_number}</th>
-          <th>{pt.pref_work}</th>
-          <th>{pt.lab_hours}</th>
-          <th>{pt.gender}</th>
-          <th>{pt.ethnicity}</th>
-          <th>{pt.graduation}</th>
-          <th>{pt.new_ret}</th>
+          </td>
+          <td>{pt.lastname}</td>
+          <td>{pt.email}</td>
+          <td>{pt.id}</td>
+          <td>{pt.phone_number}</td>
+          <td>{pt.pref_work}</td>
+          <td>{pt.lab_hours}</td>
+          <td>{pt.gender}</td>
+          <td>{pt.ethnicity}</td>
+          <td>{pt.graduation}</td>
+          <td>{pt.new_ret}</td>
           <th
             ><button
               on:click={() => deletePT(pt.id)}
@@ -97,3 +124,10 @@
     </tbody>
   </table>
 </div>
+
+<Snackbar bind:this={snackbarSuccess} class="demo-success">
+  <Label>Successfully copied comma-separated list of emails</Label>
+  <Actions>
+    <IconButton class="material-icons" title="Dismiss">close</IconButton>
+  </Actions>
+</Snackbar>
diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
index 42e6151..75ee3f4 100644
--- a/src/components/helpers/Icon.svelte
+++ b/src/components/helpers/Icon.svelte
@@ -27,6 +27,11 @@
       box: 24,
       path: `<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />`,
     },
+    {
+      name: "clipboard-copy",
+      box: 24,
+      path: `<path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />`,
+    },
   ];
   let displayIcon = icons.find((e) => e.name === name);
 </script>
-- 
cgit v1.2.3