wcrisman/DistrictCentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganized the assignment UI's. Added a student lookup.

Browse Source
This commit is contained in:
DESKTOP-C9V2M01\Zeeri
2022-08-16 07:36:45 -07:00
parent d09826dc51
commit 571f3da1d6
5 changed files with 162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
imports/ui/Assets/AssignAssets.svelte
View File

@@ -1,136 +0,0 @@
<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';
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({});
let selectedSiteId;
let assignees;
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 = "";
let assetIdWidget;
$: {
if(selectedSiteId) {
if(selectedCategory === 'Student') {
Meteor.subscribe('students', 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}, {sort: [selectedSort]});
}
}
}
const createAssignment = () => {
if(assetId && assetId.length && selectedAssignee) {
Meteor.call("assets.assign", assetId, selectedCategory === 'Student' ? "Student" : "Staff", selectedAssignee._id, (err, result) => {
if(err) {
console.error(err);
//TODO: Display an error!
}
else {
// TODO: Set focus to the asset ID field.
assetId = "";
}
});
}
}
</script>
<div class="container">
<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>
<div style="width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; align-content: stretch; column-gap: 2rem;">
<TextField bind:this={assetIdWidget} style="flex-grow: 999;" type="text" bind:value={assetId} label="Asset ID">
</TextField>
<Button variant="raised" color="secondary" on:click={createAssignment} disabled={!assetId || assetId.length === 0 || !selectedAssignee}>
<Label style="color: white">Create</Label>
</Button>
</div>
<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.email} {assignee.grade ? '(' + assignee.grade + ')' : ""}</SecondaryText>
</Text>
</Item>
{/each}
{/if}
</List>
</div>
<style>
</style>

109
imports/ui/Assets/AssignmentByAsset.svelte
View File

