diff --git a/frontend/src/components/NetworkMembers/NetworkMembers.jsx b/frontend/src/components/NetworkMembers/NetworkMembers.jsx index b6f843c8..fd77a069 100644 --- a/frontend/src/components/NetworkMembers/NetworkMembers.jsx +++ b/frontend/src/components/NetworkMembers/NetworkMembers.jsx @@ -3,8 +3,13 @@ import { AccordionDetails, AccordionSummary, Checkbox, + Divider, + FormControlLabel, Grid, IconButton, + Radio, + RadioGroup, + TextField, Typography, } from "@material-ui/core"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; @@ -24,6 +29,10 @@ 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 [sortBy, setSortBy] = useState("id"); const fetchData = useCallback(async () => { try { @@ -169,12 +178,63 @@ function NetworkMembers({ network }) { + + + Search (Address / Name) + setFilter(e.target.value)} + /> + + + Display Filter + setFilterActive(e.target.checked)} + /> + Active + setFilterInactive(e.target.checked)} + /> + Inactive + + + Sort by + setSortBy(e.target.value)} + > + } + label="Name" + /> + } + label="Address" + /> + + + + {members.length ? ( { + return ( + (x.name.includes(filter) || x.id.includes(filter)) && + (filterActive ? x.online === 1 : true) && + (filterInactive ? x.online === 0 : true) + ); + }) + .sort((a, b) => a[sortBy].localeCompare(b[sortBy]))} /> ) : ( ": version: 1.2.13 - resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin::version=1.2.13&hash=18f3a7" + resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin::version=1.2.13&hash=d11327" dependencies: bindings: ^1.5.0 nan: ^2.12.1 @@ -8333,7 +8333,7 @@ __metadata: "fsevents@patch:fsevents@^2.1.2#~builtin, fsevents@patch:fsevents@^2.1.3#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin": version: 2.3.2 - resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin::version=2.3.2&hash=18f3a7" + resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin::version=2.3.2&hash=df0bf1" dependencies: node-gyp: latest conditions: os=darwin @@ -15059,7 +15059,7 @@ __metadata: "resolve@patch:resolve@1.18.1#~builtin": version: 1.18.1 - resolution: "resolve@patch:resolve@npm%3A1.18.1#~builtin::version=1.18.1&hash=07638b" + resolution: "resolve@patch:resolve@npm%3A1.18.1#~builtin::version=1.18.1&hash=c3c19d" dependencies: is-core-module: ^2.0.0 path-parse: ^1.0.6 @@ -15069,7 +15069,7 @@ __metadata: "resolve@patch:resolve@^1.10.0#~builtin, resolve@patch:resolve@^1.12.0#~builtin, resolve@patch:resolve@^1.14.2#~builtin, resolve@patch:resolve@^1.17.0#~builtin, resolve@patch:resolve@^1.18.1#~builtin, resolve@patch:resolve@^1.19.0#~builtin, resolve@patch:resolve@^1.20.0#~builtin, resolve@patch:resolve@^1.22.0#~builtin, resolve@patch:resolve@^1.3.2#~builtin": version: 1.22.1 - resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin::version=1.22.1&hash=07638b" + resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin::version=1.22.1&hash=c3c19d" dependencies: is-core-module: ^2.9.0 path-parse: ^1.0.7 @@ -15082,7 +15082,7 @@ __metadata: "resolve@patch:resolve@^2.0.0-next.3#~builtin": version: 2.0.0-next.4 - resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin::version=2.0.0-next.4&hash=07638b" + resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin::version=2.0.0-next.4&hash=c3c19d" dependencies: is-core-module: ^2.9.0 path-parse: ^1.0.7 @@ -17261,7 +17261,7 @@ __metadata: "typescript@patch:typescript@^4.6.4#~builtin": version: 4.8.2 - resolution: "typescript@patch:typescript@npm%3A4.8.2#~builtin::version=4.8.2&hash=a1c5e5" + resolution: "typescript@patch:typescript@npm%3A4.8.2#~builtin::version=4.8.2&hash=aae4e6" bin: tsc: bin/tsc tsserver: bin/tsserver