Merge 9c6963d68f into 6df591654e

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 }) {
           <IconButton color="primary" onClick={fetchData}>
             <RefreshIcon />
           </IconButton>
+          <Grid container>
+            <Grid item sm={3}>
+              <Typography>Search (Address / Name)</Typography>
+              <TextField
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+              />
+            </Grid>
+            <Grid item sm={3}>
+              <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>
+            <Grid item sm={3}>
+              <Typography>Sort by</Typography>
+              <RadioGroup
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value)}
+              >
+                <FormControlLabel
+                  value="name"
+                  control={<Radio />}
+                  label="Name"
+                />
+                <FormControlLabel
+                  value="id"
+                  control={<Radio />}
+                  label="Address"
+                />
+              </RadioGroup>
+            </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)
+                    );
+                  })
+                  .sort((a, b) => a[sortBy].localeCompare(b[sortBy]))}
               />
             ) : (
               <Grid

yarn.lock

@@ -8323,7 +8323,7 @@ __metadata:
 
 "fsevents@patch:fsevents@^1.2.7#~builtin<compat/fsevents>":
   version: 1.2.13
-  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7"
+  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::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<compat/fsevents>, fsevents@patch:fsevents@^2.1.3#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::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<compat/resolve>":
   version: 1.18.1
-  resolution: "resolve@patch:resolve@npm%3A1.18.1#~builtin<compat/resolve>::version=1.18.1&hash=07638b"
+  resolution: "resolve@patch:resolve@npm%3A1.18.1#~builtin<compat/resolve>::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<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.18.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>":
   version: 1.22.1
-  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
+  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::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<compat/resolve>":
   version: 2.0.0-next.4
-  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=07638b"
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::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<compat/typescript>":
   version: 4.8.2
-  resolution: "typescript@patch:typescript@npm%3A4.8.2#~builtin<compat/typescript>::version=4.8.2&hash=a1c5e5"
+  resolution: "typescript@patch:typescript@npm%3A4.8.2#~builtin<compat/typescript>::version=4.8.2&hash=aae4e6"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver