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
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

View File

@@ -4,7 +4,6 @@ import {
Table,
TableBody,
TableCell,
TableContainer,
TableFooter,
TablePagination,
TableRow,
@@ -117,52 +116,50 @@ const MainForm = () => {
<Toolbar className={classes.tableToolbar}>
<SearchField classes={classes} onSearch={handleSearch} />
</Toolbar>
<TableContainer>
<Table>
<TableHeaderSortable
classes={classes}
orderBy={orderBy}
order={order}
columnData={tableColumns}
onSortRequest={sortHandler}
/>
<TableBody>
{vehicles.map((row) => (
<TableRow key={row.vin}>
<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={6}
count={totalVehicles}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
<Table>
<TableHeaderSortable
classes={classes}
orderBy={orderBy}
order={order}
columnData={tableColumns}
onSortRequest={sortHandler}
/>
<TableBody>
{vehicles.map((row) => (
<TableRow key={row.vin}>
<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>
</TableFooter>
</Table>
</TableContainer>
))}
</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>
</TableFooter>
</Table>
</div>
);
};