Initial check in; All but the history pages working.
This commit is contained in:
134
imports/ui/pages/Assets/AddAssets.jsx
Normal file
134
imports/ui/pages/Assets/AddAssets.jsx
Normal file
@@ -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}/>
|
||||
)
|
||||
}
|
||||
135
imports/ui/pages/Assets/AssetList.jsx
Normal file
135
imports/ui/pages/Assets/AssetList.jsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import React, { useState } from 'react';
|
||||
import { useTracker } from 'meteor/react-meteor-data';
|
||||
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 MenuItem from '@mui/material/MenuItem';
|
||||
import {Assets, conditions} from "/imports/api/assets";
|
||||
import {AssetTypes} from "/imports/api/asset-types";
|
||||
|
||||
const cssEditorField = {
|
||||
margin: '0.6rem 0',
|
||||
}
|
||||
const cssGridFieldContainer = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
columnGap: '1rem',
|
||||
rowGap: '0.4rem',
|
||||
marginBottom: '1.5rem'
|
||||
}
|
||||
const cssFieldContainer = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: '#DDD',
|
||||
padding: '0.5rem',
|
||||
border: '1px solid #999',
|
||||
borderRadius: '0.2rem',
|
||||
}
|
||||
const cssButtonContainer = {
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
justifyContent: 'flex-end'
|
||||
}
|
||||
|
||||
const AssetEditor = ({value, close}) => {
|
||||
const [assetId, setAssetId] = useState(value.assetId || "")
|
||||
const [serial, setSerial] = useState(value.serial || "")
|
||||
const [condition, setCondition] = useState(value.condition || "")
|
||||
const [conditionDetails, setConditionDetails] = useState(value.conditionDetails || "")
|
||||
const [assetTypeId, setAssetTypeId] = useState(value.assetTypeId || "")
|
||||
const assetTypes = AssetTypes.find({}, {sort: {year: -1}});
|
||||
|
||||
const applyChanges = () => {
|
||||
close()
|
||||
//TODO Should invert this and only close if there was success on the server.
|
||||
if(value._id)
|
||||
Meteor.call("assets.update", value._id, assetTypeId, assetId, serial, condition, conditionDetails);
|
||||
else
|
||||
Meteor.call("assets.add", assetTypeId, assetId, serial, condition, conditionDetails);
|
||||
}
|
||||
const rejectChanges = () => {
|
||||
close()
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={cssFieldContainer}>
|
||||
<h1>Asset Editor</h1>
|
||||
<div style={cssGridFieldContainer}>
|
||||
<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>
|
||||
<TextField style={cssEditorField} variant="standard" label="Asset ID" value={assetId} onChange={(e) => {setAssetId(e.target.value)}}/>
|
||||
<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>
|
||||
<TextField style={cssEditorField} variant="standard" label="Serial" value={serial} onChange={(e) => {setSerial(e.target.value)}}/>
|
||||
<TextField style={{gridColumn: '1 / span 2',...cssEditorField}} multiline variant="outlined" rows={4} label="Condition Details" value={conditionDetails} onChange={(e) => {setConditionDetails(e.target.value)}}/>
|
||||
</div>
|
||||
<div style={cssButtonContainer}>
|
||||
<Button variant="contained" style={{gridColumn: '2/2'}} className="button accept-button" onClick={applyChanges}>Accept</Button>
|
||||
<Button type="outlined" style={{gridColumn: '3/3'}} className="button reject-button" onClick={rejectChanges}>Reject</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default () => {
|
||||
Meteor.subscribe('assetTypes');
|
||||
Meteor.subscribe('assets');
|
||||
|
||||
const {assets} = useTracker(() => {
|
||||
const assets = Assets.find({}).fetch();
|
||||
const assetTypes = AssetTypes.find({}, {sort: {year: -1}}).fetch();
|
||||
const assetTypeNameMap = assetTypes.reduce((map, obj) => {
|
||||
map[obj._id] = obj;
|
||||
return map;
|
||||
}, {})
|
||||
|
||||
for(let asset of assets) {
|
||||
asset.assetType = assetTypeNameMap[asset.assetTypeId]
|
||||
}
|
||||
|
||||
return {
|
||||
assets
|
||||
}
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: "Asset ID",
|
||||
value: (row) => row.assetId,
|
||||
},
|
||||
{
|
||||
name: "Serial",
|
||||
value: (row) => row.serial,
|
||||
},
|
||||
{
|
||||
name: "Condition",
|
||||
value: (row) => row.condition,
|
||||
},
|
||||
{
|
||||
name: "AssetType",
|
||||
value: (row) => row.assetType.name,
|
||||
},
|
||||
]
|
||||
|
||||
const options = {
|
||||
key: (row) => row._id,
|
||||
editor: (row, close) => {return (<AssetEditor value={row} close={close}/>)},
|
||||
add: true,
|
||||
maxHeight: '40rem'
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SimpleTable rows={assets} columns={columns} options={options}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user