diff options
author | Christopher Speller <crspeller@gmail.com> | 2015-09-24 08:14:30 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2015-09-24 08:14:30 -0400 |
commit | 54c7dba33dc707fa7013a87040c8a8e5d7b237e9 (patch) | |
tree | 6afeaf5fc7f7876f3e7677ed19a83d3e3dce3b44 /web/react/components/admin_console/admin_sidebar.jsx | |
parent | 56f76502e3edcc95f7a0e9c8fe5b3d523b33ee29 (diff) | |
parent | 00112cae5123b02eee79e8b991618ed5069e07b1 (diff) | |
download | chat-54c7dba33dc707fa7013a87040c8a8e5d7b237e9.tar.gz chat-54c7dba33dc707fa7013a87040c8a8e5d7b237e9.tar.bz2 chat-54c7dba33dc707fa7013a87040c8a8e5d7b237e9.zip |
Merge pull request #765 from mattermost/PLT-349
PLT-349 adding team mgt to admin console
Diffstat (limited to 'web/react/components/admin_console/admin_sidebar.jsx')
-rw-r--r-- | web/react/components/admin_console/admin_sidebar.jsx | 179 |
1 files changed, 157 insertions, 22 deletions
diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx index 17ce39c7c..cebb3ff20 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -2,6 +2,7 @@ // See License.txt for license information. var AdminSidebarHeader = require('./admin_sidebar_header.jsx'); +var SelectTeamModal = require('./select_team_modal.jsx'); export default class AdminSidebar extends React.Component { constructor(props) { @@ -9,28 +10,121 @@ export default class AdminSidebar extends React.Component { this.isSelected = this.isSelected.bind(this); this.handleClick = this.handleClick.bind(this); + this.removeTeam = this.removeTeam.bind(this); + + this.showTeamSelect = this.showTeamSelect.bind(this); + this.teamSelectedModal = this.teamSelectedModal.bind(this); + this.teamSelectedModalDismissed = this.teamSelectedModalDismissed.bind(this); this.state = { + showSelectModal: false }; } - handleClick(name, e) { + handleClick(name, teamId, e) { e.preventDefault(); - this.props.selectTab(name); + this.props.selectTab(name, teamId); } - isSelected(name) { + isSelected(name, teamId) { if (this.props.selected === name) { - return 'active'; + if (name === 'team_users') { + if (this.props.selectedTeam != null && this.props.selectedTeam === teamId) { + return 'active'; + } + } else { + return 'active'; + } } return ''; } + removeTeam(teamId, e) { + e.preventDefault(); + Reflect.deleteProperty(this.props.selectedTeams, teamId); + this.props.removeSelectedTeam(teamId); + + if (this.props.selected === 'team_users') { + if (this.props.selectedTeam != null && this.props.selectedTeam === teamId) { + this.props.selectTab('service_settings', null); + } + } + } + componentDidMount() { } + showTeamSelect(e) { + e.preventDefault(); + this.setState({showSelectModal: true}); + } + + teamSelectedModal(teamId) { + this.props.selectedTeams[teamId] = 'true'; + this.setState({showSelectModal: false}); + this.props.addSelectedTeam(teamId); + this.forceUpdate(); + } + + teamSelectedModalDismissed() { + this.setState({showSelectModal: false}); + } + render() { + var count = '*'; + var teams = 'Loading'; + + if (this.props.teams != null) { + count = '' + Object.keys(this.props.teams).length; + + teams = []; + for (var key in this.props.selectedTeams) { + if (this.props.selectedTeams.hasOwnProperty(key)) { + var team = this.props.teams[key]; + + if (team != null) { + teams.push( + <ul + key={'team_' + team.id} + className='nav nav__sub-menu' + > + <li> + <a + href='#' + onClick={this.handleClick.bind(this, 'team_users', team.id)} + className={'nav__sub-menu-item ' + this.isSelected('team_users', team.id)} + > + {team.name} + <span + className='menu-icon--right menu__close' + onClick={this.removeTeam.bind(this, team.id)} + style={{cursor: 'pointer'}} + > + {'x'} + </span> + </a> + </li> + <li> + <ul className='nav nav__inner-menu'> + <li> + <a + href='#' + className={this.isSelected('team_users', team.id)} + onClick={this.handleClick.bind(this, 'team_users', team.id)} + > + {'- Users'} + </a> + </li> + </ul> + </li> + </ul> + ); + } + } + } + } + return ( <div className='sidebar--left sidebar--collapsable'> <div> @@ -39,10 +133,16 @@ export default class AdminSidebar extends React.Component { <li> <ul className='nav nav__sub-menu'> <li> + <h4> + <span className='icon fa fa-gear'></span> + <span>{'SETTINGS'}</span> + </h4> + </li> + <li> <a href='#' className={this.isSelected('service_settings')} - onClick={this.handleClick.bind(this, 'service_settings')} + onClick={this.handleClick.bind(this, 'service_settings', null)} > {'Service Settings'} </a> @@ -51,7 +151,7 @@ export default class AdminSidebar extends React.Component { <a href='#' className={this.isSelected('team_settings')} - onClick={this.handleClick.bind(this, 'team_settings')} + onClick={this.handleClick.bind(this, 'team_settings', null)} > {'Team Settings'} </a> @@ -60,7 +160,7 @@ export default class AdminSidebar extends React.Component { <a href='#' className={this.isSelected('sql_settings')} - onClick={this.handleClick.bind(this, 'sql_settings')} + onClick={this.handleClick.bind(this, 'sql_settings', null)} > {'SQL Settings'} </a> @@ -69,7 +169,7 @@ export default class AdminSidebar extends React.Component { <a href='#' className={this.isSelected('email_settings')} - onClick={this.handleClick.bind(this, 'email_settings')} + onClick={this.handleClick.bind(this, 'email_settings', null)} > {'Email Settings'} </a> @@ -78,7 +178,7 @@ export default class AdminSidebar extends React.Component { <a href='#' className={this.isSelected('image_settings')} - onClick={this.handleClick.bind(this, 'image_settings')} + onClick={this.handleClick.bind(this, 'image_settings', null)} > {'File Settings'} </a> @@ -87,7 +187,7 @@ export default class AdminSidebar extends React.Component { <a href='#' className={this.isSelected('log_settings')} - onClick={this.handleClick.bind(this, 'log_settings')} + onClick={this.handleClick.bind(this, 'log_settings', null)} > {'Log Settings'} </a> @@ -95,17 +195,8 @@ export default class AdminSidebar extends React.Component { <li> <a href='#' - className={this.isSelected('logs')} - onClick={this.handleClick.bind(this, 'logs')} - > - {'Logs'} - </a> - </li> - <li> - <a - href='#' className={this.isSelected('rate_settings')} - onClick={this.handleClick.bind(this, 'rate_settings')} + onClick={this.handleClick.bind(this, 'rate_settings', null)} > {'Rate Limit Settings'} </a> @@ -114,7 +205,7 @@ export default class AdminSidebar extends React.Component { <a href='#' className={this.isSelected('privacy_settings')} - onClick={this.handleClick.bind(this, 'privacy_settings')} + onClick={this.handleClick.bind(this, 'privacy_settings', null)} > {'Privacy Settings'} </a> @@ -123,21 +214,65 @@ export default class AdminSidebar extends React.Component { <a href='#' className={this.isSelected('gitlab_settings')} - onClick={this.handleClick.bind(this, 'gitlab_settings')} + onClick={this.handleClick.bind(this, 'gitlab_settings', null)} > {'GitLab Settings'} </a> </li> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span>{'TEAMS (' + count + ')'}</span> + <span className='menu-icon--right'> + <a + href='#' + onClick={this.showTeamSelect} + > + <i className='fa fa-plus'></i> + </a> + </span> + </h4> + </li> + <li> + {teams} + </li> + <li> + <h4> + <span className='icon fa fa-gear'></span> + <span>{'OTHER'}</span> + </h4> + </li> + <li> + <a + href='#' + className={this.isSelected('logs')} + onClick={this.handleClick.bind(this, 'logs', null)} + > + {'Logs'} + </a> + </li> </ul> </li> </ul> </div> + + <SelectTeamModal + teams={this.props.teams} + show={this.state.showSelectModal} + onModalSubmit={this.teamSelectedModal} + onModalDismissed={this.teamSelectedModalDismissed} + /> </div> ); } } AdminSidebar.propTypes = { + teams: React.PropTypes.object, + selectedTeams: React.PropTypes.object, + removeSelectedTeam: React.PropTypes.func, + addSelectedTeam: React.PropTypes.func, selected: React.PropTypes.string, + selectedTeam: React.PropTypes.string, selectTab: React.PropTypes.func };
\ No newline at end of file |