Genealogy as a feature (#175)
Start our journey into turning GeneIT as afully featured family intranet by making genealogy a feature that can be disabled by family admins Reviewed-on: #175
This commit is contained in:
@@ -1,24 +0,0 @@
|
||||
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
||||
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
|
||||
|
||||
export function FamilyHomeRoute(): React.ReactElement {
|
||||
const family = useFamily();
|
||||
return (
|
||||
<>
|
||||
<FamilyPageTitle title="Votre famille" />
|
||||
<div style={{ margin: "20px" }}>
|
||||
<p>
|
||||
Bienvenue sur l'espace informatique dédié à la vie de votre famille !
|
||||
Veuillez utiliser le menu situé à gauche pour accéder aux différentes
|
||||
sections de l'application.
|
||||
</p>
|
||||
<p>Nombre de fiches de membres: {family.members.size}</p>
|
||||
<p>Nombre de fiches de couples: {family.couples.size}</p>
|
||||
<p>
|
||||
Vous pouvez inviter d'autres personnes à rejoindre cette famille en
|
||||
leur donnant une copie du code d'invitation
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
@@ -1,26 +1,19 @@
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import UploadIcon from "@mui/icons-material/Upload";
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
CardActions,
|
||||
CardContent,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
Switch,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { DataApi } from "../../api/DataApi";
|
||||
import { FamilyApi } from "../../api/FamilyApi";
|
||||
import { ServerApi } from "../../api/ServerApi";
|
||||
import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
|
||||
import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
|
||||
import { useLoadingMessage } from "../../hooks/context_providers/LoadingMessageProvider";
|
||||
import { downloadBlob, selectFileToUpload } from "../../utils/files_utils";
|
||||
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
||||
import { FamilyCard } from "../../widgets/FamilyCard";
|
||||
import { formatDate } from "../../widgets/TimeWidget";
|
||||
@@ -55,7 +48,6 @@ export function FamilySettingsRoute(): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
<FamilySettingsCard />
|
||||
<FamilyExportCard />
|
||||
<div style={{ textAlign: "center", marginTop: "50px" }}>
|
||||
<Button
|
||||
size="small"
|
||||
@@ -76,8 +68,8 @@ function FamilySettingsCard(): React.ReactElement {
|
||||
const family = useFamily();
|
||||
|
||||
const [newName, setNewName] = React.useState(family.family.name);
|
||||
const [disableCouplePhotos, setDisableCouplePhotos] = React.useState(
|
||||
family.family.disable_couple_photos
|
||||
const [enableGenealogy, setEnableGenealogy] = React.useState(
|
||||
family.family.enable_genealogy
|
||||
);
|
||||
|
||||
const canEdit = family.family.is_admin;
|
||||
@@ -93,7 +85,7 @@ function FamilySettingsCard(): React.ReactElement {
|
||||
await FamilyApi.UpdateFamily({
|
||||
id: family.family.family_id,
|
||||
name: newName,
|
||||
disable_couple_photos: disableCouplePhotos,
|
||||
enable_genealogy: enableGenealogy,
|
||||
});
|
||||
|
||||
family.reloadFamilyInfo();
|
||||
@@ -144,18 +136,17 @@ function FamilySettingsCard(): React.ReactElement {
|
||||
maxLength: ServerApi.Config.constraints.family_name_len.max,
|
||||
}}
|
||||
/>
|
||||
<Tooltip title="Les photos de couple ne sont pas utilisées en pratique dans les arbres généalogiques. Il est possible de masquer les formulaires d'édition de photos de couple pour limiter le risque de confusion.">
|
||||
<FormControlLabel
|
||||
disabled={!canEdit}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={disableCouplePhotos}
|
||||
onChange={(_e, c) => setDisableCouplePhotos(c)}
|
||||
/>
|
||||
}
|
||||
label="Désactiver les photos de couple"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<FormControlLabel
|
||||
disabled={!canEdit}
|
||||
control={
|
||||
<Switch
|
||||
checked={enableGenealogy}
|
||||
onChange={(_e, c) => setEnableGenealogy(c)}
|
||||
/>
|
||||
}
|
||||
label="Activer le module de généalogie"
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
@@ -170,109 +161,3 @@ function FamilySettingsCard(): React.ReactElement {
|
||||
</FamilyCard>
|
||||
);
|
||||
}
|
||||
|
||||
function FamilyExportCard(): React.ReactElement {
|
||||
const loading = useLoadingMessage();
|
||||
const confirm = useConfirm();
|
||||
const alert = useAlert();
|
||||
|
||||
const family = useFamily();
|
||||
|
||||
const [error, setError] = React.useState<string>();
|
||||
const [success, setSuccess] = React.useState<string>();
|
||||
|
||||
const exportData = async () => {
|
||||
loading.show("Export des données");
|
||||
try {
|
||||
setError(undefined);
|
||||
setSuccess(undefined);
|
||||
|
||||
const blob = await DataApi.ExportData(family.familyId);
|
||||
downloadBlob(blob, `Export-${new Date().getTime()}.zip`);
|
||||
|
||||
setSuccess("Export des données effectué avec succès !");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError("Echec de l'export des données de la famille !");
|
||||
}
|
||||
loading.hide();
|
||||
};
|
||||
|
||||
const importData = async () => {
|
||||
try {
|
||||
if (
|
||||
!(await confirm(
|
||||
"Attention ! Cette opération a pour effet d'effacer toutes les données existantes en base ! Voulez-vous vraiment poursuivre l'opération ?"
|
||||
))
|
||||
)
|
||||
return;
|
||||
|
||||
const file = await selectFileToUpload({
|
||||
allowedTypes: ["application/zip"],
|
||||
});
|
||||
if (file === null) return;
|
||||
|
||||
setError(undefined);
|
||||
setSuccess(undefined);
|
||||
|
||||
loading.show("Restauration des données de la famille en cours...");
|
||||
|
||||
await DataApi.ImportData(family.familyId, file);
|
||||
|
||||
family.reloadFamilyInfo();
|
||||
|
||||
alert("Import des données de la famille effectué avec succès !");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError(`Echec de l'import des données de la famille ! (${e})`);
|
||||
}
|
||||
|
||||
loading.hide();
|
||||
};
|
||||
|
||||
return (
|
||||
<FamilyCard error={error} success={success}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
Export / import des données de la famille
|
||||
</Typography>
|
||||
<p>
|
||||
Vous pouvez, à des fins de sauvegardes ou de transfert, exporter et
|
||||
importer l'ensemble des données des membres et des couples de cette
|
||||
famille, sous format ZIP.
|
||||
</p>
|
||||
|
||||
<Alert severity="warning">
|
||||
Attention ! La restauration des données de la famille provoque
|
||||
préalablement l'effacement de toutes les données enregistrées dans la
|
||||
famille ! Par ailleurs, la restauration n'est pas réversible !
|
||||
</Alert>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<Button
|
||||
startIcon={<DownloadIcon />}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={exportData}
|
||||
size={"large"}
|
||||
style={{ marginBottom: "10px" }}
|
||||
>
|
||||
Exporter les données de la famille
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<UploadIcon />}
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
fullWidth
|
||||
onClick={importData}
|
||||
disabled={!family.family.is_admin}
|
||||
size={"large"}
|
||||
>
|
||||
Importer les données de la famille
|
||||
</Button>
|
||||
</CardContent>
|
||||
</FamilyCard>
|
||||
);
|
||||
}
|
||||
|
@@ -6,26 +6,27 @@ import SaveIcon from "@mui/icons-material/Save";
|
||||
import { Button, Grid, Stack } from "@mui/material";
|
||||
import React from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Couple, CoupleApi } from "../../api/CoupleApi";
|
||||
import { Member } from "../../api/MemberApi";
|
||||
import { ServerApi } from "../../api/ServerApi";
|
||||
import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
|
||||
import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
|
||||
import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
|
||||
import { AsyncWidget } from "../../widgets/AsyncWidget";
|
||||
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
||||
import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
|
||||
import { CouplePhoto } from "../../widgets/CouplePhoto";
|
||||
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
|
||||
import { MemberItem } from "../../widgets/MemberItem";
|
||||
import { PropertiesBox } from "../../widgets/PropertiesBox";
|
||||
import { RouterLink } from "../../widgets/RouterLink";
|
||||
import { DateInput } from "../../widgets/forms/DateInput";
|
||||
import { MemberInput } from "../../widgets/forms/MemberInput";
|
||||
import { PropSelect } from "../../widgets/forms/PropSelect";
|
||||
import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
|
||||
import { useQuery } from "../../hooks/useQuery";
|
||||
import { useLoadingMessage } from "../../hooks/context_providers/LoadingMessageProvider";
|
||||
import { ServerApi } from "../../../api/ServerApi";
|
||||
import { Couple, CoupleApi } from "../../../api/genealogy/CoupleApi";
|
||||
import { Member } from "../../../api/genealogy/MemberApi";
|
||||
import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
|
||||
import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
|
||||
import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
|
||||
import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
|
||||
import { useQuery } from "../../../hooks/useQuery";
|
||||
import { AsyncWidget } from "../../../widgets/AsyncWidget";
|
||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||
import { ConfirmLeaveWithoutSaveDialog } from "../../../widgets/ConfirmLeaveWithoutSaveDialog";
|
||||
import { CouplePhoto } from "../../../widgets/CouplePhoto";
|
||||
import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
|
||||
import { MemberItem } from "../../../widgets/MemberItem";
|
||||
import { PropertiesBox } from "../../../widgets/PropertiesBox";
|
||||
import { RouterLink } from "../../../widgets/RouterLink";
|
||||
import { DateInput } from "../../../widgets/forms/DateInput";
|
||||
import { MemberInput } from "../../../widgets/forms/MemberInput";
|
||||
import { PropSelect } from "../../../widgets/forms/PropSelect";
|
||||
import { UploadPhotoButton } from "../../../widgets/forms/UploadPhotoButton";
|
||||
import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
|
||||
|
||||
/**
|
||||
* Create a new couple route
|
||||
@@ -36,6 +37,7 @@ export function FamilyCreateCoupleRoute(): React.ReactElement {
|
||||
|
||||
const [shouldQuit, setShouldQuit] = React.useState(false);
|
||||
const n = useNavigate();
|
||||
const genealogy = useGenealogy();
|
||||
const family = useFamily();
|
||||
|
||||
const params = useQuery();
|
||||
@@ -49,7 +51,7 @@ export function FamilyCreateCoupleRoute(): React.ReactElement {
|
||||
try {
|
||||
const r = await CoupleApi.Create(m);
|
||||
|
||||
await family.reloadCouplesList();
|
||||
await genealogy.reloadCouplesList();
|
||||
|
||||
setShouldQuit(true);
|
||||
n(family.family.coupleURL(r));
|
||||
@@ -62,7 +64,7 @@ export function FamilyCreateCoupleRoute(): React.ReactElement {
|
||||
|
||||
const cancel = () => {
|
||||
setShouldQuit(true);
|
||||
n(family.family.URL("couples"));
|
||||
n(family.family.URL("genealogy/couples"));
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -89,6 +91,7 @@ export function FamilyCoupleRoute(): React.ReactElement {
|
||||
const snackbar = useSnackbar();
|
||||
|
||||
const family = useFamily();
|
||||
const genealogy = useGenealogy();
|
||||
const { coupleId } = useParams();
|
||||
|
||||
const [couple, setCouple] = React.useState<Couple>();
|
||||
@@ -100,7 +103,7 @@ export function FamilyCoupleRoute(): React.ReactElement {
|
||||
count.current += 1;
|
||||
setCouple(undefined);
|
||||
|
||||
await family.reloadCouplesList();
|
||||
await genealogy.reloadCouplesList();
|
||||
};
|
||||
|
||||
const deleteCouple = async () => {
|
||||
@@ -115,9 +118,9 @@ export function FamilyCoupleRoute(): React.ReactElement {
|
||||
await CoupleApi.Delete(couple!);
|
||||
|
||||
snackbar("La fiche du couple a été supprimée avec succès !");
|
||||
n(family.family.URL("couples"));
|
||||
n(family.family.URL("genealogy/couples"));
|
||||
|
||||
await family.reloadCouplesList();
|
||||
await genealogy.reloadCouplesList();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Échec de la suppression du couple !");
|
||||
@@ -133,7 +136,7 @@ export function FamilyCoupleRoute(): React.ReactElement {
|
||||
build={() => (
|
||||
<CouplePage
|
||||
couple={couple!}
|
||||
children={family.members.childrenOfCouple(couple!)}
|
||||
children={genealogy.members.childrenOfCouple(couple!)}
|
||||
creating={false}
|
||||
editing={false}
|
||||
onRequestDelete={deleteCouple}
|
||||
@@ -157,6 +160,7 @@ export function FamilyEditCoupleRoute(): React.ReactElement {
|
||||
|
||||
const [shouldQuit, setShouldQuit] = React.useState(false);
|
||||
|
||||
const genealogy = useGenealogy();
|
||||
const family = useFamily();
|
||||
|
||||
const [couple, setCouple] = React.useState<Couple>();
|
||||
@@ -176,7 +180,7 @@ export function FamilyEditCoupleRoute(): React.ReactElement {
|
||||
|
||||
snackbar("Les informations du couple ont été mises à jour avec succès !");
|
||||
|
||||
await family.reloadCouplesList();
|
||||
await genealogy.reloadCouplesList();
|
||||
|
||||
setShouldQuit(true);
|
||||
n(family.family.coupleURL(c, false));
|
||||
@@ -486,7 +490,7 @@ export function CouplePage(p: {
|
||||
<div style={{ display: "flex", justifyContent: "end" }}>
|
||||
<RouterLink
|
||||
to={family.family.URL(
|
||||
`member/create?mother=${couple.wife}&father=${couple.husband}`
|
||||
`genealogy/member/create?mother=${couple.wife}&father=${couple.husband}`
|
||||
)}
|
||||
>
|
||||
<Button>Nouveau</Button>
|
@@ -6,17 +6,18 @@ 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 { Couple, CoupleApi } from "../../api/CoupleApi";
|
||||
import { dateTimestamp, fmtDate } from "../../api/MemberApi";
|
||||
import { ServerApi } from "../../api/ServerApi";
|
||||
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 { CouplePhoto } from "../../widgets/CouplePhoto";
|
||||
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
|
||||
import { MemberPhoto } from "../../widgets/MemberPhoto";
|
||||
import { RouterLink } from "../../widgets/RouterLink";
|
||||
import { Couple, CoupleApi } from "../../../api/genealogy/CoupleApi";
|
||||
import { dateTimestamp, fmtDate } from "../../../api/genealogy/MemberApi";
|
||||
import { ServerApi } from "../../../api/ServerApi";
|
||||
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 { CouplePhoto } from "../../../widgets/CouplePhoto";
|
||||
import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
|
||||
import { MemberPhoto } from "../../../widgets/MemberPhoto";
|
||||
import { RouterLink } from "../../../widgets/RouterLink";
|
||||
import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
|
||||
|
||||
export function FamilyCouplesListRoute(): React.ReactElement {
|
||||
const alert = useAlert();
|
||||
@@ -24,6 +25,7 @@ export function FamilyCouplesListRoute(): React.ReactElement {
|
||||
const snackbar = useSnackbar();
|
||||
|
||||
const family = useFamily();
|
||||
const genealogy = useGenealogy();
|
||||
|
||||
const [filter, setFilter] = React.useState("");
|
||||
|
||||
@@ -37,7 +39,7 @@ export function FamilyCouplesListRoute(): React.ReactElement {
|
||||
return;
|
||||
|
||||
await CoupleApi.Delete(c);
|
||||
await family.reloadCouplesList();
|
||||
await genealogy.reloadCouplesList();
|
||||
|
||||
snackbar("La fiche du couple a été supprimée avec succès !");
|
||||
} catch (e) {
|
||||
@@ -63,7 +65,7 @@ export function FamilyCouplesListRoute(): React.ReactElement {
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
{family.couples.isEmpty ? (
|
||||
{genealogy.couples.isEmpty ? (
|
||||
<p>
|
||||
Votre famille n'a aucun couple enregistré pour le moment ! Utilisez le
|
||||
bouton situé en haut à droite pour créer le premier !
|
||||
@@ -81,16 +83,16 @@ export function FamilyCouplesListRoute(): React.ReactElement {
|
||||
<CouplesTable
|
||||
couples={
|
||||
filter === ""
|
||||
? family.couples.fullList
|
||||
: family.couples.filter(
|
||||
? genealogy.couples.fullList
|
||||
: genealogy.couples.filter(
|
||||
(m) =>
|
||||
(m.wife &&
|
||||
family.members
|
||||
genealogy.members
|
||||
.get(m.wife)!
|
||||
.fullName.toLocaleLowerCase()
|
||||
.includes(filter.toLocaleLowerCase())) ||
|
||||
(m.husband &&
|
||||
family.members
|
||||
genealogy.members
|
||||
.get(m.husband)!
|
||||
.fullName.toLocaleLowerCase()
|
||||
.includes(filter.toLocaleLowerCase())) === true
|
||||
@@ -109,14 +111,18 @@ function CouplesTable(p: {
|
||||
onDelete: (m: Couple) => void;
|
||||
}): React.ReactElement {
|
||||
const family = useFamily();
|
||||
const genealogy = useGenealogy();
|
||||
|
||||
const n = useNavigate();
|
||||
|
||||
const compareInvertedMembersNames = (
|
||||
v1: number | undefined,
|
||||
v2: number | undefined
|
||||
) => {
|
||||
const n1 = ((v1 && family.members.get(v1)?.invertedFullName) ?? "") || "";
|
||||
const n2 = ((v2 && family.members.get(v2)?.invertedFullName) ?? "") || "";
|
||||
const n1 =
|
||||
((v1 && genealogy.members.get(v1)?.invertedFullName) ?? "") || "";
|
||||
const n2 =
|
||||
((v2 && genealogy.members.get(v2)?.invertedFullName) ?? "") || "";
|
||||
|
||||
return n1?.localeCompare(n2, undefined, {
|
||||
ignorePunctuation: true,
|
||||
@@ -132,7 +138,13 @@ function CouplesTable(p: {
|
||||
sortable: false,
|
||||
width: 60,
|
||||
renderCell(params) {
|
||||
return <CouplePhoto couple={params.row} />;
|
||||
return (
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", height: "100%" }}
|
||||
>
|
||||
<CouplePhoto couple={params.row} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -253,10 +265,10 @@ function CouplesTable(p: {
|
||||
}
|
||||
|
||||
function MemberCell(p: { id?: number }): React.ReactElement {
|
||||
const family = useFamily();
|
||||
const genealogy = useGenealogy();
|
||||
if (!p.id) return <></>;
|
||||
|
||||
const member = family.members.get(p.id!)!;
|
||||
const member = genealogy.members.get(p.id!)!;
|
||||
|
||||
return (
|
||||
<Tooltip title="Double-cliquez ici pour accéder à la fiche du membre">
|
17
geneit_app/src/routes/family/genealogy/FamilyHomeRoute.tsx
Normal file
17
geneit_app/src/routes/family/genealogy/FamilyHomeRoute.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||
import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
|
||||
|
||||
export function FamilyHomeRoute(): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
<FamilyPageTitle title="Votre famille" />
|
||||
<div style={{ margin: "20px" }}>
|
||||
<p>
|
||||
Bienvenue sur l'espace informatique dédié à la vie de votre famille !
|
||||
Veuillez utiliser le menu situé à gauche pour accéder aux différentes
|
||||
sections de l'application.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
@@ -1,3 +1,5 @@
|
||||
import { mdiFamilyTree } from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
@@ -14,32 +16,31 @@ import {
|
||||
import * as EmailValidator from "email-validator";
|
||||
import React from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Couple } from "../../api/CoupleApi";
|
||||
import { Member, MemberApi, fmtDate } from "../../api/MemberApi";
|
||||
import { ServerApi } from "../../api/ServerApi";
|
||||
import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
|
||||
import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
|
||||
import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
|
||||
import { AsyncWidget } from "../../widgets/AsyncWidget";
|
||||
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
||||
import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
|
||||
import { CouplePhoto } from "../../widgets/CouplePhoto";
|
||||
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";
|
||||
import { DateInput } from "../../widgets/forms/DateInput";
|
||||
import { MemberInput } from "../../widgets/forms/MemberInput";
|
||||
import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
|
||||
import { PropEdit } from "../../widgets/forms/PropEdit";
|
||||
import { PropSelect } from "../../widgets/forms/PropSelect";
|
||||
import { SexSelection } from "../../widgets/forms/SexSelection";
|
||||
import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
|
||||
import { useQuery } from "../../hooks/useQuery";
|
||||
import { mdiFamilyTree } from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
import { useLoadingMessage } from "../../hooks/context_providers/LoadingMessageProvider";
|
||||
import { ServerApi } from "../../../api/ServerApi";
|
||||
import { Couple } from "../../../api/genealogy/CoupleApi";
|
||||
import { Member, MemberApi, fmtDate } from "../../../api/genealogy/MemberApi";
|
||||
import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
|
||||
import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
|
||||
import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
|
||||
import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
|
||||
import { useQuery } from "../../../hooks/useQuery";
|
||||
import { AsyncWidget } from "../../../widgets/AsyncWidget";
|
||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||
import { ConfirmLeaveWithoutSaveDialog } from "../../../widgets/ConfirmLeaveWithoutSaveDialog";
|
||||
import { CouplePhoto } from "../../../widgets/CouplePhoto";
|
||||
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";
|
||||
import { DateInput } from "../../../widgets/forms/DateInput";
|
||||
import { MemberInput } from "../../../widgets/forms/MemberInput";
|
||||
import { PropCheckbox } from "../../../widgets/forms/PropCheckbox";
|
||||
import { PropEdit } from "../../../widgets/forms/PropEdit";
|
||||
import { PropSelect } from "../../../widgets/forms/PropSelect";
|
||||
import { SexSelection } from "../../../widgets/forms/SexSelection";
|
||||
import { UploadPhotoButton } from "../../../widgets/forms/UploadPhotoButton";
|
||||
import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
|
||||
|
||||
/**
|
||||
* Create a new member route
|
||||
@@ -50,6 +51,7 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
|
||||
|
||||
const [shouldQuit, setShouldQuit] = React.useState(false);
|
||||
const n = useNavigate();
|
||||
const genealogy = useGenealogy();
|
||||
const family = useFamily();
|
||||
|
||||
const parameters = useQuery();
|
||||
@@ -60,10 +62,10 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
|
||||
try {
|
||||
const r = await MemberApi.Create(m);
|
||||
|
||||
await family.reloadMembersList();
|
||||
await genealogy.reloadMembersList();
|
||||
|
||||
setShouldQuit(true);
|
||||
n(family.family.URL(`member/${r.id}`));
|
||||
n(family.family.URL(`genealogy/member/${r.id}`));
|
||||
snackbar(`La fiche pour ${r.fullName} a été créée avec succès !`);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -73,7 +75,7 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
|
||||
|
||||
const cancel = () => {
|
||||
setShouldQuit(true);
|
||||
n(family.family.URL("members"));
|
||||
n(family.family.URL("genealogy/members"));
|
||||
};
|
||||
|
||||
const member = Member.New(family.family.family_id);
|
||||
@@ -104,6 +106,7 @@ export function FamilyMemberRoute(): React.ReactElement {
|
||||
const snackbar = useSnackbar();
|
||||
|
||||
const family = useFamily();
|
||||
const genealogy = useGenealogy();
|
||||
const { memberId } = useParams();
|
||||
|
||||
const [member, setMember] = React.useState<Member>();
|
||||
@@ -115,7 +118,7 @@ export function FamilyMemberRoute(): React.ReactElement {
|
||||
count.current += 1;
|
||||
setMember(undefined);
|
||||
|
||||
await family.reloadMembersList();
|
||||
await genealogy.reloadMembersList();
|
||||
};
|
||||
|
||||
const deleteMember = async () => {
|
||||
@@ -130,9 +133,9 @@ export function FamilyMemberRoute(): React.ReactElement {
|
||||
await MemberApi.Delete(member!);
|
||||
|
||||
snackbar("La fiche de membre a été supprimée avec succès !");
|
||||
n(family.family.URL("members"));
|
||||
n(family.family.URL("genealogy/members"));
|
||||
|
||||
await family.reloadMembersList();
|
||||
await genealogy.reloadMembersList();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Échec de la suppression du membre !");
|
||||
@@ -148,16 +151,14 @@ export function FamilyMemberRoute(): React.ReactElement {
|
||||
build={() => (
|
||||
<MemberPage
|
||||
member={member!}
|
||||
children={family.members.children(member!.id)}
|
||||
siblings={family.members.siblings(member!.id)}
|
||||
couples={family.couples.getAllOf(member!)}
|
||||
children={genealogy.members.children(member!.id)}
|
||||
siblings={genealogy.members.siblings(member!.id)}
|
||||
couples={genealogy.couples.getAllOf(member!)}
|
||||
creating={false}
|
||||
editing={false}
|
||||
onrequestOpenTree={() => n(family.family.familyTreeURL(member!))}
|
||||
onRequestDelete={deleteMember}
|
||||
onRequestEdit={() =>
|
||||
n(family.family.URL(`member/${member!.id}/edit`))
|
||||
}
|
||||
onRequestEdit={() => n(family.family.memberURL(member!, true))}
|
||||
onForceReload={forceReload}
|
||||
/>
|
||||
)}
|
||||
@@ -178,6 +179,7 @@ export function FamilyEditMemberRoute(): React.ReactElement {
|
||||
const [shouldQuit, setShouldQuit] = React.useState(false);
|
||||
|
||||
const family = useFamily();
|
||||
const genealogy = useGenealogy();
|
||||
|
||||
const [member, setMember] = React.useState<Member>();
|
||||
const load = async () => {
|
||||
@@ -196,10 +198,10 @@ export function FamilyEditMemberRoute(): React.ReactElement {
|
||||
|
||||
snackbar("Les informations du membre ont été mises à jour avec succès !");
|
||||
|
||||
await family.reloadMembersList();
|
||||
await genealogy.reloadMembersList();
|
||||
|
||||
setShouldQuit(true);
|
||||
n(family.family.URL(`member/${member!.id}`));
|
||||
n(family.family.memberURL(member!));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Échec de la mise à jour des informations du membre !");
|
||||
@@ -662,9 +664,9 @@ export function MemberPage(p: {
|
||||
<div style={{ display: "flex", justifyContent: "end" }}>
|
||||
<RouterLink
|
||||
to={family.family.URL(
|
||||
`couple/create?${member.sex === "F" ? "wife" : "husband"}=${
|
||||
member.id
|
||||
}`
|
||||
`genealogy/couple/create?${
|
||||
member.sex === "F" ? "wife" : "husband"
|
||||
}=${member.id}`
|
||||
)}
|
||||
>
|
||||
<Button>Nouveau</Button>
|
||||
@@ -682,10 +684,7 @@ export function MemberPage(p: {
|
||||
<>Aucun enfant</>
|
||||
) : (
|
||||
p.children.map((c) => (
|
||||
<RouterLink
|
||||
key={c.id}
|
||||
to={family.family.URL(`member/${c.id}`)}
|
||||
>
|
||||
<RouterLink key={c.id} to={family.family.memberURL(c)}>
|
||||
<MemberItem member={c} />
|
||||
</RouterLink>
|
||||
))
|
||||
@@ -694,7 +693,7 @@ export function MemberPage(p: {
|
||||
<div style={{ display: "flex", justifyContent: "end" }}>
|
||||
<RouterLink
|
||||
to={family.family.URL(
|
||||
`member/create?${
|
||||
`genealogy/member/create?${
|
||||
member.sex === "F" ? "mother" : "father"
|
||||
}=${member.id}`
|
||||
)}
|
||||
@@ -714,10 +713,7 @@ export function MemberPage(p: {
|
||||
<>Aucun frère ou sœur</>
|
||||
) : (
|
||||
p.siblings.map((c) => (
|
||||
<RouterLink
|
||||
key={c.id}
|
||||
to={family.family.URL(`member/${c.id}`)}
|
||||
>
|
||||
<RouterLink key={c.id} to={family.family.memberURL(c)}>
|
||||
<MemberItem member={c} />
|
||||
</RouterLink>
|
||||
))
|
||||
@@ -727,7 +723,7 @@ export function MemberPage(p: {
|
||||
<div style={{ display: "flex", justifyContent: "end" }}>
|
||||
<RouterLink
|
||||
to={family.family.URL(
|
||||
`member/create?mother=${member.mother}&father=${member.father}`
|
||||
`genealogy/member/create?mother=${member.mother}&father=${member.father}`
|
||||
)}
|
||||
>
|
||||
<Button>Nouveau</Button>
|
||||
@@ -749,6 +745,7 @@ function CoupleItem(p: {
|
||||
const n = useNavigate();
|
||||
|
||||
const family = useFamily();
|
||||
const genealogy = useGenealogy();
|
||||
|
||||
const statusStr = ServerApi.Config.couples_states.find(
|
||||
(c) => c.code === p.couple.state
|
||||
@@ -766,7 +763,7 @@ function CoupleItem(p: {
|
||||
const otherSpouseID =
|
||||
p.couple.wife === p.currMemberId ? p.couple.husband : p.couple.wife;
|
||||
const otherSpouse = otherSpouseID
|
||||
? family.members.get(otherSpouseID)
|
||||
? genealogy.members.get(otherSpouseID)
|
||||
: undefined;
|
||||
|
||||
return (
|
@@ -21,12 +21,13 @@ import {
|
||||
buildAscendingTree,
|
||||
buildDescendingTree,
|
||||
treeHeight,
|
||||
} from "../../utils/family_tree";
|
||||
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
||||
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
|
||||
import { MemberItem } from "../../widgets/MemberItem";
|
||||
import { RouterLink } from "../../widgets/RouterLink";
|
||||
import { SimpleFamilyTree } from "../../widgets/simple_family_tree/SimpleFamilyTree";
|
||||
} from "../../../utils/family_tree";
|
||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||
import { BasicFamilyTree } from "../../../widgets/BasicFamilyTree";
|
||||
import { MemberItem } from "../../../widgets/MemberItem";
|
||||
import { RouterLink } from "../../../widgets/RouterLink";
|
||||
import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
|
||||
import { SimpleFamilyTree } from "../../../widgets/simple_family_tree/SimpleFamilyTree";
|
||||
|
||||
enum CurrTab {
|
||||
BasicTree,
|
||||
@@ -41,22 +42,23 @@ enum TreeMode {
|
||||
export function FamilyMemberTreeRoute(): React.ReactElement {
|
||||
const { memberId } = useParams();
|
||||
|
||||
const genealogy = useGenealogy();
|
||||
const family = useFamily();
|
||||
|
||||
const [currTab, setCurrTab] = React.useState(CurrTab.SimpleTree);
|
||||
const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
|
||||
|
||||
const member = family.members.get(Number(memberId));
|
||||
const member = genealogy.members.get(Number(memberId));
|
||||
|
||||
const memo: [FamilyTreeNode, number] | null = React.useMemo(() => {
|
||||
if (!member) return null;
|
||||
const tree =
|
||||
currMode === TreeMode.Ascending
|
||||
? buildAscendingTree(member.id, family.members, family.couples)
|
||||
: buildDescendingTree(member.id, family.members, family.couples);
|
||||
? buildAscendingTree(member.id, genealogy.members, genealogy.couples)
|
||||
: buildDescendingTree(member.id, genealogy.members, genealogy.couples);
|
||||
|
||||
return [tree, treeHeight(tree)];
|
||||
}, [member, currMode, family.members, family.couples]);
|
||||
}, [member, currMode, genealogy.members, genealogy.couples]);
|
||||
|
||||
const [currDepth, setCurrDepth] = React.useState(0);
|
||||
|
||||
@@ -87,7 +89,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
|
||||
dense
|
||||
member={member}
|
||||
secondary={
|
||||
<RouterLink to={family.family.URL("tree")}>
|
||||
<RouterLink to={family.family.URL("genealogy/tree")}>
|
||||
<IconButton>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
@@ -8,20 +8,27 @@ import { Button, TextField, Tooltip, Typography } 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";
|
||||
import {
|
||||
Member,
|
||||
MemberApi,
|
||||
dateTimestamp,
|
||||
fmtDate,
|
||||
} from "../../../api/genealogy/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";
|
||||
import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
|
||||
|
||||
export function FamilyMembersListRoute(): React.ReactElement {
|
||||
const alert = useAlert();
|
||||
const confirm = useConfirm();
|
||||
const snackbar = useSnackbar();
|
||||
|
||||
const genealogy = useGenealogy();
|
||||
const family = useFamily();
|
||||
|
||||
const [filter, setFilter] = React.useState("");
|
||||
@@ -36,7 +43,7 @@ export function FamilyMembersListRoute(): React.ReactElement {
|
||||
return;
|
||||
|
||||
await MemberApi.Delete(m);
|
||||
await family.reloadMembersList();
|
||||
await genealogy.reloadMembersList();
|
||||
|
||||
snackbar("La fiche du membre a été supprimée avec succès !");
|
||||
} catch (e) {
|
||||
@@ -55,14 +62,14 @@ export function FamilyMembersListRoute(): React.ReactElement {
|
||||
}}
|
||||
>
|
||||
<FamilyPageTitle title="Membres de la famille" />
|
||||
<RouterLink to={family.family.URL("member/create")}>
|
||||
<RouterLink to={family.family.URL("genealogy/member/create")}>
|
||||
<Tooltip title="Créer la fiche d'un nouveau membre">
|
||||
<Button startIcon={<AddIcon />}>Nouveau</Button>
|
||||
</Tooltip>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
{family.members.isEmpty ? (
|
||||
{genealogy.members.isEmpty ? (
|
||||
<p>
|
||||
Votre famille n'a aucun membre pour le moment ! Utilisez le bouton
|
||||
situé en haut à droite pour créer le premier !
|
||||
@@ -80,8 +87,8 @@ export function FamilyMembersListRoute(): React.ReactElement {
|
||||
<MembersTable
|
||||
members={
|
||||
filter === ""
|
||||
? family.members.fullList
|
||||
: family.members.filter((m) =>
|
||||
? genealogy.members.fullList
|
||||
: genealogy.members.filter((m) =>
|
||||
m.fullName.toLowerCase().includes(filter.toLowerCase())
|
||||
)
|
||||
}
|
||||
@@ -97,6 +104,7 @@ function MembersTable(p: {
|
||||
members: Member[];
|
||||
onDelete: (m: Member) => void;
|
||||
}): React.ReactElement {
|
||||
const genealogy = useGenealogy();
|
||||
const family = useFamily();
|
||||
const n = useNavigate();
|
||||
|
||||
@@ -108,7 +116,13 @@ function MembersTable(p: {
|
||||
sortable: false,
|
||||
width: 60,
|
||||
renderCell(params) {
|
||||
return <MemberPhoto member={params.row} />;
|
||||
return (
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", height: "100%" }}
|
||||
>
|
||||
<MemberPhoto member={params.row} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -166,8 +180,12 @@ function MembersTable(p: {
|
||||
flex: 5,
|
||||
renderCell(params) {
|
||||
if (!params.row.father)
|
||||
return <Typography color="red">Non renseigné</Typography>;
|
||||
return family.members.get(params.row.father)!.fullName;
|
||||
return (
|
||||
<Typography color="red" component="span" variant="body2">
|
||||
Non renseigné
|
||||
</Typography>
|
||||
);
|
||||
return genealogy.members.get(params.row.father)!.fullName;
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -176,8 +194,12 @@ function MembersTable(p: {
|
||||
flex: 5,
|
||||
renderCell(params) {
|
||||
if (!params.row.mother)
|
||||
return <Typography color="red">Non renseignée</Typography>;
|
||||
return family.members.get(params.row.mother)!.fullName;
|
||||
return (
|
||||
<Typography color="red" component="span" variant="body2">
|
||||
Non renseignée
|
||||
</Typography>
|
||||
);
|
||||
return genealogy.members.get(params.row.mother)!.fullName;
|
||||
},
|
||||
},
|
||||
{
|
@@ -1,6 +1,6 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
||||
import { MemberInput } from "../../widgets/forms/MemberInput";
|
||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||
import { MemberInput } from "../../../widgets/forms/MemberInput";
|
||||
|
||||
export function FamilyTreeRoute(): React.ReactElement {
|
||||
const n = useNavigate();
|
221
geneit_app/src/routes/family/genealogy/GenalogySettingsRoute.tsx
Normal file
221
geneit_app/src/routes/family/genealogy/GenalogySettingsRoute.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import UploadIcon from "@mui/icons-material/Upload";
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
CardActions,
|
||||
CardContent,
|
||||
FormControlLabel,
|
||||
Switch,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import { FamilyApi } from "../../../api/FamilyApi";
|
||||
import { DataApi } from "../../../api/genealogy/DataApi";
|
||||
import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
|
||||
import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
|
||||
import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
|
||||
import { downloadBlob, selectFileToUpload } from "../../../utils/files_utils";
|
||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||
import { FamilyCard } from "../../../widgets/FamilyCard";
|
||||
|
||||
export function GenalogySettingsRoute(): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
<GenealogySettingsCard />
|
||||
<GenealogyExportCard />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function GenealogySettingsCard(): React.ReactElement {
|
||||
const alert = useAlert();
|
||||
|
||||
const family = useFamily();
|
||||
|
||||
const [disableCouplePhotos, setDisableCouplePhotos] = React.useState(
|
||||
family.family.disable_couple_photos
|
||||
);
|
||||
|
||||
const canEdit = family.family.is_admin;
|
||||
|
||||
const [error, setError] = React.useState<string>();
|
||||
const [success, setSuccess] = React.useState<string>();
|
||||
|
||||
const updateFamily = async () => {
|
||||
try {
|
||||
setError(undefined);
|
||||
setSuccess(undefined);
|
||||
|
||||
await FamilyApi.UpdateFamily({
|
||||
id: family.family.family_id,
|
||||
disable_couple_photos: disableCouplePhotos,
|
||||
});
|
||||
|
||||
family.reloadFamilyInfo();
|
||||
|
||||
alert("Les paramètres de la famille ont été mis à jour avec succès !");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError("Echec de la mise à jour des paramètres de la famille !");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FamilyCard error={error} success={success}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
Paramètres du module de généalogie
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
sx={{
|
||||
"& .MuiTextField-root": { my: 1 },
|
||||
}}
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
>
|
||||
<Tooltip
|
||||
title="Les photos de couple ne sont pas utilisées en pratique dans les arbres généalogiques. Il est possible de masquer les formulaires d'édition de photos de couple pour limiter le risque de confusion."
|
||||
arrow
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={!canEdit}
|
||||
control={
|
||||
<Switch
|
||||
checked={disableCouplePhotos}
|
||||
onChange={(_e, c) => setDisableCouplePhotos(c)}
|
||||
/>
|
||||
}
|
||||
label="Désactiver les photos de couple"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button
|
||||
onClick={updateFamily}
|
||||
disabled={!canEdit}
|
||||
style={{ marginLeft: "auto" }}
|
||||
>
|
||||
Enregistrer
|
||||
</Button>
|
||||
</CardActions>
|
||||
</FamilyCard>
|
||||
);
|
||||
}
|
||||
|
||||
function GenealogyExportCard(): React.ReactElement {
|
||||
const loading = useLoadingMessage();
|
||||
const confirm = useConfirm();
|
||||
const alert = useAlert();
|
||||
|
||||
const family = useFamily();
|
||||
|
||||
const [error, setError] = React.useState<string>();
|
||||
const [success, setSuccess] = React.useState<string>();
|
||||
|
||||
const exportData = async () => {
|
||||
loading.show("Export des données");
|
||||
try {
|
||||
setError(undefined);
|
||||
setSuccess(undefined);
|
||||
|
||||
const blob = await DataApi.ExportData(family.familyId);
|
||||
downloadBlob(blob, `Export-${new Date().getTime()}.zip`);
|
||||
|
||||
setSuccess("Export des données effectué avec succès !");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError("Echec de l'export des données de la famille !");
|
||||
}
|
||||
loading.hide();
|
||||
};
|
||||
|
||||
const importData = async () => {
|
||||
try {
|
||||
if (
|
||||
!(await confirm(
|
||||
"Attention ! Cette opération a pour effet d'effacer toutes les données existantes en base ! Voulez-vous vraiment poursuivre l'opération ?"
|
||||
))
|
||||
)
|
||||
return;
|
||||
|
||||
const file = await selectFileToUpload({
|
||||
allowedTypes: ["application/zip"],
|
||||
});
|
||||
if (file === null) return;
|
||||
|
||||
setError(undefined);
|
||||
setSuccess(undefined);
|
||||
|
||||
loading.show(
|
||||
"Restauration des données de généalogie de la famille en cours..."
|
||||
);
|
||||
|
||||
await DataApi.ImportData(family.familyId, file);
|
||||
|
||||
family.reloadFamilyInfo();
|
||||
|
||||
alert(
|
||||
"Import des données de généalogie de la famille effectué avec succès !"
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError(
|
||||
`Echec de l'import des données de généalogie de la famille ! (${e})`
|
||||
);
|
||||
}
|
||||
|
||||
loading.hide();
|
||||
};
|
||||
|
||||
return (
|
||||
<FamilyCard error={error} success={success}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
Export / import des données de généalogie
|
||||
</Typography>
|
||||
<p>
|
||||
Vous pouvez, à des fins de sauvegardes ou de transfert, exporter et
|
||||
importer l'ensemble des données des membres et des couples de cette
|
||||
famille, sous format ZIP.
|
||||
</p>
|
||||
|
||||
<Alert severity="warning">
|
||||
Attention ! La restauration des données de généalogie de la famille
|
||||
provoque préalablement l'effacement de toutes les données enregistrées
|
||||
dans la famille ! Par ailleurs, la restauration n'est pas réversible !
|
||||
</Alert>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<Button
|
||||
startIcon={<DownloadIcon />}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={exportData}
|
||||
size={"large"}
|
||||
style={{ marginBottom: "10px" }}
|
||||
>
|
||||
Exporter les données de généalogie
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<UploadIcon />}
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
fullWidth
|
||||
onClick={importData}
|
||||
disabled={!family.family.is_admin}
|
||||
size={"large"}
|
||||
>
|
||||
Importer les données de généalogie
|
||||
</Button>
|
||||
</CardContent>
|
||||
</FamilyCard>
|
||||
);
|
||||
}
|
@@ -0,0 +1,20 @@
|
||||
import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
|
||||
import { useGenealogy } from "../../../widgets/genealogy/BaseGenealogyRoute";
|
||||
|
||||
export function GenealogyHomeRoute(): React.ReactElement {
|
||||
const genealogy = useGenealogy();
|
||||
return (
|
||||
<>
|
||||
<FamilyPageTitle title="Généalogie de votre famille" />
|
||||
<div style={{ margin: "20px" }}>
|
||||
<p>
|
||||
Depuis cette section de l'application, vous pouvez afficher et
|
||||
compléter l'abre généalogique de votre famille.
|
||||
</p>
|
||||
<p> </p>
|
||||
<p>Nombre de fiches de membres: {genealogy.members.size}</p>
|
||||
<p>Nombre de fiches de couples: {genealogy.couples.size}</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user