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

CEC-2207 Add is-online filter for vehicles list (#187)

Browse Source 
* Add OptionsDropdown component

* Add is-online filter
This commit is contained in:
arpanetus
2022-08-11 22:54:17 +06:00
committed by GitHub
parent 738a19c229
commit 7bf91e0639
4 changed files with 160 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -9056,7 +9056,37 @@ exports[`App Route /vehicles authenticated 1`] = `
</div>
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
>
<div>
<button
aria-haspopup="true"
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="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
/>
</div>
<div

32
src/components/Cars/List/__snapshots__/index.test.jsx.snap
View File

@@ -93,7 +93,37 @@ exports[`VehicleTable Render 1`] = `
</div>
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
>
<div>
<button
aria-haspopup="true"
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="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
/>
</div>
<div

24
src/components/Cars/List/index.jsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Grid } from "@material-ui/core";
import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import { Link } from "react-router-dom";
import clsx from "clsx";
@@ -10,10 +10,12 @@ import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import SearchField from "../../Controls/SearchField";
import CarSelectionTable from "../../Controls/CarSelectionTable";
import OptionsDropdown from "../../Controls/OptionsDropdown";
const MainForm = () => {
const classes = useStyles();
const [search, setSearch] = useState("");
const [online, setOnline] = useState(false);
const { setTitle, setSitePath } = useStatusContext();
const {
token: {
@@ -25,6 +27,10 @@ const MainForm = () => {
setSearch(query);
};
const handleOnline = (event) => {
setOnline(event.target.checked);
}
useEffect(() => {
setTitle("Vehicles");
setSitePath([]);
@@ -42,13 +48,25 @@ const MainForm = () => {
<Grid item md={4} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
</Grid>
<Grid item md={4} className={classes.textRightAlign} />
<Grid item md={2} className={classes.textJustifyAlign}>
<OptionsDropdown listId='filter-menu'>
<MenuItem>
<FormControlLabel control={
<Checkbox
checked={online}
onChange={handleOnline}
/>
} label="Only online" />
</MenuItem>
</OptionsDropdown>
</Grid>
<Grid item md={2} className={classes.textRightAlign} />
</Grid>
<CarSelectionTable
classes={classes}
token={token}
multiSelect={false}
search={{ search }}
search={{ search, online: online? true : null}}
/>
</div>
);

77
src/components/Controls/OptionsDropdown/index.jsx Normal file
View File

@@ -0,0 +1,77 @@
import React, {useEffect, useRef, useState} from "react";
import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
import TuneIcon from "@material-ui/icons/Tune";
const OptionsDropdown = ({listId, children}) => {
const [open, setOpen] = useState(false);
const anchorRef = useRef(null);
const prevOpen = useRef(open);
const handleToggle = () => {
setOpen((pOpen) => !pOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
const handleListKeyDown = (event) => {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}
prevOpen.current = open;
}, [open]);
return (<div>
<IconButton
ref={anchorRef}
aria-controls={open ? listId : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
<TuneIcon />
</IconButton>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
{({TransitionProps, placement}) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:
placement ===
'bottom' ?
'center top' :
'center bottom'
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList
autoFocusItem={open}
id={listId}
onKeyDown={handleListKeyDown}
>
{children}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
);
}
export default OptionsDropdown;