Merge pull request #4296 from Northeastern-Electric-Racing/#4260-edit-car-names

#4260 edit car names

Author: wavehassman

src/backend/src/controllers/cars.controllers.ts

@@ -22,4 +22,15 @@ export default class CarsController {
       next(error);
     }
   }
+
+  static async editCar(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { carId } = req.params as Record<string, string>;
+      const { name } = req.body;
+      const car = await CarsService.editCar(carId, req.organization, req.currentUser, name);
+      res.status(200).json(car);
+    } catch (error) {
+      next(error);
+    }
+  }
 }

src/backend/src/routes/cars.routes.ts

@@ -1,10 +1,13 @@
 import express from 'express';
 import CarsController from '../controllers/cars.controllers.js';
+import { nonEmptyString, validateInputs } from '../utils/validation.utils.js';
+import { body } from 'express-validator';
 
 const carsRouter = express.Router();
 
 carsRouter.get('/', CarsController.getAllCars);
 
 carsRouter.post('/create', CarsController.createCar);
+carsRouter.post('/:carId/edit', nonEmptyString(body('name')), validateInputs, CarsController.editCar);
 
 export default carsRouter;

src/backend/src/services/car.services.ts

@@ -3,7 +3,7 @@ import { isAdmin, User } from 'shared';
 import { getCarQueryArgs } from '../prisma-query-args/cars.query-args.js';
 import prisma from '../prisma/prisma.js';
 import { carTransformer } from '../transformers/cars.transformer.js';
-import { AccessDeniedAdminOnlyException } from '../utils/errors.utils.js';
+import { AccessDeniedAdminOnlyException, NotFoundException } from '../utils/errors.utils.js';
 import { userHasPermission } from '../utils/users.utils.js';
 
 export default class CarsService {
@@ -53,4 +53,27 @@ export default class CarsService {
 
     return carTransformer(car);
   }
+
+  static async editCar(carId: string, organization: Organization, user: User, name: string) {
+    if (!(await userHasPermission(user.userId, organization.organizationId, isAdmin)))
+      throw new AccessDeniedAdminOnlyException('edit a car');
+
+    const car = await prisma.car.findFirst({
+      where: { carId, wbsElement: { organizationId: organization.organizationId } }
+    });
+
+    if (!car) throw new NotFoundException('Car', carId);
+
+    const editedCar = await prisma.car.update({
+      where: { carId: car.carId },
+      data: {
+        wbsElement: {
+          update: { name }
+        }
+      },
+      ...getCarQueryArgs(organization.organizationId)
+    });
+
+    return carTransformer(editedCar);
+  }
 }

src/frontend/src/apis/cars.api.ts

@@ -10,3 +10,7 @@ export const getAllCars = async () => {
 export const createCar = async (payload: CreateCarPayload) => {
   return await axios.post<Car>(apiUrls.carsCreate(), payload);
 };
+
+export const editCar = async (id: string, payload: CreateCarPayload) => {
+  return await axios.post<Car>(apiUrls.carEdit(id), payload);
+};

src/frontend/src/hooks/cars.hooks.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { Car } from 'shared';
-import { createCar, getAllCars } from '../apis/cars.api';
+import { createCar, getAllCars, editCar } from '../apis/cars.api';
 
 export interface CreateCarPayload {
   name: string;
@@ -39,3 +39,19 @@ export const useCreateCar = () => {
     }
   );
 };
+
+export const useEditCar = (carId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation<Car, Error, CreateCarPayload>(
+    ['cars', 'edit'],
+    async (formData: CreateCarPayload) => {
+      const { data } = await editCar(carId, formData);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['cars']);
+      }
+    }
+  );
+};

src/frontend/src/pages/AdminToolsPage/ProjectsConfig/CarsTable.tsx

@@ -1,17 +1,21 @@
-import { TableRow, TableCell, Box } from '@mui/material';
+import { TableRow, TableCell, Box, IconButton } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { datePipe } from '../../../utils/pipes';
 import ErrorPage from '../../ErrorPage';
 import { NERButton } from '../../../components/NERButton';
 import NERTable from '../../../components/NERTable';
 import { useGetAllCars } from '../../../hooks/cars.hooks';
 import CreateCarModal from './CreateCarFormModal';
