More picklists

src/components/Flashpack/index.jsx

@@ -21,7 +21,9 @@ import TableHeaderSortable from "../Table/HeaderSortable";
 import { useLocalStorage } from "../useLocalStorage";
 import DeleteConfirmation from "../DeleteConfirmation";
 import { RoleWrap } from "../Controls/RoleWrap";
+import { DropDownList } from "../Controls/DropDownList";
 import useStyles from "../useStyles";
+import modelsTrimsYears from './modelsTrimsYears.json';
 
 const tableColumns = [
   {
@@ -55,6 +57,11 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [rowToDelete, setRowToDelete] = useState({});
+  const [model, setModel] = useLocalStorage("FLASHPACKS_MODEL", "Ocean");
+  const [trim, setTrim] = useLocalStorage("FLASHPACKS_TRIM", "Base");
+  const [year, setYear] = useLocalStorage("FLASHPACKS_YEAR", 2024);
+  const [trims, setTrims] = useLocalStorage("FLASHPACKS_TRIMS", modelsTrimsYears.oceanTrims);
+  const [years, setYears] = useLocalStorage("FLASHPACKS_YEARS", modelsTrimsYears.oceanYears);
   const {
     getAllFlashpacks,
     flashpacks,
@@ -84,14 +91,17 @@ const MainForm = () => {
   }, []);
 
   useEffect(() => {
-    loadFlashpacks();
+    loadFlashpacks(model, trim, year);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token, pageIndex, pageSize]);
 
-  const loadFlashpacks = async () => {
+  const loadFlashpacks = async (model, trim, year) => {
     try {
       if (!token) return;
       await getAllFlashpacks(
+        model,
+        trim,
+        year,
         {
           limit: pageSize,
           offset: pageSize * pageIndex,
@@ -104,6 +114,45 @@ const MainForm = () => {
     }
   };
 
+  const onModelChange = (event) => {
+    let newModel = event.target.value
+
+    setModel(newModel)
+
+    switch (newModel) {
+      case "Ocean":
+        setTrims(modelsTrimsYears.oceanTrims);
+        setYears(modelsTrimsYears.oceanYears);
+        break;
+      default:
+        break;
+    }
+
+    if (trim && year) {
+      loadFlashpacks(newModel, trim, year)
+    }
+  };
+
+  const onTrimChange = (event) => {
+    let newTrim = event.target.value
+
+    setTrim(newTrim)
+
+    if (model && year) {
+      loadFlashpacks(model, newTrim, year)
+    }
+  };
+
+  const onYearChange = (event) => {
+    let newYear = event.target.value
+
+    setYear(newYear)
+
+    if (model && trim) {
+      loadFlashpacks(model, trim, newYear)
+    }
+  };
+
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
   };
@@ -125,7 +174,7 @@ const MainForm = () => {
         if (!result || result.error) return;
 
         setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.car_trim} ${rowToDelete.flashpack}`);
-        loadFlashpacks();
+        loadFlashpacks(model, trim, year);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -135,6 +184,9 @@ const MainForm = () => {
 
   return (
     <div>
+      <DropDownList label="Model" data={modelsTrimsYears.models} classes={classes} onChange={onModelChange} value={model} />
+      <DropDownList label="Trim" data={trims} disabled={!model || !trims} classes={classes} onChange={onTrimChange} value={trim} />
+      <DropDownList label="Year" data={years} disabled={!model || !years} classes={classes} onChange={onYearChange} value={year} />
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
           <Link to={`/tools/flashpack/add`} className={classes.labelInline}>