From c753eacad0ef403006a733b0aa73ac46234aec3e Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Sun, 25 Oct 2015 17:46:28 +0100 Subject: Add some to channel member popover --- web/react/components/popover_list_members.jsx | 134 +++++++++++++++++++++++++- 1 file changed, 132 insertions(+), 2 deletions(-) (limited to 'web/react') diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 155e88600..b7d4fd9a9 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -4,8 +4,24 @@ var UserStore = require('../stores/user_store.jsx'); var Popover = ReactBootstrap.Popover; var OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Utils = require('../utils/utils.jsx'); + +const ChannelStore = require('../stores/channel_store.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const PreferenceStore = require('../stores/preference_store.jsx'); +const Client = require('../utils/client.jsx'); +const TeamStore = require('../stores/team_store.jsx'); + +const Constants = require('../utils/constants.jsx'); export default class PopoverListMembers extends React.Component { + constructor(props) { + super(props); + + this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); + this.closePopover = this.closePopover.bind(this); + } + componentDidMount() { const originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function onLeave(obj) { @@ -27,12 +43,62 @@ export default class PopoverListMembers extends React.Component { } }; } + + handleShowDirectChannel(teammate, e) { + e.preventDefault(); + + const channelName = Utils.getDirectChannelName(UserStore.getCurrentId(), teammate.id); + let channel = ChannelStore.getByName(channelName); + + const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, teammate.id, 'true'); + AsyncClient.savePreferences([preference]); + + if (channel) { + Utils.switchChannel(channel); + this.closePopover(); + } else { + channel = { + name: channelName, + last_post_at: 0, + total_msg_count: 0, + type: 'D', + display_name: teammate.username, + teammate_id: teammate.id, + status: UserStore.getStatus(teammate.id) + }; + + Client.createDirectChannel( + channel, + teammate.id, + (data) => { + AsyncClient.getChannel(data.id); + Utils.switchChannel(data); + + this.closePopover(); + }, + () => { + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channelName; + this.closePopover(); + } + ); + } + } + + closePopover() { + var overlay = this.refs.overlay; + if (overlay.state.isOverlayShown) { + overlay.setState({isOverlayShown: false}); + } + } + render() { let popoverHtml = []; let count = 0; let countText = '-'; const members = this.props.members; const teamMembers = UserStore.getProfilesUsernameMap(); + const currentUserId = UserStore.getCurrentId(); + const ch = ChannelStore.getCurrent(); if (members && teamMembers) { members.sort((a, b) => { @@ -40,13 +106,74 @@ export default class PopoverListMembers extends React.Component { }); members.forEach((m, i) => { + const details = []; + + const fullName = Utils.getFullName(m); + if (fullName) { + details.push( + + {fullName} + + ); + } + + if (m.nickname) { + const separator = fullName ? ' - ' : ''; + details.push( + + {separator + m.nickname} + + ); + } + + let button = ''; + if (currentUserId !== m.id && ch.type !== 'D') { + button = ( + + ); + } + if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) { popoverHtml.push(
- {m.username} + + +
+
+ {m.username} +
+
+ {details} +
+
+
+ {button} +
); count++; @@ -62,6 +189,7 @@ export default class PopoverListMembers extends React.Component { return ( - {popoverHtml} +
+ {popoverHtml} +
} > -- cgit v1.2.3-1-g7c22 From 2008a20d9db400d942e0b2bd0bd4b8b432199731 Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Mon, 26 Oct 2015 22:49:03 +0100 Subject: use 'Overlay' instead if 'OverlayTrigger' --- web/react/components/popover_list_members.jsx | 50 +++++++++++++++------------ 1 file changed, 28 insertions(+), 22 deletions(-) (limited to 'web/react') diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index b7d4fd9a9..4f30adc43 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -3,7 +3,7 @@ var UserStore = require('../stores/user_store.jsx'); var Popover = ReactBootstrap.Popover; -var OverlayTrigger = ReactBootstrap.OverlayTrigger; +var Overlay = ReactBootstrap.Overlay; const Utils = require('../utils/utils.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); @@ -22,6 +22,10 @@ export default class PopoverListMembers extends React.Component { this.closePopover = this.closePopover.bind(this); } + componentWillMount() { + this.setState({showPopover: false}); + } + componentDidMount() { const originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function onLeave(obj) { @@ -85,10 +89,7 @@ export default class PopoverListMembers extends React.Component { } closePopover() { - var overlay = this.refs.overlay; - if (overlay.state.isOverlayShown) { - overlay.setState({isOverlayShown: false}); - } + this.setState({showPopover: false}); } render() { @@ -188,12 +189,27 @@ export default class PopoverListMembers extends React.Component { } return ( - +
this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})} + > +
+ {countText} +
+
+ this.state.popoverTarget} + placement='bottom' + > - } - > -
-
- {countText} -
+
- ); } } -- cgit v1.2.3-1-g7c22 From bced07a7f40c232a7a7f75ecd34ef0b7436f62f6 Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Mon, 26 Oct 2015 23:29:55 +0100 Subject: add helper method to initiate a direct channel chat --- web/react/components/more_direct_channels.jsx | 62 ++++++--------------------- web/react/components/popover_list_members.jsx | 49 +++++---------------- web/react/utils/utils.jsx | 42 ++++++++++++++++++ 3 files changed, 66 insertions(+), 87 deletions(-) (limited to 'web/react') diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 41746d1d7..b0232fc08 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -1,13 +1,7 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -const AsyncClient = require('../utils/async_client.jsx'); -const ChannelStore = require('../stores/channel_store.jsx'); -const Constants = require('../utils/constants.jsx'); -const Client = require('../utils/client.jsx'); const Modal = ReactBootstrap.Modal; -const PreferenceStore = require('../stores/preference_store.jsx'); -const TeamStore = require('../stores/team_store.jsx'); const UserStore = require('../stores/user_store.jsx'); const Utils = require('../utils/utils.jsx'); @@ -70,52 +64,24 @@ export default class MoreDirectChannels extends React.Component { } handleShowDirectChannel(teammate, e) { + e.preventDefault(); + if (this.state.loadingDMChannel !== -1) { return; } - e.preventDefault(); - - const channelName = Utils.getDirectChannelName(UserStore.getCurrentId(), teammate.id); - let channel = ChannelStore.getByName(channelName); - - const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, teammate.id, 'true'); - AsyncClient.savePreferences([preference]); - - if (channel) { - Utils.switchChannel(channel); - - this.handleHide(); - } else { - this.setState({loadingDMChannel: teammate.id}); - - channel = { - name: channelName, - last_post_at: 0, - total_msg_count: 0, - type: 'D', - display_name: teammate.username, - teammate_id: teammate.id, - status: UserStore.getStatus(teammate.id) - }; - - Client.createDirectChannel( - channel, - teammate.id, - (data) => { - this.setState({loadingDMChannel: -1}); - - AsyncClient.getChannel(data.id); - Utils.switchChannel(data); - - this.handleHide(); - }, - () => { - this.setState({loadingDMChannel: -1}); - window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channelName; - } - ); - } + this.setState({loadingDMChannel: teammate.id}); + Utils.openDirectChannelToUser( + teammate, + (channel) => { + Utils.switchChannel(channel); + this.setState({loadingDMChannel: -1}); + this.handleHide(); + }, + () => { + this.setState({loadingDMChannel: -1}); + } + ); } handleUserChange() { diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 4f30adc43..9cffa2400 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -7,12 +7,6 @@ var Overlay = ReactBootstrap.Overlay; const Utils = require('../utils/utils.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); -const AsyncClient = require('../utils/async_client.jsx'); -const PreferenceStore = require('../stores/preference_store.jsx'); -const Client = require('../utils/client.jsx'); -const TeamStore = require('../stores/team_store.jsx'); - -const Constants = require('../utils/constants.jsx'); export default class PopoverListMembers extends React.Component { constructor(props) { @@ -51,41 +45,18 @@ export default class PopoverListMembers extends React.Component { handleShowDirectChannel(teammate, e) { e.preventDefault(); - const channelName = Utils.getDirectChannelName(UserStore.getCurrentId(), teammate.id); - let channel = ChannelStore.getByName(channelName); - - const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, teammate.id, 'true'); - AsyncClient.savePreferences([preference]); - - if (channel) { - Utils.switchChannel(channel); - this.closePopover(); - } else { - channel = { - name: channelName, - last_post_at: 0, - total_msg_count: 0, - type: 'D', - display_name: teammate.username, - teammate_id: teammate.id, - status: UserStore.getStatus(teammate.id) - }; - - Client.createDirectChannel( - channel, - teammate.id, - (data) => { - AsyncClient.getChannel(data.id); - Utils.switchChannel(data); - - this.closePopover(); - }, - () => { - window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channelName; + Utils.openDirectChannelToUser( + teammate, + (channel, channelAlreadyExisted) => { + Utils.switchChannel(channel); + if (channelAlreadyExisted) { this.closePopover(); } - ); - } + }, + () => { + this.closePopover(); + } + ); } closePopover() { diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 7a876d518..fadab27a7 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -8,6 +8,7 @@ var PreferenceStore = require('../stores/preference_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; +var Client = require('./client.jsx'); var AsyncClient = require('./async_client.jsx'); var client = require('./client.jsx'); var Autolinker = require('autolinker'); @@ -1009,3 +1010,44 @@ export function windowWidth() { export function windowHeight() { return $(window).height(); } + +export function openDirectChannelToUser(user, successCb, errorCb) { + const channelName = this.getDirectChannelName(UserStore.getCurrentId(), user.id); + let channel = ChannelStore.getByName(channelName); + + const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, user.id, 'true'); + AsyncClient.savePreferences([preference]); + + if (channel) { + if ($.isFunction(successCb)) { + successCb(channel, true); + } + } else { + channel = { + name: channelName, + last_post_at: 0, + total_msg_count: 0, + type: 'D', + display_name: user.username, + teammate_id: user.id, + status: UserStore.getStatus(user.id) + }; + + Client.createDirectChannel( + channel, + user.id, + (data) => { + AsyncClient.getChannel(data.id); + if ($.isFunction(successCb)) { + successCb(data, false); + } + }, + () => { + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channelName; + if ($.isFunction(errorCb)) { + errorCb(); + } + } + ); + } +} -- cgit v1.2.3-1-g7c22