More picklists

src/components/Flashpack/Add/index.jsx

@@ -12,7 +12,10 @@ import { logger } from "../../../services/monitoring";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useVehicleContext, VehicleProvider } from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
+import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
+import { DropDownList } from "../../Controls/DropDownList";
+import modelsTrimsYears from '.././modelsTrimsYears.json';
 
 const MainForm = () => {
   const {
@@ -23,9 +26,11 @@ const MainForm = () => {
   const classes = useStyles();
   const [redirect, setRedirect] = useState(null);
   const { setMessage, setTitle, setSitePath } = useStatusContext();
-  const [carModel, setCarModel] = useState("");
-  const [carTrim, setCarTrim] = useState("");
-  const [carYear, setCarYear] = useState();
+  const [carModel, setCarModel] = useLocalStorage("FLASHPACK_ADD_MODEL", "Ocean");
+  const [carTrim, setCarTrim] = useLocalStorage("FLASHPACK_ADD_TRIM", "Base");
+  const [carYear, setCarYear] = useLocalStorage("FLASHPACK_ADD_YEAR", 2024);
+  const [trims, setTrims] = useLocalStorage("FLASHPACK_ADD_TRIMS", modelsTrimsYears.oceanTrims);
+  const [years, setYears] = useLocalStorage("FLASHPACK_ADD_YEARS", modelsTrimsYears.oceanYears);
   const [flashpack, setFlashpack] = useState();
   const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
   const {
@@ -52,15 +57,30 @@ const MainForm = () => {
   }, []);
 
   const onCarModelChange = (event) => {
-    setCarModel(event.target.value);
+    let newModel = event.target.value
+
+    setCarModel(newModel)
+
+    switch (newModel) {
+      case "Ocean":
+        setTrims(modelsTrimsYears.oceanTrims);
+        setYears(modelsTrimsYears.oceanYears);
+        break;
+      default:
+        break;
+    }
   }
 
   const onCarTrimChange = (event) => {
-    setCarTrim(event.target.value);
+    let newTrim = event.target.value
+
+    setCarTrim(newTrim)
   }
 
   const onCarYearChange = (event) => {
-    setCarYear(event.target.value);
+    let newYear = event.target.value
+
+    setCarYear(newYear)
   }
 
   const onFlashpackChange = (event) => {
@@ -119,51 +139,9 @@ const MainForm = () => {
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
         <div>
-          <TextField
-            id="carModel"
-            name="carModel"
-            label="Model"
-            variant="outlined"
-            margin="normal"
-            inputProps={{
-              maxLength: "255",
-            }}
-            required
-            fullWidth
-            value={carModel}
-            onChange={onCarModelChange}
-            type="text"
-          />
-          <TextField
-            id="carTrim"
-            name="carTrim"
-            label="Trim"
-            variant="outlined"
-            margin="normal"
-            inputProps={{
-              maxLength: "255",
-            }}
-            required
-            fullWidth
-            value={carTrim}
-            onChange={onCarTrimChange}
-            type="text"
-          />
-          <TextField
-            id="carYear"
-            name="carYear"
-            label="Year"
-            variant="outlined"
-            margin="normal"
-            inputProps={{
-              maxLength: "255",
-            }}
-            required
-            fullWidth
-            value={carYear}
-            onChange={onCarYearChange}
-            type="number"
-          />
+          <DropDownList fullWidth required label="Model" data={modelsTrimsYears.models} classes={classes} onChange={onCarModelChange} value={carModel} />
+          <DropDownList fullWidth required label="Trim" data={trims} disabled={!carModel || !trims} classes={classes} onChange={onCarTrimChange} value={carTrim} />
+          <DropDownList fullWidth required label="Year" data={years} disabled={!carModel || !years} classes={classes} onChange={onCarYearChange} value={carYear} />
           <TextField
             id="flashpack"
             name="flashpack"