Finally figured out the UI
This commit is contained in:
@@ -38,47 +38,6 @@ exports[`FleetVehiclesTable Render 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
|
||||
>
|
||||
<label
|
||||
class="MuiFormControlLabel-root"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
Select All Vehicles
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
|
||||
/>
|
||||
|
||||
@@ -70,7 +70,7 @@ const MainForm = ({ name }) => {
|
||||
const [order, setOrder] = useState("desc");
|
||||
const [search, setSearch] = useState("");
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [selectAllSelected, setSelectAllSelected] = useState(false);
|
||||
const [fleetVINs, setFleetVINs] = useState([]);
|
||||
const componentMounted = useRef(true);
|
||||
const classes = useStyles();
|
||||
const { setMessage } = useStatusContext();
|
||||
@@ -79,6 +79,7 @@ const MainForm = ({ name }) => {
|
||||
totalFleetVehicles,
|
||||
watchFleetVehicles,
|
||||
getFleetVehicles,
|
||||
getFleetVINs,
|
||||
removeFleetVehiclesLocal,
|
||||
} = useFleetContext();
|
||||
const {
|
||||
@@ -105,6 +106,12 @@ const MainForm = ({ name }) => {
|
||||
},
|
||||
token
|
||||
);
|
||||
await getFleetVINs(
|
||||
name,
|
||||
token
|
||||
).then((vins) => {
|
||||
setFleetVINs(vins);
|
||||
});
|
||||
if (componentMounted.current) {
|
||||
watchFleetVehicles.start({ token });
|
||||
}
|
||||
@@ -147,6 +154,10 @@ const MainForm = ({ name }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
setSelected(fleetVINs);
|
||||
};
|
||||
|
||||
const handleSelect = (vin, setState) => {
|
||||
setSelected(selected => setState
|
||||
? [...selected, vin]
|
||||
@@ -170,14 +181,8 @@ const MainForm = ({ name }) => {
|
||||
</Grid>
|
||||
<Grid item md={4}>
|
||||
<BulkActions
|
||||
actions={
|
||||
selectAllSelected ?
|
||||
["updateFlashpackNumbers"] :
|
||||
["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic", "updateFlashpackNumbers"]
|
||||
}
|
||||
actions={["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic", "updateFlashpackNumbers"]}
|
||||
ids={selected}
|
||||
fleet={name}
|
||||
selectAll={selectAllSelected}
|
||||
callback={bulkActionCallback}
|
||||
/>
|
||||
</Grid>
|
||||
@@ -193,13 +198,8 @@ const MainForm = ({ name }) => {
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
multiSelect={true}
|
||||
onSelectAll={
|
||||
() => {
|
||||
setSelectAllSelected(selectAllSelected => !selectAllSelected);
|
||||
setSelected([]);
|
||||
}
|
||||
}
|
||||
selectCount={selected.length}
|
||||
onSelectAll={handleSelectAll}
|
||||
selectCount={selected ? selected.length : 0}
|
||||
rowCount={fleetVehicles.length}
|
||||
selectAllForAllPages={true}
|
||||
/>
|
||||
|
||||
@@ -37,47 +37,6 @@ exports[`VehiclesTab Render 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
|
||||
>
|
||||
<label
|
||||
class="MuiFormControlLabel-root"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
Select All Vehicles
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user