Can filter members list on members page

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -16,6 +16,7 @@ import { AsyncWidget } from "../../widgets/AsyncWidget";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
 import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
+import { MemberItem } from "../../widgets/MemberItem";
 import { MemberPhoto } from "../../widgets/MemberPhoto";
 import { PropertiesBox } from "../../widgets/PropertiesBox";
 import { RouterLink } from "../../widgets/RouterLink";
@@ -26,7 +27,6 @@ import { PropEdit } from "../../widgets/forms/PropEdit";
 import { PropSelect } from "../../widgets/forms/SelectInput";
 import { SexSelection } from "../../widgets/forms/SexSelection";
 import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
-import { MemberItem } from "../../widgets/MemberItem";
 
 /**
  * Create a new member route

geneit_app/src/routes/family/FamilyMembersListRoute.tsx

@@ -1,18 +1,19 @@
-import { useNavigate } from "react-router-dom";
-import { useFamily } from "../../widgets/BaseFamilyRoute";
-import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
-import { Button, Tooltip } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import { RouterLink } from "../../widgets/RouterLink";
-import { Member, MemberApi, dateTimestamp, fmtDate } from "../../api/MemberApi";
-import { DataGrid, GridActionsCellItem, GridColDef } from "@mui/x-data-grid";
-import { MemberPhoto } from "../../widgets/MemberPhoto";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import EditIcon from "@mui/icons-material/Edit";
 import VisibilityIcon from "@mui/icons-material/Visibility";
+import { Button, TextField, Tooltip } from "@mui/material";
+import { DataGrid, GridActionsCellItem, GridColDef } from "@mui/x-data-grid";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Member, MemberApi, dateTimestamp, fmtDate } from "../../api/MemberApi";
 import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
+import { MemberPhoto } from "../../widgets/MemberPhoto";
+import { RouterLink } from "../../widgets/RouterLink";
 
 export function FamilyMembersListRoute(): React.ReactElement {
   const alert = useAlert();
@@ -21,6 +22,8 @@ export function FamilyMembersListRoute(): React.ReactElement {
 
   const family = useFamily();
 
+  const [filter, setFilter] = React.useState("");
+
   const processDeletion = async (m: Member) => {
     try {
       if (
@@ -42,7 +45,13 @@ export function FamilyMembersListRoute(): React.ReactElement {
 
   return (
     <>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
         <FamilyPageTitle title="Membres de la famille" />
         <RouterLink to={family.family.URL("member/create")}>
           <Tooltip title="Créer la fiche d'un nouveau membre">
@@ -57,10 +66,26 @@ export function FamilyMembersListRoute(): React.ReactElement {
           situé en haut à droite pour créer le premier !
         </p>
       ) : (
-        <MembersTable
-          members={family.members.fullList}
-          onDelete={processDeletion}
-        />
+        <>
+          <TextField
+            label={"Rechercher un membre..."}
+            variant="standard"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            style={{ maxWidth: "500px", margin: "10px" }}
+          />
+
+          <MembersTable
+            members={
+              filter === ""
+                ? family.members.fullList
+                : family.members.filter((m) =>
+                    m.fullName.toLowerCase().includes(filter.toLowerCase())
+                  )
+            }
+            onDelete={processDeletion}
+          />
+        </>
       )}
     </>
   );