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

feat: Add fuzzy matching to VIN decode for partial model/trim names (refs #9)
Some checks failed
Deploy to Staging / Build Images (pull_request) Failing after 3m1s
Details
Deploy to Staging / Deploy to Staging (pull_request) Has been skipped
Details
Deploy to Staging / Verify Staging (pull_request) Has been skipped
Details
Deploy to Staging / Notify Staging Ready (pull_request) Has been skipped
Details
Deploy to Staging / Notify Staging Failure (pull_request) Successful in 6s
Details

Browse Source 
Backend: Enhanced matchField function with prefix and contains matching
so NHTSA values like "Sierra" match dropdown options like "Sierra 1500".

Matching hierarchy:
1. Exact match (case-insensitive) -> high confidence
2. Normalized match (remove special chars) -> medium confidence
3. Prefix match (option starts with value) -> medium confidence (NEW)
4. Contains match (option contains value) -> medium confidence (NEW)

Frontend: Fixed VIN decode form population by loading dropdown options
before setting form values, preventing cascade useEffects from clearing
decoded values.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-01-11 16:12:09 -06:00
parent 19bc10a1f7
commit a6607d5882
2 changed files with 52 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -448,13 +448,45 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
isVinDecoding.current = true;
setLoadingDropdowns(true);
// Track which values we're setting (only populate empty fields)
const yearToSet = !watchedYear && decoded.year.value ? decoded.year.value : watchedYear;
const makeToSet = !watchedMake && decoded.make.value ? decoded.make.value : watchedMake;
const modelToSet = !watchedModel && decoded.model.value ? decoded.model.value : watchedModel;
const trimToSet = !watchedTrim && decoded.trimLevel.value ? decoded.trimLevel.value : watchedTrim;
// Determine final values (decoded value if field is empty, otherwise keep existing)
const yearValue = !watchedYear && decoded.year.value ? decoded.year.value : watchedYear;
const makeValue = !watchedMake && decoded.make.value ? decoded.make.value : watchedMake;
const modelValue = !watchedModel && decoded.model.value ? decoded.model.value : watchedModel;
const trimValue = !watchedTrim && decoded.trimLevel.value ? decoded.trimLevel.value : watchedTrim;
const engineValue = !watchedEngine && decoded.engine.value ? decoded.engine.value : watchedEngine;
const transmissionValue = !watchedTransmission && decoded.transmission.value ? decoded.transmission.value : watchedTransmission;
// Set form values
// FIRST: Load all dropdown options hierarchically (like edit mode initialization)
// Options must exist BEFORE setting form values for selects to display correctly
if (yearValue) {
prevYear.current = yearValue;
const makesData = await vehiclesApi.getMakes(yearValue);
setMakes(makesData);
if (makeValue) {
prevMake.current = makeValue;
const modelsData = await vehiclesApi.getModels(yearValue, makeValue);
setModels(modelsData);
if (modelValue) {
prevModel.current = modelValue;
const trimsData = await vehiclesApi.getTrims(yearValue, makeValue, modelValue);
setTrims(trimsData);
if (trimValue) {
prevTrim.current = trimValue;
const [enginesData, transmissionsData] = await Promise.all([
vehiclesApi.getEngines(yearValue, makeValue, modelValue, trimValue),
vehiclesApi.getTransmissions(yearValue, makeValue, modelValue, trimValue)
]);
setEngines(enginesData);
setTransmissions(transmissionsData);
}
}
}
}
// THEN: Set form values (after options are loaded)
if (!watchedYear && decoded.year.value) {
setValue('year', decoded.year.value);
}
@@ -474,36 +506,6 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
setValue('transmission', decoded.transmission.value);
}
// Load dropdown options hierarchically (like edit mode initialization)
// This ensures dropdowns have the right options for the decoded values
if (yearToSet) {
prevYear.current = yearToSet;
const makesData = await vehiclesApi.getMakes(yearToSet);
setMakes(makesData);
if (makeToSet) {
prevMake.current = makeToSet;
const modelsData = await vehiclesApi.getModels(yearToSet, makeToSet);
setModels(modelsData);
if (modelToSet) {
prevModel.current = modelToSet;
const trimsData = await vehiclesApi.getTrims(yearToSet, makeToSet, modelToSet);
setTrims(trimsData);
if (trimToSet) {
prevTrim.current = trimToSet;
const [enginesData, transmissionsData] = await Promise.all([
vehiclesApi.getEngines(yearToSet, makeToSet, modelToSet, trimToSet),
vehiclesApi.getTransmissions(yearToSet, makeToSet, modelToSet, trimToSet)
]);
setEngines(enginesData);
setTransmissions(transmissionsData);
}
}
}
}
setLoadingDropdowns(false);
isVinDecoding.current = false;
} catch (error: any) {