dashfolders: Re-use the API of the angular user picker instead, which is reusable #10275

This commit is contained in:
Johannes Schill 2018-01-17 12:49:02 +01:00 committed by Daniel Lee
parent 1d8ce3673e
commit b79a15b057
5 changed files with 60 additions and 43 deletions

View File

@ -14,12 +14,12 @@ export function registerAngularDirectives() {
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']); react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
react2AngularDirective('loginBackground', LoginBackground, []); react2AngularDirective('loginBackground', LoginBackground, []);
react2AngularDirective('searchResult', SearchResult, []); react2AngularDirective('searchResult', SearchResult, []);
react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'teamId', 'refreshList']);
react2AngularDirective('tagFilter', TagFilter, [ react2AngularDirective('tagFilter', TagFilter, [
'tags', 'tags',
['onSelect', { watchDepth: 'reference' }], ['onSelect', { watchDepth: 'reference' }],
['tagOptions', { watchDepth: 'reference' }], ['tagOptions', { watchDepth: 'reference' }],
]); ]);
react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'userPicked']);
react2AngularDirective('permissions', Permissions, [ react2AngularDirective('permissions', Permissions, [
'error', 'error',
'newType', 'newType',

View File

@ -1,12 +1,14 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { debounce } from 'lodash';
import Select from 'react-select'; import Select from 'react-select';
import UserPickerOption from './UserPickerOption'; import UserPickerOption from './UserPickerOption';
import withPicker from './withPicker';
import { debounce } from 'lodash';
export interface IProps { export interface IProps {
backendSrv: any; backendSrv: any;
teamId: string; isLoading: boolean;
refreshList: any; toggleLoading: any;
userPicked: (user) => void;
} }
export interface User { export interface User {
@ -19,56 +21,28 @@ export interface User {
class UserPicker extends Component<IProps, any> { class UserPicker extends Component<IProps, any> {
debouncedSearchUsers: any; debouncedSearchUsers: any;
backendSrv: any; backendSrv: any;
teamId: string;
refreshList: any;
constructor(props) { constructor(props) {
super(props); super(props);
this.backendSrv = this.props.backendSrv; this.state = {};
this.teamId = this.props.teamId;
this.refreshList = this.props.refreshList;
this.searchUsers = this.searchUsers.bind(this); this.searchUsers = this.searchUsers.bind(this);
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
this.addUser = this.addUser.bind(this);
this.toggleLoading = this.toggleLoading.bind(this);
this.debouncedSearchUsers = debounce(this.searchUsers, 300, { this.debouncedSearchUsers = debounce(this.searchUsers, 300, {
leading: true, leading: true,
trailing: false, trailing: false,
}); });
this.state = {
multi: false,
isLoading: false,
};
} }
handleChange(user) { handleChange(user) {
this.addUser(user.id); const { userPicked } = this.props;
} userPicked(user);
toggleLoading(isLoading) {
this.setState(prevState => {
return {
...prevState,
isLoading: isLoading,
};
});
}
addUser(userId) {
this.toggleLoading(true);
this.backendSrv.post(`/api/teams/${this.teamId}/members`, { userId: userId }).then(() => {
this.refreshList();
this.toggleLoading(false);
});
} }
searchUsers(query) { searchUsers(query) {
this.toggleLoading(true); const { toggleLoading, backendSrv } = this.props;
return this.backendSrv.get(`/api/users/search?perpage=10&page=1&query=${query}`).then(result => { toggleLoading(true);
return backendSrv.get(`/api/users/search?perpage=10&page=1&query=${query}`).then(result => {
const users = result.users.map(user => { const users = result.users.map(user => {
return { return {
id: user.id, id: user.id,
@ -76,7 +50,7 @@ class UserPicker extends Component<IProps, any> {
avatarUrl: user.avatarUrl, avatarUrl: user.avatarUrl,
}; };
}); });
this.toggleLoading(false); toggleLoading(false);
return { options: users }; return { options: users };
}); });
} }
@ -91,7 +65,7 @@ class UserPicker extends Component<IProps, any> {
multi={this.state.multi} multi={this.state.multi}
labelKey="label" labelKey="label"
cache={false} cache={false}
isLoading={this.state.isLoading} isLoading={this.props.isLoading}
loadOptions={this.debouncedSearchUsers} loadOptions={this.debouncedSearchUsers}
loadingPlaceholder="Loading..." loadingPlaceholder="Loading..."
noResultsText="No users found" noResultsText="No users found"
@ -105,4 +79,4 @@ class UserPicker extends Component<IProps, any> {
} }
} }
export default UserPicker; export default withPicker(UserPicker);

View File

@ -0,0 +1,37 @@
import React, { Component } from 'react';
export interface IProps {}
// export interface User {
// id: number;
// name: string;
// login: string;
// email: string;
// }
export default function withPicker(WrappedComponent) {
return class WithPicker extends Component<IProps, any> {
constructor(props) {
super(props);
this.toggleLoading = this.toggleLoading.bind(this);
this.state = {
multi: false,
isLoading: false,
};
}
toggleLoading(isLoading) {
this.setState(prevState => {
return {
...prevState,
isLoading: isLoading,
};
});
}
render() {
return <WrappedComponent toggleLoading={this.toggleLoading} isLoading={this.state.isLoading} {...this.props} />;
}
};
}

View File

@ -29,7 +29,11 @@
<form name="ctrl.addMemberForm" class="gf-form-group"> <form name="ctrl.addMemberForm" class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-10">Add member</span> <span class="gf-form-label width-10">Add member</span>
<select-user-picker backendSrv="ctrl.backendSrv" teamId="ctrl.$routeParams.id" refreshList="ctrl.get" teamMembers="ctrl.teamMembers"></select-user-picker> <!--
Old picker
<user-picker user-picked="ctrl.userPicked($user)"></user-picker>
-->
<select-user-picker userPicked="ctrl.userPicked" backendSrv="ctrl.backendSrv"></select-user-picker>
</div> </div>
</form> </form>
@ -60,3 +64,4 @@
This team has no members yet. This team has no members yet.
</em> </em>
</div> </div>

View File

@ -8,6 +8,7 @@ export default class TeamDetailsCtrl {
/** @ngInject **/ /** @ngInject **/
constructor(private $scope, private backendSrv, private $routeParams, navModelSrv) { constructor(private $scope, private backendSrv, private $routeParams, navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'teams', 0); this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
this.userPicked = this.userPicked.bind(this);
this.get = this.get.bind(this); this.get = this.get.bind(this);
this.get(); this.get();
} }