Convert organization Select to Lookup

awx/ui/client/lib/components/_index.less

@@ -3,6 +3,7 @@
 @import 'modal/_index';
 @import 'panel/_index';
 @import 'popover/_index';
+@import 'search/_index';
 @import 'tabs/_index';
 @import 'table/_index';
 @import 'utility/_index';

awx/ui/client/lib/components/index.js

@@ -10,7 +10,6 @@ import inputMessage from './input/message.directive';
 import inputNumber from './input/number.directive';
 import inputSelect from './input/select.directive';
 import inputSecret from './input/secret.directive';
-import inputSearch from './input/search.directive';
 import inputText from './input/text.directive';
 import inputTextarea from './input/textarea.directive';
 import inputTextareaSecret from './input/textarea-secret.directive';
@@ -19,6 +18,8 @@ import panel from './panel/panel.directive';
 import panelHeading from './panel/heading.directive';
 import panelBody from './panel/body.directive';
 import popover from './popover/popover.directive';
+import search from './search/search.directive';
+import searchKey from './search/key.directive';
 import tab from './tabs/tab.directive';
 import tabGroup from './tabs/group.directive';
 import table from './table/table.directive';
@@ -39,7 +40,6 @@ angular
     .directive('atInputNumber', inputNumber)
     .directive('atInputSecret', inputSecret)
     .directive('atInputSelect', inputSelect)
-    .directive('atInputSearch', inputSearch)
     .directive('atInputText', inputText)
     .directive('atInputTextarea', inputTextarea)
     .directive('atInputTextareaSecret', inputTextareaSecret)
@@ -48,6 +48,8 @@ angular
     .directive('atPanelHeading', panelHeading)
     .directive('atPanelBody', panelBody)
     .directive('atPopover', popover)
+    .directive('atSearch', search)
+    .directive('atSearchKey', searchKey)
     .directive('atTab', tab)
     .directive('atTabGroup', tabGroup)
     .directive('atTable', table)

awx/ui/client/lib/components/input/_index.less

@@ -172,42 +172,6 @@
     margin: 0;
 }
 
