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

CEC-5183 add bulk actions to fleets page (#470)

Browse Source 
* add multi-select

* select all

* add bulk-actions component

* update tests

* remove console.log
This commit is contained in:
Tristan Timblin
2023-10-16 10:29:21 -07:00
committed by GitHub
parent 22a928fe23
commit 2a71d87c93
3 changed files with 111 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
View File

@@ -21,10 +21,9 @@ exports[`FleetVehiclesTable Render 1`] = `
class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
>
<div
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-1"
>
<a
class="makeStyles-labelInline-0"
href="/fleet/undefined/vehicle-add"
>
<svg
@@ -39,6 +38,9 @@ exports[`FleetVehiclesTable Render 1`] = `
</svg>
</a>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-3"
/>
<div
align="right"
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
@@ -104,6 +106,40 @@ exports[`FleetVehiclesTable Render 1`] = `
<tr
class="MuiTableRow-root MuiTableRow-head"
>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
aria-label="select all desserts"
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>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"

43
src/components/Fleets/Status/Vehicles/Table/index.jsx
View File

@@ -1,4 +1,5 @@
import {
Checkbox,
Grid,
LinearProgress,
Table,
@@ -28,6 +29,7 @@ import DeleteConfirmation from "../../../../DeleteConfirmation";
import TableHeaderSortable from "../../../../Table/HeaderSortable";
import { useLocalStorage } from "../../../../useLocalStorage";
import ConnectedIcon from "../../../../Controls/ConnectedIcon";
import BulkActions from "../../../../BulkActions";
import useStyles from "../../../../useStyles";
const tableColumns = [
@@ -62,6 +64,7 @@ const MainForm = ({ name }) => {
const [order, setOrder] = useState("desc");
const [search, setSearch] = useState("");
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [selected, setSelected] = useState([]);
const classes = useStyles();
const { setMessage } = useStatusContext();
const {
@@ -135,6 +138,19 @@ const MainForm = ({ name }) => {
}
};
const handleSelect = (vin, setState) => {
setSelected(selected => setState
? [...selected, vin]
: selected.filter(select => select !== vin));
};
const handleSelectAll = (event) => {
const allSelected = !event.target.checked;
setSelected(() => allSelected
? []
: fleetVehicles.map((vehicle) => vehicle.vin));
}
const onDelete = async (vin) => {
try {
await deleteFleetVehicle(name, { vin: vin }, token);
@@ -188,14 +204,14 @@ const MainForm = ({ name }) => {
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}
>
<Grid item md={1} className={classes.textJustifyAlign}>
<Link to={`/fleet/${name}/vehicle-add`}>
<AddCircleIcon fontSize="large" />
</Link>
</Grid>
<Grid item md={3}>
<BulkActions ids={selected} actions={["addTags", "deleteVehicles", "sms", "updateConfig"]} />
</Grid>
<Grid item md={8} align="right" className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
</Grid>
@@ -207,10 +223,21 @@ const MainForm = ({ name }) => {
order={order}
columnData={tableColumns}
onSortRequest={handleSort}
multiSelect={true}
onSelectAll={handleSelectAll}
selectCount={selected.length}
rowCount={fleetVehicles.length}
/>
<TableBody>
{fleetVehicles && fleetVehicles.map((car) => (
(car.vin && <TableRow key={"row" + car.vin}>
{fleetVehicles && fleetVehicles.map((car) => {
const isSelected = selected.includes(car.vin);
return (car.vin && <TableRow key={"row" + car.vin}>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
onChange={() => handleSelect(car.vin, !isSelected)}
/>
</TableCell>
<TableCell key={"cell" + car.vin} align="center">
{(car.connected || car.connectedHMI) &&
<ConnectedIcon
@@ -239,7 +266,7 @@ const MainForm = ({ name }) => {
<TableCell key={"cell5" + car.vin} align="center">{Actions(car.vin)}</TableCell>
</TableRow>
)
))}
})}
</TableBody>
<TableFooter>
<TableRow>

40
src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
View File

@@ -20,10 +20,9 @@ exports[`VehiclesTab Render 1`] = `
class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
>
<div
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-1"
>
<a
class="makeStyles-labelInline-0"
href="/fleet/undefined/vehicle-add"
>
<svg
@@ -38,6 +37,9 @@ exports[`VehiclesTab Render 1`] = `
</svg>
</a>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-3"
/>
<div
align="right"
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
@@ -103,6 +105,40 @@ exports[`VehiclesTab Render 1`] = `
<tr
class="MuiTableRow-root MuiTableRow-head"
>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
aria-label="select all desserts"
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>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"