WIP: user-picker directive

public/app/core/components/user_picker.ts

+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);

public/app/core/core.ts

@@ -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,
 };

public/app/features/org/partials/edit_user_group.html

@@ -21,7 +21,7 @@
   <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" >
+      <user-picker required user-login="ctrl.userName" user-id="ctrl.userId"></user-picker>
     </div>
 
 		<div class="gf-form-button-row">

public/app/features/org/user_group_details_ctrl.ts

@@ -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();
     });