Added a data entry page with initial content.

2022-07-12 11:26:36 -07:00
parent 117bd8cd1a
commit c762581608
9 changed files with 440 additions and 183 deletions
--- a/imports/ui/Assets/AssetDataEntry.svelte
+++ b/imports/ui/Assets/AssetDataEntry.svelte
@@ -0,0 +1,172 @@
+<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>