pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 8 Packages Projects Releases Wiki Activity

Can filter members list on members page

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-16 10:39:00 +02:00
parent ac623fde9b
commit 8c6994e86d
2 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
geneit_app/src/routes/family/FamilyMemberRoute.tsx
View File

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

51
geneit_app/src/routes/family/FamilyMembersListRoute.tsx
View File

@ -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 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 DeleteIcon from "@mui/icons-material/DeleteOutlined";
import EditIcon from "@mui/icons-material/Edit"; import EditIcon from "@mui/icons-material/Edit";
import VisibilityIcon from "@mui/icons-material/Visibility"; 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 { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider"; import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider"; 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 { export function FamilyMembersListRoute(): React.ReactElement {
const alert = useAlert(); const alert = useAlert();
@ -21,6 +22,8 @@ export function FamilyMembersListRoute(): React.ReactElement {
const family = useFamily(); const family = useFamily();
const [filter, setFilter] = React.useState("");
const processDeletion = async (m: Member) => { const processDeletion = async (m: Member) => {
try { try {
if ( if (
@ -42,7 +45,13 @@ export function FamilyMembersListRoute(): React.ReactElement {
return ( return (
<> <>
<div style={{ display: "flex", justifyContent: "space-between" }}> <div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<FamilyPageTitle title="Membres de la famille" /> <FamilyPageTitle title="Membres de la famille" />
<RouterLink to={family.family.URL("member/create")}> <RouterLink to={family.family.URL("member/create")}>
<Tooltip title="Créer la fiche d'un nouveau membre"> <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 ! situé en haut à droite pour créer le premier !
</p> </p>
) : ( ) : (
<MembersTable <>
members={family.members.fullList} <TextField
onDelete={processDeletion} 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}
/>
</>
)} )}
</> </>
); );