diff --git a/geneit_app/src/api/FamilyApi.ts b/geneit_app/src/api/FamilyApi.ts index dd541aa..6e7032f 100644 --- a/geneit_app/src/api/FamilyApi.ts +++ b/geneit_app/src/api/FamilyApi.ts @@ -176,4 +176,14 @@ export class FamilyApi { }, }); } + + /** + * Remove a member from the family + */ + static async RemoveUser(user: FamilyUser): Promise { + await APIClient.exec({ + method: "DELETE", + uri: `/family/${user.family_id}/user/${user.user_id}`, + }); + } } diff --git a/geneit_app/src/routes/family/FamilyUsersListRoute.tsx b/geneit_app/src/routes/family/FamilyUsersListRoute.tsx index 8794d42..50e6aec 100644 --- a/geneit_app/src/routes/family/FamilyUsersListRoute.tsx +++ b/geneit_app/src/routes/family/FamilyUsersListRoute.tsx @@ -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 ( ( <> - + )} /> ); } -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( + {} + ); + + 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 ; + }, + }, { 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 [ + } + label="Save" + sx={{ + color: "primary.main", + }} + onClick={handleSaveClick(id)} + />, + } + label="Cancel" + className="textPrimary" + onClick={handleCancelClick(id)} + color="inherit" + />, + ]; + } + + return [ + } + label="Edit" + className="textPrimary" + onClick={handleEditClick(id)} + color="inherit" + />, + } + 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) => {