Display the list of family users

geneit_app/src/App.tsx

@@ -15,6 +15,7 @@ import { FamilyHomeRoute } from "./routes/family/FamilyHomeRoute";
 import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { BaseFamilyRoute } from "./widgets/BaseFamilyRoute";
 import { BaseLoginPage } from "./widgets/BaseLoginpage";
+import { FamilyUsersListRoute } from "./routes/family/FamilyUsersListRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -45,6 +46,7 @@ export function App(): React.ReactElement {
             <Route path="profile" element={<ProfileRoute />} />
             <Route path="family/:familyId/*" element={<BaseFamilyRoute />}>
               <Route path="" element={<FamilyHomeRoute />} />
+              <Route path="users" element={<FamilyUsersListRoute />} />
               <Route path="*" element={<NotFoundRoute />} />
             </Route>
             <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";
+    method: "GET" | "POST" | "DELETE" | "PATCH";
     allowFail?: boolean;
     jsonData?: any;
   }): Promise<APIResponse> {

geneit_app/src/api/FamilyApi.ts

@@ -62,6 +62,15 @@ export enum JoinFamilyResult {
   Success,
 }
 
+export interface FamilyUser {
+  user_id: number;
+  family_id: number;
+  time_create: number;
+  is_admin: boolean;
+  user_name: string;
+  user_mail: string;
+}
+
 export class FamilyApi {
   /**
    * Create a new family
@@ -142,4 +151,29 @@ export class FamilyApi {
       uri: `/family/${id}/renew_invitation_code`,
     });
   }
+
+  /**
+   * Get the users of a family
+   */
+  static async GetUsersList(id: number): Promise<FamilyUser[]> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/family/${id}/users`,
+      })
+    ).data;
+  }
+
+  /**
+   * Update a user of the family
+   */
+  static async UpdateUser(user: FamilyUser): Promise<void> {
+    await APIClient.exec({
+      method: "PATCH",
+      uri: `/family/${user.family_id}/user/${user.user_id}`,
+      jsonData: {
+        is_admin: user.is_admin,
+      },
+    });
+  }
 }

geneit_app/src/context_providers/DarkThemeProvider.tsx

@@ -1,20 +1,27 @@
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import React from "react";
 import { PropsWithChildren } from "react";
+import { frFR as dataGridFr } from "@mui/x-data-grid";
 
 const localStorageKey = "dark-theme";
 
-const darkTheme = createTheme({
-  palette: {
-    mode: "dark",
+const darkTheme = createTheme(
+  {
+    palette: {
+      mode: "dark",
+    },
   },
-});
+  dataGridFr
+);
 
-const lightTheme = createTheme({
-  palette: {
-    mode: "light",
+const lightTheme = createTheme(
+  {
+    palette: {
+      mode: "light",
+    },
   },
-});
+  dataGridFr
+);
 
 interface DarkThemeContext {
   enabled: boolean;

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 !");
+      }}
+    />
+  );
+}

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -184,6 +184,8 @@ export function BaseFamilyRoute(): React.ReactElement {
                 flexGrow: 1,
                 overflow: "auto",
                 padding: "20px",
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Outlet />

geneit_app/src/widgets/FamilyPageTitle.tsx

@@ -0,0 +1,9 @@
+import { Typography } from "@mui/material";
+
+export function FamilyPageTitle(p: { title: string }): React.ReactElement {
+  return (
+    <Typography variant="h4" style={{ margin: "20px" }}>
+      {p.title}
+    </Typography>
+  );
+}