Display the list of family users

geneit_app/src/routes/family/FamilyUsersListRoute.tsx

@@ -0,0 +1,74 @@
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import React from "react";
+import { FamilyApi, FamilyUser } from "../../api/FamilyApi";
+import { useAlert } from "../../context_providers/AlertDialogProvider";
+import { AsyncWidget } from "../../widgets/AsyncWidget";
+import { useUser } from "../../widgets/BaseAuthenticatedPage";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
+
+export function FamilyUsersListRoute(): React.ReactElement {
+  const family = useFamily();
+
+  const [users, setUsers] = React.useState<FamilyUser[] | null>(null);
+
+  const key = React.useRef(1);
+
+  const load = async () => {
+    setUsers(await FamilyApi.GetUsersList(family.family.family_id));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={`${family.family.family_id}-${key.current}`}
+      errMsg="Echec du chargement de la liste des utilisateurs de la famille !"
+      load={load}
+      ready={users !== null}
+      build={() => (
+        <>
+          <FamilyPageTitle title="Utilisateurs de la famille" />
+          <UsersTable users={users!} />
+        </>
+      )}
+    />
+  );
+}
+
+function UsersTable(p: { users: FamilyUser[] }): React.ReactElement {
+  const alert = useAlert();
+  const user = useUser();
+  const family = useFamily();
+
+  const columns: GridColDef[] = [
+    { field: "user_id", headerName: "#", flex: 1 },
+    { field: "user_mail", headerName: "Adresse mail", flex: 5 },
+    { field: "user_name", headerName: "Nom d'utilisateur", flex: 5 },
+    {
+      field: "is_admin",
+      headerName: "Admin",
+      flex: 2,
+      type: "boolean",
+      editable: family.family.is_admin,
+    },
+  ];
+
+  return (
+    <DataGrid
+      style={{ flex: "1" }}
+      rows={p.users}
+      columns={columns}
+      autoPageSize
+      editMode="cell"
+      getRowId={(c) => c.user_id}
+      isCellEditable={(params) => params.row.user_id !== user.user.id}
+      processRowUpdate={async (n: FamilyUser) => {
+        await FamilyApi.UpdateUser(n);
+        return n;
+      }}
+      onProcessRowUpdateError={(e) => {
+        console.error(e);
+        alert.alert("Échec de la mise à jour des informations utilisateurs !");
+      }}
+    />
+  );
+}