From 8b352531a8da59e944a9fa2a35f67f924592f00d Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Mon, 24 Dec 2018 12:48:53 +0530 Subject: [PATCH 1/2] =?UTF-8?q?Github=20issue#2730,=20Can't=20add=20newly?= =?UTF-8?q?=20registered=20members=20to=20project=20=E2=80=94=20Added=20lo?= =?UTF-8?q?gic=20to=20handle=20paste=20event,=20to=20allow=20addition=20of?= =?UTF-8?q?=20user=20when=20we=20know=20the=20handle=20and=20don=E2=80=99t?= =?UTF-8?q?=20need=20the=20suggest=20endpoint=20to=20call?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TeamManagement/AddTeamMember.jsx | 1 + .../TeamManagement/AutoCompleteInput.jsx | 9 ++++++++- src/projects/actions/projectMember.js | 17 +++++++++++++++++ .../containers/TeamManagementContainer.jsx | 14 ++++++++++++-- 4 files changed, 38 insertions(+), 3 deletions(-) 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..e41f9620c 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,22 @@ 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((error) => { + return 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 = { From b10784556ab1ed9e4c5ae020e9ee9325b0c03ded Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Mon, 24 Dec 2018 12:56:09 +0530 Subject: [PATCH 2/2] lint fix --- src/projects/actions/projectMember.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/projects/actions/projectMember.js b/src/projects/actions/projectMember.js index e41f9620c..4a91421c7 100644 --- a/src/projects/actions/projectMember.js +++ b/src/projects/actions/projectMember.js @@ -29,9 +29,7 @@ export function loadMemberProfileForSuggestions(value) { return [member] } return [] - }).catch((error) => { - return loadMemberSuggestionsAPI(value) - }) + }).catch(() => loadMemberSuggestionsAPI(value)) }) } }