CEC-231 Bulk car selection control (#38)

* Bulk car selection control * Tweak control alignment
2021-05-07 15:27:14 -07:00
parent dc30ee259a
commit fe6739a736
15 changed files with 743 additions and 494 deletions
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -117,17 +117,12 @@ describe("App", () => {
    await check("/update/1", "h1", "Edit Update Package 1");
  });

-  it("Route /carupdate-deploy authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/carupdate-deploy/1", "h1", "Deploy   [1]");
-  });
-
  it("Route /carupdate-status authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
    await check("/carupdate-status/1", "h1", "");
  });

-  it("Route /vehicles authenticated", async () => {
+ it("Route /vehicles authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
    await check("/vehicles", "h1", "Vehicles");
  });
@@ -145,4 +140,9 @@ describe("App", () => {
    setToken(TEST_AUTH_OBJECT);
    await check("/page-not-found", "h1", "Page Not Found");
  });
-})
+
+  it("Route /carupdate-deploy authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/carupdate-deploy/1", "h1", "Deploy   [1]");
+  });
+});
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/src/components/App/snapshots/App.test.js.snap
--- a/src/components/CarUpdates/Deploy/index.jsx
+++ b/src/components/CarUpdates/Deploy/index.jsx
@@ -1,36 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
-import {
-  Button,
-  Chip,
-  FormControl,
-  Input,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-  Typography,
-  useTheme,
-} from "@material-ui/core";
+import { Button, TextField, Typography } from "@material-ui/core";

 import {
  UpdatesProvider,
  useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
+import CarSelection from "../../Cars/CarSelection";
 import useStyles from "../../useStyles";
 import { tsLocalDateTimeString } from "../../../utils/dates";
-import menuItemStyle from "../../menuItemStyle";

 const MainForm = () => {
  const { packageid } = useParams();
  const { getPackages, createCarUpdates, packages, busy } = useUpdatesContext();
-  const { getVehicles, vehicles } = useVehicleContext();
  const {
    token: {
      idToken: { jwtToken: token },
@@ -46,10 +30,7 @@ const MainForm = () => {
  const [selectedVehicles, setSelectedVehicles] = useState([]);
  const [redirect, setRedirect] = useState("");
  const classes = useStyles();
-  const theme = useTheme();
-  const handleVehiclesChange = (event) => {
-    setSelectedVehicles(event.target.value);
-  };
+
  const onSubmit = async (event) => {
    try {
      event.preventDefault();
@@ -73,17 +54,12 @@ const MainForm = () => {
      setMessage(e.message);
    }
  };
-  const handleCarOpen = async () => {
-    try {
-      await getVehicles(null, token);
-    } catch (e) {
-      setMessage(e.message);
-    }
-  };
+
  useEffect(() => {
    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);
+
  useEffect(() => {
    if (!packages || packages.length === 0) return;
    var data = packages[0];
@@ -160,43 +136,7 @@ const MainForm = () => {
          fullWidth
          placeholder="Release Notes URL"
        />
-        <FormControl
-          className={classes.formControl}
-          variant="outlined"
-          fullWidth
-        >
-          <InputLabel htmlFor="vehicles">Vehicles</InputLabel>
-          <Select
-            label="Vehicles"
-            placeholder="Select vehicles"
-            id="vehicles"
-            name="vehicles"
-            multiple
-            className={classes.menuProps}
-            variant="outlined"
-            onOpen={handleCarOpen}
-            onChange={handleVehiclesChange}
-            value={selectedVehicles}
-            input={<Input id="select-multiple-chip" />}
-            renderValue={(selected) => (
-              <div className={classes.chips}>
-                {selected.map((value) => (
-                  <Chip key={value} label={value} className={classes.chip} />
-                ))}
-              </div>
-            )}
-          >
-            {vehicles.map((vehicle) => (
-              <MenuItem
-                key={vehicle.vin}
-                value={vehicle.vin}
-                style={menuItemStyle(vehicle, selectedVehicles, theme)}
-              >
-                {vehicle.vin}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        <CarSelection onSelection={setSelectedVehicles} />
        <Button
          type="submit"
          disabled={busy}
@@ -214,11 +154,9 @@ const MainForm = () => {
 };

 const UpdatePackageDeployForm = () => (
-  <VehicleProvider>
-    <UpdatesProvider>
-      <MainForm />
-    </UpdatesProvider>
-  </VehicleProvider>
+  <UpdatesProvider>
+    <MainForm />
+  </UpdatesProvider>
 );

 export default UpdatePackageDeployForm;
--- a/src/components/Cars/CarSelection/index.jsx
+++ b/src/components/Cars/CarSelection/index.jsx
@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { FormControl, InputLabel, Select } from "@material-ui/core";
+
+import {
+  useVehicleContext,
+  VehicleProvider,
+} from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import useStyles from "../../useStyles";
+
+const Control = (props) => {
+  const classes = useStyles();
+  const {
+    models,
+    years,
+    vehicles,
+    getModels,
+    getYears,
+    getVehicles,
+  } = useVehicleContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const [model, setModel] = useState("");
+  const [year, setYear] = useState(-1);
+
+  const handleChangeModel = (event) => {
+    setModel(event.target.value);
+  };
+  const handleChangeYear = (event) => {
+    setYear(event.target.value);
+  };
+
+  useEffect(() => {
+    if (!token) return;
+    (async () => {
+      try {
+        await getModels(token);
+        await getYears(token);
+      } catch (e) {}
+    })();
+    // eslint-disable-next-line
+  }, [token]);
+
+  useEffect(() => {
+    if (!models || models.length === 0) return;
+    setModel(models[0]);
+  }, [models]);
+
+  useEffect(() => {
+    if (!years || years.length === 0) return;
+    setYear(years[0]);
+  }, [years]);
+
+  useEffect(() => {
+    if (model === null || year === -1) return;
+    getVehicles({ model, year }, token);
+    // eslint-disable-next-line
+  }, [model, year]);
+
+  useEffect(() => {
+    if (!props.onSelection) return;
+    const vins = vehicles.map((item) => item.vin);
+    props.onSelection(vins);
+    // eslint-disable-next-line
+  }, [vehicles]);
+
+  return (
+    <div className={classes.form}>
+      <FormControl className={classes.formControlInline} variant="outlined">
+        <InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}>
+          Model
+        </InputLabel>
+        <Select
+          native
+          value={model}
+          onChange={handleChangeModel}
+          variant="outlined"
+          inputProps={{
+            name: "car-model",
+            id: "car-model",
+          }}
+        >
+          {models.map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControlInline} variant="outlined">
+        <InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}>
+          Year
+        </InputLabel>
+        <Select
+          native
+          value={year}
+          onChange={handleChangeYear}
+          variant="outlined"
+          inputProps={{
+            name: "car-year",
+            id: "car-year",
+          }}
+        >
+          {years.map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <div className={classes.labelInline}>
+        {vehicles.length === 0
+          ? "No Cars Selected"
+          : vehicles.length === 1
+          ? "1 Car Selected"
+          : `${vehicles.length} Cars Selected`}
+      </div>
+    </div>
+  );
+};
+
+const CarSelection = (props) => (
+  <VehicleProvider>
+    <Control {...props} />
+  </VehicleProvider>
+);
+
+CarSelection.propTypes = {
+  onSelection: PropTypes.func,
+};
+
+export default CarSelection;
--- a/src/components/Contexts/UpdatesContext.jsx
+++ b/src/components/Contexts/UpdatesContext.jsx
@@ -226,6 +226,6 @@ const validateCreateCarUpdates = (data) => {
  }

  if (!data.vins || data.vins.length === 0) {
-    throw new Error("Car ids required");
+    throw new Error("Cars are required");
  }
 };
--- a/src/components/Contexts/UpdatesContext.test.jsx
+++ b/src/components/Contexts/UpdatesContext.test.jsx
@@ -273,7 +273,7 @@ describe("UpdatesContext", () => {
      await waitFor(() =>
        expect(screen.getByTestId("busy").innerHTML).toBe("false")
      );
-      checkState("false", "Car ids required", null);
+      checkState("false", "Cars are required", null);
    });

    it("with-good-data", async () => {
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -29,6 +29,8 @@ export const VehicleProvider = ({ children }) => {
  const [busy, setBusy] = useState(false);
  const [vehicles, setVehicles] = useState([]);
  const [totalVehicles, setTotalVehicles] = useState(0);
+  const [models, setModels] = useState([]);
+  const [years, setYears] = useState([]);

  const getVehicles = async (search, token) => {
    try {
@@ -60,14 +62,40 @@ export const VehicleProvider = ({ children }) => {
    }
  };

+  const getModels = async (token) => {
+    try {
+      setBusy(true);
+      const result = await api.getModels(token);
+      if (result.error) throw new Error(`Get models error. ${result.message}`);
+      setModels(result.data);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const getYears = async (token) => {
+    try {
+      setBusy(true);
+      const result = await api.getYears(token);
+      if (result.error) throw new Error(`Get years error. ${result.message}`);
+      setYears(result.data);
+    } finally {
+      setBusy(false);
+    }
+  };
+
  return (
    <VehicleContext.Provider
      value={{
        busy,
        vehicles,
        totalVehicles,
+        models,
+        years,
        getVehicles,
        addVehicle,
+        getModels,
+        getYears,
      }}
    >
      {children}
--- a/src/components/Contexts/mocks/VehicleContext.jsx
+++ b/src/components/Contexts/mocks/VehicleContext.jsx
@@ -2,6 +2,8 @@ import React from "react";

 let busy = false;
 let vehicles = [];
+let models = ["Ocean", "PEAR"];
+let years = [2023, 2024];
 let totalVehicles = 0;
 let error = null;

@@ -13,8 +15,16 @@ export const useVehicleContext = () => ({
  busy,
  vehicles,
  totalVehicles,
+  models,
+  years,
  getVehicles: jest.fn(() => vehicles),
  addVehicle: jest.fn(),
+  getModels: jest.fn(() => {
+    models = ["Ocean", "PEAR"];
+  }),
+  getYears: jest.fn(() => {
+    years = [2023, 2024];
+  }),
 });

 export const setBusy = (val) => {
--- a/src/components/Layouts/SideMenu.jsx
+++ b/src/components/Layouts/SideMenu.jsx
@@ -16,7 +16,7 @@ const menuData = [
    roles: [Roles.CREATE, Roles.READ],
  },
  {
-    label: "Create Packages",
+    label: "Create Package",
    to: "/package-upload",
    roles: [Roles.CREATE],
  },
@@ -26,7 +26,7 @@ const menuData = [
    roles: [Roles.CREATE, Roles.READ],
  },
  {
-    label: "Add Vehicles",
+    label: "Add Vehicle",
    to: "/vehicle-add",
    roles: [Roles.CREATE],
  },
--- a/src/components/Layouts/snapshots/SideMenu.test.jsx.snap
+++ b/src/components/Layouts/snapshots/SideMenu.test.jsx.snap
@@ -66,7 +66,7 @@ exports[`SideMenu Authenticated 1`] = `
            <span
              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
            >
-              Create Packages
+              Create Package
            </span>
          </div>
          <span
@@ -110,7 +110,7 @@ exports[`SideMenu Authenticated 1`] = `
            <span
              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
            >
-              Add Vehicles
+              Add Vehicle
            </span>
          </div>
          <span
--- a/src/components/UpdatePackages/Create/snapshots/Create.test.js.snap
+++ b/src/components/UpdatePackages/Create/snapshots/Create.test.js.snap
@@ -51,10 +51,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
              >
                <span>
                  Package name
@@ -97,10 +97,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
              >
                <span>
                  Version
@@ -143,10 +143,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
              >
                <span>
                  Description
@@ -190,10 +190,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
              >
                <span>
                  Release Notes URL
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -39,6 +39,15 @@ const useStyles = makeStyles((theme) => ({
    width: "100%",
    minWidth: 120,
  },
+  formControlInline: {
+    margin: theme.spacing(2, 2, 1, 0),
+    minWidth: 120,
+  },
+  labelInline: {
+    fontSize: "1.25em",
+    margin: theme.spacing(4, 2, 2, 0),
+    display: "inline-flex",
+  },
  chips: {
    display: "flex",
    flexWrap: "wrap",