// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import ProfilePicture from 'components/profile_picture.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import TeamMembersModal from './team_members_modal.jsx'; import ChannelMembersModal from './channel_members_modal.jsx'; import ChannelInviteModal from './channel_invite_modal.jsx'; import {openDirectChannelToUser} from 'actions/channel_actions.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import Client from 'client/web_client.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; import {canManageMembers} from 'utils/channel_utils.jsx'; import $ from 'jquery'; import React from 'react'; import {Popover, Overlay} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; export default class PopoverListMembers extends React.Component { constructor(props) { super(props); this.showMembersModal = this.showMembersModal.bind(this); this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); this.closePopover = this.closePopover.bind(this); this.state = { showPopover: false, showTeamMembersModal: false, showChannelMembersModal: false, showChannelInviteModal: false }; } componentDidUpdate() { $('.member-list__popover .popover-content').perfectScrollbar(); } handleShowDirectChannel(teammate, e) { e.preventDefault(); openDirectChannelToUser( teammate.id, (channel, channelAlreadyExisted) => { browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name); if (channelAlreadyExisted) { this.closePopover(); } }, () => { this.closePopover(); } ); } closePopover() { this.setState({showPopover: false}); } showMembersModal(e) { e.preventDefault(); if (ChannelStore.isDefault(this.props.channel)) { this.setState({ showPopover: false, showTeamMembersModal: true }); } else { this.setState({ showPopover: false, showChannelMembersModal: true }); } } render() { const popoverHtml = []; const members = this.props.members; const teamMembers = UserStore.getProfilesUsernameMap(); const currentUserId = UserStore.getCurrentId(); const isSystemAdmin = UserStore.isSystemAdminForCurrentUser(); const isTeamAdmin = TeamStore.isTeamAdminForCurrentTeam(); const isChannelAdmin = ChannelStore.isChannelAdminForCurrentChannel(); if (members && teamMembers) { members.sort((a, b) => { const aName = Utils.displayUsername(a.id); const bName = Utils.displayUsername(b.id); return aName.localeCompare(bName); }); members.forEach((m, i) => { let button = ''; if (currentUserId !== m.id && this.props.channel.type !== Constants.DM_CHANNEl) { button = ( this.handleShowDirectChannel(m, e)} > ); } let name = ''; if (teamMembers[m.username]) { name = Utils.displayUsername(teamMembers[m.username].id); } if (name) { popoverHtml.push(
{name}
{button}
); } }); if (this.props.channel.type !== Constants.GM_CHANNEL) { let membersName = ( ); if (!canManageMembers(this.props.channel, isSystemAdmin, isTeamAdmin, isChannelAdmin) && !ChannelStore.isDefault(this.props.channel)) { membersName = ( ); } popoverHtml.push(
); } } const count = this.props.memberCount; let countText = '-'; if (count > 0) { countText = count.toString(); } const title = ( ); let channelMembersModal; if (this.state.showChannelMembersModal) { channelMembersModal = ( this.setState({showChannelMembersModal: false})} showInviteModal={() => this.setState({showChannelInviteModal: true})} channel={this.props.channel} /> ); } let teamMembersModal; if (this.state.showTeamMembersModal) { teamMembersModal = ( this.setState({showTeamMembersModal: false})} isAdmin={isTeamAdmin || isSystemAdmin} /> ); } let channelInviteModal; if (this.state.showChannelInviteModal) { channelInviteModal = ( this.setState({showChannelInviteModal: false})} channel={this.props.channel} /> ); } return (
{ this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover}); AsyncClient.getProfilesInChannel(this.props.channel.id, 0); }} > {countText}
this.state.popoverTarget} placement='bottom' >
{popoverHtml}
{channelMembersModal} {teamMembersModal} {channelInviteModal}
); } } PopoverListMembers.propTypes = { channel: React.PropTypes.object.isRequired, members: React.PropTypes.array.isRequired, memberCount: React.PropTypes.number };