Updated assignments by person to allow unassigning and assigning.

imports/ui/Assignments/AssignmentByAsset.svelte

@@ -38,7 +38,7 @@
     
     $: {
     	if(foundAsset) {
-		    foundAssetType = AssetTypes.findOne({_id: foundAsset.assetTypeId});
+		    foundAssetType = AssetTypes.findOne({_id: foundAsset.assetTypeId.toUpperCase()});
 		    
     		if(foundAsset.assigneeType === 'Student') {
 			    foundAssignee = Students.findOne({_id: foundAsset.assigneeId});
@@ -140,6 +140,7 @@
 
     {#if foundAsset}
 	    <div>Asset ID: {foundAsset.assetId}</div>
+	    <div>Serial: {foundAsset.serial}</div>
 		<div>Condition: {foundAsset.condition}</div>
 		{#if foundAsset.conditionDetails}
 			<div>Condition Details: {foundAsset.conditionDetails}</div>

imports/ui/Assignments/AssignmentByPerson.svelte

@@ -13,6 +13,7 @@
     import {AssetTypes} from "/imports/api/asset-types";
 	import Button, { Label } from '@smui/button';
 	import Dialog, { Title, Content, Actions } from '@smui/dialog';
+    import AssignmentByPersonAssets from "/imports/ui/Assignments/AssignmentByPersonAssets.svelte";
 
     onMount(async () => {
 	    Meteor.subscribe('students');
@@ -20,7 +21,6 @@
 	    Meteor.subscribe('assets');
 	    Meteor.subscribe('assetTypes');
     });
-    let selectedSiteId;
     let categories = ['Email', 'First Name', 'Last Name'];
     let selectedCategory = 'Email';
     let searchText = "";
@@ -47,13 +47,13 @@
     }
     
     const assignedAssets = (person) => {
-    	let result = Assets.find({assigneeId: person._id}).fetch();
-    	
-    	for(next of result) {
-    		next.type = AssetTypes.findOne({_id: next.assetTypeId})
+	    let result = Assets.find({assigneeId: person._id}).fetch();
+
+	    for (next of result) {
+		    next.type = AssetTypes.findOne({_id: next.assetTypeId})
 	    }
-    	
-    	return result;
+
+	    return result;
     }
 
 	let conditions = ['New', 'Like New', 'Good', 'Okay', 'Damaged'];
@@ -61,25 +61,16 @@
 	let conditionDetails = "";
 	let comment = "";
 	let unassignAsset;
+    let isUnassignDialogOpen = false;
 
 	const unassign = (asset) => {
 		unassignAsset = asset;
+		comment = "";
 		condition = asset.condition;
 		conditionDetails = asset.conditionDetails;
-		// if(confirm("Unassign Asset?")) {
-		// 	Meteor.call("assets.unassign", asset.assetId);
-		// }
-		openDialog();
+		isUnassignDialogOpen = true;
 	}
-
-	let isDialogOpen = false;
-	let dialogAsset;
-
-	const openDialog = () => {
-		// assetTypeDialogSelectedIndex = -1;
-		isDialogOpen = true;
-	}
-	const dialogClosed = (e) => {
+	const unassignDialogClosed = (e) => {
 		switch (e.detail.action) {
 			case 'unassign':
 				if(unassignAsset && unassignAsset.assetId) {
@@ -91,6 +82,10 @@
 						else {
 							// TODO: Set focus to the asset ID field.
 							unassignAsset = undefined;
+							//Force a refresh.  Should not be necessary, but I cannot seem to get the Reactive UI to work.
+							let x = searchText;
+							searchText = "";
+							searchText = x;
 						}
 					});
 				}
@@ -100,11 +95,61 @@
 				break;
 		}
 	}
+	
+	let isAssignDialogOpen = false;
+	let assetId = "";
+	let foundAsset = undefined;
+	
+	$: {
+		if(assetId && assetId.length > 0) {
+			foundAsset = Assets.findOne({assetId: assetId});
+		}
+	}
+	let assignDialogPersonId;
+	let assignDialogPersonType;
+	let assignDialogCondition = "Good";
+	let assignDialogConditionDetails = "";
+	let showAssetIdField = false;
+
+    const assignAssets = (personId, personType) => {
+		assignDialogPersonType = personType;
+		assignDialogPersonId = personId;
+	    assignDialogCondition = foundAsset.condition ? foundAsset.condition : "Good";
+	    assignDialogConditionDetails = foundAsset.conditionDetails ? foundAsset.conditionDetails : "";
+		isAssignDialogOpen = true;
+    }
+    const assignDialogClosed = (e) => {
+	    switch (e.detail.action) {
+		    case 'assign':
+			    if(foundAsset && foundAsset.assetId) {
+				    Meteor.call("assets.assign", foundAsset.assetId, assignDialogPersonType, assignDialogPersonId, assignDialogCondition, assignDialogConditionDetails, (err, result) => {
+					    if(err) {
+						    console.error(err);
+						    //TODO: Display an error!
+					    }
+					    else {
+						    foundAsset = undefined;
+						    assetId = "";
+						    searchText = searchText;
+
+						    //Force a refresh.  Should not be necessary, but I cannot seem to get the Reactive UI to work.
+						    let x = searchText;
+						    searchText = "";
+						    searchText = x;
+					    }
+				    });
+			    }
+			    break;
+		    default:
+		    case 'cancel':
+			    break;
+	    }
+    }
 </script>
 
 <div class="container">
-	<Dialog bind:open={isDialogOpen} surface$style="width: 850px; max-width: calc(100vw - 32px);"
-			on:SMUIDialog:closed={dialogClosed}>
+	<Dialog bind:open={isUnassignDialogOpen} surface$style="width: 850px; max-width: calc(100vw - 32px);"
+			on:SMUIDialog:closed={unassignDialogClosed}>
 		<Title id="large-scroll-title">Report Asset Condition</Title>
 		<Content id="large-scroll-content">
 			<Select bind:value={condition} label="Condition">
@@ -130,6 +175,30 @@
 		</Actions>
 	</Dialog>
 
+	<Dialog bind:open={isAssignDialogOpen} surface$style="width: 850px; max-width: calc(100vw - 32px);"
+	        on:SMUIDialog:closed={assignDialogClosed}>
+		<Title id="large-scroll-title">Assign Asset</Title>
+			<Content id="large-scroll-content">
+				<Select bind:value={assignDialogCondition} label="Condition">
+					{#each conditions as next}
+						<Option value={next}>{next}</Option>
+					{/each}
+				</Select>
+				<div style="grid-column: 1/span 1">
+					<TextField textarea style="width: 100%; height: 20rem; margin-top: 1rem" helperLine$style="width: 100%" bind:value={assignDialogConditionDetails} label="Condition Details">
+					</TextField>
+				</div>
+			</Content>
+			<Actions>
+				<Button action="assign" default>
+					<Label>Assign</Label>
+				</Button>
+				<Button action="cancel">
+					<Label>Cancel</Label>
+				</Button>
+			</Actions>
+	</Dialog>
+
     <h1 style="display: block">Asset Assignments By Student/Staff</h1>
 
     <Paper>
@@ -162,31 +231,51 @@
 					{next.firstName} {next.lastName} ({next.email})
 					<div style="margin-left: 2rem">
 						{#each (assignedAssets(next)) as asset}
-							Type: {asset.type.name}<br/>
-							AssetId: {asset.assetId}<br/>
-							Serial: {asset.serial}<br/>
-							<Button variant="raised" touch on:click={() => {unassign(asset)}}>
-								<Label style="color: white">Unassign</Label>
-							</Button>
+							<div class="asset">
+								Type: {asset.type.name}<br/>
+								AssetId: {asset.assetId}<br/>
+								Serial: {asset.serial}<br/>
+								<Button variant="raised" color="secondary" touch on:click={() => {unassign(asset)}}>
+									<Label style="color: white">Unassign</Label>
+								</Button>
+							</div>
 						{/each}
 					</div>
 				</li>
 			{/each}
 		</ul>
 	{/if}
-	{#if studentSearchResults}
+	{#if $studentSearchResults}
 		<ul>
 			{#each $studentSearchResults as next}
 				<li>
-					{next.firstName} {next.lastName} ~ {next.grade} ({next.email})
+					{next.firstName} {next.lastName} ~ {next.grade} ({next.email}) 
+					<Button style="margin-left: 3rem" color="primary" on:click={() => {showAssetIdField = !showAssetIdField;}}>
+						<span class="material-symbols-outlined material-icons">add</span>
+					</Button>
 					<div style="margin-left: 2rem">
-						{#each (assignedAssets(next)) as asset}
-							Type: {asset.type.name}<br/>
-							AssetId: {asset.assetId}<br/>
-							Serial: {asset.serial}<br/>
-							<Button variant="raised" touch on:click={() => {unassign(asset)}}>
-								<Label style="color: white">Unassign</Label>
+<!--						style="visibility: {showAssetIdField ? 'visible' : 'hidden'}"-->
+						<div class='asset'>
+							<TextField type="text" bind:value={assetId} label="Asset ID"></TextField>
+							{#if foundAsset}
+								<div>Asset ID: {foundAsset.assetId}</div>
+								<div>Serial: {foundAsset.serial}</div>
+							{/if}
+							<Button style="display: block" variant="raised" color="secondary" touch disabled="{!foundAsset || foundAsset.assigneeId !== undefined}" on:click={() => {assignAssets(next._id,'Student')}}>
+								<Label style="color: white">Assign</Label>
 							</Button>
+						</div>
+<!--				person="{next}"		bind:person={next}-->
+<!--						<AssignmentByPersonAssets person="{next}" on:unassign={(e) => {unassign(e.detail)}}/>-->
+						{#each assignedAssets(next) as asset}
+							<div class="asset">
+								Type: {asset.type.name}<br/>
+								AssetId: {asset.assetId}<br/>
+								Serial: {asset.serial}<br/>
+								<Button variant="raised" color="secondary" touch on:click={() => {unassign(asset)}}>
+									<Label style="color: white">Unassign</Label>
+								</Button>
+							</div>
 						{/each}
 					</div>
 				</li>
@@ -196,5 +285,10 @@
 </div>
 
 <style>
-
+    .asset:nth-child(even) {
+        background: #DDD;
+    }
+    .asset:nth-child(odd) {
+        background: #D8D0D3;
+    }
 </style>

imports/ui/Assignments/AssignmentByPersonAssets.svelte

@@ -0,0 +1,45 @@
+<script>
+	import {Assets} from "/imports/api/assets";
+	import {AssetTypes} from "/imports/api/asset-types";
+	import {onMount} from "svelte";
+	import {Meteor} from "meteor/meteor";
+	import Button, { Label } from '@smui/button';
+	import { createEventDispatcher } from 'svelte';
+	import {useTracker} from 'meteor/rdb:svelte-meteor-data';
+
+	const dispatch = createEventDispatcher();
+
+	export let person;
+	
+	onMount(async () => {
+		//Meteor.subscribe('assetsAssignedTo', person._id);
+		Meteor.subscribe('assets');
+		Meteor.subscribe('assetTypes');
+	});
+	
+	let assignedAssets;
+	//$: assignedAssets = useTracker(() => Assets.find({assigneeId: person._id}).fetch());
+	$m: assignedAssets = Assets.find({assigneeId: person._id}).fetch();
+	$m: {
+		//assignedAssets = Assets.find({}).fetch();
+		for (next of assignedAssets) {
+			next.type = AssetTypes.findOne({_id: next.assetTypeId})
+		}
+	}
+	
+	let unassign = (asset) => {
+		dispatch('unassign', asset);
+	}
+</script>
+
+{#each assignedAssets as asset}
+	<div class="asset">
+		Type: {asset.type.name}<br/>
+		AssetId: {asset.assetId}<br/>
+		Serial: {asset.serial}<br/>
+		Assignee ID: {asset.assigneeId}<br/>
+		<Button variant="raised" color="secondary" touch on:click={() => {unassign(asset)}}>
+			<Label style="color: white">Unassign</Label>
+		</Button>
+	</div>
+{/each}

imports/ui/Users.svelte

@@ -43,6 +43,7 @@
 		//TODO: Setup the editor for the given row.
 	}
 	let edited = writable(null);
+	let rows;
 	$: rows = Meteor.users.find({});
 	let editedPermissions = null;
 	edited.subscribe((value) => {