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

* Add OptionsDropdown component

* Add is-online filter

src/components/Cars/List/__snapshots__/index.test.jsx.snap

@@ -93,7 +93,37 @@ exports[`VehicleTable Render 1`] = `
                 </div>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+              >
+                <div>
+                  <button
+                    aria-haspopup="true"
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
               />
             </div>
             <div

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>
   );