Skip to content

Commit 5b53e4d

Browse files
RChandler234RChandler234
authored
Merge pull request #1724 from Northeastern-Electric-Racing/#1723-bom-display-money-in-dollars
#1723 - display as dollars
2 parents 1182021 + cd3699a commit 5b53e4d

5 files changed

Lines changed: 43 additions & 46 deletions

File tree

‎src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTable.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Box } from '@mui/system';
22
import { DataGrid, GridColumns } from '@mui/x-data-grid';
33
import { Assembly, Material } from 'shared';
44
import { BomRow, bomTableStyles, materialToRow } from '../../../../utils/bom.utils';
5+
import { addMaterialCosts } from '../BOMTab';
6+
import { centsToDollar } from '../../../../utils/pipes';
57

68
interface BOMTableProps {
79
columns: GridColumns<BomRow>;
@@ -23,7 +25,7 @@ const BOMTable: React.FC<BOMTableProps> = ({ columns, materials, assemblies }) =
2325
type: '',
2426
name: '',
2527
manufacturer: '',
26-
manufacturerPN: `Assembly: ${assembly.name}`,
28+
manufacturerPN: `Assembly - ${assembly.name}: $${centsToDollar(assembly.materials.reduce(addMaterialCosts, 0))}`,
2729
pdmFileName: '',
2830
quantity: '',
2931
price: '',

‎src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,9 @@ const MaterialForm: React.FC<MaterialFormProps> = ({ submitText, onSubmit, defau
114114
}
115115

116116
const onSubmitWrapper = (data: MaterialFormInput): void => {
117-
onSubmit({ ...data, subtotal: data.price * data.quantity });
117+
const price = data.price * 100;
118+
const subtotal = data.unitName ? price : data.quantity * price;
119+
onSubmit({ ...data, subtotal: subtotal, price: price });
118120
};
119121

120122
const createUnitWrapper = async (unitName: string): Promise<void> => {
@@ -143,6 +145,7 @@ const MaterialForm: React.FC<MaterialFormProps> = ({ submitText, onSubmit, defau
143145
open={open}
144146
watch={watch}
145147
createUnit={createUnitWrapper}
148+
setValue={setValue}
146149
/>
147150
);
148151
};

‎src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { FormControl, FormLabel, Grid, MenuItem, TextField } from '@mui/material';
1+
import { FormControl, FormHelperText, FormLabel, Grid, InputAdornment, MenuItem, TextField } from '@mui/material';
22
import { Box } from '@mui/system';
3-
import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormWatch } from 'react-hook-form';
3+
import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue, UseFormWatch } from 'react-hook-form';
44
import { Assembly, Manufacturer, MaterialType, Unit } from 'shared';
55
import ReactHookTextField from '../../../../../components/ReactHookTextField';
66
import { MaterialFormInput } from './MaterialForm';
@@ -21,6 +21,7 @@ export interface MaterialFormViewProps {
2121
open: boolean;
2222
watch: UseFormWatch<MaterialFormInput>;
2323
createUnit: (name: string) => void;
24+
setValue: UseFormSetValue<MaterialFormInput>;
2425
}
2526

2627
const MaterialFormView: React.FC<MaterialFormViewProps> = ({
@@ -36,11 +37,17 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
3637
assemblies,
3738
open,
3839
watch,
39-
createUnit
40+
createUnit,
41+
setValue
4042
}) => {
4143
const quantity = watch('quantity');
4244
const price = watch('price');
43-
const subtotal = quantity && price ? quantity * price : 0;
45+
const unit = watch('unitName');
46+
const subtotal = quantity && price ? (unit ? price : quantity * price) : 0;
47+
48+
const onCostBlurHandler = (value: number) => {
49+
setValue(`price`, parseFloat(value.toFixed(2)));
50+
};
4451

4552
return (
4653
<NERFormModal
@@ -208,17 +215,30 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
208215
<Grid item xs={3}>
209216
<FormControl fullWidth>
210217
<FormLabel>Price</FormLabel>
211-
<ReactHookTextField
212-
name="price"
218+
<Controller
219+
name={`price`}
213220
control={control}
214-
errorMessage={errors.price}
215-
placeholder="Enter Price"
216-
type="number"
221+
render={({ field }) => (
222+
<TextField
223+
{...field}
224+
variant={'outlined'}
225+
type="number"
226+
autoComplete="off"
227+
placeholder="Enter Price"
228+
InputProps={{
229+
startAdornment: <InputAdornment position="start">$</InputAdornment>
230+
}}
231+
onBlur={(e) => onCostBlurHandler(parseFloat(e.target.value))}
232+
sx={{ width: '100%' }}
233+
error={!!errors.price}
234+
/>
235+
)}
217236
/>
237+
<FormHelperText error>{errors.price}</FormHelperText>
218238
</FormControl>
219239
</Grid>
220240
<Grid item xs={3} display="flex" alignItems="center" mt={2}>
221-
<DetailDisplay label="Subtotal" content={subtotal.toString()} />
241+
<DetailDisplay label="Subtotal" content={'$' + subtotal.toString()} />
222242
</Grid>
223243
<Grid item xs={12}>
224244
<FormControl fullWidth>

‎src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOMTab.tsx‎

Lines changed: 3 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,23 @@ import { Box } from '@mui/system';
22
import { MaterialPreview, Project } from 'shared';
33
import { NERButton } from '../../../components/NERButton';
44
import WarningIcon from '@mui/icons-material/Warning';
5-
import { MenuItem, Select, SelectChangeEvent, Tooltip, useTheme } from '@mui/material';
5+
import { Tooltip, useTheme } from '@mui/material';
66
import { useState } from 'react';
77
import BOMTableWrapper from './BOM/BOMTableWrapper';
88
import CreateMaterialModal from './BOM/MaterialForm/CreateMaterialModal';
99
import CreateAssemblyModal from './BOM/AssemblyForm/CreateAssemblyModal';
1010
import NERSuccessButton from '../../../components/NERSuccessButton';
11+
import { centsToDollar } from '../../../utils/pipes';
1112

1213
export const addMaterialCosts = (accumulator: number, currentMaterial: MaterialPreview) =>
1314
currentMaterial.subtotal + accumulator;
1415

1516
const BOMTab = ({ project }: { project: Project }) => {
1617
const [showAddMaterial, setShowAddMaterial] = useState(false);
1718
const [showAddAssembly, setShowAddAssembly] = useState(false);
18-
const [assembly, setAssembly] = useState('Total');
1919
const theme = useTheme();
2020

21-
const costOptions = project.assemblies.map((assembly) => assembly.name);
22-
costOptions.push('Total');
23-
2421
const totalCost = project.materials.reduce(addMaterialCosts, 0);
25-
const selectedAssemblyMaterials = project.assemblies.find((a) => a.name === assembly)?.materials;
26-
const displayedCost = selectedAssemblyMaterials ? selectedAssemblyMaterials.reduce(addMaterialCosts, 0) : totalCost;
2722

2823
return (
2924
<Box>
@@ -44,33 +39,9 @@ const BOMTab = ({ project }: { project: Project }) => {
4439
<Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>
4540
Budget: ${project.budget}
4641
</Box>
47-
<Select
48-
id="cr-autocomplete"
49-
value={assembly}
50-
onChange={(event: SelectChangeEvent<string>) => setAssembly(event.target.value)}
51-
size={'small'}
52-
placeholder={'Change Request Id'}
53-
sx={{ width: 200, textAlign: 'left' }}
54-
MenuProps={{
55-
anchorOrigin: {
56-
vertical: 'top',
57-
horizontal: 'left'
58-
},
59-
transformOrigin: {
60-
vertical: 'bottom',
61-
horizontal: 'left'
62-
}
63-
}}
64-
>
65-
{costOptions.map((option) => (
66-
<MenuItem key={option} value={option}>
67-
{option === 'Total' ? option : `Assembly: ${option}`}
68-
</MenuItem>
69-
))}
70-
</Select>
7142

7243
<Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>
73-
${displayedCost}
44+
Total Cost: ${centsToDollar(totalCost)}
7445
</Box>
7546
{totalCost > project.budget && (
7647
<Tooltip title="Current Total Cost Exceeds Budget!" placement="top" arrow>

‎src/frontend/src/utils/bom.utils.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Material } from 'shared';
22
import { GridColDefStyle } from './tables';
3+
import { centsToDollar } from './pipes';
34

45
export interface BomRow {
56
id: string;
@@ -28,8 +29,8 @@ export const materialToRow = (material: Material, idx: number): BomRow => {
2829
manufacturerPN: material.manufacturerPartNumber,
2930
pdmFileName: material.pdmFileName ?? 'None',
3031
quantity: material.quantity + (material.unitName ?? ''),
31-
price: material.price.toString(),
32-
subtotal: material.subtotal.toString(),
32+
price: `$${centsToDollar(material.price)}`,
33+
subtotal: `$${centsToDollar(material.subtotal)}`,
3334
link: material.linkUrl,
3435
notes: material.notes
3536
};

0 commit comments

Comments
 (0)