CEC-4546: add ecu search (#391)

* CEC-4546: add ecu search

* CEC-4546: add checkbox to filter current

* add column

* set initial state to true for unique

src/components/Cars/Status/ECUsTab.jsx

@@ -1,13 +1,22 @@
-import { Typography } from "@material-ui/core";
+import {
+  Typography,
+  Grid,
+  FormControlLabel,
+  Checkbox,
+} from "@material-ui/core";
 import clsx from "clsx";
-import React from "react";
+import React, { useState } from "react";
 
 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useLocalStorage } from "../../useLocalStorage";
 import CarECUsTable from "../../Controls/CarECUsTable";
+import SearchField from "../../Controls/SearchField";
 import useStyles from "../../useStyles";
 
 const MainForm = ({ vin }) => {
+  const [search, setSearch] = useLocalStorage("ECU_SEARCH", "");
+  const [unique, setUnique] = useState(true);
   const classes = useStyles();
   const {
     token: {
@@ -15,12 +24,35 @@ const MainForm = ({ vin }) => {
     },
   } = useUserContext();
 
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
+
+  const handleUnique = () => {
+    setUnique(unique => !unique);
+  }
+
   return (
     <div className={clsx(classes.tableSize, classes.textCenterAlign)}>
       <Typography variant="h6" className={classes.labelInline}>
         Car ECUs
       </Typography>
-      <CarECUsTable vin={vin} token={token} classes={classes} />
+      <Grid
+        container
+        className={classes.textCenterAlign}
+        spacing={2}
+        justifyContent="center"
+      >
+        <Grid item md={5} className={clsx(classes.textCenterAlign, classes.flex)}>
+          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
+          <FormControlLabel
+            label="Current ECUs"
+            control={<Checkbox checked={unique} onChange={handleUnique} />}
+            className={classes.noWrap}
+          />
+        </Grid>
+      </Grid>
+      <CarECUsTable vin={vin} token={token} classes={classes} search={search} unique={unique} />
     </div>
   );
 };