diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx index 96dc6df..eb09f0e 100644 --- a/src/components/Contexts/VehicleContext.jsx +++ b/src/components/Contexts/VehicleContext.jsx @@ -291,11 +291,11 @@ export const VehicleProvider = ({ children }) => { } }; - const getAllFlashpacks = async (options, token) => { + const getAllFlashpacks = async (model, trim, year, options, token) => { try { setBusy(true); - const result = await api.getAllFlashpacks(options, token); + const result = await api.getAllFlashpacks(model, trim, year, options, token); if (result.error) { throw new Error(`Get all flashpacks error. ${result.message}`); } diff --git a/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap b/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap index 36e887b..6e5fcba 100644 --- a/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap +++ b/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap @@ -24,138 +24,175 @@ exports[`FlashpackAdd Render 1`] = ` >
- + > + + +
- + > + + + + + + +
- + > + + + + diff --git a/src/components/Flashpack/Add/index.jsx b/src/components/Flashpack/Add/index.jsx index 62effa6..829d267 100644 --- a/src/components/Flashpack/Add/index.jsx +++ b/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 = () => {
- - - + + +
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
diff --git a/src/components/Flashpack/index.jsx b/src/components/Flashpack/index.jsx index 094d69d..899728c 100644 --- a/src/components/Flashpack/index.jsx +++ b/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 (
+ + + diff --git a/src/components/Flashpack/modelsTrimsYears.json b/src/components/Flashpack/modelsTrimsYears.json new file mode 100644 index 0000000..9da0e3d --- /dev/null +++ b/src/components/Flashpack/modelsTrimsYears.json @@ -0,0 +1,40 @@ +{ + "models": [ + { + "value": "Ocean", + "label": "Ocean" + } + ], + "oceanTrims": [ + { + "value": "Base", + "label": "Base" + }, + { + "value": "Sport", + "label": "Sport" + }, + { + "value": "Ocean One", + "label": "Ocean One" + }, + { + "value": "Ultra", + "label": "Ultra" + }, + { + "value": "Extreme", + "label": "Extreme" + } + ], + "oceanYears": [ + { + "value": 2023, + "label": "2023" + }, + { + "value": 2024, + "label": "2024" + } + ] +} \ No newline at end of file diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js index 4a86259..2f4ea17 100644 --- a/src/services/vehiclesAPI.js +++ b/src/services/vehiclesAPI.js @@ -261,8 +261,8 @@ const vehiclesAPI = { .catch(errorHandler) }, - getAllFlashpacks: async (options, token) => { - return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_versions`, options), { + getAllFlashpacks: async (model, trim, year, options, token) => { + return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_versions/${model}/${trim}/${year}`, options), { method: "GET", headers: Object.assign( { "Content-Type": "application/json" },