Contact Modal追加

browser/main/Components/AboutModal.jsx

@@ -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'>

browser/main/Components/AddMemberModal.jsx

@@ -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>
+    )
+  }
+})

browser/main/Components/ContactModal.jsx

@@ -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>
+    )
+  }
+})

browser/main/Components/EditProfileModal.jsx

@@ -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')}/>

browser/main/Components/PlanetAddUserModal.jsx

@@ -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>
-    )
-  }
-})

browser/main/Components/TeamSettingsModal.jsx

@@ -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>
     )
   }