From cb6c64799c1f452bdb705a3f61c6c7e47b4adf16 Mon Sep 17 00:00:00 2001 From: NoobTW Date: Sun, 16 Apr 2023 13:26:52 +0800 Subject: [PATCH 1/4] feat: add search and filter network members About #45 --- .../NetworkMembers/NetworkMembers.jsx | 64 +++++++++++++++---- 1 file changed, 51 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/NetworkMembers/NetworkMembers.jsx b/frontend/src/components/NetworkMembers/NetworkMembers.jsx index b6f843c8..a73beef0 100644 --- a/frontend/src/components/NetworkMembers/NetworkMembers.jsx +++ b/frontend/src/components/NetworkMembers/NetworkMembers.jsx @@ -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 }) { + + + Search (Addr/Name) + setFilter(e.target.value)} + /> + + + Display Filter + setFilterActive(e.target.checked)} + /> + Active + setFilterInactive(e.target.checked)} + /> + Inactive + + + {members.length ? ( { + return ( + (x.name.includes(filter) || x.id.includes(filter)) && + (filterActive ? x.online === 1 : true) && + (filterInactive ? x.online === 0 : true) + ) + }) + } /> ) : ( Date: Sun, 16 Apr 2023 13:38:12 +0800 Subject: [PATCH 2/4] feat: add sortBy network members About #120 --- .../components/NetworkMembers/NetworkMembers.jsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/NetworkMembers/NetworkMembers.jsx b/frontend/src/components/NetworkMembers/NetworkMembers.jsx index a73beef0..ac594a00 100644 --- a/frontend/src/components/NetworkMembers/NetworkMembers.jsx +++ b/frontend/src/components/NetworkMembers/NetworkMembers.jsx @@ -4,8 +4,11 @@ import { AccordionSummary, Checkbox, Divider, + FormControlLabel, Grid, IconButton, + Radio, + RadioGroup, TextField, Typography, } from "@material-ui/core"; @@ -29,6 +32,7 @@ function NetworkMembers({ network }) { const [filter, setFilter] = useState(""); const [filterActive, setFilterActive] = useState(false); const [filterInactive, setFilterInactive] = useState(false); + const [sortBy, setSortBy] = useState("id"); const fetchData = useCallback(async () => { try { @@ -175,14 +179,14 @@ function NetworkMembers({ network }) { - + Search (Addr/Name) setFilter(e.target.value)} /> - + Display Filter Inactive + + Sort by + setSortBy(e.target.value)}> + } label="Name" /> + } label="Address" /> + + @@ -212,6 +223,7 @@ function NetworkMembers({ network }) { (filterInactive ? x.online === 0 : true) ) }) + .sort((a, b) => a[sortBy].localeCompare(b[sortBy])) } /> ) : ( From f0bd2b357d37ba56feed1fa7b1e4abd1214a33e6 Mon Sep 17 00:00:00 2001 From: dec0dOS Date: Sun, 16 Apr 2023 12:20:09 +0100 Subject: [PATCH 3/4] chore: run yarn lint --- .../NetworkMembers/NetworkMembers.jsx | 46 +++++++++++-------- yarn.lock | 12 ++--- 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/NetworkMembers/NetworkMembers.jsx b/frontend/src/components/NetworkMembers/NetworkMembers.jsx index ac594a00..9e9284ae 100644 --- a/frontend/src/components/NetworkMembers/NetworkMembers.jsx +++ b/frontend/src/components/NetworkMembers/NetworkMembers.jsx @@ -57,21 +57,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 = [ { @@ -203,9 +203,20 @@ function NetworkMembers({ network }) { Sort by - setSortBy(e.target.value)}> - } label="Name" /> - } label="Address" /> + setSortBy(e.target.value)} + > + } + label="Name" + /> + } + label="Address" + /> @@ -221,10 +232,9 @@ function NetworkMembers({ network }) { (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])) - } + .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 From 9c6963d68fb9278b21cf273b04c3398cbc0a47be Mon Sep 17 00:00:00 2001 From: dec0dOS Date: Sun, 16 Apr 2023 12:24:04 +0100 Subject: [PATCH 4/4] chore: better field name --- frontend/src/components/NetworkMembers/NetworkMembers.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/NetworkMembers/NetworkMembers.jsx b/frontend/src/components/NetworkMembers/NetworkMembers.jsx index 9e9284ae..fd77a069 100644 --- a/frontend/src/components/NetworkMembers/NetworkMembers.jsx +++ b/frontend/src/components/NetworkMembers/NetworkMembers.jsx @@ -180,7 +180,7 @@ function NetworkMembers({ network }) { - Search (Addr/Name) + Search (Address / Name) setFilter(e.target.value)}