Reorganized the assignment UI's. Added a student lookup.
This commit is contained in:
136
imports/ui/Assignments/AssignAssets.svelte
Normal file
136
imports/ui/Assignments/AssignAssets.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<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/Assignments/AssignmentByAsset.svelte
Normal file
109
imports/ui/Assignments/AssignmentByAsset.svelte
Normal file
@@ -0,0 +1,109 @@
|
||||
<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">-->
|
||||
<!-- <!– Title cannot contain leading whitespace due to mdc-typography-baseline-top() –>-->
|
||||
<!-- <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/Assignments/AssignmentByAssignee.svelte
Normal file
162
imports/ui/Assignments/AssignmentByAssignee.svelte
Normal file
@@ -0,0 +1,162 @@
|
||||
<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>
|
||||
162
imports/ui/Assignments/AssignmentByPerson.svelte
Normal file
162
imports/ui/Assignments/AssignmentByPerson.svelte
Normal file
@@ -0,0 +1,162 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user