Skip to content

Commit 8af3cf0

Browse files
vas3avas3a
authored
Merge pull request #1623 from topcoder-platform/PM-973_invite-by-mail
PM-973 invite by mail
2 parents 125cf7d + 5823808 commit 8af3cf0

File tree

15 files changed

+880
-295
lines changed

15 files changed

+880
-295
lines changed

‎src/components/UserCard/index.js

+87-71
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import _ from 'lodash'
2+
import moment from 'moment'
13
import React, { Component } from 'react'
24
import PropTypes from 'prop-types'
35
import cn from 'classnames'
@@ -6,7 +8,6 @@ import { PROJECT_ROLES } from '../../config/constants'
68
import PrimaryButton from '../Buttons/PrimaryButton'
79
import AlertModal from '../Modal/AlertModal'
810
import { updateProjectMemberRole } from '../../services/projects'
9-
import _ from 'lodash'
1011

1112
const theme = {
1213
container: styles.modalContainer
@@ -58,7 +59,7 @@ class UserCard extends Component {
5859
}
5960

6061
render () {
61-
const { user, onRemoveClick, isEditable } = this.props
62+
const { isInvite, user, onRemoveClick, isEditable } = this.props
6263
const showRadioButtons = _.includes(_.values(PROJECT_ROLES), user.role)
6364
return (
6465
<div>
@@ -90,76 +91,90 @@ class UserCard extends Component {
9091
)}
9192
<div className={styles.item}>
9293
<div className={cn(styles.col5)}>
93-
{user.handle}
94-
</div>
95-
<div className={cn(styles.col5)}>
96-
{showRadioButtons && (<div className={styles.tcRadioButton}>
97-
<input
98-
name={`user-${user.id}`}
99-
type='radio'
100-
id={`read-${user.id}`}
101-
checked={user.role === PROJECT_ROLES.READ}
102-
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.READ)}
103-
/>
104-
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`read-${user.id}`}>
105-
<div>
106-
Read
107-
</div>
108-
<input type='hidden' />
109-
</label>
110-
</div>)}
111-
</div>
112-
<div className={cn(styles.col5)}>
113-
{showRadioButtons && (<div className={styles.tcRadioButton}>
114-
<input
115-
name={`user-${user.id}`}
116-
type='radio'
117-
id={`write-${user.id}`}
118-
checked={user.role === PROJECT_ROLES.WRITE}
119-
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.WRITE)}
120-
/>
121-
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`write-${user.id}`}>
122-
<div>
123-
Write
124-
</div>
125-
<input type='hidden' />
126-
</label>
127-
</div>)}
128-
</div>
129-
<div className={cn(styles.col5)}>
130-
{showRadioButtons && (<div className={styles.tcRadioButton}>
131-
<input
132-
name={`user-${user.id}`}
133-
type='radio'
134-
id={`full-access-${user.id}`}
135-
checked={user.role === PROJECT_ROLES.MANAGER}
136-
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.MANAGER)}
137-
/>
138-
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`full-access-${user.id}`}>
139-
<div>
140-
Full Access
141-
</div>
142-
<input type='hidden' />
143-
</label>
144-
</div>)}
145-
</div>
146-
<div className={cn(styles.col5)}>
147-
{showRadioButtons && (<div className={styles.tcRadioButton}>
148-
<input
149-
name={`user-${user.id}`}
150-
type='radio'
151-
id={`copilot-${user.id}`}
152-
checked={user.role === PROJECT_ROLES.COPILOT}
153-
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.COPILOT)}
154-
/>
155-
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`copilot-${user.id}`}>
156-
<div>
157-
Copilot
158-
</div>
159-
<input type='hidden' />
160-
</label>
161-
</div>)}
94+
{isInvite ? user.email : user.handle}
16295
</div>
96+
{!isInvite && (
97+
<>
98+
<div className={cn(styles.col5)}>
99+
{showRadioButtons && (<div className={styles.tcRadioButton}>
100+
<input
101+
name={`user-${user.id}`}
102+
type='radio'
103+
id={`read-${user.id}`}
104+
checked={user.role === PROJECT_ROLES.READ}
105+
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.READ)}
106+
/>
107+
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`read-${user.id}`}>
108+
<div>
109+
Read
110+
</div>
111+
<input type='hidden' />
112+
</label>
113+
</div>)}
114+
</div>
115+
<div className={cn(styles.col5)}>
116+
{showRadioButtons && (<div className={styles.tcRadioButton}>
117+
<input
118+
name={`user-${user.id}`}
119+
type='radio'
120+
id={`write-${user.id}`}
121+
checked={user.role === PROJECT_ROLES.WRITE}
122+
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.WRITE)}
123+
/>
124+
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`write-${user.id}`}>
125+
<div>
126+
Write
127+
</div>
128+
<input type='hidden' />
129+
</label>
130+
</div>)}
131+
</div>
132+
<div className={cn(styles.col5)}>
133+
{showRadioButtons && (<div className={styles.tcRadioButton}>
134+
<input
135+
name={`user-${user.id}`}
136+
type='radio'
137+
id={`full-access-${user.id}`}
138+
checked={user.role === PROJECT_ROLES.MANAGER}
139+
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.MANAGER)}
140+
/>
141+
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`full-access-${user.id}`}>
142+
<div>
143+
Full Access
144+
</div>
145+
<input type='hidden' />
146+
</label>
147+
</div>)}
148+
</div>
149+
<div className={cn(styles.col5)}>
150+
{showRadioButtons && (<div className={styles.tcRadioButton}>
151+
<input
152+
name={`user-${user.id}`}
153+
type='radio'
154+
id={`copilot-${user.id}`}
155+
checked={user.role === PROJECT_ROLES.COPILOT}
156+
onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.COPILOT)}
157+
/>
158+
<label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`copilot-${user.id}`}>
159+
<div>
160+
Copilot
161+
</div>
162+
<input type='hidden' />
163+
</label>
164+
</div>)}
165+
</div>
166+
</>
167+
)}
168+
{isInvite && (
169+
<>
170+
<div className={cn(styles.col5)} />
171+
<div className={cn(styles.col5)}>
172+
Invited {moment(user.createdAt).format('MMM D, YY')}
173+
</div>
174+
<div className={cn(styles.col5)} />
175+
<div className={cn(styles.col5)} />
176+
</>
177+
)}
163178
{isEditable ? (<div className={cn(styles.col5)}>
164179
<PrimaryButton
165180
text={'Remove'}
@@ -173,6 +188,7 @@ class UserCard extends Component {
173188
}
174189

175190
UserCard.propTypes = {
191+
isInvite: PropTypes.bool,
176192
user: PropTypes.object,
177193
updateProjectNember: PropTypes.func.isRequired,
178194
onRemoveClick: PropTypes.func.isRequired,

‎src/components/Users/Users.module.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,12 @@
118118
text-decoration: none;
119119
font-size: 12px;
120120
}
121+
122+
&.inviteEmailInput {
123+
input {
124+
width: 250px;
125+
}
126+
}
121127
}
122128
}
123129

@@ -395,10 +401,15 @@
395401
}
396402

397403
.addButtonContainer {
398-
width: 110px;
404+
display: flex;
405+
justify-content: flex-start;
399406
height: 30px;
400407
margin-top: 20px;
401408
margin-bottom: 20px;
409+
gap: 8px;
410+
> * {
411+
width: 125px;
412+
}
402413
}
403414

404415
.addUserContentContainer {

0 commit comments

Comments
 (0)