Skip to content

Commit 34f9c6c

Browse files
AhsanKhan7AhsanKhan7
committed
organization settings
1 parent 98b7573 commit 34f9c6c

File tree

11 files changed

+228
-159
lines changed

11 files changed

+228
-159
lines changed

‎src/ui/assets/userImage.png‎

-22.9 KB
Loading

‎src/ui/layouts/common/PopupSmall/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import styles from './index.module.scss';
77

88
const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
99

10-
export const PopupSmall: React.FC<{ width?: string, showCloseIcon?: any, onClose: () => void }> = ({
10+
export const PopupSmall: React.FC<{ width?: string, showCloseIcon?: any, onClose: any }> = ({
1111
children,
1212
width,
1313
showCloseIcon,

‎src/ui/layouts/settings/Organization/InvitePopup.tsx‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -150,24 +150,6 @@ export const InvitePopup: React.FC<{
150150
</Box>
151151
<FlexBox justifyContent="center" flexWrap>
152152
<Paragraph style={{ cursor: 'pointer' }} onClick={() => setPopupOpen(false)}>Cancel</Paragraph>
153-
{/* {!showTokField && (
154-
<>
155-
<Box marginRight="sm">
156-
<GhostButton onClick={() => setPopupOpen(false)}>
157-
{translate('updateMemberPopup.cancelButton.text')}
158-
</GhostButton>
159-
</Box>
160-
<Box>
161-
<PrimaryButton
162-
disabled={submitting}
163-
loading={submitting}
164-
onClick={inviteNewMembers}
165-
>
166-
{translate('popup.button.text')}
167-
</PrimaryButton>
168-
</Box>
169-
</>
170-
)} */}
171153
</FlexBox>
172154
</Box>
173155

‎src/ui/layouts/settings/Organization/UpdateMember.tsx‎

Lines changed: 28 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import {
44
Box,
55
FlexBox,
66
H4,
7-
icons,
8-
LinkBox,
97
Paragraph,
108
FormTextField,
119
FormPasswordField,
@@ -15,7 +13,6 @@ import { PopupSmall } from '../../common/PopupSmall';
1513
import { translate } from './translate';
1614
import { organizationActions } from '../../../../redux/actions/organizations/index';
1715
import { showToasterAction } from '../../../../redux/actions/showToasterAction';
18-
import { iconColors } from '../../../../constants/icons';
1916

2017
import { toasterTypes } from '../../../../constants';
2118
import { fetchApiWithAuthRequest } from '../../../../api/fetchApi';
@@ -28,14 +25,13 @@ import { RoleSelector } from './RoleSelector';
2825
import axios from 'axios';
2926
import { formatDateToDisplayWithoutTime } from '../../../../utils';
3027

31-
export const UpdateMember: React.FC<{ member: any }> = ({ member }) => {
28+
export const UpdateMember: React.FC<{ member: any, setEditPopup: any }> = ({ member, setEditPopup }) => {
3229
const preRole = member?.roles?.map((e: any) => {
3330
return { value: e.id, label: e.name };
3431
});
3532

3633
const [username, setUsername] = useState('');
3734
const [password, setPassword] = useState('');
38-
const [popupOpen, setPopupOpen] = useState(false);
3935
const [submitting, setSubmitting] = useState(false);
4036
const [role, setRole] = useState(preRole);
4137

@@ -78,33 +74,31 @@ export const UpdateMember: React.FC<{ member: any }> = ({ member }) => {
7874
});
7975
}
8076

81-
const {
82-
data,
83-
} = await axios.get(
77+
const { data: { items } } = await axios.get(
8478
`${process.env.REACT_APP_BASE_API_URL}/role_assignments?user_name_or_id=${member?.name}`,
8579
{ headers: { Authorization: `Bearer ${authToken}` } },
8680
);
87-
88-
for (let index = 0; index < data?.length; index++) {
89-
const singleDelRole = data[index];
90-
await axios.delete(
91-
`https://appserver.zenml.io/api/v1/role_assignments/${singleDelRole?.id}`,
92-
{ headers: { Authorization: `Bearer ${authToken}` } },
93-
);
94-
}
95-
96-
for (let index = 0; index < role.length; index++) {
97-
const singleRole = role[index];
98-
await axios.post(
99-
`${process.env.REACT_APP_BASE_API_URL}/role_assignments`,
100-
// @ts-ignore
101-
{ user: member.id, role: singleRole?.value },
102-
{ headers: { Authorization: `Bearer ${authToken}` } },
103-
);
104-
}
81+
82+
for (let index = 0; index < items?.length; index++) {
83+
const singleDelRole = items[index];
84+
await axios.delete(
85+
`${process.env.REACT_APP_BASE_API_URL}/role_assignments/${singleDelRole?.id}`,
86+
{ headers: { Authorization: `Bearer ${authToken}` } },
87+
);
88+
}
89+
90+
for (let index = 0; index < role.length; index++) {
91+
const singleRole = role[index];
92+
await axios.post(
93+
`${process.env.REACT_APP_BASE_API_URL}/role_assignments`,
94+
// @ts-ignore
95+
{ user: member.id, role: singleRole?.value },
96+
{ headers: { Authorization: `Bearer ${authToken}` } },
97+
);
98+
}
10599

106100
setSubmitting(false);
107-
setPopupOpen(false);
101+
setEditPopup(false);
108102
dispatch(
109103
showToasterAction({
110104
description: 'User Updated',
@@ -114,7 +108,7 @@ export const UpdateMember: React.FC<{ member: any }> = ({ member }) => {
114108
await dispatch(organizationActions.getMembers({}));
115109
} catch (err) {
116110
setSubmitting(false);
117-
setPopupOpen(false);
111+
setEditPopup(false);
118112

119113
dispatch(
120114
showToasterAction({
@@ -139,7 +133,7 @@ export const UpdateMember: React.FC<{ member: any }> = ({ member }) => {
139133
organizationActions.deleteInvite({
140134
id: member.id,
141135
onSuccess: () => {
142-
setPopupOpen(false);
136+
setEditPopup(false);
143137
setSubmitting(false);
144138
dispatch(organizationActions.getMembers({}));
145139
dispatch(
@@ -162,11 +156,13 @@ export const UpdateMember: React.FC<{ member: any }> = ({ member }) => {
162156
);
163157
};
164158

159+
const handleClose = () => {
160+
setEditPopup(false);
161+
setRole(preRole)
162+
}
165163

166164
return (
167-
<>
168-
{popupOpen && (
169-
<PopupSmall width='370px' showCloseIcon={false} onClose={() => {setPopupOpen(false); setRole(preRole)}}
165+
<PopupSmall width='370px' showCloseIcon={false} onClose={handleClose}
170166
>
171167
<FlexBox.Row alignItems="center" justifyContent="space-between">
172168
<H4 bold style={{ fontSize: '18px', fontWeight: 'bold'}}>{translate('updateMemberPopup.title')}</H4>
@@ -239,35 +235,6 @@ export const UpdateMember: React.FC<{ member: any }> = ({ member }) => {
239235
<Paragraph style={{ cursor: 'pointer', color: '#FF6666' }} onClick={onDelete}>Remove Member</Paragraph>
240236
</FlexBox>
241237
</Box>
242-
243-
{/* <FlexBox justifyContent="flex-end" marginTop="xl" flexWrap>
244-
<Box marginRight="sm" marginBottom="md">
245-
<GhostButton onClick={() => setPopupOpen(false)}>
246-
{translate('updateMemberPopup.cancelButton.text')}
247-
</GhostButton>
248-
</Box>
249-
<Box marginLeft="sm" marginRight="sm" marginBottom="md">
250-
<PrimaryButton
251-
disabled={submitting}
252-
loading={submitting}
253-
onClick={onUpdate}
254-
>
255-
{translate('updateMemberPopup.successButton.text')}
256-
</PrimaryButton>
257-
</Box> */}
258-
{/* </FlexBox> */}
259238
</PopupSmall>
260-
)}
261-
<Box>
262-
<LinkBox
263-
onClick={() => {
264-
setPopupOpen(true);
265-
setRole(preRole);
266-
}}
267-
>
268-
<icons.edit color={iconColors.grey} />
269-
</LinkBox>
270-
</Box>
271-
</>
272239
);
273240
};

‎src/ui/layouts/settings/Organization/UserBox/AddUserBox.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import styles from './index.module.scss'
3+
4+
import { FlexBox, Box, Paragraph } from '../../../../components'
5+
import imageAddIcon from '../../../../assets/imageAddIcon.svg';
6+
7+
8+
const AddUserBox = () => {
9+
10+
return (
11+
<FlexBox.Row className={styles.addUserBox} justifyContent='center' marginTop='lg'>
12+
<Box>
13+
<Box className={styles.imageContainer}>
14+
<img src={imageAddIcon} alt='userImage' />
15+
</Box>
16+
17+
<Box marginTop='sm'>
18+
<Paragraph className={styles.userName}>Add member</Paragraph>
19+
</Box>
20+
</Box>
21+
22+
</FlexBox.Row>
23+
)
24+
}
25+
26+
export default AddUserBox

‎src/ui/layouts/settings/Organization/UserBox/UserBox.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { useState } from 'react'
2+
import styles from './index.module.scss'
3+
4+
import { FlexBox, Box, Row, Paragraph } from '../../../../components'
5+
import userImage from '../../../../assets/userImage.png'
6+
import { UpdateMember } from '../UpdateMember'
7+
8+
const UserBox = ({ data, permission }: any) => {
9+
10+
const [editPopup, setEditPopup] = useState(false)
11+
12+
return (
13+
<>
14+
{permission && editPopup && <UpdateMember member={data} setEditPopup={setEditPopup} />}
15+
16+
<FlexBox.Row onClick={() => setEditPopup(true)} className={styles.userBox} justifyContent='center' marginTop='lg'>
17+
18+
<Box>
19+
<Box className={styles.imageContainer}>
20+
<img src={userImage} alt='userImage' />
21+
</Box>
22+
23+
<Box marginTop='sm'>
24+
<Paragraph className={styles.userName}>{data?.name}</Paragraph>
25+
</Box>
26+
27+
<Box marginTop='sm' className={styles.rolesContainer}>
28+
<Row>
29+
{data?.roles?.map((e: any, index: number) => (
30+
<Paragraph className={styles.role} style={{ borderLeft: index % 2!==0 ? '1px solid #A1A4AB' : 'none' }}>{e.name}</Paragraph>
31+
))}
32+
</Row>
33+
</Box>
34+
35+
{!data?.active && (
36+
<Box marginTop='sm' className={styles.pendingIndicator}>
37+
<Paragraph className={styles.pendingText}>Pending</Paragraph>
38+
</Box>
39+
)}
40+
</Box>
41+
42+
</FlexBox.Row>
43+
</>
44+
)
45+
}
46+
47+
export default UserBox

‎src/ui/layouts/settings/Organization/UserBox/index.module.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.addUserBox {
2+
width: 112px;
3+
text-align: center;
4+
cursor: pointer;
5+
}
6+
7+
.userBox {
8+
width: 112px;
9+
text-align: center;
10+
margin-left: 19px;
11+
cursor: pointer;
12+
}
13+
14+
.imageContainer {
15+
height: 100px;
16+
width: 100px;
17+
position: relative;
18+
margin-left: 6px !important;
19+
20+
img {
21+
height: 100%;
22+
width: 100%;
23+
border-radius: 100%;
24+
object-fit: none;
25+
border: 4px solid #fff;
26+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05)
27+
}
28+
}
29+
30+
.userName {
31+
color: #443E99;
32+
font-size: 16px;
33+
font-weight: 400;
34+
line-height: 19px;
35+
}
36+
37+
.rolesContainer {
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
text-align: center;
42+
// margin-left: 23px !important;
43+
.role {
44+
color: #A1A4AB;
45+
padding: 0 7px;
46+
font-size: 16px;
47+
font-weight: 400;
48+
line-height: 19px;
49+
}
50+
}
51+
52+
.pendingIndicator {
53+
width: 64px;
54+
height: 20px;
55+
background-color: rgba(255, 153, 0, 0.2);
56+
border-radius: 4px;
57+
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
margin-left: 23px !important;
62+
63+
.pendingText {
64+
color: rgba(255, 153, 0, 0.5);
65+
font-size: 14px;
66+
font-weight: 400;
67+
line-height: 24px;
68+
69+
}
70+
}

‎src/ui/layouts/settings/Organization/index.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.numberOfMembers {
2+
color: rgba(100, 105, 114, 0.5);
3+
font-size: 16px;
4+
font-weight: 500;
5+
line-height: 24px;
6+
}

0 commit comments

Comments
 (0)