Merge pull request #232 from joefiorini/breadcrumbs-directive

Move breadcrumb rendering into directive

awx/ui/static/js/app.js

@@ -34,6 +34,7 @@ import dataServices from 'tower/services/_data-services';
 import dashboardGraphs from 'tower/directives/_dashboard-graphs';
 
 import routeExtensions from 'tower/shared/route-extensions/main';
+import breadcrumbs from 'tower/shared/breadcrumbs/main';
 
 // modules
 import browserData from 'tower/browser-data/main';
@@ -78,6 +79,7 @@ var tower = angular.module('Tower', [
     dashboardGraphs.name,
     routeExtensions.name,
     browserData.name,
+    breadcrumbs.name,
     'AuthService',
     'Utilities',
     'LicenseHelper',

awx/ui/static/js/controllers/Credentials.js

@@ -90,8 +90,6 @@ export function CredentialsList($scope, $rootScope, $location, $log, $routeParam
     });
 
 
-    LoadBreadCrumbs();
-
     $scope.showActivity = function () {
         Stream({ scope: $scope });
     };
@@ -148,7 +146,6 @@ export function CredentialsAdd($scope, $rootScope, $compile, $location, $log, $r
 
     generator.inject(form, { mode: 'add', related: false, scope: $scope });
     generator.reset();
-    LoadBreadCrumbs();
 
     // Load the list of options for Kind
     GetChoices({
@@ -372,12 +369,10 @@ export function CredentialsEdit($scope, $rootScope, $compile, $location, $log, $
         Rest.get({ params: { id: id } })
             .success(function (data) {
 
+                $scope.credential_name = data.name;
+
                 var i, fld;
 
-                LoadBreadCrumbs({
-                    path: '/credentials/' + id,
-                    title: data.name
-                });
 
                 for (fld in form.fields) {
                     if (data[fld] !== null && data[fld] !== undefined) {

awx/ui/static/js/controllers/Inventories.js

@@ -391,7 +391,7 @@ export function InventoriesAdd($scope, $rootScope, $compile, $location, $log, $r
     form.formLabelSize = null;
     form.formFieldSize = null;
 
-    generator.inject(form, { mode: 'add', related: false, scope: $scope });
+    generator.inject(form, { mode: 'add', related: false, scope: $scope, breadcrumbs: true });
 
     generator.reset();
     LoadBreadCrumbs();
@@ -480,7 +480,7 @@ export function InventoriesEdit($scope, $rootScope, $compile, $location, $log, $
     form.formLabelSize = null;
     form.formFieldSize = null;
     $scope.inventory_id = inventory_id;
-    generator.inject(form, { mode: 'edit', related: true, scope: $scope });
+    generator.inject(form, { mode: 'edit', related: true, scope: $scope, breadcrumbs: true });
 
     generator.reset();
 

awx/ui/static/js/controllers/JobTemplates.js

@@ -264,7 +264,7 @@ export function JobTemplatesAdd($scope, $rootScope, $compile, $location, $log, $
 
     CallbackHelpInit({ scope: $scope });
     $scope.can_edit = true;
-    generator.inject(form, { mode: 'add', related: false, scope: $scope });
+    generator.inject(form, { mode: 'add', related: false, scope: $scope, breadcrumbs: true });
 
     callback = function() {
         // Make sure the form controller knows there was a change
@@ -674,7 +674,7 @@ export function JobTemplatesEdit($scope, $rootScope, $compile, $location, $log,
     CallbackHelpInit({ scope: $scope });
 
     SchedulesList.well = false;
-    generator.inject(form, { mode: 'edit', related: true, scope: $scope });
+    generator.inject(form, { mode: 'edit', related: true, scope: $scope, breadcrumbs: true });
     $scope.mode = 'edit';
     $scope.parseType = 'yaml';
     $scope.showJobType = false;

awx/ui/static/js/controllers/Organizations.js

@@ -166,6 +166,8 @@ export function OrganizationsEdit($scope, $rootScope, $compile, $location, $log,
         id = $routeParams.organization_id,
         relatedSets = {};
 
+    $scope.organization_id = id;
+
     generator.inject(form, { mode: 'edit', related: true, scope: $scope});
     generator.reset();
 
@@ -186,7 +188,7 @@ export function OrganizationsEdit($scope, $rootScope, $compile, $location, $log,
     Rest.get()
         .success(function (data) {
             var fld, related, set;
-            LoadBreadCrumbs({ path: '/organizations/' + id, title: data.name });
+            $scope.organization_name = data.name;
             for (fld in form.fields) {
                 if (data[fld]) {
                     $scope[fld] = data[fld];
@@ -225,6 +227,7 @@ export function OrganizationsEdit($scope, $rootScope, $compile, $location, $log,
         Rest.put(params)
             .success(function () {
                 Wait('stop');
+                $scope.organization_name = $scope.name;
                 master = params;
                 $rootScope.flashMessage = "Your changes were successfully saved!";
             })
@@ -293,4 +296,4 @@ export function OrganizationsEdit($scope, $rootScope, $compile, $location, $log,
 OrganizationsEdit.$inject = ['$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'OrganizationForm', 'GenerateForm',
     'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 'RelatedPaginateInit', 'Prompt', 'ClearScope', 'GetBasePath',
     'Wait', 'Stream'
-];
+];

awx/ui/static/js/controllers/Projects.js

@@ -404,7 +404,7 @@ export function ProjectsAdd($scope, $rootScope, $compile, $location, $log, $rout
         defaultUrl = GetBasePath('projects'),
         master = {};
 
-    generator.inject(form, { mode: 'add', related: false, scope: $scope });
+    generator.inject(form, { mode: 'add', related: false, scope: $scope, breadcrumbs: true });
     generator.reset();
     LoadBreadCrumbs();
 
@@ -557,7 +557,8 @@ export function ProjectsEdit($scope, $rootScope, $compile, $location, $log, $rou
     generator.inject(form, {
         mode: 'edit',
         related: true,
-        scope: $scope
+        scope: $scope,
+        breadcrumbs: true
     });
     generator.reset();
 

awx/ui/static/js/controllers/Teams.js

@@ -191,6 +191,8 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log, $routeP
         id = $routeParams.team_id,
         relatedSets = {};
 
+    $scope.team_id = id;
+
     generator.inject(form, { mode: 'edit', related: true, scope: $scope });
     generator.reset();
 
@@ -234,7 +236,7 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log, $routeP
     })
         .success(function (data) {
             var fld, related, set;
-            LoadBreadCrumbs({ path: '/teams/' + id, title: data.name });
+            $scope.team_name = data.name;
             for (fld in form.fields) {
                 if (data[fld]) {
                     $scope[fld] = data[fld];
@@ -296,6 +298,7 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log, $routeP
             .success(function () {
                 Wait('stop');
                 var base = $location.path().replace(/^\//, '').split('/')[0];
+                $scope.team_name = $scope.name;
                 if (base === 'teams') {
                     ReturnToCaller();
                 }

awx/ui/static/js/controllers/Users.js

@@ -251,7 +251,8 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log, $routeP
         Rest.setUrl(defaultUrl + ':id/');
         Rest.get({ params: { id: id } })
             .success(function (data) {
-                LoadBreadCrumbs({ path: '/users/' + id, title: data.username });
+                $scope.user_id = id;
+                $scope.username_title = data.username;
                 var fld, related, set;
                 for (fld in form.fields) {
                     if (data[fld]) {
@@ -325,6 +326,7 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log, $routeP
                 Rest.put(data)
                     .success(function () {
                         Wait('stop');
+                        $scope.username_title = $scope.username;
                         var base = $location.path().replace(/^\//, '').split('/')[0];
                         if (base === 'users') {
                             ReturnToCaller();

awx/ui/static/js/shared/breadcrumbs/breadcrumb.directive.js

@@ -0,0 +1,26 @@
+export default function() {
+
+    return {
+        restrict: 'E',
+        require: '^breadcrumbs',
+        transclude: true,
+        scope: {
+            path: '@',
+            title: '@',
+            current: '@'
+        },
+        link: function(scope, element, attrs, parentController) {
+            var breadcrumb =
+                parentController.addBreadcrumb(scope.title, scope.path, scope.current);
+
+            scope.$watch('title', function(value) {
+                breadcrumb.title = value;
+
+                if (breadcrumb.isCurrent && value) {
+                    parentController.setHidden(false);
+                }
+            });
+        }
+    };
+
+}

awx/ui/static/js/shared/breadcrumbs/breadcrumbs.controller.js

@@ -0,0 +1,34 @@
+export default
+    [   '$scope',
+        '$rootScope',
+        function($scope, $rootScope) {
+
+    $scope.breadcrumbs = [];
+
+    this.addBreadcrumb = function(title, path) {
+        var breadcrumb =
+            {   title: title,
+                path: path
+            };
+
+        if ($rootScope.enteredPath === path) {
+            breadcrumb.isCurrent = true;
+        }
+
+        $scope.breadcrumbs =
+            $scope.breadcrumbs.concat(breadcrumb);
+
+        return breadcrumb;
+    };
+
+    this.setHidden = function(hidden) {
+
+        if (angular.isUndefined(hidden)) {
+            $scope.isHidden = true;
+        } else {
+            $scope.isHidden = hidden;
+        }
+
+    };
+
+}];

awx/ui/static/js/shared/breadcrumbs/breadcrumbs.directive.js

@@ -0,0 +1,32 @@
+/* jshint unused: vars */
+
+import controller from './breadcrumbs.controller';
+import 'tower/shared/generator-helpers';
+
+export default function() {
+
+    return {
+        restrict: 'E',
+        controller: controller,
+        transclude: true,
+        templateUrl: '/static/js/shared/breadcrumbs/breadcrumbs.partial.html',
+        scope: {
+        },
+        link: function(scope, element, attrs, controller) {
+            // make breadcrumbs hidden until the current
+            // breadcrumb has a title; this avoids
+            // ugly rendering when an object's title
+            // is fetched via ajax
+            //
+            controller.setHidden();
+
+            scope.$watch('isHidden', function(value) {
+                if (value) {
+                    element.hide();
+                } else {
+                    element.show();
+                }
+            });
+        }
+    };
+}

awx/ui/static/js/shared/breadcrumbs/breadcrumbs.partial.html

@@ -0,0 +1,9 @@
+<ul class="ansible-breadcrumb" id="breadcrumb-list">
+    <li ng-repeat="crumb in breadcrumbs" ng-class="{active: crumb.isCurrent}">
+        <a href="{{'#' + crumb.path }}">
+            {{crumb.title}}
+        </a>
+    </li>
+</ul>
+<!-- empty trasncluded div required to make child directives link up -->
+<div ng-transclude></div>

awx/ui/static/js/shared/breadcrumbs/main.js

@@ -0,0 +1,7 @@
+import breadcrumbs from './breadcrumbs.directive';
+import breadcrumb from './breadcrumb.directive';
+
+export default
+    angular.module('breadcrumbs', [])
+        .directive('breadcrumb', breadcrumb)
+        .directive('breadcrumbs', breadcrumbs);

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

@@ -1441,7 +1441,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 var btn, button, fld, field, html = '', i, section, group,
                     tab, sectionShow, offset, width,ngDisabled;
 
-                if (!this.modal && (options.breadCrumbs === undefined || options.breadCrumbs === true)) {
+                if (!this.modal && (options.breadcrumbs === true)) {
                     if (this.form.navigationLinks) {
                         html += this.breadCrumbs(options, this.form.navigationLinks);
                     } else {

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

@@ -346,8 +346,9 @@ angular.module('GeneratorHelpers', [systemStatus.name])
 
             // Generate breadcrumbs using the list-generator.js method.
 
-            var list = params.list,
+            var list = params.list || {},
                 mode = params.mode,
+                title = params.title,
                 html = '', itm, navigation;
 
             html += "<ul class=\"ansible-breadcrumb\" id=\"breadcrumb-list\">\n";
@@ -393,7 +394,10 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 html += "</div><!-- dropdown -->\n";
             } else {
                 html += "<li class=\"active\"><a href=\"\">";
-                if (mode === 'select') {
+                // Support usage without a mode by just passing a title option
+                if (title) {
+                    html += title;
+                } else if (mode === 'select') {
                     html += list.selectTitle;
                 } else {
                     html += list.editTitle;

awx/ui/static/partials/credentials.html

@@ -1,3 +1,17 @@
+<breadcrumbs>
+    <breadcrumb path="/credentials" title="Credentials"></breadcrumb>
+    <breadcrumb
+        path="/credentials/add"
+        title="Create Credential"
+        ng-if="mode == 'add'">
+    </breadcrumb>
+    <breadcrumb
+        path="/credentials/{{id}}"
+        title="{{credential_name}}"
+        ng-if="id">
+    </breadcrumb>
+</breadcrumbs>
+
 <div class="tab-pane" id="credentials">
   <div ng-cloak id="htmlTemplate"></div>
 </div>

awx/ui/static/partials/organizations.html

@@ -1,3 +1,17 @@
+<breadcrumbs>
+    <breadcrumb path="/organizations" title="Organizations"></breadcrumb>
+    <breadcrumb
+        path="/organizations/add"
+        title="Create Organization"
+        ng-if="mode == 'add'">
+    </breadcrumb>
+    <breadcrumb
+      path="/organizations/{{organization_id}}"
+      title="{{organization_name}}"
+      ng-if="organization_id">
+    </breadcrumb>
+</breadcrumbs>
+
 <div class="tab-pane" id="organizations">
   <div ng-cloak id="htmlTemplate"></div>
 </div>

awx/ui/static/partials/teams.html

@@ -1,3 +1,17 @@
+<breadcrumbs>
+    <breadcrumb path="/teams" title="Teams"></breadcrumb>
+    <breadcrumb
+        path="/teams/add"
+        title="Create Team"
+        ng-if="mode == 'add'">
+    </breadcrumb>
+    <breadcrumb
+      path="/teams/{{team_id}}"
+      title="{{team_name}}"
+      ng-if="team_id">
+    </breadcrumb>
+</breadcrumbs>
+
 <div class="tab-pane" id="teams">
   <div ng-cloak id="htmlTemplate"></div>
-</div>
+</div>

awx/ui/static/partials/users.html

@@ -1,3 +1,17 @@
+<breadcrumbs>
+    <breadcrumb path="/users" title="Users"></breadcrumb>
+    <breadcrumb
+        path="/users/add"
+        title="Create User"
+        ng-if="mode == 'add'">
+    </breadcrumb>
+    <breadcrumb
+      path="/users/{{user_id}}"
+      title="{{username_title}}"
+      ng-if="user_id">
+    </breadcrumb>
+</breadcrumbs>
+
 <div class="tab-pane" id="users">
   <div ng-cloak id="htmlTemplate"></div>
-</div>
+</div>