Tempest/imports/ui/pages/Assets/AddAssets.jsx

import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { useTheme } from '@mui/material/styles';
import _ from 'lodash';
import SimpleTable from "/imports/ui/util/SimpleTable";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Select from '@mui/material/Select';
import Chip from '@mui/material/Chip';
import MenuItem from '@mui/material/MenuItem';
import {InputLabel, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
import {Assets, conditions} from "/imports/api/assets";
import {AssetTypes} from "/imports/api/asset-types";
import Box from "@mui/material/Box";
import OutlinedInput from '@mui/material/OutlinedInput';
import FormControl from '@mui/material/FormControl';

const cssContainer = {
	display: 'flex',
	flexDirection: 'row',
	marginTop: '2rem',
	backgroundColor: '#DDD',
	padding: '0.5rem',
	border: '1px solid #999',
	borderRadius: '0.2rem'
}
const cssComponent = {
	width: '100%',
	marginTop: '1rem',
}
const cssEditorField = {
	margin: '0.6rem 1rem',
	minWidth: '10rem'
}

const AddAssets = ({assetTypes}) => {
	const theme = useTheme();
	const [selectedAssetTypes, setSelectedAssetTypes] = useState([])
	const [selectedAssetType, setSelectedAssetType] = useState("")
	const [assetId, setAssetId] = useState("")
	const [serial, setSerial] = useState("")
	const [condition, setCondition] = useState("New")
	const [conditionDetails, setConditionDetails] = useState("")
	
	const getSelectItemStyles = (value) => {
		return {
			fontWeight: selectedAssetTypes.indexOf(value) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightBold
		}
	}
	const getAssetTypeListItemStyle = (assetType) => {
		return {
			backgroundColor: selectedAssetType === assetType ? '#EECFA6' : 'white'
		}
	}
	const addAsset = () => {
		//TODO: Check the inputs.
		Meteor.call("assets.add", selectedAssetType._id, assetId, serial, condition, conditionDetails);
		setAssetId("")
		setSerial("")
	}

	return (
		<>
			<div>1: Select Asset Types To Add</div>
			<Box style={cssContainer}>
				<FormControl style={cssComponent}>
					<InputLabel id="selectAssetTypesLabel">Available Asset Types</InputLabel>
					<Select labelId='selectAssetTypesLabel' multiple variant="standard" 
					        value={selectedAssetTypes} onChange={(e)=>{setSelectedAssetTypes(e.target.value)}}
					        renderValue={(selected) => (
					            <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
							        {selected.map((value) => (
							            <Chip key={value.name} label={value.name}/>
							        ))}
						        </Box>
					        )}
					>
						{assetTypes.map((assetType, i) => {
							return <MenuItem key={i} value={assetType} style={getSelectItemStyles(assetType)}>{assetType.name}</MenuItem>
						})}
					</Select>
				</FormControl>
			</Box>
			<div>2: Select Asset Type and Enter Asset Data</div>
			<Box style={cssContainer}>
				<div style={{maxHeight: '26rem', overflowY:'auto', minWidth: '10rem', minHeight: '10rem'}}>
					<List>
						{selectedAssetTypes.map((next, i) => {
							return (
								<ListItemButton key={next._id} style={getAssetTypeListItemStyle(next)} selected={selectedAssetType === next} onClick={(e) => {setSelectedAssetType(next)}}>
									<ListItemText primary={next.name} secondary={next.description}/>
								</ListItemButton>
							)
						})}
					</List>
				</div>
				<div style={{marginLeft: '1rem', display: 'flex', flexDirection: 'column'}}>
					<div style={{display: 'flex', flexDirection: 'row'}}>
						<TextField style={cssEditorField} variant="standard" label="Asset ID" value={assetId} onChange={(e) => {setAssetId(e.target.value.toUpperCase())}}/>
						<TextField style={cssEditorField} variant="standard" label="Serial" value={serial} onChange={(e) => {setSerial(e.target.value)}}/>
					</div>
					<div style={{display: 'flex', flexDirection: 'row'}}>
						<TextField style={cssEditorField} select variant="standard" label="Condition" value={condition} onChange={(e)=>{setCondition(e.target.value)}}>
							{conditions.map((condition, i) => {
								return <MenuItem key={i} value={condition}>{condition}</MenuItem>
							})}
						</TextField>
					</div>
					<div style={{display: 'flex', flexDirection: 'row'}}>
						<TextField style={{width: '100%', margin: '1rem'}} multiline variant="outlined" rows={4} label="Condition Details" value={conditionDetails} onChange={(e) => {setConditionDetails(e.target.value)}}/>
					</div>
				</div>
			</Box>
			<div style={{display: 'flex', flexDirection: 'row-reverse'}}>
				<Button variant="contained" className="button" onClick={addAsset}>Add</Button>
			</div>
		</>
	)
}

export default () => {
	Meteor.subscribe('assetTypes');

	const {assetTypes} = useTracker(() => {
		const assetTypes = AssetTypes.find({}, {sort: {year: -1}}).fetch();
		
		return {
			assetTypes
		}
	});
	
	return (
		<AddAssets assetTypes={assetTypes}/>
	)
}