groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): add loading state for user and role management (#1188)

Browse Source
This commit is contained in:
Rıdvan Akca
2023-08-09 22:51:07 +03:00
committed by GitHub
parent ce8c9906cb
commit 5046c4c911
10 changed files with 308 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/web/src/pages/EditRole/index.ee.tsx
View File

@@ -3,6 +3,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Skeleton from '@mui/material/Skeleton';
import * as React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useSnackbar } from 'notistack';
@@ -25,7 +26,6 @@ type EditRoleParams = {
roleId: string;
};
// TODO: introduce loading bar
export default function EditRole(): React.ReactElement {
const formatMessage = useFormatMessage();
const [updateRole, { loading }] = useMutation(UPDATE_ROLE);
@@ -61,8 +61,6 @@ export default function EditRole(): React.ReactElement {
}
};
if (roleLoading || !role) return <React.Fragment />;
const roleWithComputedPermissions = getRoleWithComputedPermissions(role);
return (
@@ -78,24 +76,34 @@ export default function EditRole(): React.ReactElement {
onSubmit={handleRoleUpdate}
>
<Stack direction="column" gap={2}>
<TextField
disabled={role.isAdmin}
required={true}
name="name"
label={formatMessage('roleForm.name')}
fullWidth
/>
{roleLoading && (
<>
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
</>
)}
{!roleLoading && role && (
<>
<TextField
disabled={role.isAdmin}
required={true}
name="name"
label={formatMessage('roleForm.name')}
fullWidth
/>
<TextField
disabled={role.isAdmin}
name="description"
label={formatMessage('roleForm.description')}
fullWidth
/>
<TextField
disabled={role.isAdmin}
name="description"
label={formatMessage('roleForm.description')}
fullWidth
/>
</>
)}
<PermissionCatalogField
name="computedPermissions"
disabled={role.isAdmin}
disabled={role?.isAdmin}
/>
<LoadingButton
@@ -104,7 +112,7 @@ export default function EditRole(): React.ReactElement {
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
disabled={role.isAdmin}
disabled={role?.isAdmin || roleLoading}
>
{formatMessage('editRole.submit')}
</LoadingButton>

99
packages/web/src/pages/EditUser/index.tsx
View File

@@ -5,6 +5,7 @@ import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import MuiTextField from '@mui/material/TextField';
import Skeleton from '@mui/material/Skeleton';
import LoadingButton from '@mui/lab/LoadingButton';
import { IUser, IRole } from '@automatisch/types';
import { useSnackbar } from 'notistack';
@@ -28,7 +29,6 @@ function generateRoleOptions(roles: IRole[]) {
return roles?.map(({ name: label, id: value }) => ({ label, value }));
}
// TODO: introduce loading bar
export default function EditUser(): React.ReactElement {
const formatMessage = useFormatMessage();
const [updateUser, { loading }] = useMutation(UPDATE_USER);
@@ -63,8 +63,6 @@ export default function EditUser(): React.ReactElement {
}
};
if (userLoading) return <React.Fragment />;
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
@@ -73,50 +71,61 @@ export default function EditUser(): React.ReactElement {
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form defaultValues={user} onSubmit={handleUserUpdate}>
{userLoading && (
<Stack direction="column" gap={2}>
<TextField
required={true}
name="fullName"
label={formatMessage('userForm.fullName')}
fullWidth
/>
<TextField
required={true}
name="email"
label={formatMessage('userForm.email')}
fullWidth
/>
<Can I="update" a="Role">
<ControlledAutocomplete
name="role.id"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => (
<MuiTextField
{...params}
label={formatMessage('userForm.role')}
/>
)}
loading={rolesLoading}
/>
</Can>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
>
{formatMessage('editUser.submit')}
</LoadingButton>
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={45} />
</Stack>
</Form>
)}
{!userLoading && (
<Form defaultValues={user} onSubmit={handleUserUpdate}>
<Stack direction="column" gap={2}>
<TextField
required={true}
name="fullName"
label={formatMessage('userForm.fullName')}
fullWidth
/>
<TextField
required={true}
name="email"
label={formatMessage('userForm.email')}
fullWidth
/>
<Can I="update" a="Role">
<ControlledAutocomplete
name="role.id"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => (
<MuiTextField
{...params}
label={formatMessage('userForm.role')}
/>
)}
loading={rolesLoading}
/>
</Can>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
>
{formatMessage('editUser.submit')}
</LoadingButton>
</Stack>
</Form>
)}
</Grid>
</Grid>
</Container>