Merge pull request #1439 from Northeastern-Electric-Racing/#1289-change-expense-type-to-autocomplete

#1289 change expense type to autocomplete

Author: RChandler234

src/frontend/src/components/NERAutocomplete.tsx

@@ -3,16 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import {
-  Autocomplete,
-  AutocompleteRenderInputParams,
-  InputAdornment,
-  SxProps,
-  TextField,
-  Theme,
-  useTheme
-} from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
+import { Autocomplete, AutocompleteRenderInputParams, SxProps, TextField, Theme, useTheme } from '@mui/material';
 import { HTMLAttributes } from 'react';
 
 interface NERAutocompleteProps {
@@ -44,15 +35,8 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
     height: '40px',
     backgroundColor: theme.palette.background.default,
     width: '100%',
-    borderRadius: '25px',
     border: 0,
-    '.MuiOutlinedInput-notchedOutline': {
-      borderColor: 'black',
-      borderRadius: '25px'
-    },
-    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'red'
-    },
+    borderColor: 'black',
     ...sx
   };
 
@@ -61,12 +45,7 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
       <TextField
         {...params}
         InputProps={{
-          ...params.InputProps,
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon />
-            </InputAdornment>
-          )
+          ...params.InputProps
         }}
         placeholder={placeholder}
         required

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx

@@ -32,6 +32,7 @@ import NERSuccessButton from '../../../components/NERSuccessButton';
 import { ReimbursementRequestFormInput } from './ReimbursementRequestForm';
 import { useState } from 'react';
 import { useToast } from '../../../hooks/toasts.hooks';
+import NERAutocomplete from '../../../components/NERAutocomplete';
 import { Link as RouterLink } from 'react-router-dom';
 import { routes } from '../../../utils/routes';
 import { codeAndRefundSourceName, expenseTypePipe } from '../../../utils/pipes';
@@ -111,6 +112,10 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
     </FormControl>
   );
 
+  const expenseTypesToAutocomplete = (expenseType: ExpenseType): { label: string; id: string } => {
+    return { label: expenseTypePipe(expenseType), id: expenseType.expenseTypeId };
+  };
+
   return (
     <form
       onSubmit={(e) => {
@@ -212,21 +217,21 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                 <Controller
                   name="expenseTypeId"
                   control={control}
-                  render={({ field: { onChange, value } }) => (
-                    <Select
-                      onChange={(newValue) => onChange(newValue.target.value)}
-                      value={value}
-                      error={!!errors.expenseTypeId}
-                    >
-                      {allExpenseTypes
-                        .filter((expenseType) => expenseType.allowed)
-                        .map((expenseType) => (
-                          <MenuItem key={expenseType.expenseTypeId} value={expenseType.expenseTypeId}>
-                            {expenseTypePipe(expenseType)}
-                          </MenuItem>
-                        ))}
-                    </Select>
-                  )}
+                  render={({ field: { onChange, value } }) => {
+                    const mappedExpenseTypes = allExpenseTypes.map(expenseTypesToAutocomplete);
+                    return (
+                      <NERAutocomplete
+                        id={'expenseType'}
+                        size="medium"
+                        options={mappedExpenseTypes}
+                        value={mappedExpenseTypes.find((expenseType) => expenseType.id === value) || null}
+                        placeholder="Expense Type"
+                        onChange={(_event, newValue) => {
+                          newValue ? onChange(newValue.id) : onChange('');
+                        }}
+                      />
+                    );
+                  }}
                 />
                 <FormHelperText error>{errors.expenseTypeId?.message}</FormHelperText>
               </FormControl>