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

61
packages/web/src/components/RoleList/index.ee.tsx
View File

@@ -13,14 +13,14 @@ import Typography from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import DeleteRoleButton from 'components/DeleteRoleButton/index.ee';
import ListLoader from 'components/ListLoader';
import useFormatMessage from 'hooks/useFormatMessage';
import useRoles from 'hooks/useRoles.ee';
import * as URLS from 'config/urls';
// TODO: introduce loading bar
export default function RoleList(): React.ReactElement {
const formatMessage = useFormatMessage();
const { roles } = useRoles();
const { roles, loading } = useRoles();
return (
<TableContainer component={Paper}>
@@ -49,34 +49,41 @@ export default function RoleList(): React.ReactElement {
</TableRow>
</TableHead>
<TableBody>
{roles.map((role) => (
<TableRow
key={role.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell scope="row">
<Typography variant="subtitle2">{role.name}</Typography>
</TableCell>
{loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
{!loading &&
roles.map((role) => (
<TableRow
key={role.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell scope="row">
<Typography variant="subtitle2">{role.name}</Typography>
</TableCell>
<TableCell scope="row">
<Typography variant="subtitle2">{role.description}</Typography>
</TableCell>
<TableCell scope="row">
<Typography variant="subtitle2">
{role.description}
</Typography>
</TableCell>
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton
size="small"
component={Link}
to={URLS.ROLE(role.id)}
>
<EditIcon />
</IconButton>
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton
size="small"
component={Link}
to={URLS.ROLE(role.id)}
>
<EditIcon />
</IconButton>
<DeleteRoleButton disabled={role.isAdmin} roleId={role.id} />
</Stack>
</TableCell>
</TableRow>
))}
<DeleteRoleButton
disabled={role.isAdmin}
roleId={role.id}
/>
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>