DistrictCentral/imports/ui/Assignments/AssignmentByPerson.svelte

<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';
    import {Assets} from "/imports/api/assets";
    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');
	    Meteor.subscribe('staff');
	    Meteor.subscribe('assets');
	    Meteor.subscribe('assetTypes');
    });
    let categories = ['Email', 'First Name', 'Last Name'];
    let selectedCategory = 'Email';
    let searchText = "";
    let staffSearchResults;
    let studentSearchResults;

    $: {
    	if(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'};
		    }
		    staffSearchResults = Staff.find(query);
		    studentSearchResults = Students.find(query);
	    }
    	else {
		    staffSearchResults = undefined;
		    studentSearchResults = undefined;
	    }
    }
    
    const assignedAssets = (person) => {
	    let result = Assets.find({assigneeId: person._id}).fetch();

	    for (next of result) {
		    next.type = AssetTypes.findOne({_id: next.assetTypeId})
	    }

	    return result;
    }

	let conditions = ['New', 'Like New', 'Good', 'Okay', 'Damaged'];
	let condition = "New";
	let conditionDetails = "";
	let comment = "";
	let unassignAsset;
    let isUnassignDialogOpen = false;

	const unassign = (asset) => {
		unassignAsset = asset;
		comment = "";
		condition = asset.condition;
		conditionDetails = asset.conditionDetails;
		isUnassignDialogOpen = true;
	}
	const unassignDialogClosed = (e) => {
		switch (e.detail.action) {
			case 'unassign':
				if(unassignAsset && unassignAsset.assetId) {
					Meteor.call("assets.unassign", unassignAsset.assetId, comment, condition, conditionDetails, (err, result) => {
						if(err) {
							console.error(err);
							//TODO: Display an error!
						}
						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;
						}
					});
				}
				break;
			default:
			case 'cancel':
				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={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">
				{#each conditions as next}
					<Option value={next}>{next}</Option>
				{/each}
			</Select>
			<div style="grid-column: 1/span 1">
				<TextField type="text" style="width: 100%; margin-top: 1rem" bind:value={comment} label="Comment"></TextField>
			</div>
			<div style="grid-column: 1/span 1">
				<TextField textarea style="width: 100%; height: 20rem; margin-top: 1rem" helperLine$style="width: 100%" bind:value={conditionDetails} label="Condition Details">
				</TextField>
			</div>
		</Content>
		<Actions>
			<Button action="unassign" default>
				<Label>Ok</Label>
			</Button>
			<Button action="cancel">
				<Label>Cancel</Label>
			</Button>
		</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>
        <LayoutGrid>
            <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>
	{#if staffSearchResults}
		<ul>
			{#each $staffSearchResults as next}
				<li>
					{next.firstName} {next.lastName} ({next.email})
					<div style="margin-left: 2rem">
						{#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>
			{/each}
		</ul>
	{/if}
	{#if $studentSearchResults}
		<ul>
			{#each $studentSearchResults as next}
				<li>
					{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">
<!--						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>
			{/each}
		</ul>
	{/if}
</div>

<style>
    .asset:nth-child(even) {
        background: #DDD;
    }
    .asset:nth-child(odd) {
        background: #D8D0D3;
    }
</style>