diff --git a/src/components/EditStationModal/index.tsx b/src/components/EditStationModal/index.tsx index 047e6ef..6c9586f 100644 --- a/src/components/EditStationModal/index.tsx +++ b/src/components/EditStationModal/index.tsx @@ -57,7 +57,6 @@ const EditStationModal: React.FC = ({ handleSubmit, setValue, reset, - watch, formState: { errors }, } = useForm({ defaultValues: { @@ -82,22 +81,42 @@ const EditStationModal: React.FC = ({ useEffect(() => { dispatch(fetchVehicleBrands()); - dispatch(vehicleList()); // Fetch vehicles when the component mounts + dispatch(vehicleList()); }, [dispatch]); useEffect(() => { if (editRow) { + // Determine the brand based on the first vehicle's company + const firstVehicle = vehicles.find( + (vehicle) => editRow.allowedCarIds && + editRow.allowedCarIds.includes(vehicle.name) + ); + + const brandId = firstVehicle ? firstVehicle.company : ""; + setSelectedBrand(brandId); + + // Populate selected vehicles + const vehicleNames = vehicles + .filter((vehicle) => + editRow.allowedCarIds && + editRow.allowedCarIds.includes(vehicle.name) + ) + .map((vehicle) => vehicle.name); + + setSelectedVehicles(vehicleNames); + + // Set form values setValue("name", editRow.name); setValue("registeredAddress", editRow.registeredAddress); setValue("totalSlots", editRow.totalSlots); setValue("status", editRow.status); - setValue("allowedCarIds", editRow.allowedCarIds || []); - setSelectedVehicles(editRow.allowedCarIds || []); + setValue("allowedCarIds", vehicleNames); } else { reset(); + setSelectedBrand(""); + setSelectedVehicles([]); } - }, [editRow, setValue, reset]); - + }, [editRow, vehicles, setValue, reset]); const filteredVehicles = vehicles.filter( (vehicle) => vehicle.company === selectedBrand @@ -108,7 +127,7 @@ const EditStationModal: React.FC = ({ ) => { const value = event.target.value as string[]; setSelectedVehicles(value); - setValue("allowedCarIds", value); // Update allowedCarIds in form state + setValue("allowedCarIds", value); }; const onSubmit = (data: FormData) => { @@ -125,8 +144,8 @@ const EditStationModal: React.FC = ({ ); handleClose(); reset(); - setSelectedBrand(""); // Reset brand after submit - setSelectedVehicles([]); // Reset selected vehicles + setSelectedBrand(""); + setSelectedVehicles([]); }; return ( @@ -388,7 +407,7 @@ const EditStationModal: React.FC = ({ color: "white", borderRadius: "8px", width: "117px", - "&:hover": { backgroundColor: "#439BC1" }, + "&:hover": { backgroundColor: "#439BC1" }, }} > Update Station @@ -399,4 +418,4 @@ const EditStationModal: React.FC = ({ ); }; -export default EditStationModal; +export default EditStationModal; \ No newline at end of file