Can remove a user from a family
This commit is contained in:
parent
addaca1b0e
commit
b82a48d2aa
@ -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}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user