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

Pre-web changes

Browse Source
This commit is contained in:
Eric Gullickson
2025-11-05 11:04:48 -06:00
parent 45fea0f307
commit 0c3ed01f4b
25 changed files with 257 additions and 3538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/features/vehicles/api/vehicles.api.ts
View File

@@ -32,34 +32,34 @@ export const vehiclesApi = {
await apiClient.delete(`/vehicles/${id}`);
},
// Dropdown API methods (authenticated) - using unified platform endpoints
// Dropdown API methods (authenticated) - proxied through vehicles capsule
getYears: async (): Promise<number[]> => {
const response = await apiClient.get('/platform/years');
const response = await apiClient.get('/vehicles/dropdown/years');
return response.data;
},
getMakes: async (year: number): Promise<DropdownOption[]> => {
const response = await apiClient.get(`/platform/makes?year=${year}`);
const response = await apiClient.get(`/vehicles/dropdown/makes?year=${year}`);
return response.data;
},
getModels: async (year: number, makeId: number): Promise<DropdownOption[]> => {
const response = await apiClient.get(`/platform/models?year=${year}&make_id=${makeId}`);
const response = await apiClient.get(`/vehicles/dropdown/models?year=${year}&make_id=${makeId}`);
return response.data;
},
getTransmissions: async (year: number, makeId: number, modelId: number): Promise<DropdownOption[]> => {
const response = await apiClient.get(`/platform/transmissions?year=${year}&make_id=${makeId}&model_id=${modelId}`);
const response = await apiClient.get(`/vehicles/dropdown/transmissions?year=${year}&make_id=${makeId}&model_id=${modelId}`);
return response.data;
},
getEngines: async (year: number, makeId: number, modelId: number, trimId: number): Promise<DropdownOption[]> => {
const response = await apiClient.get(`/platform/engines?year=${year}&make_id=${makeId}&model_id=${modelId}&trim_id=${trimId}`);
const response = await apiClient.get(`/vehicles/dropdown/engines?year=${year}&make_id=${makeId}&model_id=${modelId}&trim_id=${trimId}`);
return response.data;
},
getTrims: async (year: number, makeId: number, modelId: number): Promise<DropdownOption[]> => {
const response = await apiClient.get(`/platform/trims?year=${year}&make_id=${makeId}&model_id=${modelId}`);
const response = await apiClient.get(`/vehicles/dropdown/trims?year=${year}&make_id=${makeId}&model_id=${modelId}`);
return response.data;
},

20
frontend/src/features/vehicles/components/VehicleForm.tsx
View File

@@ -72,6 +72,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
const [models, setModels] = useState<DropdownOption[]>([]);
const [engines, setEngines] = useState<DropdownOption[]>([]);
const [trims, setTrims] = useState<DropdownOption[]>([]);
const [transmissions, setTransmissions] = useState<DropdownOption[]>([]);
const [selectedYear, setSelectedYear] = useState<number | undefined>();
const [selectedMake, setSelectedMake] = useState<DropdownOption | undefined>();
const [selectedModel, setSelectedModel] = useState<DropdownOption | undefined>();
@@ -155,6 +156,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
setModels([]);
setEngines([]);
setTrims([]);
setTransmissions([]);
setSelectedMake(undefined);
setSelectedModel(undefined);
setValue('make', '');
@@ -189,6 +191,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
// Clear dependent selections
setEngines([]);
setTrims([]);
setTransmissions([]);
setSelectedModel(undefined);
setValue('model', '');
setValue('transmission', '');
@@ -215,8 +218,12 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
const loadTrims = async () => {
setLoadingDropdowns(true);
try {
const trimsData = await vehiclesApi.getTrims(watchedYear, selectedMake.id, modelOption.id);
const [trimsData, transmissionsData] = await Promise.all([
vehiclesApi.getTrims(watchedYear, selectedMake.id, modelOption.id),
vehiclesApi.getTransmissions(watchedYear, selectedMake.id, modelOption.id)
]);
setTrims(trimsData);
setTransmissions(transmissionsData);
setSelectedModel(modelOption);
// Clear deeper selections
setEngines([]);
@@ -228,6 +235,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
console.error('Failed to load detailed data:', error);
setTrims([]);
setEngines([]);
setTransmissions([]);
} finally {
setLoadingDropdowns(false);
}
@@ -397,7 +405,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
</select>
</div>
{/* Transmission (right, static options) */}
{/* Transmission (right) */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Transmission
@@ -405,11 +413,15 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
<select
{...register('transmission')}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
disabled={loadingDropdowns || transmissions.length === 0}
style={{ fontSize: '16px' }}
>
<option value="">Select Transmission</option>
<option value="Automatic">Automatic</option>
<option value="Manual">Manual</option>
{transmissions.map((transmission) => (
<option key={transmission.id} value={transmission.name}>
{transmission.name}
</option>
))}
</select>
</div>
</div>