admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
John Wu
2021-06-01 13:16:13 -07:00
committed by GitHub
parent 5943b42a91
commit c36f6976f7
15 changed files with 3096 additions and 2876 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4922
src/components/App/__snapshots__/App.test.js.snap
View File

File diff suppressed because it is too large Load Diff

85
src/components/CarUpdates/Deploy/index.jsx
View File

@@ -1,15 +1,17 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams, Redirect } from "react-router"; import { useParams, Redirect } from "react-router";
import { Button, Typography } from "@material-ui/core"; import { Button, Grid, Typography } from "@material-ui/core";
import { import {
UpdatesProvider, UpdatesProvider,
useUpdatesContext, useUpdatesContext,
} from "../../Contexts/UpdatesContext"; } from "../../Contexts/UpdatesContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext"; import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext"; import { useStatusContext } from "../../Contexts/StatusContext";
import CarSelection from "../../Cars/CarSelection";
import useStyles from "../../useStyles"; import useStyles from "../../useStyles";
import { tsLocalDateTimeString } from "../../../utils/dates"; import { tsLocalDateTimeString } from "../../../utils/dates";
import SearchField from "../../Controls/SearchField";
import CarSelectionTable from "../../Cars/CarSelectionTable";
const MainForm = () => { const MainForm = () => {
const { packageid } = useParams(); const { packageid } = useParams();
@@ -24,20 +26,41 @@ const MainForm = () => {
const [version, setVersion] = useState(""); const [version, setVersion] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [createDate, setCreateDate] = useState(""); const [createDate, setCreateDate] = useState("");
const [selectedVehicles, setSelectedVehicles] = useState([]); const [selected, setSelected] = useState([]);
const [search, setSearch] = useState("");
const [redirect, setRedirect] = useState(""); const [redirect, setRedirect] = useState("");
const classes = useStyles(); const classes = useStyles();
const handleSearch = (search) => {
setSelected([]);
setSearch(search);
};
const handleSelectAll = (cars) => {
setSelected(cars);
};
const handleSelect = (event, key) => {
let newSelected;
if (event.target.checked) {
newSelected = [...selected];
newSelected.push(key);
} else {
newSelected = selected.filter((vin) => vin !== key);
}
setSelected(newSelected);
};
const onSubmit = async (event) => { const onSubmit = async (event) => {
try { try {
event.preventDefault(); event.preventDefault();
const data = { const data = {
package_id: parseInt(packageid), package_id: parseInt(packageid),
vins: selectedVehicles, vins: selected,
}; };
await createCarUpdates(data, token); await createCarUpdates(data, token);
setMessage( setMessage(
`Deployed ${packageName} ${version} to ${selectedVehicles.length} cars` `Deployed ${packageName} ${version} to ${selected.length} cars`
); );
setRedirect(`/carupdate-status/${packageid}`); setRedirect(`/carupdate-status/${packageid}`);
} catch (e) { } catch (e) {
@@ -80,30 +103,48 @@ const MainForm = () => {
<div className={classes.paper}> <div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}"> <form className={classes.form} noValidate action="{onSubmit}">
<Typography variant="body2"> <Typography variant="body2">
Created {createDate}. {description} Created {createDate}. {description || "No description"}
</Typography> </Typography>
<hr style={{ marginBottom: 30, marginTop: 30 }} /> <Grid container className={classes.root} spacing={2}>
<CarSelection onSelection={setSelectedVehicles} /> <Grid item md={10}>
<Button <SearchField classes={classes} onSearch={handleSearch} />
type="submit" <div
disabled={busy} className={classes.labelInline}
fullWidth >{`${selected.length} Selected`}</div>
variant="contained" </Grid>
color="primary" <Grid item md={2} style={{ textAlign: "right" }}>
className={classes.submit} <Button
onClick={onSubmit} type="submit"
> disabled={busy || selected.length === 0}
{busy ? "Deploying..." : "Deploy"} fullWidth
</Button> variant="contained"
color="primary"
className={classes.formControl}
onClick={onSubmit}
>
{busy ? "Deploying..." : "Deploy"}
</Button>
</Grid>
</Grid>
<CarSelectionTable
classes={classes}
token={token}
search={{ search }}
selected={selected}
onSelect={handleSelect}
onSelectAll={handleSelectAll}
/>
</form> </form>
</div> </div>
); );
}; };
const UpdatePackageDeployForm = () => ( const UpdatePackageDeployForm = () => (
<UpdatesProvider> <VehicleProvider>
<MainForm /> <UpdatesProvider>
</UpdatesProvider> <MainForm />
</UpdatesProvider>
</VehicleProvider>
); );
export default UpdatePackageDeployForm; export default UpdatePackageDeployForm;

119
src/components/CarUpdates/Status/index.jsx
View File

@@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import { Link } from "react-router-dom";
import { import {
LinearProgress, LinearProgress,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableContainer,
TableFooter, TableFooter,
TableHead, TableHead,
TablePagination, TablePagination,
@@ -20,14 +20,12 @@ import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext"; import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles"; import useStyles from "../../useStyles";
import { LocalDateTimeString } from "../../../utils/dates"; import { LocalDateTimeString } from "../../../utils/dates";
import VehicleStatus from "../../Cars/StatusModal";
const MainForm = () => { const MainForm = () => {
const { packageid } = useParams(); const { packageid } = useParams();
const classes = useStyles(); const classes = useStyles();
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const [pageIndex, setPageIndex] = useState(0); const [pageIndex, setPageIndex] = useState(0);
const [viewVIN, setViewVIN] = useState(null);
const { const {
getCarUpdates, getCarUpdates,
carUpdates, carUpdates,
@@ -99,75 +97,58 @@ const MainForm = () => {
setPageIndex(0); setPageIndex(0);
}; };
const handleViewVIN = (event) => {
event.preventDefault();
setViewVIN(event.target.innerHTML);
};
const handleCloseViewVIN = (event) => {
setViewVIN(null);
};
return ( return (
<div className={classes.paper} style={{ height: 700, width: "100%" }}> <div className={classes.paper} style={{ height: 700, width: "100%" }}>
<TableContainer> <Table>
<Table> <TableHead>
<TableHead> <TableRow>
<TableRow> <TableCell align="center">ID</TableCell>
<TableCell align="center">ID</TableCell> <TableCell align="center">Vehicle</TableCell>
<TableCell align="center">Vehicle</TableCell> <TableCell align="center">Status</TableCell>
<TableCell align="center">Status</TableCell> <TableCell align="center">Created</TableCell>
<TableCell align="center">Created</TableCell> <TableCell align="center">Updated</TableCell>
<TableCell align="center">Updated</TableCell> </TableRow>
</TableHead>
<TableBody>
{carUpdates.map((row) => (
<TableRow key={row.id}>
<TableCell align="center">{row.id}</TableCell>
<TableCell align="center">
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
</TableCell>
<TableCell align="center">
{row.status}
{row.progress > 0 && (
<LinearProgress variant="determinate" value={row.progress} />
)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.created)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.updated)}
</TableCell>
</TableRow> </TableRow>
</TableHead> ))}
<TableBody> </TableBody>
{carUpdates.map((row) => ( <TableFooter>
<TableRow key={row.id}> <TableRow>
<TableCell align="center">{row.id}</TableCell> <TablePagination
<TableCell align="center"> rowsPerPageOptions={[5, 10, 25, 100]}
<span className={classes.link} onClick={handleViewVIN}> colSpan={5}
{row.vin} count={totalCarUpdates}
</span> rowsPerPage={pageSize}
</TableCell> page={pageIndex}
<TableCell align="center"> SelectProps={{
{row.status} inputProps: { "aria-label": "rows per page" },
{row.progress > 0 && ( native: true,
<LinearProgress }}
variant="determinate" onChangePage={handleChangePageIndex}
value={row.progress} onChangeRowsPerPage={handleChangePageSize}
/> />
)} </TableRow>
</TableCell> </TableFooter>
<TableCell align="center"> </Table>
{LocalDateTimeString(row.created)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.updated)}
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={5}
count={totalCarUpdates}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
<VehicleStatus vin={viewVIN} handleClose={handleCloseViewVIN} />
</div> </div>
); );
}; };

17
src/components/Cars/Add/index.jsx
View File

@@ -21,6 +21,7 @@ const MainForm = () => {
const vinEl = useRef(null); const vinEl = useRef(null);
const modelEl = useRef(null); const modelEl = useRef(null);
const yearEl = useRef(null); const yearEl = useRef(null);
const trimEl = useRef(null);
useEffect(() => { useEffect(() => {
setTitle("Add Vehicle"); setTitle("Add Vehicle");
@@ -34,6 +35,7 @@ const MainForm = () => {
vin: vinEl.current.value, vin: vinEl.current.value,
model: modelEl.current.value, model: modelEl.current.value,
year: parseInt(yearEl.current.value), year: parseInt(yearEl.current.value),
trim: trimEl.current.value,
}; };
const result = await addVehicle(formData, token); const result = await addVehicle(formData, token);
@@ -91,6 +93,21 @@ const MainForm = () => {
fullWidth fullWidth
inputRef={yearEl} inputRef={yearEl}
/> />
<TextField
id="trim"
name="trim"
label="Trim"
defaultValue="Base"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "4",
minLength: "4",
}}
required
fullWidth
inputRef={trimEl}
/>
<Button <Button
type="submit" type="submit"
disabled={busy} disabled={busy}

140
src/components/Cars/CarSelection/index.jsx
View File

@@ -11,14 +11,8 @@ import useStyles from "../../useStyles";
const Control = (props) => { const Control = (props) => {
const classes = useStyles(); const classes = useStyles();
const { const { models, years, vehicles, getModels, getYears, getVehicles } =
models, useVehicleContext();
years,
vehicles,
getModels,
getYears,
getVehicles,
} = useVehicleContext();
const { const {
token: { token: {
idToken: { jwtToken: token }, idToken: { jwtToken: token },
@@ -26,6 +20,7 @@ const Control = (props) => {
} = useUserContext(); } = useUserContext();
const [model, setModel] = useState(""); const [model, setModel] = useState("");
const [year, setYear] = useState(-1); const [year, setYear] = useState(-1);
const [trim, setTrim] = useState("");
const handleChangeModel = (event) => { const handleChangeModel = (event) => {
setModel(event.target.value); setModel(event.target.value);
@@ -33,6 +28,9 @@ const Control = (props) => {
const handleChangeYear = (event) => { const handleChangeYear = (event) => {
setYear(event.target.value); setYear(event.target.value);
}; };
const handleChangeTrim = (event) => {
setTrim(event.target.value);
};
useEffect(() => { useEffect(() => {
if (!token) return; if (!token) return;
@@ -57,9 +55,9 @@ const Control = (props) => {
useEffect(() => { useEffect(() => {
if (model === null || year === -1) return; if (model === null || year === -1) return;
getVehicles({ model, year }, token); getVehicles({ model, year, trim }, token);
// eslint-disable-next-line // eslint-disable-next-line
}, [model, year]); }, [model, year, trim]);
useEffect(() => { useEffect(() => {
if (!props.onSelection) return; if (!props.onSelection) return;
@@ -69,56 +67,80 @@ const Control = (props) => {
}, [vehicles]); }, [vehicles]);
return ( return (
<div className={classes.form}> <div className={classes.paper}>
<FormControl className={classes.formControlInline} variant="outlined"> <div className={classes.form}>
<InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}> <FormControl className={classes.formControlInline} variant="outlined">
Model <InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}>
</InputLabel> Model
<Select </InputLabel>
native <Select
value={model} native
onChange={handleChangeModel} value={model}
variant="outlined" onChange={handleChangeModel}
inputProps={{ variant="outlined"
name: "car-model", inputProps={{
id: "car-model", name: "car-model",
}} id: "car-model",
> }}
{models.map((item) => ( >
<option key={item} value={item}> {models.map((item) => (
{item} <option key={item} value={item}>
</option> {item}
))} </option>
</Select> ))}
</FormControl> </Select>
<FormControl className={classes.formControlInline} variant="outlined"> </FormControl>
<InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}> <FormControl className={classes.formControlInline} variant="outlined">
Year <InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}>
</InputLabel> Year
<Select </InputLabel>
native <Select
value={year} native
onChange={handleChangeYear} value={year}
variant="outlined" onChange={handleChangeYear}
inputProps={{ variant="outlined"
name: "car-year", inputProps={{
id: "car-year", name: "car-year",
}} id: "car-year",
> }}
{years.map((item) => ( >
<option key={item} value={item}> {years.map((item) => (
{item} <option key={item} value={item}>
</option> {item}
))} </option>
</Select> ))}
</FormControl> </Select>
<div className={classes.labelInline}> </FormControl>
{vehicles.length === 0 <FormControl className={classes.formControlInline} variant="outlined">
? "No Cars Selected" <InputLabel htmlFor="car-trim" style={{ backgroundColor: "White" }}>
: vehicles.length === 1 Trim
? "1 Car Selected" </InputLabel>
: `${vehicles.length} Cars Selected`} <Select
native
value={year}
onChange={handleChangeTrim}
variant="outlined"
inputProps={{
name: "car-trim",
id: "car-trim",
}}
>
{years.map((item) => (
<option key={item} value={item}>
{item}
</option>
))}
</Select>
</FormControl>
<div className={classes.labelInline}>
{vehicles.length === 0
? "No Cars Selected"
: vehicles.length === 1
? "1 Car Selected"
: `${vehicles.length} Cars Selected`}
</div>
</div> </div>
<div className={classes.form}></div>
</div> </div>
); );
}; };

182
src/components/Cars/CarSelectionTable/index.jsx Normal file
View File

@@ -0,0 +1,182 @@
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import {
Checkbox,
Table,
TableBody,
TableCell,
TableFooter,
TablePagination,
TableRow,
} from "@material-ui/core";
import { useVehicleContext } from "../../Contexts/VehicleContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { LocalDateTimeString } from "../../../utils/dates";
import TableHeaderSortable from "../../Table/HeaderSortable";
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",
},
];
const CarSelectionTable = (props) => {
const { token, classes, search, selected, onSelect, onSelectAll } = props;
const [pageSize, setPageSize] = useState(10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("vin");
const [order, setOrder] = useState("asc");
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
const { setMessage } = useStatusContext();
const sortHandler = (event, property) => {
if (property === orderBy) {
if (order === "asc") {
setOrder("desc");
} else {
setOrder("asc");
}
} else {
setOrderBy(property);
setOrder("asc");
}
};
const handleChangePageIndex = (event, newIndex) => {
setPageIndex(newIndex);
};
const handleChangePageSize = (event) => {
setPageSize(parseInt(event.target.value, 10));
setPageIndex(0);
};
const handleSelectAll = (event) => {
if (!onSelectAll) return;
const newSelected = [];
if (event.target.checked) {
vehicles.forEach((car) => {
newSelected.push(car.vin);
});
}
onSelectAll(newSelected);
};
const handleSelect = (event, key) => {
if (!onSelect) return;
onSelect(event, key);
};
useEffect(() => {
const options = {
limit: pageSize,
offset: pageSize * pageIndex,
order: `${orderBy} ${order}`,
};
try {
getVehicles(Object.assign(options, search), token);
} catch (e) {
setMessage(e.message);
}
// eslint-disable-next-line
}, [pageIndex, pageSize, orderBy, order, search, token]);
return (
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
<Table>
<TableHeaderSortable
classes={classes}
orderBy={orderBy}
order={order}
columnData={tableColumns}
onSortRequest={sortHandler}
multiSelect={true}
onSelectAll={handleSelectAll}
selectCount={selected.length}
rowCount={vehicles.length}
/>
<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">
<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>
</div>
);
};
CarSelectionTable.propTypes = {
token: PropTypes.string.isRequired,
classes: PropTypes.object.isRequired,
search: PropTypes.object.isRequired,
selected: PropTypes.array.isRequired,
onSelect: PropTypes.func.isRequired,
onSelectAll: PropTypes.func.isRequired,
};
export default CarSelectionTable;

89
src/components/Cars/List/index.jsx
View File

@@ -4,7 +4,6 @@ import {
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableContainer,
TableFooter, TableFooter,
TablePagination, TablePagination,
TableRow, TableRow,
@@ -117,52 +116,50 @@ const MainForm = () => {
<Toolbar className={classes.tableToolbar}> <Toolbar className={classes.tableToolbar}>
<SearchField classes={classes} onSearch={handleSearch} /> <SearchField classes={classes} onSearch={handleSearch} />
</Toolbar> </Toolbar>
<TableContainer> <Table>
<Table> <TableHeaderSortable
<TableHeaderSortable classes={classes}
classes={classes} orderBy={orderBy}
orderBy={orderBy} order={order}
order={order} columnData={tableColumns}
columnData={tableColumns} onSortRequest={sortHandler}
onSortRequest={sortHandler} />
/> <TableBody>
<TableBody> {vehicles.map((row) => (
{vehicles.map((row) => ( <TableRow key={row.vin}>
<TableRow key={row.vin}> <TableCell align="center" sortDirection={true}>
<TableCell align="center" sortDirection={true}> <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link> </TableCell>
</TableCell> <TableCell align="center">{row.model}</TableCell>
<TableCell align="center">{row.model}</TableCell> <TableCell align="center">{row.year}</TableCell>
<TableCell align="center">{row.year}</TableCell> <TableCell align="center">{row.trim || ""}</TableCell>
<TableCell align="center">{row.trim || ""}</TableCell> <TableCell align="center">
<TableCell align="center"> {LocalDateTimeString(row.created)}
{LocalDateTimeString(row.created)} </TableCell>
</TableCell> <TableCell align="center">
<TableCell align="center"> {LocalDateTimeString(row.updated)}
{LocalDateTimeString(row.updated)} </TableCell>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={6}
count={totalVehicles}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow> </TableRow>
</TableFooter> ))}
</Table> </TableBody>
</TableContainer> <TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={6}
count={totalVehicles}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</div> </div>
); );
}; };

200
src/components/Cars/SendCommandBulk/index.jsx
View File

@@ -1,124 +1,32 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Grid } from "@material-ui/core";
import {
Checkbox,
Table,
TableBody,
TableCell,
TableContainer,
TableFooter,
TablePagination,
TableRow,
Toolbar,
} from "@material-ui/core";
import { import { VehicleProvider } from "../../Contexts/VehicleContext";
useVehicleContext,
VehicleProvider,
} from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext"; import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext"; import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles"; import useStyles from "../../useStyles";
import { LocalDateTimeString } from "../../../utils/dates";
import TableHeaderSortable from "../../Table/HeaderSortable";
import SendCommand from "../SendCommand"; import SendCommand from "../SendCommand";
import SearchField from "../../Controls/SearchField"; import SearchField from "../../Controls/SearchField";
import CarSelectionTable from "../CarSelectionTable";
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",
},
];
const MainForm = () => { const MainForm = () => {
const classes = useStyles(); 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 [selected, setSelected] = useState([]);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const { getVehicles, vehicles, totalVehicles } = useVehicleContext(); const { setTitle } = useStatusContext();
const { setMessage, setTitle } = useStatusContext();
const { const {
token: { token: {
idToken: { jwtToken: token }, idToken: { jwtToken: token },
}, },
} = useUserContext(); } = useUserContext();
const sortHandler = (event, property) => { const handleSearch = (search) => {
if (property === orderBy) { setSelected([]);
if (order === "asc") { setSearch(search);
setOrder("desc");
} else {
setOrder("asc");
}
} else {
setOrderBy(property);
setOrder("asc");
}
}; };
useEffect(() => { const handleSelectAll = (cars) => {
setTitle("Send Command"); setSelected(cars);
// 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 handleSelect = (event, key) => { const handleSelect = (event, key) => {
@@ -132,76 +40,32 @@ const MainForm = () => {
setSelected(newSelected); setSelected(newSelected);
}; };
const handleSearch = (search) => { useEffect(() => {
setSelected([]); setTitle("Send Command");
setSearch(search); // eslint-disable-next-line
}; }, []);
return ( return (
<div className={classes.paper} style={{ height: 700, width: "100%" }}> <div className={classes.paper} style={{ height: 700, width: "100%" }}>
<Toolbar className={classes.tableToolbar}> <Grid container className={classes.root} spacing={2}>
<SearchField classes={classes} onSearch={handleSearch} /> <Grid item md={6}>
</Toolbar> <SearchField classes={classes} onSearch={handleSearch} />
<TableContainer> <div
<Table> className={classes.labelInline}
<TableHeaderSortable >{`${selected.length} Selected`}</div>
classes={classes} </Grid>
orderBy={orderBy} <Grid item md={6} style={{ textAlign: "right" }}>
order={order} <SendCommand vins={selected} style={{ display: "flex" }} />
columnData={tableColumns} </Grid>
onSortRequest={sortHandler} </Grid>
multiSelect={true} <CarSelectionTable
onSelectAll={handleSelectAll} classes={classes}
selectCount={selected.length} token={token}
rowCount={totalVehicles} search={{ search }}
/> selected={selected}
<TableBody> onSelect={handleSelect}
{vehicles.map((row) => { onSelectAll={handleSelectAll}
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} />
</div> </div>
); );
}; };

91
src/components/Cars/Status/index.jsx
View File

@@ -1,11 +1,9 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import { import {
Grid,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableContainer,
TableFooter, TableFooter,
TablePagination, TablePagination,
TableRow, TableRow,
@@ -16,13 +14,11 @@ import {
useUpdatesContext, useUpdatesContext,
} from "../../Contexts/UpdatesContext"; } from "../../Contexts/UpdatesContext";
import { VehicleProvider } from "../../Contexts/VehicleContext"; import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext"; import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext"; import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles"; import useStyles from "../../useStyles";
import { LocalDateTimeString } from "../../../utils/dates"; import { LocalDateTimeString } from "../../../utils/dates";
import TableHeaderSortable from "../../Table/HeaderSortable"; import TableHeaderSortable from "../../Table/HeaderSortable";
import SendCommand from "../SendCommand";
const tableColumns = [ const tableColumns = [
{ {
@@ -107,54 +103,47 @@ const MainForm = () => {
return ( return (
<div className={classes.paper} style={{ height: 700, width: "100%" }}> <div className={classes.paper} style={{ height: 700, width: "100%" }}>
<TableContainer> <Table>
<Table> <TableHeaderSortable
<TableHeaderSortable classes={classes}
classes={classes} orderBy={orderBy}
orderBy={orderBy} order={order}
order={order} columnData={tableColumns}
columnData={tableColumns} onSortRequest={handleSort}
onSortRequest={handleSort} />
/> <TableBody>
<TableBody> {carUpdates.map((row) => (
{carUpdates.map((row) => ( <TableRow key={row.id}>
<TableRow key={row.id}> <TableCell align="center">{row.id}</TableCell>
<TableCell align="center">{row.id}</TableCell> <TableCell align="center">{`${row.updatepackage.package_name} ${row.updatepackage.version}`}</TableCell>
<TableCell align="center">{`${row.updatepackage.package_name} ${row.updatepackage.version}`}</TableCell> <TableCell align="center">{row.status}</TableCell>
<TableCell align="center">{row.status}</TableCell> <TableCell align="center">
<TableCell align="center"> {LocalDateTimeString(row.created)}
{LocalDateTimeString(row.created)} </TableCell>
</TableCell> <TableCell align="center">
<TableCell align="center"> {LocalDateTimeString(row.updated)}
{LocalDateTimeString(row.updated)} </TableCell>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={5}
count={totalCarUpdates}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow> </TableRow>
</TableFooter> ))}
</Table> </TableBody>
</TableContainer> <TableFooter>
<Grid container className={classes.root} spacing={2}> <TableRow>
<Grid item lg={6} md={12}> <TablePagination
<SendCommand vins={[vin]} /> rowsPerPageOptions={[5, 10, 25, 100]}
</Grid> colSpan={5}
</Grid> count={totalCarUpdates}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</div> </div>
); );
}; };

10
src/components/Controls/SearchField/index.jsx
View File

@@ -20,9 +20,13 @@ const SearchField = (props) => {
onSearch(searchTerm); onSearch(searchTerm);
}; };
const handleEnterPress = (e) => { const handleEnterPress = (e) => {
if (e.keyCode !== 13) return; if (e.keyCode === 13) {
e.preventDefault(); e.preventDefault();
handleSearch(e); handleSearch(e);
} else if (e.keyCode === 27) {
e.preventDefault();
setSearchTerm("");
}
}; };
return ( return (

4
src/components/Layouts/SideMenu.jsx
View File

@@ -50,7 +50,9 @@ export default function SideMenu() {
return ( return (
<List> <List>
{menu.map((item, index) => ( {menu.map((item, index) => (
<ListItemLink key={index} primary={item.label} to={item.to} /> <li key={index}>
<ListItemLink primary={item.label} to={item.to} />
</li>
))} ))}
</List> </List>
); );

10
src/components/ListItemLink.jsx
View File

@@ -17,12 +17,10 @@ function ListItemLink(props) {
); );
return ( return (
<li> <ListItem button component={renderLink}>
<ListItem button component={renderLink}> {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null} <ListItemText primary={primary} />
<ListItemText primary={primary} /> </ListItem>
</ListItem>
</li>
); );
} }

16
src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap
View File

@@ -46,10 +46,10 @@ exports[`File Upload Form Should render 1`] = `
/> />
<fieldset <fieldset
aria-hidden="true" aria-hidden="true"
class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline" class="PrivateNotchedOutline-root-32 MuiOutlinedInput-notchedOutline"
> >
<legend <legend
class="PrivateNotchedOutline-legendLabelled-33" class="PrivateNotchedOutline-legendLabelled-34"
> >
<span> <span>
Package name Package name
@@ -92,10 +92,10 @@ exports[`File Upload Form Should render 1`] = `
/> />
<fieldset <fieldset
aria-hidden="true" aria-hidden="true"
class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline" class="PrivateNotchedOutline-root-32 MuiOutlinedInput-notchedOutline"
> >
<legend <legend
class="PrivateNotchedOutline-legendLabelled-33" class="PrivateNotchedOutline-legendLabelled-34"
> >
<span> <span>
Version Version
@@ -138,10 +138,10 @@ exports[`File Upload Form Should render 1`] = `
/> />
<fieldset <fieldset
aria-hidden="true" aria-hidden="true"
class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline" class="PrivateNotchedOutline-root-32 MuiOutlinedInput-notchedOutline"
> >
<legend <legend
class="PrivateNotchedOutline-legendLabelled-33" class="PrivateNotchedOutline-legendLabelled-34"
> >
<span> <span>
Description Description
@@ -185,10 +185,10 @@ exports[`File Upload Form Should render 1`] = `
/> />
<fieldset <fieldset
aria-hidden="true" aria-hidden="true"
class="PrivateNotchedOutline-root-31 MuiOutlinedInput-notchedOutline" class="PrivateNotchedOutline-root-32 MuiOutlinedInput-notchedOutline"
> >
<legend <legend
class="PrivateNotchedOutline-legendLabelled-33" class="PrivateNotchedOutline-legendLabelled-34"
> >
<span> <span>
Release Notes URL Release Notes URL

79
src/components/UpdatePackages/List/index.jsx
View File

@@ -4,7 +4,6 @@ import {
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableContainer,
TableFooter, TableFooter,
TablePagination, TablePagination,
TableRow, TableRow,
@@ -151,47 +150,45 @@ const UpdatePackagesList = () => {
<Toolbar className={classes.tableToolbar}> <Toolbar className={classes.tableToolbar}>
<SearchField classes={classes} onSearch={handleSearch} /> <SearchField classes={classes} onSearch={handleSearch} />
</Toolbar> </Toolbar>
<TableContainer> <Table>
<Table> <TableHeaderSortable
<TableHeaderSortable classes={classes}
classes={classes} orderBy={orderBy}
orderBy={orderBy} order={order}
order={order} columnData={tableColumns}
columnData={tableColumns} onSortRequest={handleSort}
onSortRequest={handleSort} />
/> <TableBody>
<TableBody> {packages.map((row) => (
{packages.map((row) => ( <TableRow key={row.id}>
<TableRow key={row.id}> <TableCell align="center">{row.id}</TableCell>
<TableCell align="center">{row.id}</TableCell> <TableCell align="center">{row.package_name}</TableCell>
<TableCell align="center">{row.package_name}</TableCell> <TableCell align="center">{row.version}</TableCell>
<TableCell align="center">{row.version}</TableCell> <TableCell align="center">
<TableCell align="center"> {LocalDateTimeString(row.created)}
{LocalDateTimeString(row.created)} </TableCell>
</TableCell> <TableCell align="center">{Actions(row)}</TableCell>
<TableCell align="center">{Actions(row)}</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={5}
count={totalPackages}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow> </TableRow>
</TableFooter> ))}
</Table> </TableBody>
</TableContainer> <TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={5}
count={totalPackages}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</div> </div>
); );
}; };

8
src/components/useStyles.jsx
View File

@@ -45,10 +45,10 @@ const useStyles = makeStyles((theme) => ({
}, },
labelInline: { labelInline: {
fontSize: "1.25em", fontSize: "1.25em",
margin: theme.spacing(2, 0, 1), margin: theme.spacing(2, 1, 1),
display: "inline-flex", display: "inline-flex",
boxSizing: "border-box", boxSizing: "border-box",
position: "relative", verticalAlign: "bottom",
}, },
chips: { chips: {
display: "flex", display: "flex",
@@ -152,6 +152,7 @@ const useStyles = makeStyles((theme) => ({
width: "25ch", width: "25ch",
}, },
tableToolbar: { tableToolbar: {
display: "flex",
textAlign: "left", textAlign: "left",
paddingLeft: theme.spacing(2), paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1), paddingRight: theme.spacing(1),
@@ -162,6 +163,9 @@ const useStyles = makeStyles((theme) => ({
width: 60, width: 60,
margin: "auto", margin: "auto",
}, },
grow: {
flexGrow: 1,
},
})); }));
export default useStyles; export default useStyles;