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

feat: disable inputs when data is loading

Browse Source
This commit is contained in:
kasia.oczkowska
2024-12-19 12:21:22 +00:00
parent 4a4628e255
commit d320e8eec6
4 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/src/pages/CreateRole/index.ee.jsx
View File

@@ -25,7 +25,8 @@ export default function CreateRole() {
const enqueueSnackbar = useEnqueueSnackbar();
const { mutateAsync: createRole, isPending: isCreateRolePending } =
useAdminCreateRole();
const { data: permissionCatalogData } = usePermissionCatalog();
const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
usePermissionCatalog();
const defaultValues = React.useMemo(
() => ({
@@ -91,6 +92,7 @@ export default function CreateRole() {
label={formatMessage('roleForm.name')}
fullWidth
data-test="name-input"
disabled={isPermissionCatalogLoading}
/>
<TextField
@@ -98,6 +100,7 @@ export default function CreateRole() {
label={formatMessage('roleForm.description')}
fullWidth
data-test="description-input"
disabled={isPermissionCatalogLoading}
/>
<PermissionCatalogField name="computedPermissions" />

50
packages/web/src/pages/EditRole/index.ee.jsx
View File

@@ -1,6 +1,5 @@
import LoadingButton from '@mui/lab/LoadingButton';
import Grid from '@mui/material/Grid';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import * as React from 'react';
@@ -30,7 +29,8 @@ export default function EditRole() {
const { data: roleData, isLoading: isRoleLoading } = useRole({ roleId });
const { mutateAsync: updateRole, isPending: isUpdateRolePending } =
useAdminUpdateRole(roleId);
const { data: permissionCatalogData } = usePermissionCatalog();
const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
usePermissionCatalog();
const role = roleData?.data;
const permissionCatalog = permissionCatalogData?.data;
const enqueueSnackbar = useEnqueueSnackbar();
@@ -84,36 +84,30 @@ export default function EditRole() {
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form defaultValues={defaultValues} onSubmit={handleRoleUpdate}>
<Stack direction="column" gap={2}>
{isRoleLoading && (
<>
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
</>
)}
{!isRoleLoading && role && (
<>
<TextField
disabled={role.isAdmin}
required={true}
name="name"
label={formatMessage('roleForm.name')}
data-test="name-input"
fullWidth
/>
<TextField
disabled={role.isAdmin}
name="description"
label={formatMessage('roleForm.description')}
data-test="description-input"
fullWidth
/>
</>
)}
<TextField
disabled={
role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
}
required={true}
name="name"
label={formatMessage('roleForm.name')}
data-test="name-input"
fullWidth
/>
<TextField
disabled={
role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
}
name="description"
label={formatMessage('roleForm.description')}
data-test="description-input"
fullWidth
/>
<PermissionCatalogField
name="computedPermissions"
disabled={role?.isAdmin}
syncIsCreator
loading={isRoleLoading}
/>
<LoadingButton
type="submit"