Skip to content

Commit a9e12e4

Browse files
Rokt33rRokt33r
committed
usernavigator done
1 parent 1690e64 commit a9e12e4

8 files changed

Lines changed: 214 additions & 46 deletions

File tree

‎browser/main/HomeContainer/Components/UserNavigator.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default class UserNavigator extends Component {
2020
<Link to={'/users/' + user.id} activeClassName='active'>
2121
<ProfileImage email={user.email} size='44'/>
2222
<div className='userTooltip'>{user.name}</div>
23-
<div className='keyLabel'>{'⌘' + (index + 1)}</div>
23+
{index < 9 ? <div className='keyLabel'>{'⌘' + (index + 1)}</div> : null}
2424
</Link>
2525
</li>
2626
))

‎browser/main/HomeContainer/lib/api.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,27 @@ export function createTeam (input) {
99
})
1010
.send(input)
1111
}
12+
13+
export function searchUser (key) {
14+
return request
15+
.get(apiUrl + 'search/users')
16+
.query({key: key})
17+
}
18+
19+
export function setMember (teamId, input) {
20+
return request
21+
.post(apiUrl + 'teams/' + teamId + '/members')
22+
.set({
23+
Authorization: 'Bearer ' + localStorage.getItem('token')
24+
})
25+
.send(input)
26+
}
27+
28+
export function deleteMember (teamId, input) {
29+
return request
30+
.del(apiUrl + 'teams/' + teamId + '/members')
31+
.set({
32+
Authorization: 'Bearer ' + localStorage.getItem('token')
33+
})
34+
.send(input)
35+
}

‎browser/main/HomeContainer/lib/modal/CreateNewTeam.js‎

Lines changed: 125 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
11
import React, { PropTypes } from 'react'
22
import ProfileImage from '../../../components/ProfileImage'
3-
import { createTeam } from '../api'
3+
import { searchUser, createTeam, setMember, deleteMember } from '../api'
44
import linkState from '../../../helpers/linkState'
5+
import Select from 'react-select'
6+
7+
function getUsers (input, cb) {
8+
searchUser(input)
9+
.then(function (res) {
10+
let users = res.body
11+
12+
cb(null, {
13+
options: users.map(user => {
14+
return { value: user.name, label: user.name }
15+
}),
16+
complete: false
17+
})
18+
})
19+
.catch(function (err) {
20+
console.error(err)
21+
})
22+
}
523

624
export default class CreateNewTeam extends React.Component {
725
constructor (props) {
@@ -12,16 +30,12 @@ export default class CreateNewTeam extends React.Component {
1230
alert: null
1331
},
1432
select: {
15-
team: {"name":"test123",
16-
"profileName":"test123",
17-
"userType":"team",
18-
"updatedAt":"2015-10-11T09:01:01.277Z",
19-
"createdAt":"2015-10-11T09:01:01.277Z",
20-
"id":220,"Members":[{"id":213,"email":"fluke8259@gmail.com","name":"rokt33r","profileName":"Rokt33r","userType":"person","createdAt":"2015-10-05T09:01:30.000Z","updatedAt":"2015-10-05T09:01:30.000Z","_pivot_TeamId":220,"_pivot_MemberId":213,"_pivot_role":"owner"}]
21-
},
33+
team: null,
34+
newMember: null,
2235
alert: null
2336
},
24-
currentTab: 'select'
37+
currentTab: 'create',
38+
currentUser: JSON.parse(localStorage.getItem('currentUser'))
2539
}
2640
}
2741

@@ -56,13 +70,13 @@ export default class CreateNewTeam extends React.Component {
5670
}
5771

