diff --git a/src/components/TeamManagement/AddTeamMember.jsx b/src/components/TeamManagement/AddTeamMember.jsx index 00a6e8b54..ae2cfd185 100644 --- a/src/components/TeamManagement/AddTeamMember.jsx +++ b/src/components/TeamManagement/AddTeamMember.jsx @@ -81,6 +81,7 @@ AddTeamMember.propTypes = { selectedNewMember: PropTypes.object, onToggleAddTeamMember: PropTypes.func.isRequired, onKeywordChange: PropTypes.func.isRequired, + onKeywordPaste: PropTypes.func.isRequired, onAddNewMember: PropTypes.func.isRequired } diff --git a/src/components/TeamManagement/AutoCompleteInput.jsx b/src/components/TeamManagement/AutoCompleteInput.jsx index e2c554ab5..124652a0c 100644 --- a/src/components/TeamManagement/AutoCompleteInput.jsx +++ b/src/components/TeamManagement/AutoCompleteInput.jsx @@ -33,7 +33,8 @@ class AutoCompleteInput extends React.Component { render() { const { - isPopupVisible, searchMembers, keyword, onKeywordChange, onSelectNewMember, onToggleSearchPopup, selectedNewMember + isPopupVisible, searchMembers, keyword, onKeywordChange, onSelectNewMember, onToggleSearchPopup, + selectedNewMember, onKeywordPaste } = this.props const renderMember = (member, i) => { @@ -54,6 +55,11 @@ class AutoCompleteInput extends React.Component { ) } const _onKeywordChange = e => onKeywordChange(e.target.value) + const _onKeywordPaste = e => { + e.stopPropagation() + e.preventDefault() + return onKeywordPaste(e.clipboardData.getData('Text')) + } const _onToggleSearchPopup = () => onToggleSearchPopup(true) return (
@@ -77,6 +83,7 @@ class AutoCompleteInput extends React.Component { className="tc-file-field__inputs" type="text" placeholder="username" + onPaste={_onKeywordPaste} onChange={_onKeywordChange} onClick={_onToggleSearchPopup} onKeyUp={_onToggleSearchPopup} diff --git a/src/projects/actions/projectMember.js b/src/projects/actions/projectMember.js index 5e42fe447..4a91421c7 100644 --- a/src/projects/actions/projectMember.js +++ b/src/projects/actions/projectMember.js @@ -3,6 +3,7 @@ import { addProjectMember as addMember, updateProjectMember as updateMember, loadMemberSuggestions as loadMemberSuggestionsAPI } from '../../api/projectMembers' +import { getUserProfile } from '../../api/users' import { loadMembers } from '../../actions/members' import {ADD_PROJECT_MEMBER, REMOVE_PROJECT_MEMBER, UPDATE_PROJECT_MEMBER, @@ -19,6 +20,20 @@ export function loadMemberSuggestions(value) { } } +export function loadMemberProfileForSuggestions(value) { + return (dispatch) => { + return dispatch({ + type: LOAD_MEMBER_SUGGESTIONS, + payload: getUserProfile(value).then((member) => { + if (member) { + return [member] + } + return [] + }).catch(() => loadMemberSuggestionsAPI(value)) + }) + } +} + function addProjectMemberWithData(dispatch, projectId, member) { return new Promise((resolve, reject) => { return dispatch({ diff --git a/src/projects/detail/containers/TeamManagementContainer.jsx b/src/projects/detail/containers/TeamManagementContainer.jsx index 25a6ba019..efa4e7a56 100644 --- a/src/projects/detail/containers/TeamManagementContainer.jsx +++ b/src/projects/detail/containers/TeamManagementContainer.jsx @@ -10,7 +10,7 @@ import { } from '../../../config/constants' import TeamManagement from '../../../components/TeamManagement/TeamManagement' import { addProjectMember, updateProjectMember, removeProjectMember, - loadMemberSuggestions + loadMemberSuggestions, loadMemberProfileForSuggestions } from '../../actions/projectMember' @@ -19,6 +19,7 @@ class TeamManagementContainer extends Component { constructor(props) { super(props) this.onKeywordChange = this.onKeywordChange.bind(this) + this.onKeywordPaste = this.onKeywordPaste.bind(this) this.onSelectNewMember = this.onSelectNewMember.bind(this) this.onAddNewMember = this.onAddNewMember.bind(this) this.onToggleAddTeamMember = this.onToggleAddTeamMember.bind(this) @@ -114,6 +115,13 @@ class TeamManagementContainer extends Component { this.setState({ keyword, selectedNewMember: null }) } + onKeywordPaste(keyword) { + if (keyword && keyword.length > AUTOCOMPLETE_TRIGGER_LENGTH) { + this.props.loadMemberProfileForSuggestions(keyword) + this.setState({ keyword, selectedNewMember: null }) + } + } + onSelectNewMember(selectedNewMember) { const keyword = selectedNewMember ? selectedNewMember.handle : '' const { members } = this.props @@ -208,6 +216,7 @@ class TeamManagementContainer extends Component { currentUser={this.props.currentUser} members={projectMembers} onKeywordChange={this.onKeywordChange} + onKeywordPaste={this.onKeywordPaste} onSelectNewMember={this.onSelectNewMember} onAddNewMember={this.onAddNewMember} onToggleNewMemberConfirm={ this.onToggleNewMemberConfirm } @@ -242,7 +251,8 @@ const mapDispatchToProps = { addProjectMember, removeProjectMember, updateProjectMember, - loadMemberSuggestions + loadMemberSuggestions, + loadMemberProfileForSuggestions, } TeamManagementContainer.propTypes = {