Added code to get closer to asset assignment functionality.

imports/api/students.js

@@ -17,6 +17,9 @@ if (Meteor.isServer) {
 }
 
 Meteor.methods({
+	async 'students.getPossibleGrades'() {
+		return Students.rawCollection().distinct('grade', {});
+	},
 	/**
 	 * Sets a first name alias that can be overridden by the one that is imported.
 	 * @param _id The student's database ID.

imports/ui/Assets/Assign.svelte

@@ -12,9 +12,18 @@
 	import Button, { Label } from '@smui/button';
 	import {Staff} from "/imports/api/staff";
 	import List, {Item, Graphic, Meta, Text, PrimaryText, SecondaryText} from '@smui/list';
+	import Paper from '@smui/paper';
+	import LayoutGrid, {Cell} from '@smui/layout-grid';
 
+	let grades = ['All'];
 	onMount(async () => {
 		Meteor.subscribe('sites');
+		Meteor.call('students.getPossibleGrades', (err, result) => {
+			if(err) console.log(err);
+			else {
+				grades = ['All', ...result];
+			}
+		});
 	});
 	// Load the sites (reactive).
 	let sites = Sites.find({});
@@ -23,43 +32,76 @@
 	let siteSelectComponent;
 	let categories = ['Student', 'Staff'];
 	let selectedCategory = 'Student';
+	let sorts = [{column: 'firstName', name: 'First Name'}, {column: 'lastName', name: 'Last Name'}, {column: 'email', name: 'Email'}];
+	let selectedSort = 'firstName'
+	let selectedGrade = 'All';
+	let selectedAssignee;
+	let assetId = "";
 	$: {
 		if(selectedSiteId) {
 			if(selectedCategory === 'Student') {
 				Meteor.subscribe('students', selectedSiteId);
-				assignees = Students.find({siteId: selectedSiteId});
+				let filter = {siteId: selectedSiteId};
+				
+				if(selectedGrade && selectedGrade !== 'All') filter.grade = selectedGrade;
+				assignees = Students.find(filter, {sort: [selectedSort]});
 			}
 			else if(selectedCategory === 'Staff') {
 				Meteor.subscribe('staff', selectedSiteId);
-				assignees = Staff.find({siteId: selectedSiteId});
+				assignees = Staff.find({siteId: selectedSiteId}, {sort: [selectedSort]});
 			}
 		}
 	}
-	let selectedAssignee;
 </script>
 
 <div class="container">
-	<h1>Assign Assets</h1>
+	<h1 style="display: block">Assign Assets</h1>
 
+	<Paper>
+		<LayoutGrid>
+			<Cell span="{6}">
 				<Select bind:value={selectedSiteId} label="Site" bind:this={siteSelectComponent}>
 					{#each $sites as site}
 						<Option value={site._id}>{site.name}</Option>
 					{/each}
 				</Select>
-	
+			</Cell>
+			<Cell span="{6}">
 				<Select bind:value={selectedCategory} label="Category">
 					{#each categories as category}
 						<Option value={category}>{category}</Option>
 					{/each}
 				</Select>
+			</Cell>
+			<Cell span="{6}">
+				{#if (selectedCategory === 'Student')}
+					<Select bind:value={selectedGrade} label="Grade">
+						{#each grades as grade}
+							<Option value={grade}>{grade}</Option>
+						{/each}
+					</Select>
+				{/if}
+			</Cell>
+			<Cell span="{6}">
+				<Select bind:value={selectedSort} label="Sort">
+					{#each sorts as sort}
+						<Option value={sort.column}>{sort.name}</Option>
+					{/each}
+				</Select>
+			</Cell>
+		</LayoutGrid>
+	</Paper>
 	
-	<List twoLine singleSelection>
+	<TextField type="text" style="width: 100%" bind:value={assetId} label="Asset ID">
+		
+	</TextField>
+	<List twoLine singleSelection style="max-height: 60%">
 		{#if $assignees}
 			{#each $assignees as assignee}
 				<Item on:SMUI:action={() => (selectedAssignee = assignee)} selected={selectedAssignee === assignee}>
 					<Text>
 						<PrimaryText>{assignee.firstName} {assignee.lastName}</PrimaryText>
-						<SecondaryText>{assignee.grade}</SecondaryText>
+						<SecondaryText>{assignee.email} {assignee.grade ? '(' + assignee.grade + ')' : ""}</SecondaryText>
 					</Text>
 				</Item>
 			{/each}

package.json

@@ -55,6 +55,8 @@
   "devDependencies": {
     "@smui/common": "^6.0.0-beta.16",
     "@smui/icon-button": "^6.0.0",
+    "@smui/layout-grid": "^6.0.0",
+    "@smui/paper": "^6.0.0",
     "@smui/select": "^6.0.0-beta.16",
     "@smui/textfield": "^6.0.0-beta.16",
     "chai": "^4.2.0",