Skip to content

Commit 64269c1

Browse files
edsonmartinsedsonmartins
authored
Merge pull request #131 from edsonmartins/develop
Adicionar opção para customizar modais de usuário, perfil e grupo
2 parents 99ae956 + 40b8021 commit 64269c1

File tree

7 files changed

+300
-220
lines changed

7 files changed

+300
-220
lines changed

‎archbase-react-2.1.1.tgz‎

2.19 MB
Binary file not shown.

‎src/components/hooks/useArchbaseAuthenticationManager.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import { ARCHBASE_SECURITY_MANAGER_STORE } from './useArchbaseSecurityManager'
1010

1111
export interface AuthenticationManagerReturnType {
1212
login: (username: string, password: string, rememberMe: boolean) => void
13-
logout: ()=>void
13+
logout: () => void
1414
username: string
1515
isAuthenticating: boolean
16+
isInitializing: boolean
1617
isAuthenticated: boolean
1718
isError: boolean
1819
error: any
@@ -28,7 +29,7 @@ export interface ArchbaseAuthenticationManagerProps {
2829
export const useArchbaseAuthenticationManager = ({
2930
checkIntervalTokenHasExpired = 30000, // Verificar a 30 segundos
3031
expirationThresholdOfToken = 300 // Antecipar em 5 minutos
31-
} : ArchbaseAuthenticationManagerProps): AuthenticationManagerReturnType => {
32+
}: ArchbaseAuthenticationManagerProps): AuthenticationManagerReturnType => {
3233
const tokenManager = useContainer((container) =>
3334
container.get<ArchbaseTokenManager>(ARCHBASE_IOC_API_TYPE.TokenManager)
3435
)
@@ -37,6 +38,7 @@ export const useArchbaseAuthenticationManager = ({
3738
)
3839
const [accessToken, setAccessToken] = useState<ArchbaseAccessToken | null>(null)
3940
const [isAuthenticating, setAuthenticating] = useState<boolean>(false)
41+
const [isInitializing, setIsInitializing] = useState<boolean>(true)
4042
const [isAuthenticated, setAuthenticated] = useState<boolean>(false)
4143
const [isError, setIsError] = useState<boolean>(false)
4244
const [error, setError] = useState<string>('')
@@ -50,12 +52,12 @@ export const useArchbaseAuthenticationManager = ({
5052
}
5153
const token = tokenManager.getToken()
5254
if (token) {
53-
setAuthenticating(false)
5455
setAuthenticated(true)
5556
setError('')
5657
setIsError(false)
5758
setAccessToken(token)
5859
}
60+
setIsInitializing(false)
5961
}, [])
6062

6163
const clearError = () => {
@@ -80,7 +82,7 @@ export const useArchbaseAuthenticationManager = ({
8082
setAuthenticated(false)
8183
const access_token = await authenticator.login(username, password)
8284
tokenManager.saveToken(access_token)
83-
if (rememberMe){
85+
if (rememberMe) {
8486
tokenManager.saveUsernameAndPassword(username, password)
8587
}
8688
tokenManager.saveUsername(username)
@@ -103,7 +105,7 @@ export const useArchbaseAuthenticationManager = ({
103105
renovarToken()
104106
}
105107
}
106-
}, checkIntervalTokenHasExpired)
108+
}, checkIntervalTokenHasExpired)
107109

108110
return () => {
109111
clearInterval(checkTokenExpirationInterval)
@@ -129,9 +131,10 @@ export const useArchbaseAuthenticationManager = ({
129131
username,
130132
isAuthenticated,
131133
isAuthenticating,
134+
isInitializing,
132135
isError,
133136
error,
134137
clearError,
135138
accessToken: accessToken ? accessToken.access_token : null
136139
}
137-
}
140+
}

‎src/components/security/ArchbaseSecurityView.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ import { ArchbaseGroupService } from './ArchbaseGroupService';
3636
import { ArchbaseProfileService } from './ArchbaseProfileService';
3737
import { ArchbaseResourceService } from './ArchbaseResourceService';
3838
import { ArchbaseUserService } from './ArchbaseUserService';
39-
import { GroupModal } from './GroupModal';
39+
import { GroupModal, GroupModalOptions } from './GroupModal';
4040
import { PermissionsSelectorModal } from './PermissionsSelectorModal';
41-
import { ProfileModal } from './ProfileModal';
41+
import { ProfileModal, ProfileModalOptions } from './ProfileModal';
4242
import { AccessTokenDto, GroupDto, ProfileDto, ResourceDto, UserDto } from './SecurityDomain';
4343
import { SecurityType } from './SecurityType';
4444
import { UserModal, UserModalOptions } from './UserModal';
@@ -50,6 +50,8 @@ interface ArchbaseSecurityManagerProps {
5050
dataSourceUsers?: ArchbaseDataSource<UserDto, string>;
5151
createEntitiesWithId?: boolean;
5252
userModalOptions?: UserModalOptions;
53+
groupModalOptions?: GroupModalOptions;
54+
profileModalOptions?: ProfileModalOptions;
5355
}
5456

5557
export const NO_USER =
@@ -138,6 +140,8 @@ export function ArchbaseSecurityView({
138140
width = '100%',
139141
createEntitiesWithId = true,
140142
userModalOptions,
143+
profileModalOptions,
144+
groupModalOptions,
141145
}: ArchbaseSecurityManagerProps) {
142146
const theme = useArchbaseTheme();
143147
const templateStore = useArchbaseStore('securityStore');
@@ -997,6 +1001,7 @@ export function ArchbaseSecurityView({
9971001
opened={true}
9981002
dataSource={dsGroups}
9991003
onClickCancel={handleCloseGroupModal}
1004+
options={groupModalOptions}
10001005
/>
10011006
) : null}
10021007
{openedModal === SecurityType.PROFILE ? (
@@ -1005,6 +1010,7 @@ export function ArchbaseSecurityView({
10051010
opened={true}
10061011
dataSource={dsProfiles}
10071012
onClickCancel={handleCloseProfileModal}
1013+
options={profileModalOptions}
10081014
/>
10091015
) : null}
10101016
{openedPermissionsModal === SecurityType.USER?

‎src/components/security/GroupModal.tsx‎

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,78 @@
11
import React from 'react'
2-
import { Grid } from '@mantine/core'
2+
import { Grid, ScrollArea, Stack } from '@mantine/core'
33
import { useFocusTrap } from '@mantine/hooks'
44
import { t } from 'i18next'
55
import { GroupDto } from './SecurityDomain'
66
import { ArchbaseDataSource } from '@components/datasource'
77
import { ArchbaseFormModalTemplate } from '@components/template'
88
import { ArchbaseEdit } from '@components/editors'
99

10+
export interface GroupModalOptions {
11+
customContentBefore?: React.ReactNode;
12+
13+
customContentAfter?: React.ReactNode;
14+
}
15+
1016
export interface GroupModalProps {
1117
dataSource: ArchbaseDataSource<GroupDto, string>
1218
opened: boolean
1319
onClickOk: (record?: GroupDto, result?: any) => void
1420
onClickCancel: (record?: GroupDto) => void
1521
onCustomSave?: (record?: GroupDto, callback?: Function) => void
1622
onAfterSave?: (record?: GroupDto) => void
23+
customContentBefore?: React.ReactNode
24+
customContentAfter?: React.ReactNode
25+
options?: GroupModalOptions
1726
}
1827

1928
export const GroupModal = (props: GroupModalProps) => {
2029
const focusTrapRef = useFocusTrap()
21-
30+
const options = {...(props.options ?? {}) }
2231
return (
2332
<ArchbaseFormModalTemplate
2433
title={t('archbase:Grupo')}
2534
size="60%"
2635
height={'500px'}
36+
styles={{content: {maxWidth: 1000}}}
2737
dataSource={props.dataSource}
2838
opened={props.opened}
2939
onClickOk={props.onClickOk}
3040
onClickCancel={props.onClickCancel}
3141
onCustomSave={props.onCustomSave}
3242
onAfterSave={props.onAfterSave}
3343
>
34-
<Grid ref={focusTrapRef}>
35-
<Grid.Col span={{ base: 12 }}>
36-
<ArchbaseEdit
37-
label={`${t('archbase:Nome do grupo')}`}
38-
placeholder={`${t('archbase:Informe o nome do grupo')}`}
39-
dataSource={props.dataSource}
40-
dataField="name"
41-
/>
42-
</Grid.Col>
43-
<Grid.Col span={{ base: 12 }}>
44-
<ArchbaseEdit
45-
label={`${t('archbase:Descrição do grupo')}`}
46-
placeholder={`${t('archbase:Informe a descrição do grupo')}`}
47-
dataSource={props.dataSource}
48-
dataField="description"
49-
/>
50-
</Grid.Col>
51-
</Grid>
44+
<ScrollArea ref={focusTrapRef} style={{ height: '460px' }}>
45+
<Stack w={"98%"}>
46+
{options?.customContentBefore && (
47+
<>
48+
{props.options.customContentBefore}
49+
</>
50+
)}
51+
<Grid ref={focusTrapRef}>
52+
<Grid.Col span={{ base: 12 }}>
53+
<ArchbaseEdit
54+
label={`${t('archbase:Nome do grupo')}`}
55+
placeholder={`${t('archbase:Informe o nome do grupo')}`}
56+
dataSource={props.dataSource}
57+
dataField="name"
58+
/>
59+
</Grid.Col>
60+
<Grid.Col span={{ base: 12 }}>
61+
<ArchbaseEdit
62+
label={`${t('archbase:Descrição do grupo')}`}
63+
placeholder={`${t('archbase:Informe a descrição do grupo')}`}
64+
dataSource={props.dataSource}
65+
dataField="description"
66+
/>
67+
</Grid.Col>
68+
</Grid>
69+
{options?.customContentAfter && (
70+
<>
71+
{props.options.customContentAfter}
72+
</>
73+
)}
74+
</Stack>
75+
</ScrollArea>
5276
</ArchbaseFormModalTemplate>
5377
)
5478
}

‎src/components/security/ProfileModal.tsx‎

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,78 @@
11
import React from 'react'
2-
import { Grid } from '@mantine/core'
2+
import { Grid, ScrollArea, Stack } from '@mantine/core'
33
import { useFocusTrap } from '@mantine/hooks'
44
import { ArchbaseDataSource } from '@components/datasource'
55
import { ArchbaseFormModalTemplate } from '@components/template'
66
import { t } from 'i18next'
77
import { ProfileDto } from './SecurityDomain'
88
import { ArchbaseEdit } from '@components/editors'
99

10+
export interface ProfileModalOptions {
11+
customContentBefore?: React.ReactNode;
12+
13+
customContentAfter?: React.ReactNode;
14+
}
15+
1016
export interface ProfileModalProps {
1117
dataSource: ArchbaseDataSource<ProfileDto, string>
1218
opened: boolean
1319
onClickOk: (record?: ProfileDto, result?: any) => void
1420
onClickCancel: (record?: ProfileDto) => void
1521
onCustomSave?: (record?: ProfileDto, callback?: Function) => void
1622
onAfterSave?: (record?: ProfileDto) => void
23+
customContentBefore?: React.ReactNode
24+
customContentAfter?: React.ReactNode
25+
options?: ProfileModalOptions
1726
}
1827

1928
export const ProfileModal = (props: ProfileModalProps) => {
2029
const focusTrapRef = useFocusTrap()
21-
30+
const options = {...(props.options ?? {}) }
2231
return (
2332
<ArchbaseFormModalTemplate
2433
title={t('archbase:Perfil')}
2534
size="60%"
2635
height={'500px'}
36+
styles={{content: {maxWidth: 1000}}}
2737
dataSource={props.dataSource}
2838
opened={props.opened}
2939
onClickOk={props.onClickOk}
3040
onClickCancel={props.onClickCancel}
3141
onCustomSave={props.onCustomSave}
3242
onAfterSave={props.onAfterSave}
3343
>
34-
<Grid ref={focusTrapRef}>
35-
<Grid.Col span={{ base: 12, md: 12, lg: 12 }}>
36-
<ArchbaseEdit
37-
label={`${t('archbase:Nome do perfil')}`}
38-
placeholder={`${t('archbase:Informe o nome do perfil')}`}
39-
dataSource={props.dataSource}
40-
dataField="name"
41-
/>
42-
</Grid.Col>
43-
<Grid.Col span={{ base: 12, md: 12, lg: 12 }}>
44-
<ArchbaseEdit
45-
label={`${t('archbase:Descrição do perfil')}`}
46-
placeholder={`${t('archbase:Informe a descrição do perfil')}`}
47-
dataSource={props.dataSource}
48-
dataField="description"
49-
/>
50-
</Grid.Col>
51-
</Grid>
44+
<ScrollArea ref={focusTrapRef} style={{ height: '460px' }}>
45+
<Stack w={"98%"}>
46+
{options?.customContentBefore && (
47+
<>
48+
{options.customContentBefore}
49+
</>
50+
)}
51+
<Grid ref={focusTrapRef}>
52+
<Grid.Col span={{ base: 12, md: 12, lg: 12 }}>
53+
<ArchbaseEdit
54+
label={`${t('archbase:Nome do perfil')}`}
55+
placeholder={`${t('archbase:Informe o nome do perfil')}`}
56+
dataSource={props.dataSource}
57+
dataField="name"
58+
/>
59+
</Grid.Col>
60+
<Grid.Col span={{ base: 12, md: 12, lg: 12 }}>
61+
<ArchbaseEdit
62+
label={`${t('archbase:Descrição do perfil')}`}
63+
placeholder={`${t('archbase:Informe a descrição do perfil')}`}
64+
dataSource={props.dataSource}
65+
dataField="description"
66+
/>
67+
</Grid.Col>
68+
</Grid>
69+
{options?.customContentAfter && (
70+
<>
71+
{options.customContentAfter}
72+
</>
73+
)}
74+
</Stack>
75+
</ScrollArea>
5276
</ArchbaseFormModalTemplate>
5377
)
5478
}

0 commit comments

Comments
 (0)