Removed generated css; Renamed SASS files that are @use only (imported) to have an _ prefix as per spec; Tried to customize the SMUI sass, but was having problems with compiling not finding the SMUI source files; Added initial cut of asset check out system.

.idea/watcherTasks.xml

@@ -21,5 +21,25 @@
       <option name="workingDir" value="$FileDir$" />
       <envs />
     </TaskOptions>
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
   </component>
 </project>

client/_app.sass

@@ -33,7 +33,7 @@ h1
 
 form
 	margin-top: 10px
-	margin-bottom: -10px
+	margin-bottom: 10px
 	position: relative
 
 .new-task input

client/_smui.sass

@@ -0,0 +1,7 @@
+//@use '~@material/theme/_index.scss' as theme
+//@use '~@smui/paper/index' as paper
+//
+//@include paper.paper-color(custom-green, theme.$green-800, theme.accessible-ink-color(theme.$green-800))
+//
+//.custom-green
+//	color: theme.$green-800

client/app.css

@@ -1,3 +0,0 @@
-
-
-/*# sourceMappingURL=app.css.map */

client/app.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"app.css"}

client/main.css

@@ -167,51 +167,39 @@ p {
   .col-1 {
     width: 4.33%;
   }
-
   .col-2 {
     width: 12.66%;
   }
-
   .col-3 {
     width: 21%;
   }
-
   .col-4 {
     width: 29.33%;
   }
-
   .col-5 {
     width: 37.66%;
   }
-
   .col-6 {
     width: 46%;
   }
-
   .col-7 {
     width: 54.33%;
   }
-
   .col-8 {
     width: 62.66%;
   }
-
   .col-9 {
     width: 71%;
   }
-
   .col-10 {
     width: 79.33%;
   }
-
   .col-11 {
     width: 87.66%;
   }
-
   .col-12 {
     width: 96%;
   }
-
   .hidden-sm {
     display: block;
   }
@@ -257,7 +245,7 @@ h1 {
 
 form {
   margin-top: 10px;
-  margin-bottom: -10px;
+  margin-bottom: 10px;
   position: relative;
 }
 
@@ -335,16 +323,13 @@ html {
   li {
     padding: 12px 15px;
   }
-
   .search {
     width: 150px;
     clear: both;
   }
-
   .new-task input {
     padding-bottom: 5px;
   }
-
   html {
     font-size: 10px;
   }

client/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["simple-grid.sass","app.sass","material-icons.sass"],"names":[],"mappings":"AAAQ;AAER;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;AAEA;EACC;EACA;EACA;;;AAED;AAEA;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAEA;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;AAEA;EAEC;EACA;EACA;;;AAED;EACC;;AAGA;EACC;EACA;EACA;;;AAEF;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;AACC;EAEA;IACC;;;AAEF;AACC;EAEA;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;EAED;IACC;;;AAEF;AACC;EAEA;IACC;IACA;;;ACzLF;AACA;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;IACC;;;AAEF;EACC;IACC;;;EAED;IACC;IACA;;;EAED;IACC;;;EAED;IACC;;;ACzGF;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;;;AAED;EACC","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["_simple-grid.sass","_app.sass","_material-icons.sass"],"names":[],"mappings":"AAAQ;AAER;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;AAEA;EACC;EACA;EACA;;;AAED;AAEA;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAEA;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;AAEA;EAEC;EACA;EACA;;;AAED;EACC;;AAGA;EACC;EACA;EACA;;;AAEF;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAED;AACC;EAEA;IACC;;;AAEF;AACC;EAEA;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAEF;AACC;EAEA;IACC;IACA;;;ACzLF;AACA;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;IACC;;;AAEF;EACC;IACC;;EAED;IACC;IACA;;EAED;IACC;;EAED;IACC;;;ACzGF;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;;;AAED;EACC","file":"main.css"}

client/main.sass

@@ -2,6 +2,8 @@
 @import "./simple-grid.sass"
 @import "./app.sass"
 @import './material-icons.sass'
+@import './smui.sass'
+
 
 //.mdc-floating-label
 //	transform: translateY(-80%)

client/material-icons.css

@@ -1,30 +0,0 @@
-@font-face {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://example.com/MaterialIcons-Regular.eot);
-  src: local("Material Icons"), local("MaterialIcons-Regular"), url(/fonts/MaterialIcons-Regular.ttf) format("truetype");
-}
-.material-icons {
-  font-family: "Material Icons";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-  /* Support for IE. */
-  font-feature-settings: "liga";
-}
-
-/*# sourceMappingURL=material-icons.css.map */

client/material-icons.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["material-icons.sass"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA","file":"material-icons.css"}

imports/ui/Admin.svelte

@@ -6,22 +6,22 @@
 	import Students from "/imports/ui/Admin/Students.svelte";
 	import Staff from "/imports/ui/Admin/Staff.svelte";
 
-	let activeTab = null;
+	let activeTab = "Sites";
 </script>
 
 <div class="container">
-	<TabBar tabs={[{id:'sites', label:'Sites'}, {id:'students', label:'Students'}, {id:'staff', label:'Staff'}, {id:'assetTypes', label:'Asset Types'}]} minWidth let:tab bind:active={activeTab}>
+	<TabBar tabs={['Sites','Students','Staff','Asset Types']} minWidth let:tab bind:active={activeTab}>
 		<Tab {tab}>
-			<Label>{tab.label}</Label>
+			<Label>{tab}</Label>
 		</Tab>
 	</TabBar>
-	{#if activeTab && activeTab.id === 'sites'}
+	{#if activeTab === 'Sites'}
 		<Sites></Sites>
-	{:else if activeTab && activeTab.id === 'students'}
+	{:else if activeTab === 'Students'}
 		<Students></Students>
-	{:else if activeTab && activeTab.id === 'staff'}
+	{:else if activeTab === 'Staff'}
 		<Staff></Staff>
-	{:else if activeTab && activeTab.id === 'assetTypes'}
+	{:else if activeTab === 'Asset Types'}
 		<AssetTypes></AssetTypes>
 	{/if}
 </div>

imports/ui/Admin/Staff.svelte

@@ -172,7 +172,7 @@
 		<Content id="exportHelpContent">
 			<h3>Aeries</h3>
 			<p>For the Aeries system, log into your Aeries web interface and navigate to the query page.  Enter the following query (change PSC = 5 to your school's number):</p>
-			<pre style="font-size: 0.7rem"><code>LIST STF ID FN LN EM BY FN IF PSC = 5 AND TG # I</code></pre>
+			<pre style="font-size: 0.7rem"><code>LIST STF ID EM FN LN BY FN IF PSC = 5 AND TG # I</code></pre>
 			<p>Run the query and validate that all staff have an email address and a staff ID.  The `TG # I` hides staff that are inactive.</p>
 			<p>You have two options for export.  You can:</p>
 			<ol class="help">

imports/ui/Admin/Students.svelte

@@ -175,8 +175,11 @@
 		<Content id="exportHelpContent">
 			<h3>Aeries</h3>
 			<p>For the Aeries system, log into your Aeries web interface and navigate to the query page.  Enter the following query:</p>
+			<h4>Pre-Rollover</h4>
 			<pre style="font-size: 0.7rem"><code>LIST STU STU.ID STU.SEM STU.FN STU.LN STU.NG BY STU.ID STU.NG STU.SEM IF STU.NG &gt;= 7 AND NG &lt;= 12 AND STU.NS = 5</code></pre>
-			<p>Run the query and validate that all students have an email address and a student ID.  You likely also want to check that the student `next grade (NG)` field is set correctly for the students.</p>
+			<h4>Post-Rollover</h4>
+			<pre style="font-size: 0.7rem"><code>LIST STU STU.ID STU.SEM STU.FN STU.LN STU.NG BY STU.ID STU.NG STU.SEM IF STU.NG &gt;= 7 AND GR &lt;= 12 AND STU.SC = 5</code></pre>
+			<p>Run the query and validate that all students have an email address and a student ID.  You likely also want to check that the student `next grade (NG)` field is set correctly for the students (pre-rollover).</p>
 			<p>You have two options for export.  You can:</p>
 			<ol class="help">
 				<li class="help">Click the `Report` button to generate a TXT formatted report.  Use Single Spacing, Automatic Orientation and no page breaks.  The generated text is CSV but with a repeating collection of headers for each page.  The headers will be ignored.</li>

imports/ui/App.svelte

@@ -13,9 +13,9 @@
 	// When the URL changes, run the code... in this case to scroll to the top.
 	router.subscribe(_ => window.scrollTo(0, 0));
 
+	let canManageLaptops = false;
+	let isAdmin = false;
 	$: currentUser = useTracker(() => Meteor.user());
-	$: canManageLaptops = false;
-	$: isAdmin = false;
 
 	Tracker.autorun(() => {
 		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
@@ -65,9 +65,9 @@
 			{/if}
 			{#if canManageLaptops}
 				<a href="/users">Users</a>
+				<a href="/assets">Assets</a>
 			{/if}
 			{#if isAdmin}
-				<a href="/assets">Assets</a>
 				<a href="/admin">Admin</a>
 			{/if}
 		</nav>

imports/ui/Assets.svelte

@@ -5,12 +5,34 @@
 	import {onMount} from "svelte";
 	import AssetList from "/imports/ui/Assets/AssetList.svelte";
 	import AssetDataEntry from "/imports/ui/Assets/AssetDataEntry.svelte";
-	
+	import {useTracker} from "meteor/rdb:svelte-meteor-data";
-	let activeTab = null;
+	import Assign from "/imports/ui/Assets/Assign.svelte";
+
+	let canManageLaptops = false;
+	let isAdmin = false;
+	$: currentUser = useTracker(() => Meteor.user());
+
+	Tracker.autorun(() => {
+		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
+		let user = Meteor.user();
+		canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
+		isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
+	});
+
+	let tabs = [];
+
+	if(canManageLaptops) {
+		tabs.push({id: 'assignment', label: 'Assign'});
+	}
+	if(isAdmin) {
+		tabs.push({id: 'list', label: 'Asset List'});
+		tabs.push({id: 'entry', label: 'Data Entry'});
+	}
+	let activeTab = tabs[0];
 </script>
 
 <div class="container">
-	<TabBar tabs={[{id:'list', label:'Asset List'}, {id:'entry', label:'Data Entry'}]} minWidth let:tab bind:active={activeTab}>
+	<TabBar tabs={tabs} minWidth let:tab bind:active={activeTab}>
 		<Tab {tab}>
 			<Label>{tab.label}</Label>
 		</Tab>
@@ -19,6 +41,8 @@
 		<AssetList></AssetList>
 	{:else if activeTab && activeTab.id === 'entry'}
 		<AssetDataEntry></AssetDataEntry>
+	{:else if activeTab && activeTab.id === 'assignment'}
+		<Assign></Assign>
 	{/if}
 </div>
 

imports/ui/Assets/Assign.svelte

@@ -0,0 +1,72 @@
+<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';
+	import {Students} from "../../api/students";
+	import Select, { Option } from '@smui/select';
+	import Dialog, { Title, Content, Actions } from '@smui/dialog';
+	import Button, { Label } from '@smui/button';
+	import {Staff} from "/imports/api/staff";
+	import List, {Item, Graphic, Meta, Text, PrimaryText, SecondaryText} from '@smui/list';
+
+	onMount(async () => {
+		Meteor.subscribe('sites');
+	});
+	// Load the sites (reactive).
+	let sites = Sites.find({});
+	let selectedSiteId;
+	let assignees;
+	let siteSelectComponent;
+	let categories = ['Student', 'Staff'];
+	let selectedCategory = 'Student';
+	$: {
+		if(selectedSiteId) {
+			if(selectedCategory === 'Student') {
+				Meteor.subscribe('students', selectedSiteId);
+				assignees = Students.find({siteId: selectedSiteId});
+			}
+			else if(selectedCategory === 'Staff') {
+				Meteor.subscribe('staff', selectedSiteId);
+				assignees = Staff.find({siteId: selectedSiteId});
+			}
+		}
+	}
+	let selectedAssignee;
+</script>
+
+<div class="container">
+	<h1>Assign Assets</h1>
+
+	<Select bind:value={selectedSiteId} label="Site" bind:this={siteSelectComponent}>
+		{#each $sites as site}
+			<Option value={site._id}>{site.name}</Option>
+		{/each}
+	</Select>
+	
+	<Select bind:value={selectedCategory} label="Category">
+		{#each categories as category}
+			<Option value={category}>{category}</Option>
+		{/each}
+	</Select>
+	
+	<List twoLine singleSelection>
+		{#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>
+					</Text>
+				</Item>
+			{/each}
+		{/if}
+	</List>
+</div>
+
+<style>
+	
+</style>