egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: promote vehicle display utils to core with null safety (refs #165)

Browse Source 
Create shared getVehicleLabel/getVehicleSubtitle in core/utils with
VehicleLike interface. Replace all direct year/make/model concatenation
across 17 consumer files to prevent null values in vehicle names.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-13 19:32:40 -06:00
parent 75e4660c58
commit 325cf08df0
23 changed files with 63 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/features/vehicles/components/VehicleCard.tsx
View File

@@ -9,6 +9,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
import { Vehicle } from '../types/vehicles.types';
import { useUnits } from '../../../core/units/UnitsContext';
import { VehicleImage } from './VehicleImage';
import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
interface VehicleCardProps {
vehicle: Vehicle;
@@ -24,8 +25,7 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
onSelect,
}) => {
const { formatDistance } = useUnits();
const displayName = vehicle.nickname ||
[vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ');
const displayName = getVehicleLabel(vehicle);
return (
<Card

4
frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx
View File

@@ -12,6 +12,7 @@ import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog'
import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
import { VehicleImage } from '../components/VehicleImage';
import { OwnershipCostsList } from '../../ownership-costs';
import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
interface VehicleDetailMobileProps {
vehicle: Vehicle;
@@ -38,8 +39,7 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
onLogFuel,
onEdit
}) => {
const displayName = vehicle.nickname ||
[vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ') || 'Vehicle';
const displayName = getVehicleLabel(vehicle);
const displayModel = vehicle.model || 'Unknown Model';
const [recordFilter, setRecordFilter] = useState<'All' | 'Fuel Logs' | 'Maintenance' | 'Documents'>('All');

4
frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx
View File

@@ -6,6 +6,7 @@ import React from 'react';
import { Card, CardActionArea, Box, Typography } from '@mui/material';
import { Vehicle } from '../types/vehicles.types';
import { VehicleImage } from '../components/VehicleImage';
import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
interface VehicleMobileCardProps {
vehicle: Vehicle;
@@ -18,8 +19,7 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
onClick,
compact = false
}) => {
const displayName = vehicle.nickname ||
[vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ') || 'Vehicle';
const displayName = getVehicleLabel(vehicle);
const displayModel = vehicle.model || 'Unknown Model';
return (

7
frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
View File

@@ -12,6 +12,7 @@ import LocalGasStationIcon from '@mui/icons-material/LocalGasStation';
import BuildIcon from '@mui/icons-material/Build';
import DeleteIcon from '@mui/icons-material/Delete';
import { Vehicle } from '../types/vehicles.types';
import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
import { vehiclesApi } from '../api/vehicles.api';
import { Card } from '../../../shared-minimal/components/Card';
import { VehicleForm } from '../components/VehicleForm';
@@ -224,8 +225,7 @@ export const VehicleDetailPage: React.FC = () => {
);
}
const displayName = vehicle.nickname ||
[vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ') || 'Vehicle';
const displayName = getVehicleLabel(vehicle);
const handleRowClick = (recId: string, type: VehicleRecord['type']) => {
if (type === 'Fuel Logs') {
@@ -373,8 +373,7 @@ export const VehicleDetailPage: React.FC = () => {
Vehicle Details
</Typography>
<Typography variant="body2" color="text.secondary">
{vehicle.year} {vehicle.make} {vehicle.model}
{vehicle.trimLevel && ` ${vehicle.trimLevel}`}
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
</Typography>
{vehicle.vin && (
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>