@@ -11,95 +11,124 @@ import IconXMark from '../../../../../../assets/icons/x-mark-thin.svg'
1111
1212import './AddCopilotsSidebar.scss'
1313
14- function AddCopilotsSidebar ( {
15- memberToAdd,
16- setMemberToAdd,
17- copilots,
18- projectMembers,
19- onClose,
20- onAdd,
21- onRemove
22- } ) {
23- const canManageCopilots = hasPermission ( PERMISSIONS . MANAGE_COPILOTS )
24- const canRemoveCopilots = hasPermission ( PERMISSIONS . REMOVE_COPILOTS )
14+ class AddCopilotsSidebar extends React . Component {
15+ constructor ( props ) {
16+ super ( props )
2517
26- const projectMemberOptions = projectMembers . map ( projectMember => ( {
27- label : projectMember . handle ,
28- value : projectMember
29- } ) ) . filter (
30- // check if project member was not added
31- option => copilots . findIndex ( copilot => copilot . userId === option . value . userId ) === - 1 &&
32- // check if project member role is copilot
33- option . value . role === PROJECT_ROLE_COPILOT
34- )
18+ this . state = {
19+ }
3520
36- return (
37- < aside styleName = "add-copilots-sidebar" >
38- < h2 styleName = "title" >
39- Copilot
40- < button type = "button" className = "tc-btn tc-btn-link" styleName = "button-close" onClick = { onClose } >
41- < IconXMark />
42- </ button >
43- </ h2 >
44- < div styleName = "select-copilot" >
45- < span styleName = "label" > Add New Copilot</ span >
46- < Select
47- options = { projectMemberOptions }
48- onChange = { ( selectedOption ) => {
49- if ( ! selectedOption ) {
50- return
51- }
21+ this . onClickOutside = this . onClickOutside . bind ( this )
22+ }
5223
53- setMemberToAdd ( selectedOption . value )
54- } }
55- value = { projectMemberOptions . find ( option => option . value === memberToAdd ) || null }
56- placeholder = "- Select -"
57- isClearable = { false }
58- />
59- < button
60- className = "tc-btn tc-btn-primary tc-btn-sm"
61- onClick = { ( ) => {
62- onAdd ( memberToAdd )
63- setMemberToAdd ( null )
64- } }
65- disabled = { ! memberToAdd }
66- styleName = "add-button"
67- >
68- ADD
69- </ button >
70- </ div >
71- < ul styleName = "copilot-list" >
72- { copilots . map ( ( member , index ) => (
73- < li key = { `${ member . handle } ${ index } } >
74- < div styleName = "member-details" >
75- < Avatar
76- userName = { getFullNameWithFallback ( member ) }
77- avatarUrl = { getAvatarResized ( _ . get ( member , 'photoURL' ) || '' , 80 ) }
78- size = { 40 }
79- />
80- < div styleName = "name-and-handle" >
81- < span styleName = "fullname" > { getFullNameWithFallback ( member ) } </ span >
82- < span styleName = "handle" >
83- @{ member . handle || 'ConnectUser' }
84- </ span >
24+ onClickOutside ( event ) {
25+ const { onClose} = this . props
26+ if ( this . ref . contains ( event . target ) ) {
27+ return
28+ }
29+
30+ onClose ( )
31+ }
32+
33+ componentDidMount ( ) {
34+ document . addEventListener ( 'click' , this . onClickOutside )
35+ }
36+
37+ componentWillUnmount ( ) {
38+ document . removeEventListener ( 'click' , this . onClickOutside )
39+ }
40+
41+ render ( ) {
42+ const {
43+ memberToAdd,
44+ setMemberToAdd,
45+ copilots,
46+ projectMembers,
47+ onClose,
48+ onAdd,
49+ onRemove
50+ } = this . props
51+ const canManageCopilots = hasPermission ( PERMISSIONS . MANAGE_COPILOTS )
52+ const canRemoveCopilots = hasPermission ( PERMISSIONS . REMOVE_COPILOTS )
53+
54+ const projectMemberOptions = projectMembers . map ( projectMember => ( {
55+ label : projectMember . handle ,
56+ value : projectMember
57+ } ) ) . filter (
58+ // check if project member was not added
59+ option => copilots . findIndex ( copilot => copilot . userId === option . value . userId ) === - 1 &&
60+ // check if project member role is copilot
61+ option . value . role === PROJECT_ROLE_COPILOT
62+ )
63+
64+ return (
65+ < aside styleName = "add-copilots-sidebar" ref = { ref => this . ref = ref } >
66+ < h2 styleName = "title" >
67+ Copilot
68+ < button type = "button" className = "tc-btn tc-btn-link" styleName = "button-close" onClick = { onClose } >
69+ < IconXMark />
70+ </ button >
71+ </ h2 >
72+ < div styleName = "select-copilot" >
73+ < span styleName = "label" > Add New Copilot</ span >
74+ < Select
75+ options = { projectMemberOptions }
76+ onChange = { ( selectedOption ) => {
77+ if ( ! selectedOption ) {
78+ return
79+ }
80+
81+ setMemberToAdd ( selectedOption . value )
82+ } }
83+ value = { projectMemberOptions . find ( option => option . value === memberToAdd ) || null }
84+ placeholder = "- Select -"
85+ isClearable = { false }
86+ />
87+ < button
88+ className = "tc-btn tc-btn-primary tc-btn-sm"
89+ onClick = { ( ) => {
90+ onAdd ( memberToAdd )
91+ setMemberToAdd ( null )
92+ } }
93+ disabled = { ! memberToAdd }
94+ styleName = "add-button"
95+ >
96+ ADD
97+ </ button >
98+ </ div >
99+ < ul styleName = "copilot-list" >
100+ { copilots . map ( ( member , index ) => (
101+ < li key = { `${ member . handle } ${ index } } >
102+ < div styleName = "member-details" >
103+ < Avatar
104+ userName = { getFullNameWithFallback ( member ) }
105+ avatarUrl = { getAvatarResized ( _ . get ( member , 'photoURL' ) || '' , 80 ) }
106+ size = { 40 }
107+ />
108+ < div styleName = "name-and-handle" >
109+ < span styleName = "fullname" > { getFullNameWithFallback ( member ) } </ span >
110+ < span styleName = "handle" >
111+ @{ member . handle || 'ConnectUser' }
112+ </ span >
113+ </ div >
114+ { ( canManageCopilots || canRemoveCopilots ) && (
115+ < button
116+ className = "tc-btn tc-btn-link"
117+ styleName = "close-button"
118+ onClick = { ( ) => {
119+ onRemove ( member )
120+ } }
121+ >
122+ ×
123+ </ button >
124+ ) }
85125 </ div >
86- { ( canManageCopilots || canRemoveCopilots ) && (
87- < button
88- className = "tc-btn tc-btn-link"
89- styleName = "close-button"
90- onClick = { ( ) => {
91- onRemove ( member )
92- } }
93- >
94- ×
95- </ button >
96- ) }
97- </ div >
98- </ li >
99- ) ) }
100- </ ul >
101- </ aside >
102- )
126+ </ li >
127+ ) ) }
128+ </ ul >
129+ </ aside >
130+ )
131+ }
103132}
104133
105134AddCopilotsSidebar . propTypes = {
0 commit comments