75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
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 !");
|
|
}}
|
|
/>
|
|
);
|
|
}
|