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" },