Extract list actions to directive

awx/ui/static/js/shared/generator-helpers.js

@@ -188,9 +188,12 @@ angular.module('GeneratorHelpers', [systemStatus.name])
 
             if (toolbar) {
                 //if this is a toolbar button, set some defaults
+                console.log('toolbar button');
                 btn.class = 'btn-xs btn-primary';
                 btn.iconSize = 'fa-lg';
                 delete btn.label;
+            } else {
+                console.log('NOT A TOOLBAR BUTTON');
             }
 
             html += "<button type=\"button\" ";
@@ -202,6 +205,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 html += " btn-sm";
             }
 
+            console.log('btn:', btn);
             html += (btn.awPopOver) ? " help-link-white" : "";
             html += "\" ";
             html += (btn.ngClick) ? Attr(btn, 'ngClick') : "";

awx/ui/static/js/shared/list-generator/list-generator.factory.js

@@ -71,6 +71,40 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                     }
 
                     this.scope.list = list;
+                    this.scope.mode = options.mode;
+
+                    this.scope.performAction = function(action) {
+                        console.log('performing:', action);
+                        this.scope.$eval(action);
+                    }.bind(this);
+
+                    this.scope.shouldHideAction = function(options) {
+                        return _.tap(this.scope.$eval(options.ngHide), function(value) { console.log('shouldHide:', value, this.scope.selected_group_id, options); }.bind(this));
+                    }.bind(this);
+                    this.scope.canShowAction = function(action) {
+                        var base = $location.path().replace(/^\//, '').split('/')[0];
+                        var inActionMode = options.mode === action.mode || action.mode === 'all';
+                        var onScreenForAction =
+                            (!options.basePaths) ||
+                                (options.basePaths.indexOf(base) > -1);
+                        var scopeShow = action.ngShow ? this.scope.$eval(action.ngShow) : true;
+
+                        if (this.scope.shouldHideAction(action)) {
+                            return false;
+                        } else if (!scopeShow) {
+                            console.log('scopeShow false', action.ngShow);
+                            return false;
+                        } else {
+                            return _.tap(inActionMode && onScreenForAction, function(value) {
+                                console.log('mode ', value, action);
+                            });
+                        }
+
+                        // return _.tap(scopeShow || , function(value) {
+                        //     console.log('canShow:', value, options.mode, action.mode, scopeShow);
+                        // });
+                    }.bind(this);
+
 
                     $compile(element)(this.scope);
 
@@ -203,7 +237,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
 
                         if (options.mode !== 'lookup') {
                             //actions
-                            base = $location.path().replace(/^\//, '').split('/')[0];
                             html += "<div class=\"";
                             if (options.searchSize && !options.listSize) {
                                 // User supplied searchSize, calc the remaining
@@ -221,42 +254,34 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                             }
                             html += "\">\n";
 
-                            html += "<div class=\"list-actions\">\n";
+            html += "<div class=\"list-actions\">\n";
+            html += '<span ng-repeat="(name, options) in list.actions">';
+            html += '<toolbar-button name="name" options="options"  on-selected="performAction(action)" ng-show="canShowAction(options)"></toolbar-button>';
+            html += '</span>';
 
-                            // Add toolbar buttons or 'actions'
+            //select instructions
-                            for (action in list.actions) {
+            if (options.mode === 'select' && list.selectInstructions) {
-                                if (list.actions[action].mode === 'all' || list.actions[action].mode === options.mode) {
+                btn = {
-                                    if ((list.actions[action].basePaths === undefined) ||
+                    awPopOver: list.selectInstructions,
-                                        (list.actions[action].basePaths && list.actions[action].basePaths.indexOf(base) > -1)) {
+                    dataPlacement: 'left',
-                                        html += this.button({
+                    dataContainer: 'body',
-                                            btn: list.actions[action],
+                    'class': 'btn-xs btn-help',
-                                            action: action,
+                    awToolTip: 'Click for help',
-                                            toolbar: true
+                    dataTitle: 'Help',
-                                        });
+                    iconSize: 'fa-lg'
-                                    }
+                };
-                                }
+                //html += this.button(btn, 'select');
-                            }
+                html += this.button({
+                    btn: btn,
+                    action: 'help',
+                    toolbar: true
+                });
+            }
 
-                            //select instructions
-                            if (options.mode === 'select' && list.selectInstructions) {
-                                btn = {
-                                    awPopOver: list.selectInstructions,
-                                    dataPlacement: 'left',
-                                    dataContainer: 'body',
-                                    'class': 'btn-xs btn-help',
-                                    awToolTip: 'Click for help',
-                                    dataTitle: 'Help',
-                                    iconSize: 'fa-lg'
-                                };
-                                //html += this.button(btn, 'select');
-                                html += this.button({
-                                    btn: btn,
-                                    action: 'help',
-                                    toolbar: true
-                                });
-                            }
 
-                            html += "</div><!-- list-acitons -->\n";
+
+            html += "</div><!-- list-acitons -->\n";
+
                             html += "</div><!-- list-actions-column -->\n";
                         } else {
                             //lookup

awx/ui/static/js/shared/list-generator/main.js

@@ -1,5 +1,8 @@
 import generateList from './list-generator.factory';
+import toolbarButton from './toolbar-button.directive';
+import generatorHelpers from 'tower/shared/generator-helpers';
 
 export default
-    angular.module('listGenerator', [])
+    angular.module('listGenerator', [generatorHelpers.name])
-        .factory('generateList', generateList);
+        .factory('generateList', generateList)
+        .directive('toolbarButton', toolbarButton);

awx/ui/static/js/shared/list-generator/toolbar-button.directive.js

@@ -0,0 +1,39 @@
+export default ['$compile', 'Button', function($compile, Button) {
+    return {
+        restrict: 'E',
+        scope: {
+            name: '=',
+            options: '=',
+            onSelected: '&'
+        },
+        link: function(scope, element, attrs) {
+            var html = '';
+
+            // Save the ngClick property from
+            // legacy list actions
+            scope.action = scope.options.ngClick;
+
+
+            var btnOptions = _.clone(scope.options);
+            btnOptions.ngClick = "onSelected({ action: action })";
+
+            // These should be taken care of by
+            // using ng-show & ng-hide on this
+            // directive
+            delete btnOptions.ngHide;
+            delete btnOptions.ngShow;
+
+            // console.log('options:', scope.options);
+
+            html += Button({
+                btn: btnOptions,
+                action: scope.name,
+                toolbar: true
+            });
+
+            element.html(html);
+
+            $compile(element.contents())(scope);
+        }
+    };
+}];