Can update / delete member information through UI

geneit_app/src/App.tsx

@@ -19,6 +19,7 @@ import { FamilyUsersListRoute } from "./routes/family/FamilyUsersListRoute";
 import { FamilySettingsRoute } from "./routes/family/FamilySettingsRoute";
 import {
   FamilyCreateMemberRoute,
+  FamilyEditMemberRoute,
   FamilyMemberRoute,
 } from "./routes/family/FamilyMemberRoute";
 
@@ -56,6 +57,10 @@ export function App(): React.ReactElement {
                 element={<FamilyCreateMemberRoute />}
               />
               <Route path="member/:memberId" element={<FamilyMemberRoute />} />
+              <Route
+                path="member/:memberId/edit"
+                element={<FamilyEditMemberRoute />}
+              />
               <Route path="settings" element={<FamilySettingsRoute />} />
               <Route path="users" element={<FamilyUsersListRoute />} />
               <Route path="*" element={<NotFoundRoute />} />

geneit_app/src/api/ApiClient.ts

@@ -26,7 +26,7 @@ export class APIClient {
    */
   static async exec(args: {
     uri: string;
-    method: "GET" | "POST" | "DELETE" | "PATCH";
+    method: "GET" | "POST" | "DELETE" | "PATCH" | "PUT";
     allowFail?: boolean;
     jsonData?: any;
   }): Promise<APIResponse> {

geneit_app/src/api/MemberApi.ts

@@ -121,4 +121,40 @@ export class MemberApi {
 
     return new Member(res.data);
   }
+
+  /**
+   * Get the information about a single member
+   */
+  static async GetSingle(
+    family_id: number,
+    member_id: number
+  ): Promise<Member> {
+    const res = await APIClient.exec({
+      uri: `/family/${family_id}/member/${member_id}`,
+      method: "GET",
+    });
+
+    return new Member(res.data);
+  }
+
+  /**
+   * Update a member information
+   */
+  static async Update(m: Member): Promise<void> {
+    await APIClient.exec({
+      uri: `/family/${m.family_id}/member/${m.id}`,
+      method: "PUT",
+      jsonData: m,
+    });
+  }
+
+  /**
+   * Delete a family member
+   */
+  static async Delete(m: Member): Promise<void> {
+    await APIClient.exec({
+      uri: `/family/${m.family_id}/member/${m.id}`,
+      method: "DELETE",
+    });
+  }
 }

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -2,7 +2,9 @@ import ClearIcon from "@mui/icons-material/Clear";
 import SaveIcon from "@mui/icons-material/Save";
 import { Button, Grid, Stack } from "@mui/material";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useNavigate, useParams } from "react-router-dom";
 import { Member, MemberApi } from "../../api/MemberApi";
 import { ServerApi } from "../../api/ServerApi";
 import { useAlert } from "../../context_providers/AlertDialogProvider";
@@ -13,6 +15,7 @@ import { PropEdit } from "../../widgets/PropEdit";
 import { PropertiesBox } from "../../widgets/PropertiesBox";
 import { SexSelection } from "../../widgets/SexSelection";
 import { useSnackbar } from "../../context_providers/SnackbarProvider";
+import { AsyncWidget } from "../../widgets/AsyncWidget";
 
 /**
  * Create a new member route
@@ -50,19 +53,120 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
 }
 
 /**
- * Edit existing member route
+ * Get existing member route
  */
 export function FamilyMemberRoute(): React.ReactElement {
-  return <p>TODO</p>;
+  const n = useNavigate();
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+
+  const family = useFamily();
+  const { memberId } = useParams();
+
+  const [member, setMember] = React.useState<Member>();
+  const load = async () => {
+    setMember(await MemberApi.GetSingle(family.familyId, Number(memberId)));
+  };
+
+  const deleteMember = async () => {
+    try {
+      if (
+        !(await confirm(
+          "Voulez-vous vraiment supprimer cette fiche membre ? L'opération n'est pas réversible !"
+        ))
+      )
+        return;
+
+      await MemberApi.Delete(member!);
+
+      snackbar("La fiche de membre a été supprimée avec succès !");
+      n(family.family.URL("members"));
+
+      // TODO : refresh cached members list
+    } catch (e) {
+      console.error(e);
+      alert("Échec de la suppression du membre !");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={memberId}
+      load={load}
+      errMsg="Echec du chargement des informations du membre"
+      build={() => (
+        <MemberPage
+          member={member!}
+          creating={false}
+          editing={false}
+          onRequestDelete={deleteMember}
+          onRequestEdit={() =>
+            n(family.family.URL(`member/${member!.id}/edit`))
+          }
+        />
+      )}
+    />
+  );
+}
+
+/**
+ * Edit existing member route
+ */
+export function FamilyEditMemberRoute(): React.ReactElement {
+  const n = useNavigate();
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const family = useFamily();
+  const { memberId } = useParams();
+
+  const [member, setMember] = React.useState<Member>();
+  const load = async () => {
+    setMember(await MemberApi.GetSingle(family.familyId, Number(memberId)));
+  };
+
+  const save = async (m: Member) => {
+    try {
+      await MemberApi.Update(m);
+
+      snackbar("Les informations du membre ont été mises à jour avec succès !");
+
+      // TODO : update family hook info
+
+      n(family.family.URL(`member/${member!.id}`));
+    } catch (e) {
+      console.error(e);
+      alert("Échec de la mise à jour des informations du membre !");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={memberId}
+      load={load}
+      errMsg="Échec du chargement des informations du membre"
+      build={() => (
+        <MemberPage
+          member={member!}
+          creating={false}
+          editing={true}
+          onCancel={() => n(family.family.URL(`member/${member!.id}`))}
+          onSave={save}
+        />
+      )}
+    />
+  );
 }
 
 export function MemberPage(p: {
   member: Member;
   editing: boolean;
   creating: boolean;
-  onCancel: () => void;
+  onCancel?: () => void;
-  onSave: (m: Member) => void;
+  onSave?: (m: Member) => void;
   onRequestEdit?: () => void;
+  onRequestDelete?: () => void;
 }): React.ReactElement {
   const confirm = useConfirm();
 
@@ -77,7 +181,7 @@ export function MemberPage(p: {
   };
 
   const save = () => {
-    p.onSave(member);
+    p.onSave!(member);
   };
 
   const cancel = async () => {
@@ -88,7 +192,7 @@ export function MemberPage(p: {
     )
       return;
 
-    p.onCancel();
+    p.onCancel!();
   };
 
   return (
@@ -102,10 +206,39 @@ export function MemberPage(p: {
       >
         <FamilyPageTitle
           title={
-            (p.creating ? "Création" : "Édition") + " d'une fiche de membre"
+            (p.editing
+              ? p.creating
+                ? "Création"
+                : "Édition"
+              : "Visualisation") + " d'une fiche de membre"
           }
         />
         <Stack direction="row" spacing={1}>
+          {/* Edit button */}
+          {p.onRequestEdit && (
+            <Button
+              variant="outlined"
+              startIcon={<EditIcon />}
+              onClick={p.onRequestEdit}
+              size="large"
+            >
+              Editer
+            </Button>
+          )}
+
+          {/* Delete button */}
+          {p.onRequestDelete && (
+            <Button
+              variant="outlined"
+              startIcon={<DeleteIcon />}
+              onClick={p.onRequestDelete}
+              size="large"
+              color="error"
+            >
+              Supprimer
+            </Button>
+          )}
+
           {/* Save button */}
           {p.editing && (
             <Button
@@ -136,6 +269,7 @@ export function MemberPage(p: {
           <PropertiesBox title="Informations générales">
             {/* Sex */}
             <SexSelection
+              readonly={!p.editing}
               current={member.sex}
               onChange={(v) => {
                 member.sex = v;

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -33,6 +33,7 @@ import { useAlert } from "../context_providers/AlertDialogProvider";
 
 interface FamilyContext {
   family: Family;
+  familyId: number;
   reloadFamilyInfo: () => void;
 }
 
@@ -92,6 +93,7 @@ export function BaseFamilyRoute(): React.ReactElement {
         <FamilyContextK.Provider
           value={{
             family: family!,
+            familyId: family!.family_id,
             reloadFamilyInfo: onReload,
           }}
         >

geneit_app/src/widgets/SexSelection.tsx

@@ -4,13 +4,29 @@ import {
   RadioGroup,
   FormControlLabel,
   Radio,
+  Typography,
 } from "@mui/material";
 import { Sex } from "../api/MemberApi";
 
 export function SexSelection(p: {
+  readonly?: boolean;
   current?: Sex;
   onChange: (s: Sex) => void;
 }): React.ReactElement {
+  if (p.readonly) {
+    if (p.current === undefined || p.current === null) return <></>;
+
+    return (
+      <Typography
+        variant="body2"
+        display="block"
+        style={{ marginBottom: "15px" }}
+      >
+        Sexe : {p.current === "M" ? "Homme" : "Femme"}
+      </Typography>
+    );
+  }
+
   return (
     <FormControl style={{ marginBottom: "15px" }}>
       <FormLabel id="sex-label">Sexe</FormLabel>

geneit_backend/src/main.rs

@@ -27,7 +27,7 @@ async fn main() -> std::io::Result<()> {
             .wrap(
                 Cors::default()
                     .allowed_origin(&AppConfig::get().website_origin)
-                    .allowed_methods(vec!["GET", "POST", "PATCH", "DELETE"])
+                    .allowed_methods(vec!["GET", "POST", "PUT", "PATCH", "DELETE"])
                     .allowed_header("X-Auth-Token")
                     .allow_any_header()
                     .supports_credentials()