mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-16 03:06:27 +00:00
add Member setting, Team setting, FolderSetting(80%)
bump react-select
This commit is contained in:
Rokt33r
40
lib/components/modal/Preference/AppSettingTab.js
Normal file
40
lib/components/modal/Preference/AppSettingTab.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
|
||||
export default class AppSettingTab extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className='AppSettingTab content'>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>Hotkey</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Toggle Finder(popup)</label>
|
||||
<input type='text'/>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button>Save</button>
|
||||
</div>
|
||||
<div className='description'>
|
||||
<ul>
|
||||
<li><code>0</code> to <code>9</code></li>
|
||||
<li><code>A</code> to <code>Z</code></li>
|
||||
<li><code>F1</code> to <code>F24</code></li>
|
||||
<li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
|
||||
<li><code>Plus</code></li>
|
||||
<li><code>Space</code></li>
|
||||
<li><code>Backspace</code></li>
|
||||
<li><code>Delete</code></li>
|
||||
<li><code>Insert</code></li>
|
||||
<li><code>Return</code> (or <code>Enter</code> as alias)</li>
|
||||
<li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
|
||||
<li><code>Home</code> and <code>End</code></li>
|
||||
<li><code>PageUp</code> and <code>PageDown</code></li>
|
||||
<li><code>Escape</code> (or <code>Esc</code> for short)</li>
|
||||
<li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
|
||||
<li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
121
lib/components/modal/Preference/FolderRow.js
Normal file
121
lib/components/modal/Preference/FolderRow.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import api from 'boost/api'
|
||||
import linkState from 'boost/linkState'
|
||||
import FolderMark from 'boost/components/FolderMark'
|
||||
|
||||
const IDLE = 'IDLE'
|
||||
const EDIT = 'EDIT'
|
||||
const DELETE = 'DELETE'
|
||||
|
||||
export default class FolderRow extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
mode: IDLE,
|
||||
name: props.folder.name,
|
||||
public: props.folder.public
|
||||
}
|
||||
}
|
||||
|
||||
handleCancelButtonClick (e) {
|
||||
this.setState({
|
||||
mode: IDLE,
|
||||
name: this.props.folder.name,
|
||||
public: this.props.folder.public
|
||||
})
|
||||
}
|
||||
|
||||
handleEditButtonClick (e) {
|
||||
this.setState({mode: EDIT})
|
||||
}
|
||||
|
||||
handleDeleteButtonClick (e) {
|
||||
this.setState({mode: DELETE})
|
||||
}
|
||||
|
||||
handleFolderPublicChange (e) {
|
||||
this.setState({public: e.target.value})
|
||||
}
|
||||
|
||||
handleSaveButtonClick (e) {
|
||||
let input = {
|
||||
name: this.state.name,
|
||||
public: !!parseInt(this.state.public, 10)
|
||||
}
|
||||
|
||||
api.updateFolder(this.props.folder.id, input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
this.setState({mode: IDLE})
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
handleDeleteConfirmButtonClick (e) {
|
||||
api.destroyFolder(this.props.folder.id)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let folder = this.props.folder
|
||||
|
||||
switch (this.state.mode) {
|
||||
case EDIT:
|
||||
return (
|
||||
<div className='FolderRow edit'>
|
||||
<div className='folderName'>
|
||||
<input valueLink={this.linkState('name')} type='text'/>
|
||||
</div>
|
||||
<div className='folderPublic'>
|
||||
<select value={this.state.public} onChange={e => this.handleFolderPublicChange(e)}>
|
||||
<option value='0'>Private</option>
|
||||
<option value='1'>Public</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='folderControl'>
|
||||
<button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
|
||||
<button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
case DELETE:
|
||||
return (
|
||||
<div className='FolderRow delete'>
|
||||
<div className='folderDeleteLabel'>Are you sure to delete <strong>{folder.name}</strong> folder?</div>
|
||||
<div className='folderControl'>
|
||||
<button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
|
||||
<button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
case IDLE:
|
||||
default:
|
||||
return (
|
||||
<div className='FolderRow'>
|
||||
<div className='folderName'><FolderMark id={folder.id}/> {folder.name}</div>
|
||||
<div className='folderPublic'>{folder.public ? 'Public' : 'Private'}</div>
|
||||
<div className='folderControl'>
|
||||
<button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
|
||||
<button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FolderRow.propTypes = {
|
||||
folder: PropTypes.shape()
|
||||
}
|
||||
|
||||
FolderRow.prototype.linkState = linkState
|
||||
63
lib/components/modal/Preference/FolderSettingTab.js
Normal file
63
lib/components/modal/Preference/FolderSettingTab.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import _ from 'lodash'
|
||||
import FolderRow from './FolderRow'
|
||||
|
||||
export default class FolderSettingTab extends React.Component {
|
||||
|
||||
getCurrentTeam (props) {
|
||||
if (props == null) props = this.props
|
||||
return _.findWhere(props.teams, {id: props.currentTeamId})
|
||||
}
|
||||
|
||||
handleTeamSelectChange (e) {
|
||||
this.props.switchTeam(e.target.value)
|
||||
}
|
||||
|
||||
renderTeamOptions () {
|
||||
return this.props.teams.map(team => {
|
||||
return (
|
||||
<option key={'team-' + team.id} value={team.id}>{team.name}</option>)
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let team = this.getCurrentTeam()
|
||||
console.log(team.Folders)
|
||||
let folderElements = team.Folders.map(folder => {
|
||||
return (
|
||||
<FolderRow key={'folder-' + folder.id} folder={folder}/>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='FolderSettingTab content'>
|
||||
<div className='header'>
|
||||
<span>Setting of</span>
|
||||
<select
|
||||
value={this.props.currentTeamId}
|
||||
onChange={e => this.handleTeamSelectChange(e)}
|
||||
className='teamSelect'>
|
||||
{this.renderTeamOptions()}
|
||||
</select>
|
||||
</div>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>Folders</div>
|
||||
<div className='folderTable'>
|
||||
<div className='folderHeader'>
|
||||
<div className='folderName'>Folder name</div>
|
||||
<div className='folderPublic'>Public/Private</div>
|
||||
<div className='folderControl'>Edit/Delete</div>
|
||||
</div>
|
||||
{folderElements}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FolderSettingTab.propTypes = {
|
||||
currentTeamId: PropTypes.number,
|
||||
teams: PropTypes.array,
|
||||
switchTeam: PropTypes.func
|
||||
}
|
||||
11
lib/components/modal/Preference/HelpTab.js
Normal file
11
lib/components/modal/Preference/HelpTab.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
|
||||
export default class HelpTab extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className='content help'>
|
||||
Comming soon
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
206
lib/components/modal/Preference/MemberSettingTab.js
Normal file
206
lib/components/modal/Preference/MemberSettingTab.js
Normal file
@@ -0,0 +1,206 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import ProfileImage from 'boost/components/ProfileImage'
|
||||
import Select from 'react-select'
|
||||
import api from 'boost/api'
|
||||
import _ from 'lodash'
|
||||
|
||||
function getUsers (input, cb) {
|
||||
api.searchUser(input)
|
||||
.then(function (res) {
|
||||
let users = res.body
|
||||
|
||||
cb(null, {
|
||||
options: users.map(user => {
|
||||
return { value: user.name, label: user.name }
|
||||
}),
|
||||
complete: false
|
||||
})
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
export default class MemberSettingTab extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
newMember: ''
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentTeam (props) {
|
||||
if (props == null) props = this.props
|
||||
return _.findWhere(props.teams, {id: props.currentTeamId})
|
||||
}
|
||||
|
||||
handleTeamSelectChange (e) {
|
||||
this.props.switchTeam(e.target.value)
|
||||
}
|
||||
|
||||
handleNewMemberChange (value) {
|
||||
this.setState({newMember: value})
|
||||
}
|
||||
|
||||
handleClickAddMemberButton (e) {
|
||||
let team = this.getCurrentTeam()
|
||||
if (team == null || team.userType !== 'team') return null
|
||||
|
||||
let input = {
|
||||
name: this.state.newMember,
|
||||
role: 'member'
|
||||
}
|
||||
api.setMember(team.id, input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
}
|
||||
handleMemberRoleChange (name) {
|
||||
return e => {
|
||||
let team = this.getCurrentTeam()
|
||||
let input = {
|
||||
name: name,
|
||||
role: e.target.value
|
||||
}
|
||||
|
||||
api.setMember(team.id, input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleMemberDeleteButtonClick (name) {
|
||||
return e => {
|
||||
let team = this.getCurrentTeam()
|
||||
let input = {
|
||||
name: name
|
||||
}
|
||||
|
||||
api.deleteMember(team.id, input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
renderTeamOptions () {
|
||||
return this.props.teams.map(team => {
|
||||
return (
|
||||
<option key={'team-' + team.id} value={team.id}>{team.name}</option>)
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
console.log(this.props.teams)
|
||||
|
||||
let team = this.getCurrentTeam()
|
||||
|
||||
if (team == null || team.userType === 'person') {
|
||||
return this.renderNoTeam()
|
||||
}
|
||||
|
||||
let membersEl = team.Members.map(member => {
|
||||
let isCurrentUser = this.props.currentUser.id === member.id
|
||||
|
||||
return (
|
||||
<li key={'user-' + member.id}>
|
||||
<div className='colUserName'>
|
||||
<ProfileImage className='userPhoto' email={member.email} size='30'/>
|
||||
<div className='userInfo'>
|
||||
<div className='userName'>{`${member.profileName} (${member.name})`}</div>
|
||||
<div className='userEmail'>{member.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='colRole'>
|
||||
<select onChange={e => this.handleMemberRoleChange(member.name)(e)} disabled={isCurrentUser} value={member._pivot_role} className='userRole'>
|
||||
<option value='owner'>Owner</option>
|
||||
<option value='member'>Member</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='colDelete'>
|
||||
<button className='deleteButton' onClick={e => this.handleMemberDeleteButtonClick(member.name)(e)} disabled={isCurrentUser}><i className='fa fa-times fa-fw'/></button>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='MemberSettingTab content'>
|
||||
<div className='header'>
|
||||
<span>Setting of</span>
|
||||
<select
|
||||
value={this.props.currentTeamId}
|
||||
onChange={e => this.handleTeamSelectChange(e)}
|
||||
className='teamSelect'>
|
||||
{this.renderTeamOptions()}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='membersTableSection section'>
|
||||
<div className='sectionTitle'>Members</div>
|
||||
<div className='addMember'>
|
||||
<div className='addMemberLabel'>Add member</div>
|
||||
<div className='addMemberControl'>
|
||||
<Select
|
||||
className='memberName'
|
||||
placeholder='Input username to add'
|
||||
autoload={false}
|
||||
asyncOptions={getUsers}
|
||||
onChange={val => this.handleNewMemberChange(val)}
|
||||
value={this.state.newMember}
|
||||
/>
|
||||
<button onClick={e => this.handleClickAddMemberButton(e)} className='addMemberBtn'>add</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='memberList'>
|
||||
<li className='header'>
|
||||
<div className='colUserName'>Username</div>
|
||||
<div className='colRole'>Role</div>
|
||||
<div className='colDelete'>Delete</div>
|
||||
</li>
|
||||
{membersEl}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderNoTeam () {
|
||||
return (
|
||||
<div className='TeamSettingTab content'>
|
||||
<div className='header'>
|
||||
<span>Setting of</span>
|
||||
<select
|
||||
value={this.props.currentTeamId}
|
||||
onChange={e => this.handleTeamSelectChange(e)}
|
||||
className='teamSelect'>
|
||||
{this.renderTeamOptions()}
|
||||
</select>
|
||||
</div>
|
||||
<div className='section'>Please select a team</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
MemberSettingTab.propTypes = {
|
||||
currentUser: PropTypes.shape(),
|
||||
teams: PropTypes.array,
|
||||
currentTeamId: PropTypes.number,
|
||||
switchTeam: PropTypes.func
|
||||
}
|
||||
155
lib/components/modal/Preference/TeamSettingTab.js
Normal file
155
lib/components/modal/Preference/TeamSettingTab.js
Normal file
@@ -0,0 +1,155 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import _ from 'lodash'
|
||||
import linkState from 'boost/linkState'
|
||||
import api from 'boost/api'
|
||||
|
||||
export default class TeamSettingTab extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
let team = this.getCurrentTeam(props)
|
||||
this.state = {
|
||||
teamName: team != null ? team.profileName : '',
|
||||
deleteConfirm: false,
|
||||
alert: null
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
let team = this.getCurrentTeam(nextProps)
|
||||
|
||||
this.setState({
|
||||
teamName: team != null ? team.profileName : '',
|
||||
deleteConfirm: false
|
||||
})
|
||||
}
|
||||
|
||||
getCurrentTeam (props) {
|
||||
if (props == null) props = this.props
|
||||
return _.findWhere(props.teams, {id: props.currentTeamId})
|
||||
}
|
||||
|
||||
handleTeamSelectChange (e) {
|
||||
this.props.switchTeam(e.target.value)
|
||||
}
|
||||
|
||||
handleSaveButtonClick (e) {
|
||||
let input = {
|
||||
profileName: this.state.teamName
|
||||
}
|
||||
let alert = {
|
||||
type: 'info',
|
||||
message: 'Sending...'
|
||||
}
|
||||
this.setState({alert}, () => {
|
||||
api.updateTeamInfo(this.props.currentTeamId, input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
let alert = {
|
||||
type: 'success',
|
||||
message: 'Successfully done!'
|
||||
}
|
||||
this.setState({alert})
|
||||
})
|
||||
.catch(err => {
|
||||
var message
|
||||
if (err.status != null) {
|
||||
message = err.response.body.message
|
||||
} else if (err.code === 'ECONNREFUSED') {
|
||||
message = 'Can\'t connect to API server.'
|
||||
} else throw err
|
||||
|
||||
let alert = {
|
||||
type: 'error',
|
||||
message: message
|
||||
}
|
||||
|
||||
this.setState({alert})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
renderTeamOptions () {
|
||||
return this.props.teams.map(team => {
|
||||
return (
|
||||
<option key={'team-' + team.id} value={team.id}>{team.name}</option>)
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let team = this.getCurrentTeam()
|
||||
|
||||
if (team == null || team.userType === 'person') {
|
||||
return this.renderNoTeam()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='TeamSettingTab content'>
|
||||
<div className='header'>
|
||||
<span>Setting of</span>
|
||||
<select
|
||||
value={this.props.currentTeamId}
|
||||
onChange={e => this.handleTeamSelectChange(e)}
|
||||
className='teamSelect'>
|
||||
{this.renderTeamOptions()}
|
||||
</select>
|
||||
</div>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>Team profile</div>
|
||||
<div className='sectionInput'>
|
||||
<label className='label'>Team Name</label>
|
||||
<input valueLink={this.linkState('teamName')} type='text'/>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
|
||||
|
||||
{this.state.alert != null
|
||||
? (
|
||||
<div className={'alert ' + this.state.alert.type}>{this.state.alert.message}</div>
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!this.state.deleteConfirm
|
||||
? (
|
||||
<div className='section teamDelete'>
|
||||
<label>Delete this team</label>
|
||||
<button onClick={e => this.setState({deleteConfirm: true})} className='deleteBtn'><i className='fa fa-fw fa-trash'/> Delete</button>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className='section teamDeleteConfirm'>
|
||||
<label>Are you sure to delete this team?</label>
|
||||
<button onClick={e => this.setState({deleteConfirm: false})}>Cancel</button>
|
||||
<button className='deleteBtn'><i className='fa fa-fw fa-check'/> Sure</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderNoTeam () {
|
||||
return (
|
||||
<div className='TeamSettingTab content'>
|
||||
<div className='header'>
|
||||
<span>Setting of</span>
|
||||
<select
|
||||
value={this.props.currentTeamId}
|
||||
onChange={e => this.handleTeamSelectChange(e)}
|
||||
className='teamSelect'>
|
||||
{this.renderTeamOptions()}
|
||||
</select>
|
||||
</div>
|
||||
<div className='section'>Please select a team</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
TeamSettingTab.propTypes = {
|
||||
currentTeamId: PropTypes.number,
|
||||
teams: PropTypes.array,
|
||||
switchTeam: PropTypes.func
|
||||
}
|
||||
|
||||
TeamSettingTab.prototype.linkState = linkState
|
||||
Reference in New Issue
Block a user