Can remove a user from a family

This commit is contained in:
Pierre HUBERT 2023-07-09 17:25:53 +02:00
parent addaca1b0e
commit b82a48d2aa
2 changed files with 133 additions and 4 deletions

View File

@ -176,4 +176,14 @@ export class FamilyApi {
},
});
}
/**
* Remove a member from the family
*/
static async RemoveUser(user: FamilyUser): Promise<void> {
await APIClient.exec({
method: "DELETE",
uri: `/family/${user.family_id}/user/${user.user_id}`,
});
}
}

View File

@ -1,4 +1,11 @@
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import {
DataGrid,
GridActionsCellItem,
GridColDef,
GridRowId,
GridRowModes,
GridRowModesModel,
} from "@mui/x-data-grid";
import React from "react";
import { FamilyApi, FamilyUser } from "../../api/FamilyApi";
import { useAlert } from "../../context_providers/AlertDialogProvider";
@ -6,6 +13,13 @@ import { AsyncWidget } from "../../widgets/AsyncWidget";
import { useUser } from "../../widgets/BaseAuthenticatedPage";
import { useFamily } from "../../widgets/BaseFamilyRoute";
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
import { TimeWidget } from "../../widgets/TimeWidget";
import AddIcon from "@mui/icons-material/Add";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/DeleteOutlined";
import SaveIcon from "@mui/icons-material/Save";
import CancelIcon from "@mui/icons-material/Close";
import { useConfirm } from "../../context_providers/ConfirmDialogProvider";
export function FamilyUsersListRoute(): React.ReactElement {
const family = useFamily();
@ -18,6 +32,11 @@ export function FamilyUsersListRoute(): React.ReactElement {
setUsers(await FamilyApi.GetUsersList(family.family.family_id));
};
const reload = async () => {
key.current += 1;
setUsers(null);
};
return (
<AsyncWidget
loadKey={`${family.family.family_id}-${key.current}`}
@ -27,22 +46,72 @@ export function FamilyUsersListRoute(): React.ReactElement {
build={() => (
<>
<FamilyPageTitle title="Utilisateurs de la famille" />
<UsersTable users={users!} />
<UsersTable users={users!} onReload={reload} />
</>
)}
/>
);
}
function UsersTable(p: { users: FamilyUser[] }): React.ReactElement {
function UsersTable(p: {
users: FamilyUser[];
onReload: () => void;
}): React.ReactElement {
const alert = useAlert();
const confirm = useConfirm();
const user = useUser();
const family = useFamily();
const [rowModesModel, setRowModesModel] = React.useState<GridRowModesModel>(
{}
);
const handleEditClick = (id: GridRowId) => () => {
setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
};
const handleSaveClick = (id: GridRowId) => () => {
setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
};
// Remove a membership
const handleDeleteClick = (id: GridRowId) => async () => {
try {
const user = p.users.find((u) => u.user_id === id)!;
if (
!(await confirm.confirm(
`Voulez-vous vraiment retirer ${user.user_name} de cette famille ?`
))
)
return;
await FamilyApi.RemoveUser(user);
p.onReload();
} catch (e) {
console.error(e);
alert.alert("Echec de la suppression de l'utilisateur !");
}
};
const handleCancelClick = (id: GridRowId) => () => {
setRowModesModel({
...rowModesModel,
[id]: { mode: GridRowModes.View, ignoreModifications: true },
});
};
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: "time_create",
headerName: "Date d'ajout",
flex: 5,
renderCell(params) {
return <TimeWidget time={params.row.time_create} />;
},
},
{
field: "is_admin",
headerName: "Admin",
@ -50,6 +119,55 @@ function UsersTable(p: { users: FamilyUser[] }): React.ReactElement {
type: "boolean",
editable: family.family.is_admin,
},
{
field: "actions",
type: "actions",
headerName: "Actions",
flex: 2,
cellClassName: "actions",
getActions: ({ id }) => {
const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
if (id === user.user.id) return [];
if (isInEditMode) {
return [
<GridActionsCellItem
icon={<SaveIcon />}
label="Save"
sx={{
color: "primary.main",
}}
onClick={handleSaveClick(id)}
/>,
<GridActionsCellItem
icon={<CancelIcon />}
label="Cancel"
className="textPrimary"
onClick={handleCancelClick(id)}
color="inherit"
/>,
];
}
return [
<GridActionsCellItem
icon={<EditIcon />}
label="Edit"
className="textPrimary"
onClick={handleEditClick(id)}
color="inherit"
/>,
<GridActionsCellItem
icon={<DeleteIcon />}
label="Delete"
onClick={handleDeleteClick(id)}
color="inherit"
/>,
];
},
},
];
return (
@ -58,7 +176,8 @@ function UsersTable(p: { users: FamilyUser[] }): React.ReactElement {
rows={p.users}
columns={columns}
autoPageSize
editMode="cell"
editMode="row"
rowModesModel={rowModesModel}
getRowId={(c) => c.user_id}
isCellEditable={(params) => params.row.user_id !== user.user.id}
processRowUpdate={async (n: FamilyUser) => {