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
This commit is contained in:
Tristan Timblin
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -16,6 +16,101 @@ 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 MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
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 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||
/>
|
||||
</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 +359,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 +485,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 +582,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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -312,7 +312,13 @@ const useStyles = makeStyles((theme) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "12px",
|
||||
}
|
||||
},
|
||||
flex: {
|
||||
display: "flex",
|
||||
},
|
||||
noWrap: {
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
}));
|
||||
|
||||
export default useStyles;
|
||||
|
||||
Reference in New Issue
Block a user