CEC-2207 Add is-online filter for vehicles list (#187)

* Add OptionsDropdown component

* Add is-online filter

src/components/Cars/List/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid } from "@material-ui/core";
+import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import { Link } from "react-router-dom";
 import clsx from "clsx";
@@ -10,10 +10,12 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
+import OptionsDropdown from "../../Controls/OptionsDropdown";
 
 const MainForm = () => {
   const classes = useStyles();
   const [search, setSearch] = useState("");
+  const [online, setOnline] = useState(false);
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -25,6 +27,10 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const handleOnline = (event) => {
+    setOnline(event.target.checked);
+  }
+
   useEffect(() => {
     setTitle("Vehicles");
     setSitePath([]);
@@ -42,13 +48,25 @@ const MainForm = () => {
         <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
-        <Grid item md={4} className={classes.textRightAlign} />
+        <Grid item md={2} className={classes.textJustifyAlign}>
+          <OptionsDropdown listId='filter-menu'>
+            <MenuItem>
+              <FormControlLabel control={
+                <Checkbox
+                  checked={online}
+                  onChange={handleOnline}
+                />
+              } label="Only online" />
+            </MenuItem>
+          </OptionsDropdown>
+        </Grid>
+        <Grid item md={2} className={classes.textRightAlign} />
       </Grid>
       <CarSelectionTable
         classes={classes}
         token={token}
         multiSelect={false}
-        search={{ search }}
+        search={{ search, online: online? true : null}}
       />
     </div>
   );