// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import ProfilePicture from 'components/profile_popover/picture_profile_popover.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 'components/team_members_modal.jsx';
import ChannelMembersModal from 'components/channel_members_modal.jsx';
import ChannelInviteModal from 'components/channel_invite_modal';
import {openDirectChannelToUser} from 'actions/channel_actions.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 {
static propTypes = {
channel: React.PropTypes.object.isRequired,
members: React.PropTypes.array.isRequired,
memberCount: React.PropTypes.number,
actions: React.PropTypes.shape({
getProfilesInChannel: React.PropTypes.func.isRequired
}).isRequired
}
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();
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)}
>