Merge pull request #639 from mabashian/list-no-results

Merged - part of #564

awx/ui/client/legacy-styles/lists.less

@@ -130,6 +130,7 @@ table, tbody {
 
 .List-header {
     display: flex;
+    height: 34px;
 }
 
 .List-title {
@@ -231,3 +232,15 @@ table, tbody {
     background-color: @list-srch-btn-hov-bg;
     color: @list-srch-btn-icon;
 }
+
+.List-noItems {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 200px;
+    border-radius: 5px;
+    border: 1px solid @list-no-items-bord;
+    background-color: @list-no-items-bg;
+    color: @list-no-items-txt;
+}

awx/ui/client/src/helpers/search.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
     /**
  * @ngdoc function
  * @name helpers.function:search
@@ -499,6 +499,14 @@ export default
                     if (load) {
                         scope[set] = [];  //clear the list array to make sure 'Loading' is the only thing visible on the list
                     }
+
+                    if(scope[iterator + 'SearchValue' + modifier] && scope[iterator + 'SearchValue' + modifier] != '') {
+                        scope[iterator + '_active_search'] = true;
+                    }
+                    else {
+                        scope[iterator + '_active_search'] = false;
+                    }
+
                     scope.$emit('prepareSearch', iterator, page, load, calcOnly, deferWaitStop, spinner);
                 };
 

awx/ui/client/src/inventory-scripts/inventory-scripts.list.js

@@ -47,6 +47,9 @@ export default function(){
         },
 
         fieldActions: {
+
+            columnClass: 'col-md-2 col-sm-3 col-xs-3',
+
             edit: {
                 ngClick: "editCustomInv(inventory_script.id)",
                 icon: 'fa-edit',

awx/ui/client/src/lists/AllJobs.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
 
 export default
     angular.module('AllJobsDefinition', ['sanitizeFilter', 'capitalizeFilter'])
@@ -85,6 +85,9 @@ export default
         actions: { },
 
         fieldActions: {
+
+            columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-4',
+
             submit: {
                 icon: 'icon-rocket',
                 mode: 'all',

awx/ui/client/src/lists/Credentials.js

@@ -54,6 +54,9 @@ export default
         },
 
         fieldActions: {
+
+            columnClass: 'col-md-3 col-sm-3 col-xs-3',
+
             edit: {
                 ngClick: "editCredential(credential.id)",
                 icon: 'fa-edit',

awx/ui/client/src/lists/Inventories.js

@@ -91,6 +91,9 @@ export default
         },
 
         fieldActions: {
+
+            columnClass: 'col-md-2 col-sm-4 col-xs-4',
+
             edit: {
                 label: 'Edit',
                 ngClick: 'editInventory(inventory.id)', //'editInventoryProperties(inventory.id)',

awx/ui/client/src/lists/JobTemplates.js

@@ -23,15 +23,15 @@ export default
             name: {
                 key: true,
                 label: 'Name',
-                // columnClass: 'col-lg-5 col-md-5 col-sm-9 col-xs-8'
+                columnClass: 'col-lg-4 col-md-5 col-sm-6 col-xs-6'
             },
             description: {
                 label: 'Description',
-                // columnClass: 'col-lg-4 col-md-3 hidden-sm hidden-xs'
+                columnClass: 'col-lg-3 col-md-3 hidden-sm hidden-xs'
             },
             smart_status: {
               label: 'Status',
-              columnClass: 'List-tableCell col-lg-1 col-md-2 col-sm-2 col-xs-4',
+              columnClass: 'List-tableCell col-lg-3 col-md-2 col-sm-3 col-xs-3',
               searchable: false,
               nosort: true,
               ngInclude: "'/static/partials/job-template-smart-status.html'",
@@ -52,6 +52,9 @@ export default
         },
 
         fieldActions: {
+
+            columnClass: 'col-lg-2 col-md-2 col-sm-3 col-xs-3',
+
             submit: {
                 label: 'Launch',
                 mode: 'all',

awx/ui/client/src/lists/Teams.js

@@ -52,6 +52,9 @@ export default
         },
 
         fieldActions: {
+
+            columnClass: 'col-lg-3 col-md-2 col-sm-3 col-xs-3',
+
             edit: {
                 label: 'Edit',
                 ngClick: "editTeam(team.id)",

awx/ui/client/src/lists/Users.js

@@ -49,6 +49,9 @@ export default
         },
 
         fieldActions: {
+
+            columnClass: 'col-md-3 col-sm-3 col-xs-3',
+
             edit: {
                 label: 'Edit',
                 ngClick: "editUser(user.id)",

awx/ui/client/src/shared/branding/colors.default.less

@@ -62,6 +62,9 @@
 @list-srch-btn-icon:    @default-icon;
 @list-srch-btn-bg:      @default-bg;
 @list-srch-btn-hov-bg:  @default-tertiary-bg;
+@list-no-items-txt:     @default-icon;
+@list-no-items-bord:    #F6F6F6;
+@list-no-items-bg:      @default-secondary-bg;
 
 // tooltups
 @tooltip-bg:            @default-interface-txt;

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -341,8 +341,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                         html += "<div class=\"List-well\">\n";
                     }
 
+                    // Show the "no items" box when loading is done and the user isn't actively searching and there are no results
+                    html += "<div class=\"List-noItems\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows < 1\">PLEASE ADD ITEMS TO THIS LIST</div>";
+
                     if (options.showSearch=== undefined || options.showSearch === true) {
-                        html += "<div class=\"row\">\n";
+                        // Only show the search bar if we are loading results or if we have at least 1 base result
+                        html += "<div class=\"row\" ng-show=\"" + list.iterator + "Loading == true || " + list.iterator + "_active_search == true || (" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows > 0)\">\n";
                         if (options.searchSize) {
                             html += SearchWidget({
                                 iterator: list.iterator,
@@ -373,6 +377,11 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                             });
                         }
                         html += "</div><!-- row -->\n";
+
+                        // Message for when a search returns no results.  This should only get shown after a search is executed with no results.
+                        html += "<div class=\"row\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == true && " + list.name + ".length == 0\">\n";
+                        html += "<div class=\"col-lg-12\">No records matched your search.</div>\n";
+                        html += "</div>\n";
                     }
 
                     // Add a title and optionally a close button (used on Inventory->Groups)
@@ -383,7 +392,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                     }
 
                     // table header row
-                    html += "<div class=\"list-table-container\"";
+                    html += "<div class=\"list-table-container\" ng-show=\"" + list.iterator + "Loading == true || (" + list.iterator + "Loading == false && " + list.name + ".length > 0)\"";
                     html += (list.awCustomScroll) ? " aw-custom-scroll " : "";
                     html += ">\n";
 
@@ -520,11 +529,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                     }
                     innerTable += "</tr>\n";
 
-                    // Message for when a collection is empty
-                    innerTable += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == false && " + list.name + ".length == 0\">\n";
-                    innerTable += "<td colspan=\"" + cnt + "\" class=\"List-tableCell\"><div class=\"loading-info\">No records matched your search.</div></td>\n";
-                    innerTable += "</tr>\n";
-
                     // Message for loading
                     innerTable += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == true\">\n";
                     innerTable += "<td colspan=\"" + cnt + "\" class=\"List-tableCell\"><div class=\"loading-info\">Loading...</div></td>\n";