Skip to content

Commit ffce667

Browse files
author
vikasrohit
authored
Merge pull request #2810 from appirio-tech/feature/team-management-list-invited-members
Team Management - List invited members on the sidebar
2 parents f7e2bfa + 17e977f commit ffce667

File tree

5 files changed

+111
-29
lines changed

5 files changed

+111
-29
lines changed

‎src/components/TeamManagement/ProjectManagementDialog.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -142,22 +142,26 @@ class Dialog extends React.Component {
142142
removeInvite(invite)
143143
}
144144
i++
145-
const username = invite.member ? invite.member.handle : invite.userId
145+
const handle = invite.member ? invite.member.handle : null
146+
const firstName = _.get(invite.member, 'firstName', '')
147+
const lastName = _.get(invite.member, 'lastName', '')
148+
let userFullName = `${firstName} ${lastName}`
149+
userFullName = userFullName.trim().length > 0 ? userFullName : null
146150
return (
147151
<div
148152
key={i}
149153
className={`project-member-layout ${(i%2 !== 0) ? 'dark' : ''}`}
150154
>
151155
<Avatar
152156
userName={invite.email}
157+
avatarUrl={invite.email ? '' : getAvatarResized(_.get(invite.member || {}, 'photoURL'), 40)}
153158
size={40}
154159
/>
155-
<div className="member-name member-email">
160+
<div className="member-name">
161+
{!invite.email && <span className="span-name">{userFullName}</span>}
156162
<span>
157-
{invite.email || username}
158-
</span>
159-
<span className="email-date">
160-
Invited {moment(invite.createdAt).format('MMM D, YY')}
163+
{!invite.email && <span className="member-handle">@{handle}</span>}
164+
{invite.email && <span className="member-email">{invite.email}</span>}
161165
</span>
162166
</div>
163167
{showRemove && <div className="member-remove" onClick={remove}>

‎src/components/TeamManagement/TeamManagement.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,15 @@ class TeamManagement extends React.Component {
9292
<UserTooltip usr={member} id={i} key={i} previewAvatar size={40} />
9393
)
9494
})}
95+
{projectTeamInvites.map((member, i) => {
96+
const wrapMember = {
97+
...member,
98+
...member.member
99+
}
100+
return (
101+
<UserTooltip usr={wrapMember} id={i} key={i} previewAvatar size={40} invitedLabel teamInvites />
102+
)
103+
})}
95104
{ (canShowInvite) &&
96105
<div className="join-btn" onClick={() => onShowProjectDialog(true)}>
97106
<AddIcon />
@@ -118,6 +127,18 @@ class TeamManagement extends React.Component {
118127
<UserTooltip usr={member} id={i} key={i} previewAvatar size={40} />
119128
)
120129
})}
130+
{topcoderTeamInvites.map((member, i) => {
131+
if (member.isCustomer) {
132+
return
133+
}
134+
const wrapMember = {
135+
...member,
136+
...member.member
137+
}
138+
return (
139+
<UserTooltip usr={wrapMember} id={i} key={i} previewAvatar size={40} invitedLabel />
140+
)
141+
})}
121142
{ (canJoinAsCopilot || canJoinAsManager) &&
122143
<div className="join-btn" onClick={() => onJoin(true)}>
123144
<AddIcon />

‎src/components/TeamManagement/TopcoderManagementDialog.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -226,23 +226,25 @@ class Dialog extends React.Component {
226226
const remove = () => {
227227
removeInvite(invite)
228228
}
229-
const username = invite.member ? invite.member.handle : invite.userId
229+
const firstName = _.get(invite.member, 'firstName', '')
230+
const lastName = _.get(invite.member, 'lastName', '')
231+
let userFullName = `${firstName} ${lastName}`
232+
userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
230233
i++
231234
return (
232235
<div
233236
key={i}
234237
className={`project-member-layout ${(i%2 !== 0) ? 'dark' : ''}`}
235238
>
236239
<Avatar
237-
userName={username}
240+
userName={userFullName}
241+
avatarUrl={getAvatarResized(_.get(invite.member, 'photoURL'), 40)}
238242
size={40}
239243
/>
240-
<div className="member-name member-email">
241-
<span>
242-
{username}
243-
</span>
244-
<span className="email-date">
245-
Invited {moment(invite.time).format('MMM D, YY')}
244+
<div className="member-name">
245+
<span className="span-name">{userFullName}</span>
246+
<span className="member-handle">
247+
@{invite.member.handle || 'ConnectUser'}
246248
</span>
247249
</div>
248250
{showRemove && <div className="member-remove" onClick={remove}>

‎src/components/User/UserTooltip.jsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
55
import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
66
import { DOMAIN } from '../../config/constants'
77
import { getAvatarResized } from '../../helpers/tcHelpers'
8+
import IconDirectArrow from '../../assets/icons/icon-direct-arrow.svg'
89

910
require('./UserTooltip.scss')
1011

11-
const UserTooltip = ({ usr, id, previewAvatar, size }) => {
12+
const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, teamInvites }) => {
1213
const theme = `customer-data size-${size}`
1314
const tooltipMargin = previewAvatar ? -(100 + (id * 20)) : 0
1415
const userHandle = _.get(usr, 'handle')
@@ -17,40 +18,51 @@ const UserTooltip = ({ usr, id, previewAvatar, size }) => {
1718
const lastName = _.get(usr, 'lastName', '')
1819
let userFullName = `${firstName} ${lastName}`
1920
userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
21+
const avatar =
22+
(
23+
<Avatar avatarUrl={userEmail ? '' : getAvatarResized(_.get(usr || {}, 'photoURL'), 40)}
24+
userName={userEmail}
25+
/>
26+
)
2027
return (
2128
<Tooltip theme={theme} pointerWidth={20} tooltipMargin={tooltipMargin}>
2229
<div className="tooltip-target" id={`tt-${id}`}>
2330
{
2431
previewAvatar ? (<div className={`stack-avatar-${id}`}>
2532
<Avatar
26-
avatarUrl={getAvatarResized(_.get(usr, 'photoURL'), size)}
27-
userName={userFullName}
33+
avatarUrl={userEmail ? '' : getAvatarResized(_.get(usr || {}, 'photoURL'), 40)}
34+
userName={userEmail}
2835
size={size}
2936
/>
37+
{invitedLabel && <IconDirectArrow className="direct-arrow"/>}
3038
</div>) :
3139
<span className="project-customer">{userFullName}</span>
3240
}
3341
</div>
3442
<div className="tooltip-body">
3543
<div className="top-container">
3644
<div className="tt-col-avatar">
37-
<a href={`//www.${DOMAIN}/members/${userHandle}/`} target="_blank" rel="noopener noreferrer" className="tt-user-avatar">
38-
<Avatar
39-
avatarUrl={getAvatarResized(_.get(usr, 'photoURL'), size)}
40-
userName={userFullName}
41-
/>
42-
</a>
45+
{ !userEmail ? (
46+
<a href={`//www.${DOMAIN}/members/${userHandle}/`} target="_blank" rel="noopener noreferrer" className="tt-user-avatar">
47+
{avatar}
48+
</a>
49+
) : (
50+
<span>
51+
{avatar}
52+
</span>
53+
)}
4354
</div>
4455
<div className="tt-col-user-data">
45-
<div className="user-name-container">
56+
{!userEmail && <div className="user-name-container">
4657
<span>{userFullName}</span>
47-
</div>
48-
<div className={`user-handle-container ${userEmail ? 'with-email' : ''}`}>
58+
</div>}
59+
{!userEmail && <div className="user-handle-container">
4960
<span>{userHandle}</span>
50-
</div>
51-
<div className="user-email-container">
61+
</div>}
62+
{userEmail && <div className={`user-email-container ${teamInvites ? 'text-dark' : ''}`}>
5263
<a href={`mailto:${userEmail}`}>{userEmail}</a>
53-
</div>
64+
</div>}
65+
{invitedLabel && <div className="invited-label">invited</div>}
5466
</div>
5567
</div>
5668
</div>

‎src/components/User/UserTooltip.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,26 @@
33
.Tooltip {
44
&.customer-data {
55
.tooltip-target {
6+
position: relative;
67
.Avatar {
78
height: 30px;
89
width: 30px;
910
}
11+
12+
.direct-arrow {
13+
position:absolute;
14+
right: 0;
15+
bottom: 0;
16+
text-align: center;
17+
background-color: #404041;
18+
border-radius: 80%;
19+
width: 14px;
20+
height: 14px;
21+
padding: 3px;
22+
path {
23+
fill: white;
24+
}
25+
}
1026
}
1127

1228
&.size-35 {
@@ -105,6 +121,7 @@
105121
display: flex;
106122
flex-wrap: wrap;
107123
align-content: flex-start;
124+
position: relative;
108125
}
109126

110127
.user-name-container {
@@ -147,6 +164,16 @@
147164
text-decoration: none;
148165
}
149166
}
167+
168+
&.text-dark {
169+
padding-left: 0px;
170+
a {
171+
font-size: 15px;
172+
font-weight: 600;
173+
color: $tc-black;
174+
line-height: 20px;
175+
}
176+
}
150177
}
151178
}
152179

@@ -187,6 +214,22 @@
187214
width: 40px;
188215
height: 40px;
189216
}
217+
218+
.invited-label {
219+
@include roboto-medium;
220+
background-color: $tc-gray-05;
221+
border-radius: 4px;
222+
color: $tc-gray-50;
223+
font-size: 13px;
224+
height: 20px;
225+
line-height: 20px;
226+
padding: 0 2 * $base-unit;
227+
white-space: nowrap;
228+
position: absolute;
229+
right: 0;
230+
top: 0;
231+
z-index: 1000;
232+
}
190233
}
191234
}
192235
}

0 commit comments

Comments
 (0)