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

* Add OptionsDropdown component

* Add is-online filter

src/components/App/__snapshots__/App.test.js.snap

@@ -9056,7 +9056,37 @@ exports[`App Route /vehicles authenticated 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/__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>
   );

src/components/Controls/OptionsDropdown/index.jsx

@@ -0,0 +1,77 @@
+import React, {useEffect, useRef, useState} from "react";
+import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
+import TuneIcon from "@material-ui/icons/Tune";
+
+
+const OptionsDropdown = ({listId, children}) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const prevOpen = useRef(open);
+
+  const handleToggle = () => {
+    setOpen((pOpen) => !pOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleListKeyDown = (event) => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (<div>
+      <IconButton
+        ref={anchorRef}
+        aria-controls={open ? listId : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <TuneIcon />
+      </IconButton>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+        {({TransitionProps, placement}) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement ===
+                'bottom' ?
+                  'center top' :
+                  'center bottom'
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  autoFocusItem={open}
+                  id={listId}
+                  onKeyDown={handleListKeyDown}
+                >
+                  {children}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+}
+
+export default OptionsDropdown;