#1723 - display as dollars

Author: RChandler234

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

@@ -2,6 +2,8 @@ import { Box } from '@mui/system';
 import { DataGrid, GridColumns } from '@mui/x-data-grid';
 import { Assembly, Material } from 'shared';
 import { BomRow, bomTableStyles, materialToRow } from '../../../../utils/bom.utils';
+import { addMaterialCosts } from '../BOMTab';
+import { centsToDollar } from '../../../../utils/pipes';
 
 interface BOMTableProps {
   columns: GridColumns<BomRow>;
@@ -23,7 +25,7 @@ const BOMTable: React.FC<BOMTableProps> = ({ columns, materials, assemblies }) =
       type: '',
       name: '',
       manufacturer: '',
-      manufacturerPN: `Assembly: ${assembly.name}`,
+      manufacturerPN: `Assembly - ${assembly.name}: $${centsToDollar(assembly.materials.reduce(addMaterialCosts, 0))}`,
       pdmFileName: '',
       quantity: '',
       price: '',

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

@@ -114,7 +114,9 @@ const MaterialForm: React.FC<MaterialFormProps> = ({ submitText, onSubmit, defau
   }
 
   const onSubmitWrapper = (data: MaterialFormInput): void => {
-    onSubmit({ ...data, subtotal: data.price * data.quantity });
+    const price = data.price * 100;
+    const subtotal = data.unitName ? price : data.quantity * price;
+    onSubmit({ ...data, subtotal: subtotal, price: price });
   };
 
   const createUnitWrapper = async (unitName: string): Promise<void> => {
@@ -143,6 +145,7 @@ const MaterialForm: React.FC<MaterialFormProps> = ({ submitText, onSubmit, defau
       open={open}
       watch={watch}
       createUnit={createUnitWrapper}
+      setValue={setValue}
     />
   );
 };

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

@@ -1,6 +1,6 @@
-import { FormControl, FormLabel, Grid, MenuItem, TextField } from '@mui/material';
+import { FormControl, FormHelperText, FormLabel, Grid, InputAdornment, MenuItem, TextField } from '@mui/material';
 import { Box } from '@mui/system';
-import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormWatch } from 'react-hook-form';
+import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue, UseFormWatch } from 'react-hook-form';
 import { Assembly, Manufacturer, MaterialType, Unit } from 'shared';
 import ReactHookTextField from '../../../../../components/ReactHookTextField';
 import { MaterialFormInput } from './MaterialForm';
@@ -21,6 +21,7 @@ export interface MaterialFormViewProps {
   open: boolean;
   watch: UseFormWatch<MaterialFormInput>;
   createUnit: (name: string) => void;
+  setValue: UseFormSetValue<MaterialFormInput>;
 }
 
 const MaterialFormView: React.FC<MaterialFormViewProps> = ({
@@ -36,11 +37,17 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
   assemblies,
   open,
   watch,
-  createUnit
+  createUnit,
+  setValue
 }) => {
   const quantity = watch('quantity');
   const price = watch('price');
-  const subtotal = quantity && price ? quantity * price : 0;
+  const unit = watch('unitName');
+  const subtotal = quantity && price ? (unit ? price : quantity * price) : 0;
+
+  const onCostBlurHandler = (value: number) => {
+    setValue(`price`, parseFloat(value.toFixed(2)));
+  };
 
   return (
     <NERFormModal
@@ -208,17 +215,30 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
         <Grid item xs={3}>
           <FormControl fullWidth>
             <FormLabel>Price</FormLabel>
-            <ReactHookTextField
-              name="price"
+            <Controller
+              name={`price`}
               control={control}
-              errorMessage={errors.price}
-              placeholder="Enter Price"
-              type="number"
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  variant={'outlined'}
+                  type="number"
+                  autoComplete="off"
+                  placeholder="Enter Price"
+                  InputProps={{
+                    startAdornment: <InputAdornment position="start">$</InputAdornment>
+                  }}
+                  onBlur={(e) => onCostBlurHandler(parseFloat(e.target.value))}
+                  sx={{ width: '100%' }}
+                  error={!!errors.price}
+                />
+              )}
             />
+            <FormHelperText error>{errors.price}</FormHelperText>
           </FormControl>
         </Grid>
         <Grid item xs={3} display="flex" alignItems="center" mt={2}>
-          <DetailDisplay label="Subtotal" content={subtotal.toString()} />
+          <DetailDisplay label="Subtotal" content={'$' + subtotal.toString()} />
         </Grid>
         <Grid item xs={12}>
           <FormControl fullWidth>

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

@@ -2,28 +2,23 @@ import { Box } from '@mui/system';
 import { MaterialPreview, Project } from 'shared';
 import { NERButton } from '../../../components/NERButton';
 import WarningIcon from '@mui/icons-material/Warning';
-import { MenuItem, Select, SelectChangeEvent, Tooltip, useTheme } from '@mui/material';
+import { Tooltip, useTheme } from '@mui/material';
 import { useState } from 'react';
 import BOMTableWrapper from './BOM/BOMTableWrapper';
 import CreateMaterialModal from './BOM/MaterialForm/CreateMaterialModal';
 import CreateAssemblyModal from './BOM/AssemblyForm/CreateAssemblyModal';
 import NERSuccessButton from '../../../components/NERSuccessButton';
+import { centsToDollar } from '../../../utils/pipes';
 
 export const addMaterialCosts = (accumulator: number, currentMaterial: MaterialPreview) =>
   currentMaterial.subtotal + accumulator;
 
 const BOMTab = ({ project }: { project: Project }) => {
   const [showAddMaterial, setShowAddMaterial] = useState(false);
   const [showAddAssembly, setShowAddAssembly] = useState(false);
-  const [assembly, setAssembly] = useState('Total');
   const theme = useTheme();
 
-  const costOptions = project.assemblies.map((assembly) => assembly.name);
-  costOptions.push('Total');
-
   const totalCost = project.materials.reduce(addMaterialCosts, 0);
-  const selectedAssemblyMaterials = project.assemblies.find((a) => a.name === assembly)?.materials;
-  const displayedCost = selectedAssemblyMaterials ? selectedAssemblyMaterials.reduce(addMaterialCosts, 0) : totalCost;
 
   return (
     <Box>
@@ -44,33 +39,9 @@ const BOMTab = ({ project }: { project: Project }) => {
             <Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>
               Budget: ${project.budget}
             </Box>
-            <Select
-              id="cr-autocomplete"
-              value={assembly}
-              onChange={(event: SelectChangeEvent<string>) => setAssembly(event.target.value)}
-              size={'small'}
-              placeholder={'Change Request Id'}
-              sx={{ width: 200, textAlign: 'left' }}
-              MenuProps={{
-                anchorOrigin: {
-                  vertical: 'top',
-                  horizontal: 'left'
-                },
-                transformOrigin: {
-                  vertical: 'bottom',
-                  horizontal: 'left'
-                }
-              }}
-            >
-              {costOptions.map((option) => (
-                <MenuItem key={option} value={option}>
-                  {option === 'Total' ? option : `Assembly: ${option}`}
-                </MenuItem>
-              ))}
-            </Select>
 
             <Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>
-              ${displayedCost}
+              Total Cost: ${centsToDollar(totalCost)}
             </Box>
             {totalCost > project.budget && (
               <Tooltip title="Current Total Cost Exceeds Budget!" placement="top" arrow>

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

@@ -1,5 +1,6 @@
 import { Material } from 'shared';
 import { GridColDefStyle } from './tables';
+import { centsToDollar } from './pipes';
 
 export interface BomRow {
   id: string;
@@ -28,8 +29,8 @@ export const materialToRow = (material: Material, idx: number): BomRow => {
     manufacturerPN: material.manufacturerPartNumber,
     pdmFileName: material.pdmFileName ?? 'None',
     quantity: material.quantity + (material.unitName ?? ''),
-    price: material.price.toString(),
-    subtotal: material.subtotal.toString(),
+    price: `$${centsToDollar(material.price)}`,
+    subtotal: `$${centsToDollar(material.subtotal)}`,
     link: material.linkUrl,
     notes: material.notes
   };