diff --git a/geneit_app/src/routes/family/FamilyMemberRoute.tsx b/geneit_app/src/routes/family/FamilyMemberRoute.tsx index 67fa631..1679520 100644 --- a/geneit_app/src/routes/family/FamilyMemberRoute.tsx +++ b/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 diff --git a/geneit_app/src/routes/family/FamilyMembersListRoute.tsx b/geneit_app/src/routes/family/FamilyMembersListRoute.tsx index 57a3b60..3fa1f89 100644 --- a/geneit_app/src/routes/family/FamilyMembersListRoute.tsx +++ b/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 ( <> -
+
@@ -57,10 +66,26 @@ export function FamilyMembersListRoute(): React.ReactElement { situé en haut à droite pour créer le premier !

) : ( - + <> + setFilter(e.target.value)} + style={{ maxWidth: "500px", margin: "10px" }} + /> + + + m.fullName.toLowerCase().includes(filter.toLowerCase()) + ) + } + onDelete={processDeletion} + /> + )} );