Commit bc6aa744 by Daniel Lee

WIP: user-picker directive

parent 2097ed0b
import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events';
import _ from 'lodash';
const template = `
<div class="dropdown">
<metric-segment segment="ctrl.userSegment"
get-options="ctrl.debouncedSearchUsers($query)"
on-change="ctrl.onChange()"></metric-segment>
</div>
`;
export class UserPickerCtrl {
userSegment: any;
userLogin: string;
userId: number;
debouncedSearchUsers: any;
/** @ngInject */
constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
this.userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true});
this.debouncedSearchUsers = _.debounce(this.searchUsers, 500, {'leading': true, 'trailing': false});
}
searchUsers(query: string) {
return Promise.resolve(this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + query).then(result => {
return _.map(result.users, this.userKey.bind(this));
}));
}
onChange() {
this.userLogin = this.userSegment.value.split(' - ')[0];
console.log(this.userLogin);
this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + this.userLogin)
.then(result => {
if (!result) {
return;
}
result.users.forEach(u => {
if (u.login === this.userLogin) {
this.userId = u.id;
}
});
});
}
private userKey(user: User) {
return this.uiSegmentSrv.newSegment(user.login + ' - ' + user.email);
}
}
export interface User {
id: number;
name: string;
login: string;
email: string;
}
export function userPicker() {
return {
restrict: 'E',
template: template,
controller: UserPickerCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {
userLogin: '=',
userId: '=',
}
};
}
coreModule.directive('userPicker', userPicker);
...@@ -46,7 +46,7 @@ import {contextSrv} from './services/context_srv'; ...@@ -46,7 +46,7 @@ import {contextSrv} from './services/context_srv';
import {KeybindingSrv} from './services/keybindingSrv'; import {KeybindingSrv} from './services/keybindingSrv';
import {helpModal} from './components/help/help'; import {helpModal} from './components/help/help';
import {NavModelSrv, NavModel} from './nav_model_srv'; import {NavModelSrv, NavModel} from './nav_model_srv';
import {userPicker} from './components/user_picker';
export { export {
arrayJoin, arrayJoin,
...@@ -72,4 +72,5 @@ export { ...@@ -72,4 +72,5 @@ export {
helpModal, helpModal,
NavModelSrv, NavModelSrv,
NavModel, NavModel,
userPicker,
}; };
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<form name="addMemberForm" class="gf-form-group"> <form name="addMemberForm" class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-10">Name</span> <span class="gf-form-label width-10">Name</span>
<input type="text" bs-typeahead="ctrl.searchUsers" required ng-model="ctrl.userName" class="gf-form-input max-width-14" > <user-picker required user-login="ctrl.userName" user-id="ctrl.userId"></user-picker>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
......
...@@ -7,29 +7,12 @@ export default class UserGroupDetailsCtrl { ...@@ -7,29 +7,12 @@ export default class UserGroupDetailsCtrl {
userGroup: UserGroup; userGroup: UserGroup;
userGroupMembers: User[] = []; userGroupMembers: User[] = [];
userName = ''; userName = '';
usersSearchCache: User[] = []; userId: number;
searchUsers: any;
navModel: any; navModel: any;
constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) { constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
this.navModel = navModelSrv.getOrgNav(3); this.navModel = navModelSrv.getOrgNav(3);
this.get(); this.get();
this.usersSearchCache = [];
this.searchUsers = (queryStr, callback) => {
if (this.usersSearchCache.length > 0) {
callback(_.map(this.usersSearchCache, this.userKey));
return;
}
this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + queryStr).then(result => {
this.usersSearchCache = result.users;
callback(_.map(result.users, this.userKey));
});
};
}
private userKey(user: User) {
return user.login + ' - ' + user.email;
} }
get() { get() {
...@@ -71,9 +54,7 @@ export default class UserGroupDetailsCtrl { ...@@ -71,9 +54,7 @@ export default class UserGroupDetailsCtrl {
addMember() { addMember() {
if (!this.$scope.addMemberForm.$valid) { return; } if (!this.$scope.addMemberForm.$valid) { return; }
const login = this.userName.split(' - ')[0]; this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: this.userId}).then(() => {
const memberToAdd = _.find(this.usersSearchCache, ['login', login]);
this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: memberToAdd.id}).then(() => {
this.userName = ''; this.userName = '';
this.get(); this.get();
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment