DistrictCentral/imports/ui/Assets/Assignments.svelte

<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 = ['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 = ['Email', 'First Name', 'Last Name'];
    let selectedCategory = 'Email';
    let selectedGrade = 'All';
    let searchText = "";
    let searchResults = [];
    let selectedResult;

    $: {
        if(selectedSiteId) {
            Meteor.subscribe('students', selectedSiteId);
            Meteor.subscribe('staff', selectedSiteId);
        }
    }

    $: {
        selectedResult = null;

        // Require at least two characters in the search field before we start filtering.
        if(selectedSiteId && selectedGrade && selectedCategory && searchText && searchText.length > 1) {
            let query = {};

            if(selectedCategory === 'Email') {
                query.email = {$regex: searchText, $options: 'i'};
            }
            else if(selectedCategory === 'First Name') {
                query.firstName = {$regex: searchText, $options: 'i'};
            }
            else {
                query.lastName = {$regex: searchText, $options: 'i'};
            }

            if(selectedCategory === "Staff") {
                searchResults = Staff.find(query);
            }
            else {
                if(selectedGrade !== 'All') {
                    query.grade = selectedGrade;
                }

                searchResults = Students.find(query).fetch();
            }
        }
        else {
            searchResults = [];
        }
    }
</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>
        {#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}
    </List>
</div>

<style>

</style>