Finally figured out the UI

This commit is contained in:
padamsen_fisker
2024-05-23 22:25:58 -04:00
parent 80a338c7b4
commit d9cec6a457
7 changed files with 44 additions and 134 deletions

View File

@@ -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"
/>

View File

@@ -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}
/>

View File

@@ -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"
/>