IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added ChannelSelect component

Browse Source
This commit is contained in:
Harrison Healey
2016-03-28 15:19:59 -04:00
parent 5e8ab52d23
commit aa684f0b8b
4 changed files with 112 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
webapp/components/backstage/add_incoming_webhook.jsx
View File

@@ -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'>

50
webapp/components/backstage/add_outgoing_webhook.jsx
View File

@@ -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'>

79
webapp/components/channel_select.jsx Normal file
View File

@@ -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>
);
}
}

2
webapp/utils/constants.jsx
View File

@@ -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,