DistrictCentral/imports/ui/Assets/AssetDataEntry.svelte

<script>
	import {Meteor} from "meteor/meteor";
	import {onMount} from "svelte";
	import {writable} from "svelte/store";
	import Select, { Option } from '@smui/select';
	import Dialog, { Title, Content, Actions } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import List, {Item,Text,PrimaryText,SecondaryText} from '@smui/list';
	import TextField from '@smui/textfield';
	import u from 'umbrellajs';
	import {AssetTypes} from "/imports/api/asset-types";

	onMount(async () => {
		Meteor.subscribe('assetTypes');
		Meteor.subscribe('assets');
	});
	let assetTypes;
	//$m: assetTypes = AssetTypes.find({}).fetch();
	//$: assetTypes = useTracker(() => AssetTypes.find({}).fetch());
	$: assetTypes = AssetTypes.find({});
	let selectedAssetTypes = [];

	let selectedType = null;
	const selectAssetType = (assetType) => {
		selectedType = assetType;
	}
	const showAddAssetType = () => {

	}
	let openAddAssetTypeButton;
	let isOpen_AddAssetType = false;
	const openAddAssetType = () => {
		isOpen_AddAssetType = !isOpen_AddAssetType;
		//openAddAssetTypeButton.innerHTML = isOpen_AddAssetType ? "close" : "add";
		
		if(isOpen_AddAssetType) {
			openAddAssetTypeButton.classList.add("reject-button");
		}
		else {
			openAddAssetTypeButton.classList.remove("reject-button");
		}
	}
	let selectedAddAssetType = null;
	
	let openDialog = false;
	let assetTypeDialogSelectedIndex;
	let assetTypeDialogSelectedValue;
	const openAssetTypesDialog = () => {
		assetTypeDialogSelectedIndex = -1;
		openDialog = true;
	}
	const dialogClosed = (e) => {
		switch(e.detail.action) {
			case 'accept':
				if(!selectedAssetTypes.some(e => e._id === assetTypeDialogSelectedValue._id)) {
					selectedAssetTypes = [...selectedAssetTypes, assetTypeDialogSelectedValue];
				}
				break;
			default:
			case 'cancel':
				break;
		}
	}
	let assetId = "";
	let serial = "";
	const addAsset = () => {
		Meteor.call("assets.add", selectedAssetType._id, assetId, serial);
		assetId = "";
		serial = ""; 
	}
	let selectedAssetType = null;
</script>

<div class="listContainer">
	<Dialog bind:open={openDialog} surface$style="width: 850px; max-width: calc(100vw - 32px);" on:SMUIDialog:closed={dialogClosed}>
		<Title id="large-scroll-title">Asset Types</Title>
		<Content id="large-scroll-content">
			<List class="assetTypesList" twoLine singleSelection bind:selectedIndex={assetTypeDialogSelectedIndex}>
				{#each $assetTypes as type}
					<Item on:SMUI:action={() => (assetTypeDialogSelectedValue = type)} selected={assetTypeDialogSelectedValue === type}>
						<Text>
							<PrimaryText>{type.name}</PrimaryText>
							<SecondaryText>{type.description}</SecondaryText>
						</Text>
					</Item>
				{/each}
			</List>
		</Content>
		<Actions>
			<Button action="accept" default>
				<Label>Ok</Label>
			</Button>
			<Button action="cancel">
				<Label>Cancel</Label>
			</Button>
		</Actions>
	</Dialog>
	
	<div class="columnContainer">
		<div class="listColumn">
			<h3 style="display: inline-block">Asset Types</h3>
			<Button class="addBtn" on:click={openAssetTypesDialog}>
				<Label>Add...</Label>
			</Button>
			<List class="assetTypeList" singleSelection dense>
				{#each selectedAssetTypes as type}
					<Item on:SMUI:action={() => (selectedAssetType = type)} selected={selectedAssetType === type}>
						<Text>{type.name}</Text>
					</Item>
				{/each}
			</List>
			
		</div>
		<div class="fieldColumn">
			<div style="grid-column: 1/span 1">
				<TextField type="text" style="width: 100%" bind:value={assetId} label="AssetId">
				</TextField>
			</div>
			<div style="grid-column: 1/span 1">
				<TextField type="text" style="width: 100%" bind:value={serial} label="Serial">
				</TextField>
			</div>
		</div>
	</div>
	<Button on:click={addAsset}>Add</Button>
</div>

<style>
	.columnContainer {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr);
	}
	:global(.addBtn) {
		margin-left: 4rem;
	}
    :global(.assetTypeList) {
		--mdc-ripple-color: blue;
        --mdc-ripple-selected-opacity: 0.2;
    }
	
    .listContainer {
        display: inline-block;
        margin: 1rem;
        max-width: 500px;
    }
    div.listContainer h2 {
        margin: 0;
    }
    .list {
        //border: 2px solid #4f4e4e;
    }
    .listItem:nth-child(even) {
        /*background: #f6f6f6;*/
        background: white;
    }
    .listItem {
        margin: 4px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: none;
	    padding-bottom: 1rem;
	    padding-top: 0.4rem;
        border-bottom: 1px solid gray;
    }
    .listItem:last-child {
        border: 0;
    }
    .listItem.selected {
        background-color: rgba(255, 255, 0, 0.38);
    }
</style>