diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-28 15:19:59 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-29 15:18:26 -0400 |
commit | aa684f0b8b81aa576997dd26fb077882651830fc (patch) | |
tree | 3af03e39c930e640e184a6e085d32b582b198056 | |
parent | 5e8ab52d23862e22886ddebecd3a455b0da076b0 (diff) | |
download | chat-aa684f0b8b81aa576997dd26fb077882651830fc.tar.gz chat-aa684f0b8b81aa576997dd26fb077882651830fc.tar.bz2 chat-aa684f0b8b81aa576997dd26fb077882651830fc.zip |
Added ChannelSelect component
-rw-r--r-- | webapp/components/backstage/add_incoming_webhook.jsx | 35 | ||||
-rw-r--r-- | webapp/components/backstage/add_outgoing_webhook.jsx | 50 | ||||
-rw-r--r-- | webapp/components/channel_select.jsx | 79 | ||||
-rw-r--r-- | webapp/utils/constants.jsx | 2 |
4 files changed, 112 insertions, 54 deletions
diff --git a/webapp/components/backstage/add_incoming_webhook.jsx b/webapp/components/backstage/add_incoming_webhook.jsx index 962792ed0..cb7828698 100644 --- a/webapp/components/backstage/add_incoming_webhook.jsx +++ b/webapp/components/backstage/add_incoming_webhook.jsx @@ -5,9 +5,9 @@ import React from 'react'; import * as AsyncClient from 'utils/async_client.jsx'; import {browserHistory} from 'react-router'; -import ChannelStore from 'stores/channel_store.jsx'; import TeamStore from 'stores/team_store.jsx'; +import ChannelSelect from 'components/channel_select.jsx'; import {FormattedMessage} from 'react-intl'; import FormError from 'components/form_error.jsx'; import {Link} from 'react-router'; @@ -22,13 +22,13 @@ export default class AddIncomingWebhook extends React.Component { this.updateName = this.updateName.bind(this); this.updateDescription = this.updateDescription.bind(this); - this.updateChannelName = this.updateChannelName.bind(this); + this.updateChannelId = this.updateChannelId.bind(this); this.state = { team: TeamStore.getCurrent(), name: '', description: '', - channelName: '', + channelId: '', saving: false, serverError: '', clientError: null @@ -62,15 +62,13 @@ export default class AddIncomingWebhook extends React.Component { clientError: '' }); - const channel = ChannelStore.getByName(this.state.channelName); - - if (!channel) { + if (!this.state.channelId) { this.setState({ saving: false, clientError: ( <FormattedMessage - id='add_incoming_webhook.channel_name_required' - defaultMessage='A valid channel name (eg. town-square) is required' + id='add_incoming_webhook.channel_required' + defaultMessage='A valid channel is required' /> ) }); @@ -79,7 +77,7 @@ export default class AddIncomingWebhook extends React.Component { } const hook = { - channel_id: channel.id + channel_id: this.state.channelId }; AsyncClient.addIncomingHook( @@ -107,9 +105,9 @@ export default class AddIncomingWebhook extends React.Component { }); } - updateChannelName(e) { + updateChannelId(e) { this.setState({ - channelName: e.target.value + channelId: e.target.value }); } @@ -170,18 +168,17 @@ export default class AddIncomingWebhook extends React.Component { <div className='add-integration__row'> <label className='add-integration__label' - htmlFor='channelName' + htmlFor='channelId' > <FormattedMessage - id='add-incoming-webhook.channelName' - defaultMessage='Channel Name' + id='add-incoming-webhook.channelId' + defaultMessage='Channel' /> </label> - <input - id='channelName' - type='text' - value={this.state.channelName} - onChange={this.updateChannelName} + <ChannelSelect + id='channelId' + value={this.state.channelId} + onChange={this.updateChannelId} /> </div> <div className='add-integration__submit-row'> diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx index 6e2f749f8..808a7185d 100644 --- a/webapp/components/backstage/add_outgoing_webhook.jsx +++ b/webapp/components/backstage/add_outgoing_webhook.jsx @@ -5,9 +5,9 @@ import React from 'react'; import * as AsyncClient from 'utils/async_client.jsx'; import {browserHistory} from 'react-router'; -import ChannelStore from 'stores/channel_store.jsx'; import TeamStore from 'stores/team_store.jsx'; +import ChannelSelect from 'components/channel_select.jsx'; import {FormattedMessage} from 'react-intl'; import FormError from 'components/form_error.jsx'; import {Link} from 'react-router'; @@ -22,7 +22,7 @@ export default class AddOutgoingWebhook extends React.Component { this.updateName = this.updateName.bind(this); this.updateDescription = this.updateDescription.bind(this); - this.updateChannelName = this.updateChannelName.bind(this); + this.updateChannelId = this.updateChannelId.bind(this); this.updateTriggerWords = this.updateTriggerWords.bind(this); this.updateCallbackUrls = this.updateCallbackUrls.bind(this); @@ -30,7 +30,7 @@ export default class AddOutgoingWebhook extends React.Component { team: TeamStore.getCurrent(), name: '', description: '', - channelName: '', + channelId: '', triggerWords: '', callbackUrls: '', saving: false, @@ -66,32 +66,13 @@ export default class AddOutgoingWebhook extends React.Component { clientError: '' }); - let channelId = ''; - if (this.state.channelName) { - const channel = ChannelStore.getByName(this.state.channelName); - - if (!channel) { - this.setState({ - saving: false, - clientError: ( - <FormattedMessage - id='add_outgoing_webhook.channel_name_required' - defaultMessage='A valid channel name (eg. town-square) is required' - /> - ) - }); - - return; - } - - channelId = channel.id; - } else if (!this.state.triggerWords) { + if (!this.state.channelId || !this.state.triggerWords) { this.setState({ saving: false, clientError: ( <FormattedMessage id='add_outgoing_webhook.trigger_words_required' - defaultMessage='A valid channel name or a list of trigger words is required' + defaultMessage='A valid channel or a list of trigger words is required' /> ) }); @@ -114,7 +95,7 @@ export default class AddOutgoingWebhook extends React.Component { } const hook = { - channel_id: channelId, + channel_id: this.state.channelId, trigger_words: this.state.triggerWords.split('\n').map((word) => word.trim()), callback_urls: this.state.callbackUrls.split('\n').map((url) => url.trim()) }; @@ -144,9 +125,9 @@ export default class AddOutgoingWebhook extends React.Component { }); } - updateChannelName(e) { + updateChannelId(e) { this.setState({ - channelName: e.target.value + channelId: e.target.value }); } @@ -219,18 +200,17 @@ export default class AddOutgoingWebhook extends React.Component { <div className='add-integration__row'> <label className='add-integration__label' - htmlFor='channelName' + htmlFor='channelId' > <FormattedMessage - id='add-outgoing-webhook.channelName' - defaultMessage='Channel Name' + id='add-outgoing-webhook.channelId' + defaultMessage='Channel' /> </label> - <input - id='channelName' - type='text' - value={this.state.channelName} - onChange={this.updateChannelName} + <ChannelSelect + id='channelId' + value={this.state.channelId} + onChange={this.updateChannelId} /> </div> <div className='add-integration__row'> diff --git a/webapp/components/channel_select.jsx b/webapp/components/channel_select.jsx new file mode 100644 index 000000000..b110b32da --- /dev/null +++ b/webapp/components/channel_select.jsx @@ -0,0 +1,79 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import Constants from 'utils/constants.jsx'; +import ChannelStore from 'stores/channel_store.jsx'; +import * as Utils from 'utils/utils.jsx'; + +export default class ChannelSelect extends React.Component { + static get propTypes() { + return { + onChange: React.PropTypes.func, + value: React.PropTypes.string + }; + } + + constructor(props) { + super(props); + + this.handleChannelChange = this.handleChannelChange.bind(this); + + this.state = { + channels: [] + }; + } + + componentWillMount() { + this.setState({ + channels: ChannelStore.getAll() + }); + + ChannelStore.addChangeListener(this.handleChannelChange); + } + + componentWillUnmount() { + ChannelStore.removeChangeListener(this.handleChannelChange); + } + + handleChannelChange() { + this.setState({ + channels: ChannelStore.getAll() + }); + } + + render() { + const options = [ + <option + key='' + value='' + > + {Utils.localizeMessage('channel-select.select', '--- Select a channel ---')} + </option> + ]; + + this.state.channels.forEach((channel) => { + if (channel.type !== Constants.DM_CHANNEL) { + options.push( + <option + key={channel.id} + value={channel.id} + > + {channel.display_name} + </option> + ); + } + }); + + return ( + <select + className='form-control' + value={this.props.value} + onChange={this.props.onChange} + > + {options} + </select> + ); + } +} diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 1f316369a..126324de8 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -69,7 +69,9 @@ export default { RECEIVED_PREFERENCES: null, RECEIVED_FILE_INFO: null, RECEIVED_INCOMING_WEBHOOKS: null, + RECEIVED_INCOMING_WEBHOOK: null, RECEIVED_OUTGOING_WEBHOOKS: null, + RECEIVED_OUTGOING_WEBHOOK: null, RECEIVED_MSG: null, |