1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-25 23:51:51 +00:00

Contact Modal追加

This commit is contained in:
Rokt33r
2015-08-20 01:30:57 +09:00
parent 0b4cfd6563
commit 3d9a631786
22 changed files with 645 additions and 278 deletions

View File

@@ -15,7 +15,7 @@ module.exports = React.createClass({
<div className='AboutModal modal'>
<div className='about1'>
<img className='logo' src='resources/favicon-230x230.png'/>
<div className='appInfo'>Boost {version == null ? 'DEV version' : 'v' + version}</div>
<div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
</div>
<div className='about2'>

View File

@@ -0,0 +1,83 @@
var React = require('react/addons')
var Select = require('react-select')
var LinkedState = require('../Mixins/LinkedState')
var Hq = require('../Services/Hq')
var UserStore = require('../Stores/UserStore')
var getOptions = function (input, callback) {
Hq.searchUser(input)
.then(function (res) {
callback(null, {
options: res.body.map(function (user) {
return {
label: user.name,
value: user.name
}
}),
complete: false
})
})
.catch(function (err) {
console.error(err)
})
}
module.exports = React.createClass({
mixins: [LinkedState],
propTypes: {
team: React.PropTypes.object,
close: React.PropTypes.func
},
getInitialState: function () {
return {
userName: '',
role: 'member'
}
},
handleSubmit: function () {
Hq
.addMember(this.props.team.name, {
userName: this.state.userName,
role: this.state.role
})
.then(function (res) {
console.log(res.body)
UserStore.Actions.addMember(res.body)
this.props.close()
}.bind(this))
.catch(function (err) {
console.error(err)
})
},
handleChange: function (value) {
this.setState({userName: value})
},
render: function () {
return (
<div className='AddMemberModal modal'>
<Select
name='userName'
value={this.state.userName}
placeholder='Username to add'
asyncOptions={getOptions}
onChange={this.handleChange}
className='userNameSelect'
/>
<div className='formField'>
Add member as
<select valueLink={this.linkState('role')}>
<option value={'member'}>Member</option>
<option value={'owner'}>Owner</option>
</select>
role
</div>
<button onClick={this.handleSubmit} className='submitButton'><i className='fa fa-check'/></button>
</div>
)
}
})

View File

@@ -0,0 +1,62 @@
var React = require('react')
var LinkedState = require('../Mixins/LinkedState')
var Hq = require('../Services/Hq')
module.exports = React.createClass({
mixins: [LinkedState],
propTypes: {
close: React.PropTypes.func
},
getInitialState: function () {
return {
isSent: false,
mail: {
title: '',
content: ''
}
}
},
sendEmail: function () {
Hq.sendEmail(this.state.mail)
.then(function (res) {
this.setState({isSent: !this.state.isSent})
}.bind(this))
.catch(function (err) {
console.error(err)
})
},
render: function () {
return (
<div className='ContactModal modal'>
<div className='modal-header'><h1>Contact form</h1></div>
{!this.state.isSent ? (
<div className='contactForm'>
<div className='modal-body'>
<div className='formField'>
<input valueLink={this.linkState('mail.title')} placeholder='Title'/>
</div>
<div className='formField'>
<textarea valueLink={this.linkState('mail.content')} placeholder='Content'/>
</div>
</div>
<div className='modal-footer'>
<div className='formControl'>
<button onClick={this.sendEmail} className='sendButton'>Send</button>
<button onClick={this.props.close}>Cancel</button>
</div>
</div>
</div>
) : (
<div className='confirmation'>
<div className='confirmationMessage'>Thanks for sharing your opinion!</div>
<button className='doneButton' onClick={this.props.close}>Done</button>
</div>
)}
</div>
)
}
})

View File

@@ -22,7 +22,6 @@ module.exports = React.createClass({
return {
currentTab: 'userInfo',
user: {
name: user.name,
profileName: user.profileName,
email: user.email
},
@@ -116,10 +115,6 @@ module.exports = React.createClass({
<label>Profile Name</label>
<input valueLink={this.linkState('user.profileName')}/>
</div>
<div className='formField'>
<label>Name</label>
<input valueLink={this.linkState('user.name')}/>
</div>
<div className='formField'>
<label>E-mail</label>
<input valueLink={this.linkState('user.email')}/>

View File

@@ -1,77 +0,0 @@
var React = require('react/addons')
var ReactRouter = require('react-router')
var Select = require('react-select')
var request = require('superagent')
var Catalyst = require('../Mixins/Catalyst')
var PlanetActions = require('../Actions/PlanetActions')
var apiUrl = require('../../../config').apiUrl
var getOptions = function (input, callback) {
request
.get(apiUrl + 'users/search')
.query({name: input})
.send()
.end(function (err, res) {
if (err) {
callback(err)
return
}
callback(null, {
options: res.body.map(function (user) {
return {
label: user.name,
value: user.name
}
}),
complete: false
})
})
}
module.exports = React.createClass({
mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
propTypes: {
close: React.PropTypes.func
},
getInitialState: function () {
return {
userName: ''
}
},
componentDidMount: function () {
window.ns = React.findDOMNode(this).querySelector('.Select')
},
handleSubmit: function () {
var userName = this.state.userName
var params = this.getParams()
var ownerName = params.userName
var planetName = params.planetName
PlanetActions.addUser(ownerName + '/' + planetName, userName)
},
handleChange: function (value) {
this.setState({userName: value})
},
stopPropagation: function (e) {
e.stopPropagation()
},
render: function () {
return (
<div onClick={this.stopPropagation} className='PlanetAddUserModal modal'>
<Select
name='userName'
value={this.state.userName}
placeholder='Username'
asyncOptions={getOptions}
onChange={this.handleChange}
className='userNameSelect'
/>
<button onClick={this.handleSubmit} className='submitButton'><i className='fa fa-check'/></button>
</div>
)
}
})

View File

@@ -1,20 +1,43 @@
/* global localStorage */
var React = require('react/addons')
var Reflux = require('reflux')
var Select = require('react-select')
var Hq = require('../Services/Hq')
var LinkedState = require('../Mixins/LinkedState')
var Helper = require('../Mixins/Helper')
var UserStore = require('../Stores/UserStore')
var getOptions = function (input, callback) {
Hq.searchUser(input)
.then(function (res) {
callback(null, {
options: res.body.map(function (user) {
return {
label: user.name,
value: user.name
}
}),
complete: false
})
})
.catch(function (err) {
console.error(err)
})
}
module.exports = React.createClass({
mixins: [LinkedState],
mixins: [LinkedState, Reflux.listenTo(UserStore, 'onUserChange'), Helper],
propTypes: {
team: React.PropTypes.shape({
id: React.PropTypes.number,
name: React.PropTypes.string,
profileName: React.PropTypes.string,
email: React.PropTypes.string
email: React.PropTypes.string,
Members: React.PropTypes.array
})
},
getInitialState: function () {
@@ -22,10 +45,31 @@ module.exports = React.createClass({
return {
currentTab: 'teamInfo',
team: {
name: team.name,
profileName: team.profileName
},
userSubmitStatus: null
userSubmitStatus: null,
member: {
name: '',
role: 'member'
},
updatingMember: false
}
},
onUserChange: function (res) {
var member
switch (res.status) {
case 'memberAdded':
member = res.data
if (member.TeamMember.TeamId === this.props.team.id) {
this.forceUpdate()
}
break
case 'memberRemoved':
member = res.data
if (member.TeamMember.TeamId === this.props.team.id) {
this.forceUpdate()
}
break
}
},
selectTab: function (tabName) {
@@ -41,6 +85,7 @@ module.exports = React.createClass({
.then(function (res) {
this.setState({userSubmitStatus: 'done'}, function () {
UserStore.Actions.update(res.body)
this.forceUpdate()
})
}.bind(this))
.catch(function (err) {
@@ -49,6 +94,66 @@ module.exports = React.createClass({
}.bind(this))
})
},
handleMemberNameChange: function (value) {
var member = this.state.member
member.name = value
this.setState({member: member})
},
addMember: function () {
this.setState({updatingMember: true}, function () {
Hq
.addMember(this.props.team.name, {
userName: this.state.member.name,
role: this.state.member.role
})
.then(function (res) {
UserStore.Actions.addMember(res.body)
this.setState({updatingMember: false})
}.bind(this))
.catch(function (err) {
console.error(err)
this.setState({updatingMember: false})
}.bind(this))
})
},
roleChange: function (memberName) {
return function (e) {
var role = e.target.value
this.setState({updatingMember: true}, function () {
Hq
.addMember(this.props.team.name, {
userName: memberName,
role: role
})
.then(function (res) {
UserStore.Actions.addMember(res.body)
this.setState({updatingMember: false})
}.bind(this))
.catch(function (err) {
console.error(err)
this.setState({updatingMember: false})
}.bind(this))
})
}.bind(this)
},
removeMember: function (memberName) {
return function () {
this.setState({updatingMember: true}, function () {
Hq
.removeMember(this.props.team.name, {
userName: memberName
})
.then(function (res) {
UserStore.Actions.removeMember(res.body)
this.setState({updatingMember: false})
}.bind(this))
.catch(function (err) {
console.error(err)
this.setState({updatingMember: false})
}.bind(this))
})
}.bind(this)
},
render: function () {
var content
@@ -62,7 +167,7 @@ module.exports = React.createClass({
}
return (
<div className='EditProfileModal modal tabModal'>
<div className='TeamSettingsModal modal tabModal'>
<div className='leftPane'>
<div className='tabLabel'>Team settings</div>
<div className='tabList'>
@@ -83,10 +188,6 @@ module.exports = React.createClass({
<label>Profile Name</label>
<input valueLink={this.linkState('team.profileName')}/>
</div>
<div className='formField'>
<label>Name</label>
<input valueLink={this.linkState('team.name')}/>
</div>
<div className='formConfirm'>
<button disabled={this.state.userSubmitStatus === 'sending'} onClick={this.saveUserInfo}>Save</button>
@@ -100,8 +201,72 @@ module.exports = React.createClass({
)
},
renderMembersTab: function () {
var currentUser = JSON.parse(localStorage.getItem('currentUser'))
var members = this.props.team.Members.map(function (member) {
var isCurrentUser = currentUser.id === member.id
return (
<tr>
<td>{member.profileName}({member.name})</td>
<td>
{isCurrentUser ? (
'Owner'
) : (
<select disabled={this.state.updatingMember} onChange={this.roleChange(member.name)} className='roleSelect' value={member.TeamMember.role}>
<option value='owner'>Owner</option>
<option value='member'>Member</option>
</select>
)}
</td>
<td>
{isCurrentUser ? '-' : (
<button disabled={this.state.updatingMember} onClick={this.removeMember(member.name)}><i className='fa fa-close fa-fw'/></button>
)}
</td>
</tr>
)
}.bind(this))
var belowLimit = members.length < 5
return (
<div className='membersTab'>
<table className='memberTable'>
<thead>
<tr>
<th>Username</th>
<th>Role</th>
<th>Control</th>
</tr>
</thead>
<tbody>
{members}
</tbody>
</table>
{belowLimit ? (
<div className='addMemberForm'>
<div className='formLabel'>Add Member</div>
<div className='formGroup'>
<Select
name='userName'
value={this.state.member.name}
placeholder='Username to add'
asyncOptions={getOptions}
onChange={this.handleMemberNameChange}
className='userNameSelect'
/>
<select valueLink={this.linkState('member.role')} className='roleSelect'>
<option value={'member'}>Member</option>
<option value={'owner'}>Owner</option>
</select>
<button disabled={this.state.updatingMember} onClick={this.addMember} className='confirmButton'>Add Member</button>
</div>
</div>
) : (
<div>
Maximum numbr of members is 5 on Beta version. Please contact us if you want futher use.
</div>
)}
</div>
)
}

View File

@@ -1,5 +1,7 @@
/* global localStorage */
var ipc = require('ipc')
var React = require('react/addons')
var ReactRouter = require('react-router')
var RouteHandler = ReactRouter.RouteHandler
@@ -8,35 +10,45 @@ var State = ReactRouter.State
var Hq = require('../Services/Hq')
var Modal = require('../Mixins/Modal')
var UserStore = require('../Stores/UserStore')
// function fetchPlanet (planet) {
// return Hq.fetchPlanet(planet.userName, planet.name)
// .then(function (res) {
// var _planet = res.body
// _planet.userName = planet.userName
//
// _planet.Snippets = _planet.Snippets.map(function (snippet) {
// snippet.type = 'snippet'
// return snippet
// })
//
// _planet.Blueprints = _planet.Blueprints.map(function (blueprint) {
// blueprint.type = 'blueprint'
// return blueprint
// })
//
// localStorage.setItem('planet-' + _planet.id, JSON.stringify(_planet))
// console.log('planet-' + _planet.id + ' fetched')
// })
// .catch(function (err) {
// console.error(err)
// })
// }
var ContactModal = require('../Components/ContactModal')
function fetchPlanet (userName, planetName) {
Hq.fetchPlanet(userName, planetName)
.then(function (res) {
var planet = res.body
planet.Codes.forEach(function (code) {
code.type = 'code'
})
planet.Notes.forEach(function (note) {
note.type = 'note'
})
console.log('planet-' + planet.id + ' fetched!')
localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
})
.catch(function (err) {
console.error(err)
})
}
module.exports = React.createClass({
mixins: [State, Navigation],
mixins: [State, Navigation, Modal],
getInitialState: function () {
return {
updateAvailable: false
}
},
componentDidMount: function () {
ipc.on('update-available', function (message) {
this.setState({updateAvailable: true})
}.bind(this))
if (this.isActive('root')) {
if (localStorage.getItem('currentUser') == null) {
this.transitionTo('login')
@@ -49,9 +61,19 @@ module.exports = React.createClass({
Hq.getUser()
.then(function (res) {
console.log(res.body)
localStorage.setItem('currentUser', JSON.stringify(res.body))
UserStore.Actions.update(res.body)
var user = res.body
localStorage.setItem('currentUser', JSON.stringify(user))
UserStore.Actions.update(user)
user.Planets.forEach(function (planet) {
fetchPlanet(planet.userName, planet.name)
})
user.Teams.forEach(function (team) {
team.Planets.forEach(function (planet) {
fetchPlanet(planet.userName, planet.name)
})
})
})
.catch(function (err) {
if (err.status === 401) {
@@ -63,9 +85,19 @@ module.exports = React.createClass({
console.error(err)
}.bind(this))
},
updateApp: function () {
ipc.send('update-app', 'Deal with it.')
},
openContactModal: function () {
this.openModal(ContactModal)
},
render: function () {
return (
<div className='Main'>
{this.state.updateAvailable ? (
<button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
) : null}
<button onClick={this.openContactModal} className='contactButton'><i className='fa fa-paper-plane-o'/></button>
<RouteHandler/>
</div>
)

View File

@@ -9,42 +9,17 @@ var PlanetNavigator = require('../Components/PlanetNavigator')
var PlanetArticleList = require('../Components/PlanetArticleList')
var PlanetArticleDetail = require('../Components/PlanetArticleDetail')
var Hq = require('../Services/Hq')
var Modal = require('../Mixins/Modal')
var ArticleFilter = require('../Mixins/ArticleFilter')
var Hq = require('../Services/Hq')
var Helper = require('../Mixins/Helper')
var UserStore = require('../Stores/UserStore')
var PlanetStore = require('../Stores/PlanetStore')
function deleteItemFromTargetArray (item, targetArray) {
targetArray.some(function (_item, index) {
if (_item.id === item.id) {
targetArray.splice(index, 1)
return true
}
return false
})
return targetArray
}
function updateItemToTargetArray (item, targetArray) {
var isNew = !targetArray.some(function (_item, index) {
if (_item.id === item.id) {
targetArray.splice(index, 1, item)
return true
}
return false
})
if (isNew) targetArray.push(item)
return targetArray
}
module.exports = React.createClass({
mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter],
mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter, Helper],
propTypes: {
params: React.PropTypes.object,
planetName: React.PropTypes.string
@@ -111,7 +86,7 @@ module.exports = React.createClass({
case 'codeUpdated':
code = res.data
if (code.PlanetId === this.state.planet.id) {
this.state.planet.Codes = updateItemToTargetArray(code, this.state.planet.Codes)
this.state.planet.Codes = this.updateItemToTargetArray(code, this.state.planet.Codes)
this.setState({planet: this.state.planet})
}
@@ -119,7 +94,7 @@ module.exports = React.createClass({
case 'noteUpdated':
note = res.data
if (note.PlanetId === this.state.planet.id) {
this.state.planet.Notes = updateItemToTargetArray(note, this.state.planet.Notes)
this.state.planet.Notes = this.updateItemToTargetArray(note, this.state.planet.Notes)
this.setState({planet: this.state.planet})
}
@@ -127,7 +102,7 @@ module.exports = React.createClass({
case 'codeDestroyed':
code = res.data
if (code.PlanetId === this.state.planet.id) {
this.state.planet.Codes = deleteItemFromTargetArray(code, this.state.planet.Codes)
this.state.planet.Codes = this.deleteItemFromTargetArray(code, this.state.planet.Codes)
if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === code.type && this.refs.detail.props.article.localId === code.localId) {
articleIndex = this.getFilteredIndexOfCurrentArticle()
@@ -151,7 +126,7 @@ module.exports = React.createClass({
case 'noteDestroyed':
note = res.data
if (note.PlanetId === this.state.planet.id) {
this.state.planet.Notes = deleteItemFromTargetArray(note, this.state.planet.Notes)
this.state.planet.Notes = this.deleteItemFromTargetArray(note, this.state.planet.Notes)
if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === note.type && this.refs.detail.props.article.localId === note.localId) {
articleIndex = this.getFilteredIndexOfCurrentArticle()

View File

@@ -18,6 +18,7 @@ var ProfileImage = require('../Components/ProfileImage')
var EditProfileModal = require('../Components/EditProfileModal')
var TeamSettingsModal = require('../Components/TeamSettingsModal')
var PlanetCreateModal = require('../Components/PlanetCreateModal')
var AddMemberModal = require('../Components/AddMemberModal')
var TeamCreateModal = require('../Components/TeamCreateModal')
var UserStore = require('../Stores/UserStore')
@@ -56,12 +57,29 @@ module.exports = React.createClass({
onUserChange: function (res) {
if (this.state.user == null) return
var member
switch (res.status) {
case 'userUpdated':
if (this.state.user.id === res.data.id) {
this.setState({user: res.data})
}
break
case 'memberAdded':
member = res.data
if (this.state.user.userType === 'team' && member.TeamMember.TeamId === this.state.user.id) {
this.state.user.Members = this.updateItemToTargetArray(member, this.state.user.Members)
this.setState({user: this.state.user})
}
break
case 'memberRemoved':
member = res.data
if (this.state.user.userType === 'team' && member.TeamMember.TeamId === this.state.user.id) {
this.state.user.Members = this.deleteItemFromTargetArray(member, this.state.user.Members)
this.setState({user: this.state.user})
}
break
}
},
onPlanetChange: function (res) {
@@ -123,6 +141,7 @@ module.exports = React.createClass({
this.setState({user: this.state.user})
return
}
break
}
},
fetchUser: function (userName) {
@@ -143,7 +162,7 @@ module.exports = React.createClass({
this.openModal(TeamSettingsModal, {team: this.state.user})
},
openAddUserModal: function () {
this.openModal(AddMemberModal, {team: this.state.user})
},
openTeamCreateModal: function () {
this.openModal(TeamCreateModal, {user: this.state.user})
@@ -212,9 +231,10 @@ module.exports = React.createClass({
<button onClick={this.openTeamSettingsModal} className='editProfileButton'>Team settings</button>
</div>
<div className='memberList'>
<div className='memberLabel'>{members.length} {members.length > 0 ? 'Members' : 'Member'}</div>
<div className='memberLabel'>{members.length} {members.length > 1 ? 'Members' : 'Member'}</div>
<ul className='members'>
{members}
{isOwner ? (<li><button onClick={this.openAddUserModal} className='addMemberButton'><i className='fa fa-plus-square-o'/> add Member</button></li>) : null}
</ul>
</div>
<div className='planetList'>
@@ -271,6 +291,10 @@ module.exports = React.createClass({
)
}.bind(this))
var planetCount = userPlanets.length + user.Teams.reduce(function (sum, team) {
return sum + (team.Planets != null ? team.Planets.length : 0)
}, 0)
return (
<div className='UserContainer'>
<div className='userProfile'>
@@ -284,16 +308,14 @@ module.exports = React.createClass({
<button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>) : null}
</div>
<div className='teamList'>
<div className='teamLabel'>{teams.length} {teams.length > 0 ? 'Teams' : 'Team'}</div>
<div className='teamLabel'>{teams.length} {teams.length > 1 ? 'Teams' : 'Team'}</div>
<ul className='teams'>
{teams}
{isOwner ? (<li><button onClick={this.openTeamCreateModal} className='createTeamButton'><i className='fa fa-plus-square-o'/> Create new team</button></li>) : null}
</ul>
</div>
<div className='planetList'>
<div className='planetLabel'>{userPlanets.length + user.Teams.reduce(function (sum, team) {
return sum + (team.Planets != null ? team.Planets.length : 0)
}, 0)} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
<div className='planetLabel'>{planetCount} {planetCount > 1 ? 'Planets' : 'Planet'}</div>
<div className='planetGroup'>
<div className='planetGroupLabel'>{user.profileName}</div>
<ul className='planets'>

View File

@@ -52,6 +52,22 @@ module.exports = {
})
.send(input)
},
addMember: function (userName, input) {
return request
.post(apiUrl + 'resources/' + userName + '/members')
.set({
Authorization: 'Bearer ' + localStorage.getItem('token')
})
.send(input)
},
removeMember: function (userName, input) {
return request
.del(apiUrl + 'resources/' + userName + '/members')
.set({
Authorization: 'Bearer ' + localStorage.getItem('token')
})
.send(input)
},
createPlanet: function (userName, input) {
return request
.post(apiUrl + 'resources/' + userName + '/planets')
@@ -131,5 +147,20 @@ module.exports = {
return request
.get(apiUrl + 'search/tags')
.query({name: tagName})
},
searchUser: function (userName) {
return request
.get(apiUrl + 'search/users')
.query({name: userName})
},
// Mail
sendEmail: function (input) {
return request
.post(apiUrl + 'mail')
.set({
Authorization: 'Bearer ' + localStorage.getItem('token')
})
.send(input)
}
}

View File

@@ -4,7 +4,9 @@ var Reflux = require('reflux')
var actions = Reflux.createActions([
'update',
'destroy'
'destroy',
'addMember',
'removeMember'
])
module.exports = Reflux.createStore({
@@ -51,5 +53,17 @@ module.exports = Reflux.createStore({
data: user
})
},
onAddMember: function (member) {
this.trigger({
status: 'memberAdded',
data: member
})
},
onRemoveMember: function (member) {
this.trigger({
status: 'memberRemoved',
data: member
})
},
Actions: actions
})

View File

@@ -1,7 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>CodeXen v0.2.1</title>
<script>
var version = require('remote').getGlobal('version')
document.title = 'Boost ' + ((version == null || version.length === 0) ? 'DEV version' : 'v' + version)
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>