Finished core functionality.

imports/ui/pages/Assets/AssetList.jsx

@@ -9,9 +9,11 @@ import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import {Assets, conditions} from "/imports/api/assets";
 import {AssetTypes} from "/imports/api/asset-types";
+import {Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Grid, Box} from "@mui/material";
 
 const cssEditorField = {
 	margin: '0.6rem 0',
+	minWidth: '200px'
 }
 const cssGridFieldContainer = {
 	display: 'grid',
@@ -84,8 +86,21 @@ export default () => {
 	Meteor.subscribe('assetTypes');
 	Meteor.subscribe('assets');
 	
+	const [removeRow, setRemoveRow] = useState(undefined)
+	const [assetId, setAssetId] = useState("")
+	const [serial, setSerial] = useState("")
+	const [assetTypeId, setAssetTypeId] = useState("")
+	const assetTypes = [{name: "All", _id: 0}, ...AssetTypes.find({}, {sort: {year: -1}}).fetch()]
+	
+	
 	const {assets} = useTracker(() => {
-		const assets = Assets.find({}).fetch();
+		let query = {}
+		
+		if(assetId) query.assetId = {$regex: assetId, $options: 'i'}
+		if(serial) query.serial = {$regex: serial, $options: 'i'}
+		if(assetTypeId) query.assetTypeId = assetTypeId
+		
+		const assets = Assets.find(query).fetch();
 		const assetTypes = AssetTypes.find({}, {sort: {year: -1}}).fetch();
 		const assetTypeNameMap = assetTypes.reduce((map, obj) => {
 			map[obj._id] = obj;
@@ -151,11 +166,47 @@ export default () => {
 		key: (row) => row._id,
 		editor: (row, close) => {return (<AssetEditor value={row} close={close}/>)},
 		add: true,
+		remove: (row) => {setRemoveRow(row)},
 		maxHeight: '40rem'
 	}
+	
+	const removeAsset = (asset) => {
+		Meteor.call("assets.remove", asset._id);
+		setRemoveRow(undefined)
+	}
 
 	return (
 		<>
+			<Dialog open={removeRow ? true : false} onClose={() => setRemoveRow(undefined)}>
+				<DialogTitle>Remove Asset?</DialogTitle>
+				<DialogContent>
+					<DialogContentText>
+						Are you certain you want to remove the selected Asset?
+					</DialogContentText>
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={() => removeAsset(removeRow)}>Remove Asset</Button>
+					<Button onClick={() => setRemoveRow(undefined)}>Cancel</Button>
+				</DialogActions>
+			</Dialog>
+			<Box component="div" sx={{m: 2, p: 2, border: '1px dashed grey'}}>
+				<h4 style={{margin: 0, padding: 0}}>Filter</h4>
+				<Grid container spacing={2}>
+					<Grid item xs={4}>
+						<TextField style={cssEditorField} variant="standard" label="Asset ID" value={assetId} onChange={(e) => {setAssetId(e.target.value)}}/>
+					</Grid>
+					<Grid item xs={4}>
+						<TextField style={cssEditorField} variant="standard" label="Serial" value={serial} onChange={(e) => {setSerial(e.target.value)}}/>
+					</Grid>
+					<Grid item xs={4}>
+						<TextField style={cssEditorField} select variant="standard" value={assetTypeId} onChange={(e)=>{setAssetTypeId(e.target.value)}} label="Asset Type">
+							{assetTypes.map((assetType, i) => {
+								return <MenuItem key={i} value={assetType._id}>{assetType.name}</MenuItem>
+							})}
+						</TextField>
+					</Grid>
+				</Grid>
+			</Box>
 			<SimpleTable rows={assets} columns={columns} options={options}/>
 		</>
 	)