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

CEC-1183/CEC-1201 fleet vehicles forms (#130)

Browse Source 
* working fleet vehicles forms

* snapshots and api tests
This commit is contained in:
Drew Taylor
2022-03-22 14:15:49 -07:00
committed by GitHub
parent 4daf171b1e
commit 4af3c70ec7
24 changed files with 2112 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap Normal file
View File

@@ -0,0 +1,326 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FleetVehiclesTable Render 1`] = `
<div>
<div
data-testid="mocked-fleetprovider"
>
<div
data-testid="mocked-statusprovider"
>
<div
data-testid="mocked-userprovider"
>
<div
data-testid="mocked-fleetprovider"
>
<div
class="makeStyles-paper-3 makeStyles-tableSize-55"
>
<div
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
>
<div
class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
>
<a
class="makeStyles-labelInline-9"
href="/fleet/undefined/vehicle-add"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
/>
</svg>
</a>
</div>
<div
align="right"
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
>
<div
class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
>
<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>
</div>
</div>
<table
class="MuiTable-root"
>
<thead
class="MuiTableHead-root"
>
<tr
class="MuiTableRow-root MuiTableRow-head"
>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
VIN
<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>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Actions
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root"
>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345678"
>
USWESTVIN12345678
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345679"
>
USWESTVIN12345679
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345670"
>
USWESTVIN12345670
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
</tbody>
<tfoot
class="MuiTableFooter-root"
>
<tr
class="MuiTableRow-root MuiTableRow-footer"
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="8"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
>
<div
class="MuiTablePagination-spacer"
/>
<p
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
>
Rows per page:
</p>
<div
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
>
<select
aria-label="rows per page"
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
>
<option
class="MuiTablePagination-menuItem"
value="5"
>
5
</option>
<option
class="MuiTablePagination-menuItem"
value="10"
>
10
</option>
<option
class="MuiTablePagination-menuItem"
value="25"
>
25
</option>
<option
class="MuiTablePagination-menuItem"
value="100"
>
100
</option>
</select>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</div>
<p
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
>
1-3 of 3
</p>
<div
class="MuiTablePagination-actions"
>
<button
aria-label="Previous page"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
disabled=""
tabindex="-1"
title="Previous page"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
/>
</svg>
</span>
</button>
<button
aria-label="Next page"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
disabled=""
tabindex="-1"
title="Next page"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
/>
</svg>
</span>
</button>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
`;

194
src/components/Fleets/Status/Vehicles/Table/index.jsx Normal file
View File

@@ -0,0 +1,194 @@
import React, { useEffect, useState } from "react";
import { Link } from 'react-router-dom';
import {
Grid,
Table,
TableBody,
TableCell,
TableFooter,
TablePagination,
TableRow,
Tooltip,
} from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import DeleteIcon from "@material-ui/icons/Delete";
import clsx from "clsx";
import TableHeaderSortable from "../../../../Table/HeaderSortable";
import { useUserContext } from "../../../../Contexts/UserContext"
import { useStatusContext } from "../../../../Contexts/StatusContext";
import { FleetProvider, useFleetContext } from "../../../../Contexts/FleetContext"
import useStyles from "../../../../useStyles";
import SearchField from "../../../../Controls/SearchField";
import { logger } from "../../../../../services/monitoring";
import { Roles, hasRole } from "../../../../../utils/roles";
const tableColumns = [
{
id: "vin",
label: "VIN"
},
{
id: "",
label: "Actions"
}
];
const MainForm = ({ name }) => {
const [pageSize, setPageSize] = useState(10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("desc");
const classes = useStyles();
const { setMessage } = useStatusContext();
const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
useEffect(() => {
(async () => {
try {
if (!token) return;
await getFleetVehicles(
name,
{
limit: pageSize,
offset: pageSize * pageIndex,
order: `${orderBy} ${order}`,
},
token
);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token, pageIndex, pageSize, orderBy, order]);
const handleChangePageIndex = (event, newIndex) => {
setPageIndex(newIndex);
};
const handleChangePageSize = (event) => {
setPageSize(parseInt(event.target.value, 10));
setPageIndex(0);
};
const handleSort = (event, property) => {
try {
if (property === orderBy) {
if (order === "asc") {
setOrder("desc");
} else {
setOrder("asc");
}
} else {
setOrderBy(property);
setOrder("asc");
}
} catch (e) {
logger.warn(e.stack);
}
};
const onDelete = async (vin) => {
try {
await deleteFleetVehicle(name, { vin: vin }, token);
setMessage(`Deleted ${vin}`)
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
const Actions = (vin) => {
let actions = [];
if (hasRole([Roles.DELETE], groups)) {
actions.push({
tip: `Delete "${vin}"`,
id: vin,
icon: <DeleteIcon aria-label={`Delete ${vin}`} />
})
}
if (actions.length === 0) return ["No actions"];
return actions.map((action) => {
if (action.link != null) {
return (
<Tooltip key={action.link} title={action.tip}>
<Link to={action.link} style={{ margin: 5 }}>
{action.icon}
</Link>
</Tooltip>
);
} else {
return (
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => onDelete(action.id)}>
{action.icon}
</Link>
</Tooltip>
);
}
});
};
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Grid container className={classes.root} spacing={2}>
<Grid item md={4} className={classes.textJustifyAlign}>
<Link to={`/fleet/${name}/vehicle-add`} className={classes.labelInline}>
<AddCircleIcon fontSize="large" />
</Link>
</Grid>
<Grid item md={8} align="right" className={classes.textCenterAlign}>
<SearchField classes={classes} />
</Grid>
</Grid>
<Table>
<TableHeaderSortable
classes={classes}
orderBy={orderBy}
order={order}
columnData={tableColumns}
onSortRequest={handleSort}
/>
<TableBody>
{fleetVehicles.map(vin => (
<TableRow key={vin}>
<TableCell align="center">
<Link to={`/vehicle-status/${vin}`}>{vin}</Link>
</TableCell>
<TableCell align="center">{Actions(vin)}</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={8}
count={totalFleetVehicles}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onPageChange={handleChangePageIndex}
onRowsPerPageChange={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</div >
);
};
const FleetVehiclesTable = (props) => (
<FleetProvider>
<MainForm {...props} />
</FleetProvider>
);
export default FleetVehiclesTable;

39
src/components/Fleets/Status/Vehicles/Table/index.test.jsx Normal file
View File

@@ -0,0 +1,39 @@
jest.mock("../../../../Contexts/FleetContext");
jest.mock("../../../../Contexts/StatusContext");
jest.mock("../../../../Contexts/UserContext");
jest.mock('@material-ui/core/utils/unstable_useId', () =>
jest.fn().mockReturnValue('mui-test-id'),
);
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import { FleetProvider } from "../../../../Contexts/FleetContext";
import { StatusProvider } from "../../../../Contexts/StatusContext";
import { UserProvider, setToken } from "../../../../Contexts/UserContext";
import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
import MainForm from "./index"
const renderFleetTable = async () => {
const { container } = render(
<FleetProvider>
<StatusProvider>
<UserProvider>
<BrowserRouter>
<MainForm />
</BrowserRouter>
</UserProvider>
</StatusProvider>
</FleetProvider>
);
await waitFor(() => { });
return container;
};
describe("FleetVehiclesTable", () => {
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderFleetTable();
expect(container).toMatchSnapshot();
});
});