CEC-4772 (#399) (#402)

* CEC-4674: add bulk cancel updates (#386) * add bulk cancel updates * add permission check * remove unused import * make trigger multi-line * 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 * CEC-4745: add vins nullcheck for bulk actions bulk actions (#395) * nullcheck bulk actions * remove unused var * update snapshots * CEC-4772 - carsconnected takes VINs in req body --------- Co-authored-by: Paul Adamsen <117673433+pauladamseniii@users.noreply.github.com> Co-authored-by: Tristan Timblin <ttimblin@fiskerinc.com>
2023-07-26 11:01:58 -08:00
parent a53a144411
commit 01d13a5cac
8 changed files with 192 additions and 12 deletions
--- a/src/components/Cars/Status/ECUsTab.jsx
+++ b/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>
  );
 };
--- a/src/components/Cars/Status/snapshots/ECUsTab.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/ECUsTab.test.jsx.snap
@@ -16,6 +16,102 @@ exports[`ECUsTab Render 1`] = `
        >
          Car ECUs
        </h6>
+        <div
+          class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-justify-content-xs-center"
+        >
+          <div
+            class="MuiGrid-root makeStyles-textCenterAlign-0 makeStyles-flex-0 MuiGrid-item MuiGrid-grid-md-5"
+          >
+            <div
+              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                data-shrink="false"
+                for="search"
+              >
+                Search
+              </label>
+              <div
+                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                  id="search"
+                  type="text"
+                  value=""
+                />
+                <div
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                >
+                  <button
+                    aria-label="search"
+                    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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <label
+              class="MuiFormControlLabel-root makeStyles-noWrap-0"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    checked=""
+                    class="PrivateSwitchBase-input-0"
+                    data-indeterminate="false"
+                    type="checkbox"
+                    value=""
+                  />
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </span>
+              <span
+                class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+              >
+                Current ECUs
+              </span>
+            </label>
+          </div>
+        </div>
        <div
          class="MuiTableContainer-root"
        >
@@ -264,6 +360,29 @@ exports[`ECUsTab Render 1`] = `
                    </svg>
                  </span>
                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Epoch
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
              </tr>
            </thead>
            <tbody
@@ -367,6 +486,14 @@ exports[`ECUsTab Render 1`] = `
                >
                  7/14/2021 8:09:40 PM
                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
+                >
+                  <span
+                    class=""
+                    title="none"
+                  />
+                </td>
              </tr>
              <tr
                class="MuiTableRow-root"
@@ -456,6 +583,14 @@ exports[`ECUsTab Render 1`] = `
                >
                  7/14/2021 8:09:40 PM
                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
+                >
+                  <span
+                    class=""
+                    title="none"
+                  />
+                </td>
              </tr>
            </tbody>
            <tfoot
--- a/src/components/Contexts/FleetContext.jsx
+++ b/src/components/Contexts/FleetContext.jsx
@@ -113,7 +113,7 @@ export const FleetProvider = ({ children }) => {
        throw new Error(`Get fleet vehicles error. ${result.message}`);
      }

-      const connectionsResult = await vehiclesAPI.getConnections(result.data, token)
+      const connectionsResult = await vehiclesAPI.getConnections({ "VINs": result.data }, token)
      if (result.error) {
        setFleetVehicles([])
        throw new Error(`Get vehicles connections error. ${result.message}`);
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -35,7 +35,7 @@ export const VehicleProvider = ({ children }) => {
    try {
      if (cars.length === 0) return;
      const vins = cars.map((car) => car.vin);
-      const result = await api.getConnections(vins, token);
+      const result = await api.getConnections({ "VINs": vins }, token);

      if (result.error) {
        throw new Error(`Add connections error. ${result.message}`);
@@ -80,7 +80,7 @@ export const VehicleProvider = ({ children }) => {
  const getConnections = async (vins, token) => {
    try {
      setBusy(true);
-      const result = await api.getConnections(vins, token);
+      const result = await api.getConnections({ "VINs": vins }, token);
      if (result.error)
        throw new Error(`Get connections error. ${result.message}`);
      return result;
--- a/src/components/Controls/CarECUsTable/index.jsx
+++ b/src/components/Controls/CarECUsTable/index.jsx
@@ -58,11 +58,15 @@ const tableColumns = [
    id: "updated_at",
    label: "Updated",
  },
+  {
+    id: "epoch_usec",
+    label: "Epoch",
+  },
 ];

 const PAGE_SIZE = "CAR_ECUS_TABLE_PAGE_SIZE";

-const CarECUsTable = ({ vin, token, classes }) => {
+const CarECUsTable = ({ vin, token, classes, search, unique }) => {
  const [ecus, setECUs] = useState([]);
  const [total, setTotal] = useState(0);
  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
@@ -79,6 +83,8 @@ const CarECUsTable = ({ vin, token, classes }) => {
        const result = await getECUs(
          {
            vin,
+            search,
+            unique,
            limit: pageSize,
            offset: pageSize * pageIndex,
            order: `${orderBy} ${order}`,
@@ -93,7 +99,7 @@ const CarECUsTable = ({ vin, token, classes }) => {
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin, token, pageIndex, pageSize, orderBy, order]);
+  }, [vin, token, pageIndex, pageSize, orderBy, order, search, unique]);

  const handleChangePageIndex = (event, newIndex) => {
    setPageIndex(newIndex);
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -312,7 +312,13 @@ const useStyles = makeStyles((theme) => ({
    display: "flex",
    alignItems: "center",
    gap: "12px",
-  }
+  },
+  flex: {
+    display: "flex",
+  },
+  noWrap: {
+    whiteSpace: "nowrap",
+  },
 }));

 export default useStyles;
--- a/src/services/mocks/vehiclesAPI.js
+++ b/src/services/mocks/vehiclesAPI.js
@@ -116,7 +116,7 @@ const vehiclesAPI = {
  getConnections: async (vins) => {
    const result = {};

-    vins.forEach((vin) => {
+    vins.VINs.forEach((vin) => {
      result[vin] = true;
      result["2:" + vin] = false;
    });
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -41,13 +41,14 @@ const vehiclesAPI = {
      .catch(errorHandler),

  getConnections: async (vins, token) => {
-    const u = `${API_ENDPOINT}/carsconnected?vins=${vins.join(",")}`;
+    const u = `${API_ENDPOINT}/carsconnected`;
    return fetch(u, {
-      method: "GET",
+      method: "POST",
      headers: Object.assign(
        { "Content-Type": "application/json" },
        getAuthHeaderOptions(token)
      ),
+      body: JSON.stringify(vins),
    })
      .then(fetchRespHandler)
      .catch(errorHandler);