github/zero-ui
1
0
Fork 0
mirror of https://github.com/dec0dOS/zero-ui.git synced 2025-08-19 04:50:35 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add search and filter network members

Browse source 
About #45
This commit is contained in:
NoobTW 2023-04-16 13:26:52 +08:00
commit cb6c64799c
No known key found for this signature in database
GPG key ID: 3C04B63FD6FB4159
1 changed files with 51 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/components/NetworkMembers/NetworkMembers.jsx
View file

@ -3,8 +3,10 @@ import {
AccordionDetails,
AccordionSummary,
Checkbox,
Divider,
Grid,
IconButton,
TextField,
Typography,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@ -24,6 +26,9 @@ import MemberSettings from "./components/MemberSettings";
function NetworkMembers({ network }) {
const { nwid } = useParams();
const [members, setMembers] = useState([]);
const [filter, setFilter] = useState("");
const [filterActive, setFilterActive] = useState(false);
const [filterInactive, setFilterInactive] = useState(false);
const fetchData = useCallback(async () => {
try {
@ -48,21 +53,21 @@ function NetworkMembers({ network }) {
const handleChange =
(member, key1, key2 = null, mode = "text", id = null) =>
(event) => {
const value = parseValue(event, mode, member, key1, key2, id);
(event) => {
const value = parseValue(event, mode, member, key1, key2, id);
const updatedMember = replaceValue({ ...member }, key1, key2, value);
const updatedMember = replaceValue({ ...member }, key1, key2, value);
const index = members.findIndex((item) => {
return item["config"]["id"] === member["config"]["id"];
});
let mutableMembers = [...members];
mutableMembers[index] = updatedMember;
setMembers(mutableMembers);
const index = members.findIndex((item) => {
return item["config"]["id"] === member["config"]["id"];
});
let mutableMembers = [...members];
mutableMembers[index] = updatedMember;
setMembers(mutableMembers);
const data = setValue({}, key1, key2, value);
sendReq(member["config"]["id"], data);
};
const data = setValue({}, key1, key2, value);
sendReq(member["config"]["id"], data);
};
const columns = [
{
@ -169,12 +174,45 @@ function NetworkMembers({ network }) {
<IconButton color="primary" onClick={fetchData}>
<RefreshIcon />
</IconButton>
<Grid container>
<Grid item sm={6}>
<Typography>Search (Addr/Name)</Typography>
<TextField
value={filter}
onChange={(e) => setFilter(e.target.value)}
/>
</Grid>
<Grid item sm="auto">
<Typography>Display Filter</Typography>
<Checkbox
checked={filterActive}
color="primary"
onChange={(e) => setFilterActive(e.target.checked)}
/>
<span>Active</span>
<Checkbox
checked={filterInactive}
color="primary"
onChange={(e) => setFilterInactive(e.target.checked)}
/>
<span>Inactive</span>
</Grid>
<Divider />
</Grid>
<Grid container>
{members.length ? (
<DataTable
noHeader={true}
columns={columns}
data={[...members]}
data={[...members]
.filter((x) => {
return (
(x.name.includes(filter) || x.id.includes(filter)) &&
(filterActive ? x.online === 1 : true) &&
(filterInactive ? x.online === 0 : true)
)
})
}
/>
) : (
<Grid