Initial check in; All but the history pages working.

2022-09-07 08:58:00 -07:00
commit d6bd620207
109 changed files with 13170 additions and 0 deletions
--- a/imports/ui/pages/Assets/AddAssets.jsx
+++ b/imports/ui/pages/Assets/AddAssets.jsx
@@ -0,0 +1,134 @@
+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 (
+		<>
+			<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>
+			<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)}}/>
+						<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}/>
+	)
+}