Cleaned up the chromebooks view; Reorganized the admin view; Added functionality to import students and staff (still need to add/test functionality to edit them and delete them).

2022-07-23 23:42:23 -07:00
parent 195d93fd20
commit 603f395ef0
15 changed files with 4825 additions and 523 deletions
--- a/imports/ui/Admin/Sites.svelte
+++ b/imports/ui/Admin/Sites.svelte
@@ -0,0 +1,117 @@
+<script>
+	import {Meteor} from "meteor/meteor";
+	import {onMount} from "svelte";
+	import {Sites} from "../../api/sites";
+	import GridTable from "./../GridTable.svelte";
+	import {writable} from "svelte/store";
+	import TextField from '@smui/textfield';
+	import HelperText from '@smui/textfield/helper-text';
+
+	onMount(async () => {
+		Meteor.subscribe('sites');
+	});
+
+	// Should not be needed now.  Did not work well - had a bug somewhere.
+	// const fixRecords = () => {Meteor.call("admin.fixRecords");}
+
+	const siteColumns = [
+		{
+			key: "name",
+			title: "Name",
+			value: v => v.name,
+			minWidth: 100,
+			weight: 1,
+			cls: "name",
+		},
+	];
+	const siteActions = {
+		title: "Actions",
+		headerWidgets: [
+			{icon: "add_box", action: () => {editedSite.set({name: ""});}, tooltip: "Add a new Site."}
+		],
+		rowWidgets: [
+			{icon: "add_circle", action: (v) => {editedSite.set(v)}},
+			{icon: "delete", action: (v) => {deleteSite(v)}}
+		],
+	};
+	const deleteSite = site => {
+		//TODO:
+	};
+	// Create a holder for the site being edited.  This allows us to clear the editor when the user finishes, and allows the table or parent view to setup the editor.
+	let editedSite = writable(null);
+	let dirtySite;
+	// Copy the edited site when ever it changes, set some defaults for a new site object (to make the view happy).
+	editedSite.subscribe(site => {dirtySite = Object.assign({name:""}, site)});
+	// Load the sites (reactive).
+	let sites = Sites.find({});
+	const applySiteChanges = () => {
+		if(dirtySite._id)
+			Meteor.call("sites.update", dirtySite._id, dirtySite.name);
+		else
+			Meteor.call("sites.add", dirtySite.name);
+		editedSite.set(null);
+		dirtySite = null;
+	}
+	const rejectSiteChanges = () => {
+		editedSite.set(null);
+	}
+	let selectedSite = null;
+	const onSiteSelection = (e) => {
+		selectedSite = Sites.findOne({_id: e.detail});
+	}
+</script>
+
+<div class="container">
+	<h2>Sites</h2>
+	<GridTable bind:rows={sites} columns="{siteColumns}" actions="{siteActions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedSite}" on:selection={onSiteSelection}>
+		{#if dirtySite}
+			<div class="editorContainer">
+				<div style="grid-column: 1/span 1">
+					<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
+						<HelperText slot="helper">Provide a unique name for the site.</HelperText>
+					</TextField>
+				</div>
+
+				<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
+					check
+				</button>
+				<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
+					close
+				</button>
+			</div>
+		{/if}
+	</GridTable>
+</div>
+
+<style>
+    form {
+        margin: 0;
+    }
+    .editorContainer {
+        display: grid;
+        grid-template-columns: minmax(10px, 1fr) minmax(3rem, 3rem) minmax(3rem, 3rem);
+    }
+    .accept-button, .reject-button {
+        font-size: .8rem;
+        padding: .6rem;
+        margin: auto;
+        color: white;
+        border-radius: 50%;
+        border: 0;
+        font-weight: 800;
+        alignment: center;
+        cursor: pointer;
+    }
+    .accept-button {
+        background-color: rgba(61, 148, 61, 0.91);
+    }
+    .reject-button {
+        background-color: rgba(176, 64, 64, 0.61);
+    }
+    .accept-button:hover {
+        background-color: rgb(61, 148, 61);
+    }
+    .reject-button:hover {
+        background-color: rgb(176, 64, 64);
+    }
+</style>