From fe217988724c5c74fc02c34180eab504a4d906c1 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Sat, 27 Feb 2016 11:04:24 -0500 Subject: Changed TeamMembersModal to use UserList --- web/react/components/confirm_modal.jsx | 10 +- web/react/components/member_list_team.jsx | 21 +- web/react/components/member_list_team_item.jsx | 339 ------------------------- web/react/components/team_members_dropdown.jsx | 331 ++++++++++++++++++++++++ web/react/components/team_members_modal.jsx | 13 +- 5 files changed, 348 insertions(+), 366 deletions(-) delete mode 100644 web/react/components/member_list_team_item.jsx create mode 100644 web/react/components/team_members_dropdown.jsx (limited to 'web/react') diff --git a/web/react/components/confirm_modal.jsx b/web/react/components/confirm_modal.jsx index 987649f38..bb3576684 100644 --- a/web/react/components/confirm_modal.jsx +++ b/web/react/components/confirm_modal.jsx @@ -44,7 +44,7 @@ export default class ConfirmModal extends React.Component { className='btn btn-primary' onClick={this.props.onConfirm} > - {this.props.confirm_button} + {this.props.confirmButton} @@ -55,13 +55,13 @@ export default class ConfirmModal extends React.Component { ConfirmModal.defaultProps = { title: '', message: '', - confirm_button: '' + confirmButton: '' }; ConfirmModal.propTypes = { show: React.PropTypes.bool.isRequired, - title: React.PropTypes.string, - message: React.PropTypes.string, - confirm_button: React.PropTypes.string, + title: React.PropTypes.node, + message: React.PropTypes.node, + confirmButton: React.PropTypes.node, onConfirm: React.PropTypes.func.isRequired, onCancel: React.PropTypes.func.isRequired }; diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx index f1c31131f..0787bf8d8 100644 --- a/web/react/components/member_list_team.jsx +++ b/web/react/components/member_list_team.jsx @@ -1,7 +1,8 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import MemberListTeamItem from './member_list_team_item.jsx'; +import FilteredUserList from './filtered_user_list.jsx'; +import TeamMembersDropdown from './team_members_dropdown.jsx'; import UserStore from '../stores/user_store.jsx'; export default class MemberListTeam extends React.Component { @@ -44,21 +45,11 @@ export default class MemberListTeam extends React.Component { } render() { - const memberList = this.state.users.map((user) => { - return ( - - ); - }); - return ( - - - {memberList} - -
+ ); } } diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/member_list_team_item.jsx deleted file mode 100644 index 23bc10781..000000000 --- a/web/react/components/member_list_team_item.jsx +++ /dev/null @@ -1,339 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import UserStore from '../stores/user_store.jsx'; -import ChannelStore from '../stores/channel_store.jsx'; -import * as Client from '../utils/client.jsx'; -import * as AsyncClient from '../utils/async_client.jsx'; -import * as Utils from '../utils/utils.jsx'; -import ConfirmModal from './confirm_modal.jsx'; -import TeamStore from '../stores/team_store.jsx'; - -import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; - -var holders = defineMessages({ - confirmDemoteRoleTitle: { - id: 'member_team_item.confirmDemoteRoleTitle', - defaultMessage: 'Confirm demotion from System Admin role' - }, - confirmDemotion: { - id: 'member_team_item.confirmDemotion', - defaultMessage: 'Confirm Demotion' - }, - confirmDemoteDescription: { - id: 'member_team_item.confirmDemoteDescription', - defaultMessage: 'If you demote yourself from the System Admin role and there is not another user with System Admin privileges, you\'ll need to re-assign a System Admin by accessing the Mattermost server through a terminal and running the following command.' - }, - confirmDemotionCmd: { - id: 'member_team_item.confirmDemotionCmd', - defaultMessage: 'platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"' - } -}); - -export default class MemberListTeamItem extends React.Component { - constructor(props) { - super(props); - - this.handleMakeMember = this.handleMakeMember.bind(this); - this.handleMakeActive = this.handleMakeActive.bind(this); - this.handleMakeNotActive = this.handleMakeNotActive.bind(this); - this.handleMakeAdmin = this.handleMakeAdmin.bind(this); - this.handleDemote = this.handleDemote.bind(this); - this.handleDemoteSubmit = this.handleDemoteSubmit.bind(this); - this.handleDemoteCancel = this.handleDemoteCancel.bind(this); - - this.state = { - serverError: null, - showDemoteModal: false, - user: null, - role: null - }; - } - handleMakeMember() { - const me = UserStore.getCurrentUser(); - if (this.props.user.id === me.id) { - this.handleDemote(this.props.user, ''); - } else { - const data = { - user_id: this.props.user.id, - new_roles: '' - }; - Client.updateRoles(data, - () => { - AsyncClient.getProfiles(); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - } - handleMakeActive() { - Client.updateActive(this.props.user.id, true, - () => { - AsyncClient.getProfiles(); - AsyncClient.getChannelExtraInfo(ChannelStore.getCurrentId()); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - handleMakeNotActive() { - Client.updateActive(this.props.user.id, false, - () => { - AsyncClient.getProfiles(); - AsyncClient.getChannelExtraInfo(ChannelStore.getCurrentId()); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - handleMakeAdmin() { - const me = UserStore.getCurrentUser(); - if (this.props.user.id === me.id) { - this.handleDemote(this.props.user, 'admin'); - } else { - const data = { - user_id: this.props.user.id, - new_roles: 'admin' - }; - - Client.updateRoles(data, - () => { - AsyncClient.getProfiles(); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - } - handleDemote(user, role) { - this.setState({ - serverError: this.state.serverError, - showDemoteModal: true, - user, - role - }); - } - handleDemoteCancel() { - this.setState({ - serverError: null, - showDemoteModal: false, - user: null, - role: null - }); - } - handleDemoteSubmit() { - const data = { - user_id: this.props.user.id, - new_roles: this.state.role - }; - - Client.updateRoles(data, - () => { - const teamUrl = TeamStore.getCurrentTeamUrl(); - if (teamUrl) { - window.location.href = teamUrl; - } else { - window.location.href = '/'; - } - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - render() { - let serverError = null; - if (this.state.serverError) { - serverError = ( -
- -
- ); - } - - const user = this.props.user; - let currentRoles = ( - - ); - const timestamp = UserStore.getCurrentUser().update_at; - - if (user.roles.length > 0) { - if (Utils.isSystemAdmin(user.roles)) { - currentRoles = ( - - ); - } else if (Utils.isAdmin(user.roles)) { - currentRoles = ( - - ); - } else { - currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1); - } - } - - const email = user.email; - let showMakeMember = user.roles === 'admin' || user.roles === 'system_admin'; - let showMakeAdmin = user.roles === '' || user.roles === 'system_admin'; - let showMakeActive = false; - let showMakeNotActive = user.roles !== 'system_admin'; - - if (user.delete_at > 0) { - currentRoles = ( - - ); - showMakeMember = false; - showMakeAdmin = false; - showMakeActive = true; - showMakeNotActive = false; - } - - let makeAdmin = null; - if (showMakeAdmin) { - makeAdmin = ( -
  • - - - -
    • - ); - } - - let makeMember = null; - if (showMakeMember) { - makeMember = ( -
  • - - - -
    • - ); - } - - let makeActive = null; - if (showMakeActive) { - makeActive = ( -
  • - - - -
    • - ); - } - - let makeNotActive = null; - if (showMakeNotActive) { - makeNotActive = ( -
  • - - - -
    • - ); - } - const me = UserStore.getCurrentUser(); - const {formatMessage} = this.props.intl; - let makeDemoteModal = null; - if (this.props.user.id === me.id) { - makeDemoteModal = ( - - ); - } - - return ( - - - - {Utils.displayUsername(user.id)} - {email} -
    - - - {currentRoles} - -
      - {makeAdmin} - {makeMember} - {makeActive} - {makeNotActive} -
    -
    - {makeDemoteModal} - {serverError} - - - ); - } -} - -MemberListTeamItem.propTypes = { - intl: intlShape.isRequired, - user: React.PropTypes.object.isRequired -}; - -export default injectIntl(MemberListTeamItem); diff --git a/web/react/components/team_members_dropdown.jsx b/web/react/components/team_members_dropdown.jsx new file mode 100644 index 000000000..35ec66519 --- /dev/null +++ b/web/react/components/team_members_dropdown.jsx @@ -0,0 +1,331 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import UserStore from '../stores/user_store.jsx'; +import ChannelStore from '../stores/channel_store.jsx'; +import * as Client from '../utils/client.jsx'; +import * as AsyncClient from '../utils/async_client.jsx'; +import * as Utils from '../utils/utils.jsx'; +import ConfirmModal from './confirm_modal.jsx'; +import TeamStore from '../stores/team_store.jsx'; + +import {FormattedMessage} from 'mm-intl'; + +export default class TeamMembersDropdown extends React.Component { + constructor(props) { + super(props); + + this.handleMakeMember = this.handleMakeMember.bind(this); + this.handleMakeActive = this.handleMakeActive.bind(this); + this.handleMakeNotActive = this.handleMakeNotActive.bind(this); + this.handleMakeAdmin = this.handleMakeAdmin.bind(this); + this.handleDemote = this.handleDemote.bind(this); + this.handleDemoteSubmit = this.handleDemoteSubmit.bind(this); + this.handleDemoteCancel = this.handleDemoteCancel.bind(this); + + this.state = { + serverError: null, + showDemoteModal: false, + user: null, + role: null + }; + } + handleMakeMember() { + const me = UserStore.getCurrentUser(); + if (this.props.user.id === me.id) { + this.handleDemote(this.props.user, ''); + } else { + const data = { + user_id: this.props.user.id, + new_roles: '' + }; + Client.updateRoles(data, + () => { + AsyncClient.getProfiles(); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + } + handleMakeActive() { + Client.updateActive(this.props.user.id, true, + () => { + AsyncClient.getProfiles(); + AsyncClient.getChannelExtraInfo(ChannelStore.getCurrentId()); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + handleMakeNotActive() { + Client.updateActive(this.props.user.id, false, + () => { + AsyncClient.getProfiles(); + AsyncClient.getChannelExtraInfo(ChannelStore.getCurrentId()); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + handleMakeAdmin() { + const me = UserStore.getCurrentUser(); + if (this.props.user.id === me.id) { + this.handleDemote(this.props.user, 'admin'); + } else { + const data = { + user_id: this.props.user.id, + new_roles: 'admin' + }; + + Client.updateRoles(data, + () => { + AsyncClient.getProfiles(); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + } + handleDemote(user, role) { + this.setState({ + serverError: this.state.serverError, + showDemoteModal: true, + user, + role + }); + } + handleDemoteCancel() { + this.setState({ + serverError: null, + showDemoteModal: false, + user: null, + role: null + }); + } + handleDemoteSubmit() { + const data = { + user_id: this.props.user.id, + new_roles: this.state.role + }; + + Client.updateRoles(data, + () => { + const teamUrl = TeamStore.getCurrentTeamUrl(); + if (teamUrl) { + window.location.href = teamUrl; + } else { + window.location.href = '/'; + } + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + render() { + let serverError = null; + if (this.state.serverError) { + serverError = ( +
    + +
    + ); + } + + const user = this.props.user; + let currentRoles = ( + + ); + + if (user.roles.length > 0) { + if (Utils.isSystemAdmin(user.roles)) { + currentRoles = ( + + ); + } else if (Utils.isAdmin(user.roles)) { + currentRoles = ( + + ); + } else { + currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1); + } + } + + let showMakeMember = user.roles === 'admin' || user.roles === 'system_admin'; + let showMakeAdmin = user.roles === '' || user.roles === 'system_admin'; + let showMakeActive = false; + let showMakeNotActive = user.roles !== 'system_admin'; + + if (user.delete_at > 0) { + currentRoles = ( + + ); + showMakeMember = false; + showMakeAdmin = false; + showMakeActive = true; + showMakeNotActive = false; + } + + let makeAdmin = null; + if (showMakeAdmin) { + makeAdmin = ( +
  • + + + +
    • + ); + } + + let makeMember = null; + if (showMakeMember) { + makeMember = ( +
  • + + + +
    • + ); + } + + let makeActive = null; + if (showMakeActive) { + makeActive = ( +
  • + + + +
    • + ); + } + + let makeNotActive = null; + if (showMakeNotActive) { + makeNotActive = ( +
  • + + + +
    • + ); + } + const me = UserStore.getCurrentUser(); + let makeDemoteModal = null; + if (this.props.user.id === me.id) { + const title = ( + + ); + const message = ( +
    + +
    +
    + + {serverError} +
    + ); + + const confirmButton = ( + + ); + + makeDemoteModal = ( + + ); + } + + return ( +
    + + + {currentRoles} + +
      + {makeAdmin} + {makeMember} + {makeActive} + {makeNotActive} +
    + {makeDemoteModal} + {serverError} +
    + ); + } +} + +TeamMembersDropdown.propTypes = { + user: React.PropTypes.object.isRequired +}; diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx index 8ac435742..dfd48b614 100644 --- a/web/react/components/team_members_modal.jsx +++ b/web/react/components/team_members_modal.jsx @@ -28,12 +28,13 @@ export default class TeamMembersModal extends React.Component { } onShow() { - if ($(window).width() > 768) { + // TODO ugh + /*if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); } else { $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); - } + }*/ } render() { @@ -41,7 +42,7 @@ export default class TeamMembersModal extends React.Component { return ( @@ -54,10 +55,8 @@ export default class TeamMembersModal extends React.Component { }} /> - -
    - -
    + +