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';
import {KeybindingSrv} from './services/keybindingSrv';
import {helpModal} from './components/help/help';
import {NavModelSrv, NavModel} from './nav_model_srv';
import {userPicker} from './components/user_picker';
export {
arrayJoin,
......@@ -72,4 +72,5 @@ export {
helpModal,
NavModelSrv,
NavModel,
userPicker,
};
......@@ -21,8 +21,8 @@
<form name="addMemberForm" class="gf-form-group">
<div class="gf-form">
<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" >
</div>
<user-picker required user-login="ctrl.userName" user-id="ctrl.userId"></user-picker>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.addMember()">Add</button>
......
......@@ -7,29 +7,12 @@ export default class UserGroupDetailsCtrl {
userGroup: UserGroup;
userGroupMembers: User[] = [];
userName = '';
usersSearchCache: User[] = [];
searchUsers: any;
userId: number;
navModel: any;
constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
this.navModel = navModelSrv.getOrgNav(3);
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() {
......@@ -71,9 +54,7 @@ export default class UserGroupDetailsCtrl {
addMember() {
if (!this.$scope.addMemberForm.$valid) { return; }
const login = this.userName.split(' - ')[0];
const memberToAdd = _.find(this.usersSearchCache, ['login', login]);
this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: memberToAdd.id}).then(() => {
this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: this.userId}).then(() => {
this.userName = '';
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