5872
function onError (err) {
59-
let errorMessage = err.response != null ? err.response.body.message : err.message
73+
let errorMessage = err.response != null ? err.response.body.message : 'Can\'t connect to API server.'
6074

6175
let createState = this.state.create
6276
createState.isSending = false
6377
createState.alert = {
6478
type: 'error',
65-
message: 'Can\'t connect to API server.'
79+
message: errorMessage
6680
}
6781

6882
this.setState({
@@ -91,24 +105,112 @@ export default class CreateNewTeam extends React.Component {
91105
</div>
92106
)
93107
}
108+
handleNewMemberChange (value) {
109+
let selectState = this.state.select
110+
selectState.newMember = value
111+
this.setState({select: selectState})
112+
}
113+
114+
handleClickAddMemberButton (e) {
115+
let selectState = this.state.select
116+
let input = {
117+
name: selectState.newMember,
118+
role: 'member'
119+
}
120+
121+
setMember(selectState.team.id, input)
122+
.then(res => {
123+
let selectState = this.state.select
124+
let team = res.body
125+
team.Members = team.Members.sort((a, b) => {
126+
return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
127+
})
128+
selectState.team = team
129+
selectState.newMember = ''
130+
131+
this.setState({select: selectState})
132+
})
133+
.catch(err => {
134+
if (err.status != null) throw err
135+
else console.error(err)
136+
})
137+
}
138+
139+
handleMemberDeleteButtonClick (name) {
140+
let selectState = this.state.select
141+
let input = {
142+
name: name,
143+
role: 'member'
144+
}
145+
146+
return function (e) {
147+
deleteMember(selectState.team.id, input)
148+
.then(res => {
149+
let selectState = this.state.select
150+
let team = res.body
151+
team.Members = team.Members.sort((a, b) => {
152+
return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
153+
})
154+
selectState.team = team
155+
selectState.newMember = ''
156+
157+
this.setState({select: selectState})
158+
})
159+
.catch(err => {
160+
console.log(err, err.response)
161+
if (err.status != null) throw err
162+
else console.error(err)
163+
})
164+
}.bind(this)
165+
}
166+
167+
handleMemberRoleChange (name) {
168+
return function (e) {
169+
let selectState = this.state.select
170+
let input = {
171+
name: name,
172+
role: e.target.value
173+
}
174+
175+
setMember(selectState.team.id, input)
176+
.then(res => {
177+
let selectState = this.state.select
178+
let team = res.body
179+
team.Members = team.Members.sort((a, b) => {
180+
return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
181+
})
182+
selectState.team = team
183+
selectState.newMember = ''
184+
185+
this.setState({select: selectState})
186+
})
187+
.catch(err => {
188+
if (err.status != null) throw err
189+
else console.error(err)
190+
})
191+
}.bind(this)
192+
}
94193

95194
renderSelectTab () {
96195
let selectState = this.state.select
97-
console.log(selectState)
196+
98197
let membersEl = selectState.team.Members.map(member => {
198+
let isCurrentUser = this.state.currentUser.id === member.id
199+
99200
return (
100201
<li key={'user-' + member.id}>
101202
<ProfileImage className='userPhoto' email={member.email} size='30'/>
102203
<div className='userInfo'>
103204
<div className='userName'>{`${member.profileName} (${member.name})`}</div>
104205
<div className='userEmail'>{member.email}</div>
105206
</div>
207+
106208
<div className='userControl'>
107-
<select value={member._pivot_role} className='userRole'>
209+
<select onChange={e => this.handleMemberRoleChange(member.name)(e)} disabled={isCurrentUser} value={member._pivot_role} className='userRole'>
108210
<option value='owner'>Owner</option>
109211
<option value='member'>Member</option>
110212
</select>
111-
<button><i className='fa fa-times fa-fw'/></button>
213+
<button onClick={e => this.handleMemberDeleteButtonClick(member.name)(e)} disabled={isCurrentUser}><i className='fa fa-times fa-fw'/></button>
112214
</div>
113215
</li>
114216
)
@@ -117,9 +219,15 @@ export default class CreateNewTeam extends React.Component {
117219
return (
118220
<div className='selectTab'>
119221
<div className='title'>Select member</div>
120-
<div className='ipt'>
121-
<input type='text' placeholder='Enter user name or e-mail'/>
122-
<button>add</button>
222+
<div className='memberForm'>
223+
<Select
224+
className='memberName'
225+
autoload={false}
226+
asyncOptions={getUsers}
227+
onChange={val => this.handleNewMemberChange(val)}
228+
value={selectState.newMember}
229+
/>
230+
<button onClick={e => this.handleClickAddMemberButton(e)} className='addMemberBtn'>add</button>
123231
</div>
124232
<ul className='memberList'>
125233
{membersEl}

‎browser/styles/main/HomeContainer/components/ArticleTopBar.styl‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
bgColor = #E6E6E6
22
inputBgColor = white
3+
iptFocusBorderColor = #369DCD
34

45
refreshBtColor = #B3B3B3
56
refreshBtnActiveColor = #3A3A3A
@@ -22,31 +23,32 @@ infoBtnActiveBgColor = #3A3A3A
2223
margin-top 13.5px
2324
margin-left 15px
2425
width 350px
25-
border-radius 22px
26-
background-color inputBgColor
2726
padding 5px 15px
2827
transition 0.1s
2928
font-size 16px
3029
border 1px solid transparent
31-
border-color transparent
32-
&.focus
33-
border-color brandBorderColor
3430
input
35-
absolute top right
36-
left 35px
37-
width 300px
31+
absolute top left
32+
width 350px
33+
border-radius 16.5px
34+
background-color inputBgColor
35+
border 1px solid transparent
36+
padding-left 35px
3837
outline none
3938
font-size 14px
40-
border none
4139
height 33px
4240
line-height 33px
43-
background-color transparent
41+
z-index 0
42+
&:focus
43+
border-color iptFocusBorderColor
4444
i.fa
4545
position absolute
4646
display block
4747
top 0
4848
left 10px
4949
line-height 33px
50+
z-index 1
51+
pointer-events none
5052
&>.refreshBtn
5153
float left
5254
width 33px

‎browser/styles/main/HomeContainer/components/UserNavigator.styl‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ userAnchorActiveBgColor = white
1313
text-align center
1414
box-sizing border-box
1515
ul.userList
16-
margin-top 25px
16+
position absolute
17+
top 25px
18+
left 0
19+
right 0
20+
bottom 70px
21+
// overflow-y auto
1722
&>li
1823
a
1924
display block

0 commit comments

Comments
 (0)