wcrisman/DistrictCentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout change.

Browse Source
This commit is contained in:
DESKTOP-C9V2M01\Zeeri
2022-07-13 17:40:38 -07:00
parent dd6437613b
commit d22aca7ff3
1 changed files with 54 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
imports/ui/Assets/AssetDataEntry.svelte
View File

@@ -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";
@@ -33,10 +33,9 @@
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");
}
}
@@ -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;
@@ -72,12 +71,14 @@
</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>
@@ -96,76 +97,69 @@
</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);
}