From d22aca7ff3111da6b7f26b77781f6ad4bf79e9a5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-C9V2M01\\Zeeri" <wcrisman@softwarezealot.com>
Date: Wed, 13 Jul 2022 17:40:38 -0700
Subject: [PATCH] Layout change.

---
 imports/ui/Assets/AssetDataEntry.svelte | 114 +++++++++++-------------
 1 file changed, 54 insertions(+), 60 deletions(-)

diff --git a/imports/ui/Assets/AssetDataEntry.svelte b/imports/ui/Assets/AssetDataEntry.svelte
index 8a88ff0..0cab256 100644
--- a/imports/ui/Assets/AssetDataEntry.svelte
+++ b/imports/ui/Assets/AssetDataEntry.svelte
@@ -2,10 +2,10 @@
 	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 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";
@@ -32,16 +32,15 @@
 	const openAddAssetType = () => {
 		isOpen_AddAssetType = !isOpen_AddAssetType;
 		//openAddAssetTypeButton.innerHTML = isOpen_AddAssetType ? "close" : "add";
-		
-		if(isOpen_AddAssetType) {
+
+		if (isOpen_AddAssetType) {
 			openAddAssetTypeButton.classList.add("reject-button");
-		}
-		else {
+		} else {
 			openAddAssetTypeButton.classList.remove("reject-button");
 		}
 	}
 	let selectedAddAssetType = null;
-	
+
 	let openDialog = false;
 	let assetTypeDialogSelectedIndex;
 	let assetTypeDialogSelectedValue;
@@ -50,9 +49,9 @@
 		openDialog = true;
 	}
 	const dialogClosed = (e) => {
-		switch(e.detail.action) {
+		switch (e.detail.action) {
 			case 'accept':
-				if(!selectedAssetTypes.some(e => e._id === assetTypeDialogSelectedValue._id)) {
+				if (!selectedAssetTypes.some(e => e._id === assetTypeDialogSelectedValue._id)) {
 					selectedAssetTypes = [...selectedAssetTypes, assetTypeDialogSelectedValue];
 				}
 				break;
@@ -66,18 +65,20 @@
 	const addAsset = () => {
 		Meteor.call("assets.add", selectedAssetType._id, assetId, serial);
 		assetId = "";
-		serial = ""; 
+		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}>
+	<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}>
+					<Item on:SMUI:action={() => (assetTypeDialogSelectedValue = type)}
+					      selected={assetTypeDialogSelectedValue === type}>
 						<Text>
 							<PrimaryText>{type.name}</PrimaryText>
 							<SecondaryText>{type.description}</SecondaryText>
@@ -95,77 +96,70 @@
 			</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>
+
+	<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 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 style="text-align: right">
+		<Button on:click={addAsset} variant="raised">Add</Button>
 	</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;
-	}
+    .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-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;
+        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);
     }