Can delete member for members route

geneit_app/src/App.tsx

@@ -27,6 +27,7 @@ import { FamilyUsersListRoute } from "./routes/family/FamilyUsersListRoute";
 import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { BaseFamilyRoute } from "./widgets/BaseFamilyRoute";
 import { BaseLoginPage } from "./widgets/BaseLoginpage";
+import { FamilyMembersListRoute } from "./routes/family/FamilyMembersListRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -57,6 +58,7 @@ export function App(): React.ReactElement {
             <Route path="profile" element={<ProfileRoute />} />
             <Route path="family/:familyId/*" element={<BaseFamilyRoute />}>
               <Route path="" element={<FamilyHomeRoute />} />
+              <Route path="members" element={<FamilyMembersListRoute />} />
               <Route
                 path="member/create"
                 element={<FamilyCreateMemberRoute />}

geneit_app/src/api/FamilyApi.ts

@@ -1,4 +1,5 @@
 import { APIClient } from "./ApiClient";
+import { Member } from "./MemberApi";
 
 interface FamilyAPI {
   user_id: number;
@@ -52,6 +53,15 @@ export class Family implements FamilyAPI {
   get BaseURL(): string {
     return this.URL("");
   }
+
+  /**
+   * Get application URL for member page
+   */
+  memberURL(member: Member, edit?: boolean): string {
+    return (
+      `/family/${this.family_id}/member/${member.id}` + (edit ? "/edit" : "")
+    );
+  }
 }
 
 export enum JoinFamilyResult {

geneit_app/src/api/MemberApi.ts

@@ -171,6 +171,15 @@ export function fmtDate(d?: DateValue): string {
   }/${d?.year?.toString().padStart(4, "0") ?? "__"}`;
 }
 
+const OLD_TIME = -58991812735;
+export function dateTimestamp(d?: DateValue): number {
+  if (!d) return OLD_TIME;
+
+  const date = new Date();
+  date.setFullYear(d.year ?? 1010, (d.month ?? 1) - 1, d.day ?? 1);
+  return date.getTime() / 1000;
+}
+
 export class MembersList {
   private list: Member[];
   private map: Map<number, Member>;
@@ -184,6 +193,14 @@ export class MembersList {
     }
   }
 
+  public get isEmpty(): boolean {
+    return this.list.length === 0;
+  }
+
+  public get fullList(): Member[] {
+    return this.list;
+  }
+
   filter(predicate: (m: Member) => boolean): Member[] {
     return this.list.filter(predicate);
   }
@@ -195,6 +212,16 @@ export class MembersList {
   children(id: number): Member[] {
     return this.list.filter((m) => m.mother === id || m.father === id);
   }
+
+  siblings(id: number): Member[] {
+    const p = this.get(id);
+    return this.list.filter(
+      (m) =>
+        m.id !== p?.id &&
+        ((m.mother && m.mother === p?.mother) ||
+          (m.father && m.father === p?.father))
+    );
+  }
 }
 
 export class MemberApi {

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -128,6 +128,7 @@ export function FamilyMemberRoute(): React.ReactElement {
         <MemberPage
           member={member!}
           children={family.members.children(member!.id)}
+          siblings={family.members.siblings(member!.id)}
           creating={false}
           editing={false}
           onRequestDelete={deleteMember}
@@ -162,7 +163,8 @@ export function FamilyEditMemberRoute(): React.ReactElement {
 
   const cancel = () => {
     setShouldQuit(true);
-    n(family.family.URL(`member/${member!.id}`));
+    //n(family.family.URL(`member/${member!.id}`));
+    n(-1);
   };
 
   const save = async (m: Member) => {
@@ -206,6 +208,7 @@ export function MemberPage(p: {
   creating: boolean;
   shouldAllowLeaving?: boolean;
   children?: Member[];
+  siblings?: Member[];
   onCancel?: () => void;
   onSave?: (m: Member) => void;
   onRequestEdit?: () => void;
@@ -628,6 +631,26 @@ export function MemberPage(p: {
             </PropertiesBox>
           </Grid>
         )}
+
+        {/* Siblings */}
+        {p.siblings && (
+          <Grid item sm={12} md={6}>
+            <PropertiesBox title="Frères et sœurs">
+              {p.siblings.length === 0 ? (
+                <>Aucun frère ou sœur</>
+              ) : (
+                p.siblings.map((c) => (
+                  <RouterLink
+                    key={c.id}
+                    to={family.family.URL(`member/${c.id}`)}
+                  >
+                    <MemberItem member={c} />
+                  </RouterLink>
+                ))
+              )}
+            </PropertiesBox>
+          </Grid>
+        )}
       </Grid>
     </div>
   );

geneit_app/src/routes/family/FamilyMembersListRoute.tsx

@@ -0,0 +1,184 @@
+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 { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
+import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
+import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
+
+export function FamilyMembersListRoute(): React.ReactElement {
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+
+  const family = useFamily();
+
+  const processDeletion = async (m: Member) => {
+    try {
+      if (
+        !(await confirm(
+          `Voulez-vous vraiment supprimer la fiche de ${m.fullName} ?`
+        ))
+      )
+        return;
+
+      await MemberApi.Delete(m);
+      await family.reloadMembersList();
+
+      snackbar("La fiche du membre a été supprimée avec succès !");
+    } catch (e) {
+      console.error(e);
+      alert("Echec de la suppression de la fiche ! ");
+    }
+  };
+
+  return (
+    <>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <FamilyPageTitle title="Membres de la famille" />
+        <RouterLink to={family.family.URL("member/create")}>
+          <Tooltip title="Créer la fiche d'un nouveau membre">
+            <Button startIcon={<AddIcon />}>Nouveau</Button>
+          </Tooltip>
+        </RouterLink>
+      </div>
+
+      {family.members.isEmpty ? (
+        <p>
+          Votre famille n'a aucun membre pour le moment ! Utilisez le bouton
+          situé en haut à droite pour créer le premier !
+        </p>
+      ) : (
+        <MembersTable
+          members={family.members.fullList}
+          onDelete={processDeletion}
+        />
+      )}
+    </>
+  );
+}
+
+function MembersTable(p: {
+  members: Member[];
+  onDelete: (m: Member) => void;
+}): React.ReactElement {
+  const family = useFamily();
+  const n = useNavigate();
+
+  const columns: GridColDef<Member>[] = [
+    {
+      field: "signed_photo_id",
+      headerName: "",
+      disableColumnMenu: true,
+      sortable: false,
+      width: 60,
+      renderCell(params) {
+        return <MemberPhoto member={params.row} />;
+      },
+    },
+    {
+      field: "last_name",
+      headerName: "Nom",
+      flex: 3,
+    },
+    {
+      field: "first_name",
+      headerName: "Prénom",
+      flex: 3,
+    },
+    {
+      field: "dateOfBirth",
+      headerName: "Date de naissance",
+      flex: 3,
+      sortComparator(v1, v2) {
+        const d1 = dateTimestamp(v1);
+        const d2 = dateTimestamp(v2);
+        return d1 - d2;
+      },
+      renderCell(params) {
+        return fmtDate(params.row.dateOfBirth);
+      },
+    },
+    {
+      field: "dateOfDeath",
+      headerName: "Date de décès",
+      flex: 3,
+      sortComparator(v1, v2) {
+        const d1 = dateTimestamp(v1);
+        const d2 = dateTimestamp(v2);
+        return d1 - d2;
+      },
+      renderCell(params) {
+        return fmtDate(params.row.dateOfDeath);
+      },
+    },
+    {
+      field: "father",
+      headerName: "Père",
+      flex: 5,
+      renderCell(params) {
+        if (!params.row.father) return <></>;
+        return family.members.get(params.row.father)!.fullName;
+      },
+    },
+    {
+      field: "mother",
+      headerName: "Mère",
+      flex: 5,
+      renderCell(params) {
+        if (!params.row.mother) return <></>;
+        return family.members.get(params.row.mother)!.fullName;
+      },
+    },
+    {
+      field: "actions",
+      type: "actions",
+      sortable: false,
+      width: 120,
+      disableColumnMenu: true,
+      getActions(params) {
+        return [
+          <GridActionsCellItem
+            icon={<VisibilityIcon />}
+            label="Consulter le membre"
+            className="textPrimary"
+            onClick={() => n(family.family.memberURL(params.row))}
+            color="inherit"
+          />,
+          <GridActionsCellItem
+            icon={<EditIcon />}
+            label="Modifier le membre"
+            className="textPrimary"
+            onClick={() => n(family.family.memberURL(params.row, true))}
+            color="inherit"
+          />,
+          <GridActionsCellItem
+            icon={<DeleteIcon />}
+            label="Supprimer le membre"
+            onClick={() => p.onDelete(params.row)}
+            color="inherit"
+          />,
+        ];
+      },
+    },
+  ];
+
+  return (
+    <DataGrid
+      style={{ flex: "1" }}
+      rows={p.members}
+      columns={columns}
+      autoPageSize
+      getRowId={(c) => c.id}
+      onRowDoubleClick={(p) => n(family.family.memberURL(p.row))}
+    />
+  );
+}