@@ -1,109 +0,0 @@
<script>
import {Meteor} from "meteor/meteor";
import {onMount} from "svelte";
import TextField from '@smui/textfield';
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';
import {Assets} from "/imports/api/assets";
import {Students} from "/imports/api/students";
import {AssetTypes} from "/imports/api/asset-types";
import Button, { Label } from '@smui/button';
import Dialog, { Title, Content, Actions } from '@smui/dialog';
onMount(async () => {
Meteor.subscribe('assets');
Meteor.subscribe('students');
Meteor.subscribe('staff');
Meteor.subscribe('assetTypes');
});
let searchText = "";
let foundAsset;
let selectedResult;
let foundAssignee;
let foundAssetType;
$: {
selectedResult = null;
if(searchText) {
foundAsset = Assets.findOne({assetId: searchText});
}
else {
foundAsset = undefined;
}
}
$: {
if(foundAsset) {
foundAssetType = AssetTypes.findOne({_id: foundAsset.assetTypeId});
if(foundAsset.assigneeType === 'Student') {
foundAssignee = Students.findOne({_id: foundAsset.assigneeId});
}
else {
foundAssignee = Staff.findOne({_id: foundAsset.assigneeId});
}
}
else {
foundAssetType = undefined;
foundAssignee = undefined;
}
}
const formatDate = (date) => {
return date.toLocaleDateString('en-us', {weekday: 'long', year: 'numeric', month: 'short', day: 'numeric'});
}
const unassign = () => {
if(confirm("Unassign Asset?")) {
Meteor.call("assets.unassign", foundAsset.assetId);
}
}
</script>
<div class="container">
<h1 style="display: block">Asset Assignments</h1>
<Paper>
<LayoutGrid>
<Cell span="{6}">
<TextField type="text" bind:value={searchText} label="Asset ID"></TextField>
</Cell>
</LayoutGrid>
</Paper>
{#if foundAsset}
<div>Asset ID: {foundAsset.assetId}</div>
{#if foundAssetType}
<div>{foundAssetType.name}</div>
{/if}
{#if foundAssignee}
<div>Assigned on: {formatDate(foundAsset.assignmentDate)}</div>
<div>Assigned to: {foundAssignee.firstName} {foundAssignee.lastName}
{#if foundAssignee.grade} ~ {foundAssignee.grade} {/if}({foundAssignee.email})</div>
<Button variant="raised" touch on:click={unassign}>
<Label style="color: white">Unassign</Label>
</Button>
{/if}
{/if}
<!-- <Dialog bind:open={showDialog} aria-labelledby="Confirm" aria-describedby="Unassign Confirmation">-->
<!-- &lt;!&ndash; Title cannot contain leading whitespace due to mdc-typography-baseline-top() &ndash;&gt;-->
<!-- <Title id="simple-title">Unassign Asset?</Title>-->
<!-- <Content id="simple-content"></Content>-->
<!-- <Actions>-->
<!-- <Button on:click={() => (clicked = 'No')}>-->
<!-- <Label>No</Label>-->
<!-- </Button>-->
<!-- <Button on:click={() => (clicked = 'Yes')}>-->
<!-- <Label>Yes</Label>-->
<!-- </Button>-->
<!-- </Actions>-->
<!-- </Dialog>-->
</div>
<style>
</style>

162
imports/ui/Assets/AssignmentByAssignee.svelte
View File

@@ -1,162 +0,0 @@
<script>
import {Meteor} from "meteor/meteor";
import {onMount} from "svelte";
import {Sites} from "../../api/sites";
import TextField from '@smui/textfield';
import {Students} from "../../api/students";
import Select, { Option } from '@smui/select';
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 = ['Staff', 'All Grades'];
onMount(async () => {
Meteor.subscribe('sites');
Meteor.call('students.getPossibleGrades', (err, result) => {
if(err) console.log(err);
else {
grades = ['Staff', 'All Grades', ...result];
}
});
});
// Load the sites (reactive).
let sites = Sites.find({});
let selectedSiteId;
let categories = ['Asset ID', 'Email', 'First Name', 'Last Name'];
let selectedCategory = 'Email';
let selectedGrade = 'All Grades';
let searchText = "";
let searchResults;
let selectedResult;
$: {
console.log("Site ID")
console.log(selectedSiteId)
if(selectedSiteId) {
Meteor.subscribe('students', selectedSiteId);
Meteor.subscribe('staff', selectedSiteId);
}
}
$: {
selectedResult = null;
console.log("Starting search")
// Require at least two characters in the search field before we start filtering.
if(selectedSiteId && selectedGrade && selectedCategory) {
let query = {};
let queryType = (selectedGrade === "Staff") ? 1 : 0;
if(searchText && searchText.length > 0) {
if (selectedCategory === 'Email') {
query.email = {$regex: searchText, $options: 'i'};
} else if( selectedCategory === 'Asset ID') {
//Do not do anything yet...
} else if (selectedCategory === 'First Name') {
query.firstName = {$regex: searchText, $options: 'i'};
} else {
query.lastName = {$regex: searchText, $options: 'i'};
}
}
if(selectedCategory === 'Asset ID') {
Meteor.call('AssetAssignments.getOne', searchText, (err, result) => {
if(err) {
console.error(err);
}
else {
if(result && result.assigneeType && result.assigneeId) {
if (result.assigneeType === 'Staff') {
query._id = result.assigneeId;
queryType = 1;
} else if (result.assigneeType === 'Student') {
query._id = result.assigneeId;
queryType = 0;
} else {
console.error("Invalid AssigneeType");
}
}
else {
console.error('Invalid result from AssetAssignments.getOne');
}
}
});
}
if(queryType === 1) {
searchResults = Staff.find(query);
}
else {
if(selectedGrade !== 'All Grades') {
query.grade = selectedGrade;
}
// console.log("Searching")
// console.log(query)
searchResults = Students.find(query);
}
}
else {
searchResults = undefined;
}
}
</script>
<div class="container">
<h1 style="display: block">Asset Assignments</h1>
<Paper>
<LayoutGrid>
<Cell span="{6}">
<Select bind:value={selectedSiteId} label="Site">
{#each $sites as site}
<Option value={site._id}>{site.name}</Option>
{/each}
</Select>
</Cell>
<Cell span="{6}">
<Select bind:value={selectedGrade} label="Grade">
{#each grades as grade}
<Option value={grade}>{grade}</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}">
<TextField type="text" bind:value={searchText} label="Search"></TextField>
</Cell>
</LayoutGrid>
</Paper>
<div style="width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; align-content: stretch; column-gap: 2rem;">
<!-- <TextField bind:this={assetIdWidget} style="flex-grow: 999;" type="text" bind:value={assetId} label="Asset ID">-->
<!-- </TextField>-->
<!-- <Button variant="raised" color="secondary" on:click={createAssignment()} disabled={!assetId || assetId.length === 0 || !selectedAssignee}>-->
<!-- <Label style="color: white">Create</Label>-->
<!-- </Button>-->
</div>
<List twoLine singleSelection>
{#if searchResults}
{#each $searchResults as result}
<Item selected={selectedResult === result}>
<Text>
<PrimaryText>{result.firstName} {result.lastName}</PrimaryText>
<SecondaryText>{result.email} {result.grade ? '(' + result.grade + ')' : ""}</SecondaryText>
</Text>
</Item>
{/each}
{/if}
</List>
</div>
<style>
</style>