+import EditCarModal from './EditCarFormModal';
+import { Car } from 'shared';
 import { useState } from 'react';
 
 const CarsTable: React.FC = () => {
   const { data: cars, isLoading: carsIsLoading, isError: carsIsError, error: carsError } = useGetAllCars();
 
-  const [openModal, setOpenModal] = useState(false);
+  const [openCreateModal, setOpenCreateModal] = useState(false);
+  const [editingCar, setEditingCar] = useState<Car | null>(null);
 
   if (!cars || carsIsLoading) {
     return <LoadingIndicator />;
@@ -27,15 +31,31 @@ const CarsTable: React.FC = () => {
       <TableCell sx={{ borderBottom: index === cars.length - 1 ? 'none' : 'default' }}>
         {datePipe(car.dateCreated)}
       </TableCell>
+      <TableCell sx={{ borderBottom: index === cars.length - 1 ? 'none' : 'default' }}>
+        <IconButton onClick={() => setEditingCar(car)} size="small">
+          <EditIcon fontSize="small" />
+        </IconButton>
+      </TableCell>
     </TableRow>
   ));
 
   return (
     <Box>
-      <CreateCarModal showModal={openModal} handleClose={() => setOpenModal(false)} />
-      <NERTable columns={[{ name: 'Car Number' }, { name: 'Car Name' }, { name: 'Date Created' }]} rows={carsTableRows} />
+      <CreateCarModal showModal={openCreateModal} handleClose={() => setOpenCreateModal(false)} />
+      {editingCar && (
+        <EditCarModal
+          showModal={!!editingCar}
+          handleClose={() => setEditingCar(null)}
+          carId={editingCar.id}
+          carName={editingCar.name}
+        />
+      )}
+      <NERTable
+        columns={[{ name: 'Car Number' }, { name: 'Car Name' }, { name: 'Date Created' }, { name: '' }]}
+        rows={carsTableRows}
+      />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
-        <NERButton variant="contained" onClick={() => setOpenModal(true)}>
+        <NERButton variant="contained" onClick={() => setOpenCreateModal(true)}>
           New Car
         </NERButton>
       </Box>

src/frontend/src/pages/AdminToolsPage/ProjectsConfig/EditCarFormModal.tsx

@@ -0,0 +1,68 @@
+import { useForm } from 'react-hook-form';
+import NERFormModal from '../../../components/NERFormModal';
+import { FormControl, FormLabel, FormHelperText } from '@mui/material';
+import ReactHookTextField from '../../../components/ReactHookTextField';
+import { useToast } from '../../../hooks/toasts.hooks';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEditCar } from '../../../hooks/cars.hooks';
+
+const schema = yup.object().shape({
+  name: yup.string().required('Car Name is Required')
+});
+
+interface EditCarModalProps {
+  showModal: boolean;
+  handleClose: () => void;
+  carId: string;
+  carName: string;
+}
+
+const EditCarModal: React.FC<EditCarModalProps> = ({ showModal, handleClose, carId, carName }) => {
+  const toast = useToast();
+  const { mutateAsync } = useEditCar(carId);
+
+  const onSubmit = async (data: { name: string }) => {
+    try {
+      await mutateAsync(data);
+      handleClose();
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      name: carName
+    }
+  });
+
+  return (
+    <NERFormModal
+      open={showModal}
+      onHide={handleClose}
+      title="Edit Car"
+      reset={() => reset({ name: carName })}
+      handleUseFormSubmit={handleSubmit}
+      onFormSubmit={onSubmit}
+      formId="edit-car-form"
+      showCloseButton
+    >
+      <FormControl>
+        <FormLabel>Car Name</FormLabel>
+        <ReactHookTextField name="name" control={control} sx={{ width: 1 }} />
+        <FormHelperText error>{errors.name?.message}</FormHelperText>
+      </FormControl>
+    </NERFormModal>
+  );
+};
+
+export default EditCarModal;

src/frontend/src/utils/urls.ts

@@ -390,6 +390,7 @@ const organizationsSetFinanceDelegates = () => `${organizationsFinanceDelegates(
 /******************* Car Endpoints ********************/
 const cars = () => `${API_URL}/cars`;
 const carsCreate = () => `${cars()}/create`;
+const carEdit = (id: string) => `${cars()}/${id}/edit`;
 
 /************** Recruitment Endpoints ***************/
 const recruitment = () => `${API_URL}/recruitment`;
@@ -796,6 +797,7 @@ export const apiUrls = {
 
   cars,
   carsCreate,
+  carEdit,
 
   recruitment,
   allMilestones,