diff options
| -rw-r--r-- | src/components/Labs.svelte | 24 | ||||
| -rw-r--r-- | src/components/PeerTeachers.svelte | 64 | ||||
| -rw-r--r-- | src/components/helpers/Icon.svelte | 5 |
3 files changed, 69 insertions, 24 deletions
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> |