CEC-252, CEC-253 Remove modal status popup, new car selection control (#45)

* Create multiselect car table control
Remove table overflow containers

* Include trim to add car form

* CEC-252 Replace modal status with link to car details page

* Remove send command from car status page
Fix menu key warning

src/components/Cars/SendCommandBulk/index.jsx

@@ -1,124 +1,32 @@
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import {
-  Checkbox,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableFooter,
-  TablePagination,
-  TableRow,
-  Toolbar,
-} from "@material-ui/core";
+import { Grid } from "@material-ui/core";
 
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
-import { LocalDateTimeString } from "../../../utils/dates";
-import TableHeaderSortable from "../../Table/HeaderSortable";
 import SendCommand from "../SendCommand";
 import SearchField from "../../Controls/SearchField";
-
-const tableColumns = [
-  {
-    id: "vin",
-    label: "VIN",
-  },
-  {
-    id: "model",
-    label: "Model",
-  },
-  {
-    id: "year",
-    label: "Year",
-  },
-  {
-    id: "trim",
-    label: "Trim",
-  },
-  {
-    id: "created_at",
-    label: "Created",
-  },
-  {
-    id: "updated_at",
-    label: "Updated",
-  },
-];
+import CarSelectionTable from "../CarSelectionTable";
 
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("vin");
-  const [order, setOrder] = useState("asc");
   const [selected, setSelected] = useState([]);
   const [search, setSearch] = useState("");
-  const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setTitle } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
     },
   } = useUserContext();
 
-  const sortHandler = (event, property) => {
-    if (property === orderBy) {
-      if (order === "asc") {
-        setOrder("desc");
-      } else {
-        setOrder("asc");
-      }
-    } else {
-      setOrderBy(property);
-      setOrder("asc");
-    }
+  const handleSearch = (search) => {
+    setSelected([]);
+    setSearch(search);
   };
 
-  useEffect(() => {
-    setTitle("Send Command");
-    // eslint-disable-next-line
-  }, []);
-
-  useEffect(() => {
-    try {
-      getVehicles(
-        {
-          limit: pageSize,
-          offset: pageSize * pageIndex,
-          order: `${orderBy} ${order}`,
-          search,
-        },
-        token
-      );
-    } catch (e) {
-      setMessage(e.message);
-    }
-    // eslint-disable-next-line
-  }, [pageIndex, pageSize, token, orderBy, order, search]);
-
-  const handleChangePageIndex = (event, newIndex) => {
-    setPageIndex(newIndex);
-  };
-
-  const handleChangePageSize = (event) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPageIndex(0);
-  };
-
-  const handleSelectAll = (event) => {
-    const newSelected = [];
-    if (event.target.checked) {
-      vehicles.forEach((car) => {
-        newSelected.push(car.vin);
-      });
-    }
-    setSelected(newSelected);
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
   };
 
   const handleSelect = (event, key) => {
@@ -132,76 +40,32 @@ const MainForm = () => {
     setSelected(newSelected);
   };
 
-  const handleSearch = (search) => {
-    setSelected([]);
-    setSearch(search);
-  };
+  useEffect(() => {
+    setTitle("Send Command");
+    // eslint-disable-next-line
+  }, []);
 
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
-      <Toolbar className={classes.tableToolbar}>
-        <SearchField classes={classes} onSearch={handleSearch} />
-      </Toolbar>
-      <TableContainer>
-        <Table>
-          <TableHeaderSortable
-            classes={classes}
-            orderBy={orderBy}
-            order={order}
-            columnData={tableColumns}
-            onSortRequest={sortHandler}
-            multiSelect={true}
-            onSelectAll={handleSelectAll}
-            selectCount={selected.length}
-            rowCount={totalVehicles}
-          />
-          <TableBody>
-            {vehicles.map((row) => {
-              const isSelected = selected.indexOf(row.vin) !== -1;
-              return (
-                <TableRow key={row.vin}>
-                  <TableCell padding="checkbox">
-                    <Checkbox
-                      checked={isSelected}
-                      onChange={(event) => handleSelect(event, row.vin)}
-                    />
-                  </TableCell>
-                  <TableCell align="center" sortDirection={true}>
-                    <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
-                  </TableCell>
-                  <TableCell align="center">{row.model}</TableCell>
-                  <TableCell align="center">{row.year}</TableCell>
-                  <TableCell align="center">{row.trim || ""}</TableCell>
-                  <TableCell align="center">
-                    {LocalDateTimeString(row.created)}
-                  </TableCell>
-                  <TableCell align="center">
-                    {LocalDateTimeString(row.updated)}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={7}
-                count={totalVehicles}
-                rowsPerPage={pageSize}
-                page={pageIndex}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePageIndex}
-                onChangeRowsPerPage={handleChangePageSize}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-      <SendCommand vins={selected} />
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={6}>
+          <SearchField classes={classes} onSearch={handleSearch} />
+          <div
+            className={classes.labelInline}
+          >{`${selected.length} Selected`}</div>
+        </Grid>
+        <Grid item md={6} style={{ textAlign: "right" }}>
+          <SendCommand vins={selected} style={{ display: "flex" }} />
+        </Grid>
+      </Grid>
+      <CarSelectionTable
+        classes={classes}
+        token={token}
+        search={{ search }}
+        selected={selected}
+        onSelect={handleSelect}
+        onSelectAll={handleSelectAll}
+      />
     </div>
   );
 };