-.at-InputSearch-group--left {
-    padding-right: @at-margin-item-column;
-}
-
-.at-InputSearch-group--right {
-    padding-left: 0;
-}
-
-.at-InputSearch-well {
-    margin: @at-margin-top-search-key 0 0 0;
-    padding: @at-padding-well;
-}
-
-.at-InputSearch-well {
-    margin: @at-margin-top-search-key 0 0 0;
-    padding: @at-padding-well;
-}
-
-.at-InputSearch-toggle {
-    width: 100%;
-
-    &, &:focus, &:visited, &:active {
-        background: @at-color-default;
-        cursor: pointer;
-    }
-}
-
-.at-InputSearch-toggle--active {
-    &, &:hover, &:focus, &:visited, &:active {
-        border: @at-color-search-key-active;
-        background: @at-color-search-key-active;
-        color: @at-color-default;
-        cursor: pointer;
-    }
-}
-
 .at-InputSelect {
     position: relative;
     width: 100%;

awx/ui/client/lib/components/input/lookup.directive.js

@@ -3,11 +3,7 @@ function atInputLookupLink (scope, element, attrs, controllers) {
     let inputController = controllers[1];
 
     scope.ns = 'lookup';
-    scope[scope.ns] = {
-        modal: {},
-        search: {},
-        table: {}
-    };
+    scope[scope.ns] = { modal: {} };
 
     if (scope.tab === '1') {
         element.find('input')[0].focus();
@@ -16,32 +12,38 @@ function atInputLookupLink (scope, element, attrs, controllers) {
     inputController.init(scope, element, formController);
 }
 
-function AtInputLookupController (baseInputController) {
+function AtInputLookupController (baseInputController, $state) {
     let vm = this || {};
 
     let scope;
     let modal;
-    let search;
-    let table;
 
     vm.init = (_scope_, element, form) => {
         baseInputController.call(vm, 'input', _scope_, element, form);
 
         scope = _scope_;
 
+        scope.$watch('organization', () => {
+            if (scope.organization) {
+                scope.state._value = scope.organization;
+                scope.state._displayValue = scope.organization_name;
+            }
+        });
+
         modal = scope.lookup.modal;
-        search = scope.lookup.search;
-        table = scope.lookup.table;
 
         vm.check();
     };
 
     vm.search = () => {
-        modal.show(`Select ${scope.state.label}`);
+        $state.go('credentials.add.organization');
     };
 }
 
-AtInputLookupController.$inject = ['BaseInputController'];
+AtInputLookupController.$inject = [
+    'BaseInputController',
+    '$state'
+];
 
 function atInputLookup (pathService) {
     return {

awx/ui/client/lib/components/input/lookup.partial.html

@@ -13,7 +13,7 @@
             <input type="text"
                class="form-control at-Input"
                ng-class="{ 'at-Input--rejected': state.rejected }"
-               ng-model="state._value"
+               ng-model="state._displayValue"
                ng-attr-tabindex="{{ tab || undefined }}"
                ng-attr-placeholder="{{::state._placeholder || undefined }}"
                ng-change="vm.check()"
@@ -23,8 +23,5 @@
         <at-input-message></at-input-message>
     </div>
 
-    <at-modal>
-        <at-input-search></at-input-search>
-        <at-table namespace></at-table>
-    </at-modal>
+    <div ui-view="organization"></div>
 </div>

awx/ui/client/lib/components/modal/modal.directive.js

@@ -2,11 +2,10 @@ const DEFAULT_ANIMATION_DURATION = 150;
 
 function atModalLink (scope, el, attrs, controllers) {
     let modalController = controllers[0];
-    let container = el[0];
     let property = `scope.${scope.ns}.modal`;
 
     let done = scope.$watch(property, () => {
-        modalController.init(scope, container);
+        modalController.init(scope, el);
         done();
     });
 }
@@ -14,11 +13,13 @@ function atModalLink (scope, el, attrs, controllers) {
 function AtModalController (eventService) {
     let vm = this;
 
-    let container;
+    let overlay;
+    let modal;
     let listeners;
 
-    vm.init = (scope, _container_) => {
-        container = _container_;
+    vm.init = (scope, el) => {
+        overlay = el[0];
+        modal = el.find('.at-Modal-window')[0];
 
         vm.modal = scope[scope.ns].modal;
         vm.modal.show = vm.show;
@@ -35,36 +36,34 @@ function AtModalController (eventService) {
             [window, 'click', vm.clickToHide]
         ]);
 
-        container.style.display = 'block';
-        container.style.opacity = 1;
+        overlay.style.display = 'block';
+        overlay.style.opacity = 1;
     };
 
     vm.hide = () => {
-        container.style.opacity = 0;
+        overlay.style.opacity = 0;
 
         eventService.remove(listeners);
 
-        setTimeout(() => {
-            container.style.display = 'none';
-            vm.modal.message = '';
-            vm.modal.title = '';
-        }, DEFAULT_ANIMATION_DURATION);
+        setTimeout(() => overlay.style.display = 'none', DEFAULT_ANIMATION_DURATION);
     };
 
     vm.clickToHide = event => {
-        if (vm.clickIsOutsideContainer(event)) {
-            console.log('outside');
-        } else {
-            console.log('inside');
+        if (vm.clickIsOutsideModal(event)) {
+            vm.hide();
         }
     };
 
-    vm.clickIsOutsideContainer = e => {
-        let pos = container.getBoundingClientRect();
-        let ex = e.clientX;
-        let ey = e.clientY;
+    vm.clickIsOutsideModal = e => {
+        let m = modal.getBoundingClientRect();
+        let cx = e.clientX;
+        let cy = e.clientY;
+        
+        if (cx < m.left || cx > m.right || cy > m.bottom || cy < m.top) {
+            return true;
+        }
 
-        console.log(e, pos);
+        return false;
     };
 }
 

awx/ui/client/lib/components/modal/modal.partial.html

@@ -1,6 +1,6 @@
 <div class="modal at-Modal fade" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-        <div class="modal-content">
+        <div class="modal-content at-Modal-window">
             <div class="row">
                 <div class="col-xs-10">
                     <div class="at-Modal-heading">
@@ -8,8 +8,8 @@
                     </div>
                 </div>
                 <div class="col-xs-2">
-                    <div type="button" class="at-Modal-dismiss" ng-click="vm.hide()">
-                        <i class="fa fa-lg fa-times-circle"></i>
+                    <div class="at-Modal-dismiss">
+                        <i class="fa fa-lg fa-times-circle" ng-click="vm.hide()"></i>
                     </div>
                 </div>
             </div>

awx/ui/client/lib/components/search/_index.less

@@ -0,0 +1,37 @@
+.at-Search-group--left {
+    padding-right: @at-margin-item-column;
+}
+
+.at-Search-group--right {
+    padding-left: 0;
+}
+
+.at-Search-well {
+    margin: @at-margin-top-search-key 0 0 0;
+    padding: @at-padding-well;
+}
+
+.at-Search-well {
+    margin: @at-margin-top-search-key 0 0 0;
+    padding: @at-padding-well;
+}
+
+.at-Search-toggle {
+    width: 100%;
+
+    &, &:focus, &:visited, &:active {
+        background: @at-color-default;
+        cursor: pointer;
+    }
+}
+
+.at-Search-toggle--active {
+    &, &:hover, &:focus, &:visited, &:active {
+        border: @at-color-search-key-active;
+        background: @at-color-search-key-active;
+        color: @at-color-default;
+        cursor: pointer;
+    }
+}
+
+

awx/ui/client/lib/components/search/key.directive.js

@@ -0,0 +1,38 @@
+function atSearchKeyLink (scope, element, attrs, controllers) {
+    let searchController = controllers[0];
+    let property = `scope.${scope.ns}.search`;
+
+    let done = scope.$watch(property, () => {
+        searchController.init(scope, element);
+        done();
+    });
+}
+
+function AtSearchKeyController () {
+    let vm = this || {};
+
+    vm.init = (scope, element) => {
+        /*
+         *vm.placeholder = DEFAULT_PLACEHOLDER;
+         *vm.search = scope[scope.ns].search;
+         */
+    };
+}
+
+function atSearchKey (pathService) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: ['atSearchKey'],
+        templateUrl: pathService.getPartialPath('components/search/key'),
+        controller: AtSearchKeyController,
+        controllerAs: 'vm',
+        link: atSearchKeyLink,
+        scope: true
+    };
+}
+
+atSearchKey.$inject = ['PathService'];
+
+export default atSearchKey;

awx/ui/client/lib/components/search/key.partial.html

@@ -0,0 +1,23 @@
+<div class="col-xs-12">
+    <div class="well at-Search-well">
+        <div class="">
+            <h4>EXAMPLES:</h4>
+            <span></span>
+        </div>
+        <div class="">
+            <h4>FIELDS:</h4>
+            <div></div>
+        </div>
+        <div>
+            <h4>RELATED FIELDS:</h4>
+            <div></div>
+        </div>
+        <div class="">
+            <h4>ADDITIONAL INFORMATION:</h4>
+            <p>
+                For additional information on advanced search search syntax please see the
+                Ansible Tower <at-doc resource="search_sort">documentation</at-doc>.
+            </p>
+        </div>
+    </div>
+</div>

awx/ui/client/lib/components/search/search.directive.js

@@ -1,30 +1,28 @@
 const DEFAULT_PLACEHOLDER = 'SEARCH';
 
-function atInputSearchLink (scope, element, attrs, controllers) {
+function atSearchLink (scope, element, attrs, controllers) {
     let inputController = controllers[0];
     let property = `scope.${scope.ns}.search`;
 
     let done = scope.$watch(property, () => {
         inputController.init(scope, element);
+        scope.ready = true;
         done();
     });
 }
 
-function AtInputSearchController (baseInputController) {
+function AtSearchController () {
     let vm = this || {};
 
     let toggleButton;
     let input;
 
     vm.init = (scope, element) => {
-        toggleButton = element.find('.at-InputSearch-toggle')[0];
+        toggleButton = element.find('.at-Search-toggle')[0];
         input = element.find('.at-Input')[0];
 
         vm.placeholder = DEFAULT_PLACEHOLDER;
         vm.search = scope[scope.ns].search;
-        // baseInputController.call(vm, 'input', scope, element, form);
-
-        //vm.check();
     };
 
     vm.toggle = () => {
@@ -33,22 +31,20 @@ function AtInputSearchController (baseInputController) {
     };
 }
 
-AtInputSearchController.$inject = ['BaseInputController'];
-
-function atInputSearch (pathService) {
+function atSearch (pathService) {
     return {
         restrict: 'E',
         transclude: true,
         replace: true,
-        require: ['atInputSearch'],
-        templateUrl: pathService.getPartialPath('components/input/search'),
-        controller: AtInputSearchController,
+        require: ['atSearch'],
+        templateUrl: pathService.getPartialPath('components/search/search'),
+        controller: AtSearchController,
         controllerAs: 'vm',
-        link: atInputSearchLink,
+        link: atSearchLink,
         scope: true
     };
 }
 
-atInputSearch.$inject = ['PathService'];
+atSearch.$inject = ['PathService'];
 
-export default atInputSearch;
+export default atSearch;

awx/ui/client/lib/components/search/search.partial.html

@@ -1,6 +1,6 @@
 <div class="at-InputContainer">
     <div class="row">
-        <div class="col-xs-10 at-InputSearch-group--left">
+        <div class="col-xs-10 at-Search-group--left">
             <div class="form-group at-u-flat">
                 <div class="input-group">
                     <input type="text" class="form-control at-Input"
@@ -13,19 +13,15 @@
                 </div>
             </div>
         </div>
-        <div class="col-xs-2 at-InputSearch-group--right">
-            <button class="btn at-ButtonHollow--default at-InputSearch-toggle"
-                    ng-class="{ 'at-InputSearch-toggle--active': vm.isToggleActive }"
+        <div class="col-xs-2 at-Search-group--right">
+            <button class="btn at-ButtonHollow--default at-Search-toggle"
+                    ng-class="{ 'at-Search-toggle--active': vm.isToggleActive }"
                     ng-click="vm.toggle()">
                 KEY
             </button>
         </div>
     </div>
     <div class="row" ng-show="vm.isToggleActive">
-        <div class="col-xs-12">
-            <div class="well at-InputSearch-well">
-                <p>Some info here</p>
-            </div>
-        </div>
+        <at-search-key></at-search-key>
     </div>
 </div>