From 6da3ac0cc1399705bb8ae73528c6249d8537b33f Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Fri, 22 Jul 2016 11:39:21 -0400
Subject: [PATCH] Improvements to awlookup directive to prevent making rest
 calls every time a character is added/removed

---
 awx/ui/client/src/shared/directives.js | 65 +++++++++++++++-----------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 89f23a4846..1d724b315a 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -390,46 +390,57 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
 
     // lookup   Validate lookup value against API
     //
-    .directive('awlookup', ['Rest', function(Rest) {
+    .directive('awlookup', ['Rest', '$timeout', function(Rest, $timeout) {
         return {
             require: 'ngModel',
             link: function(scope, elm, attrs, ctrl) {
+
+                var restTimeout;
+
                 ctrl.$parsers.unshift( function(viewValue) {
                     if (viewValue !== '' && viewValue !== null) {
                         var url = elm.attr('data-url');
                         url = url.replace(/\:value/, encodeURI(viewValue));
                         scope[elm.attr('data-source')] = null;
-                        Rest.setUrl(url);
-                        Rest.get().then( function(data) {
-                            var results = data.data.results;
-                            if (results.length > 0) {
-                                scope[elm.attr('data-source')] = results[0].id;
+                        if(restTimeout) {
+                            $timeout.cancel(restTimeout);
+                        }
+                        restTimeout = $timeout( function(){
+                            Rest.setUrl(url);
+                            Rest.get().then( function(data) {
+                                var results = data.data.results;
+                                if (results.length > 0) {
+                                    scope[elm.attr('data-source')] = results[0].id;
 
-                                // For user lookups the API endpoint doesn't
-                                // have a `name` property, so this is `undefined`
-                                // which causes the input to clear after typing
-                                // a valid value O_o
-                                //
-                                // Only assign if there is a value, so that we avoid
-                                // this situation.
-                                //
-                                // TODO: Evaluate if assigning name on the scope is
-                                // even necessary at all.
-                                //
-                                if (!_.isEmpty(results[0].name)) {
-                                    scope[elm.attr('name')] = results[0].name;
+                                    // For user lookups the API endpoint doesn't
+                                    // have a `name` property, so this is `undefined`
+                                    // which causes the input to clear after typing
+                                    // a valid value O_o
+                                    //
+                                    // Only assign if there is a value, so that we avoid
+                                    // this situation.
+                                    //
+                                    // TODO: Evaluate if assigning name on the scope is
+                                    // even necessary at all.
+                                    //
+                                    if (!_.isEmpty(results[0].name)) {
+                                        scope[elm.attr('name')] = results[0].name;
+                                    }
+
+                                    ctrl.$setValidity('required', true);
+                                    ctrl.$setValidity('awlookup', true);
+                                    return viewValue;
                                 }
-
                                 ctrl.$setValidity('required', true);
-                                ctrl.$setValidity('awlookup', true);
-                                return viewValue;
-                            }
-                            ctrl.$setValidity('required', true);
-                            ctrl.$setValidity('awlookup', false);
-                            return undefined;
-                        });
+                                ctrl.$setValidity('awlookup', false);
+                                return undefined;
+                            });
+                        }, 750);
                     }
                     else {
+                        if(restTimeout) {
+                            $timeout.cancel(restTimeout);
+                        }
                         ctrl.$setValidity('awlookup', true);
                         scope[elm.attr('data-source')] = null;
                     }