Select - Updates select mechanism, table styling, and adds tests.

component/scripts/selected.directive.js

@@ -0,0 +1,50 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchSelected
+ * @restrict A
+ *
+ * @scope
+ *
+ * @element ANY
+ *
+ * @description
+ *   Provides a count of selected items and an action to de-select those items.
+ *
+ * @param {object} alchSelected object that selected functionality is attached to
+ *
+ * @example
+     <example>
+        <file name="index.html">
+         <div ng-controller="SearchController">
+           <div alch-selected="testModel"></div>
+         </div>
+        </file>
+        <file name="script.js">
+          function SearchController($scope) {
+            $scope.testModel = {};
+
+            $scope.testModel.numSelected = 5;
+          }
+         </file>
+      </example>
+ *
+ */
+angular.module('alchemy').directive('alchSelected', function(){
+    return {
+        restrict: 'A',
+        transclude: true,
+        replace: true,
+        scope: {
+            'selected' : '=alchSelected'
+        },
+        templateUrl: 'component/templates/selected.html',
+
+        controller: ['$scope', function($scope) {
+            $scope.deselectAll = function(){
+                $scope.selected.selectAll(false);
+            };
+        }]
+    };
+});

component/scripts/table.directive.js

@@ -59,7 +59,14 @@ angular.module('alchemy').directive('alchTable', ['$window', '$location', functi
             };
 
             $scope.adjustNumSelected = function(selected){
-                $scope.table.numSelected += selected ? 1 : -1;
+                var table = $scope.table;
+
+                table.numSelected += selected ? 1 : -1;
+                table.allSelected = false;
+
+                if (table.numSelected < 0) {
+                    table.numSelected = 0;
+                }
             };
 
             $scope.table.getSelectedRows = function () {
@@ -92,10 +99,6 @@ angular.module('alchemy').directive('alchTable', ['$window', '$location', functi
                 more = more && $scope.table.allSelected;
                 return more;
             };
-
-            $scope.deselectAll = function(){
-                $scope.table.selectAll(false);
-            };
         }]
     };
 }]);

component/styles/tables.scss

@@ -1,6 +1,4 @@
-$bg:  #a7b0b2;
-$fg:  #555;
-$highlight: orange !default;
+$row-highlight: rgb(0, 162, 155) !default;
 
 .table {
   border-spacing:0;
@@ -20,15 +18,16 @@ $highlight: orange !default;
   }
 
   td {
-    border-top: 1px solid #CCC;
+    border-bottom: 1px solid #EEE;
+    border-bottom-color: rgba(0, 0, 0, 0.033)
   }
 
   .active-column {
     background: rgb(175, 175, 175);
   }
 
-  .active {
-    background-color: $highlight;
+  .active-row {
+    background-color: $row-highlight;
     color: #FFF;
   }
 
@@ -38,28 +37,68 @@ $highlight: orange !default;
 }
 
 .table-bordered {
-  border-collapse: separate;
-  border: 1px solid #CCC;
+  th {
+    border-top: 1px solid #CCC;
+    border-bottom: 1px solid #CCC;
+  }
 
   td, th {
     border-left: 1px solid #CCC;
   }
+
+  td {
+    border-collapse: separate;
+  }
+
+  tr:last-child td {
+    border-bottom: 1px solid #EEE;
+  }
+}
+
+.disabled-link, .disabled-link:hover {
+  color: rgb(100, 100, 100);
+  opacity: 0.5;
+  cursor: default;
+  text-decoration: none;
 }
 
 .table-striped {
-  tr:nth-child(odd) td {
+  th {
+    background-color: rgba(194, 200, 202, 0.3);
+  }
+
+  tr:nth-child(even) td {
     background-color: rgba(194, 200, 202, 0.15);
   }
 }
 
 .table-selection-row {
-  background: rgb(255, 207, 105);
   text-align: center;
+  display: block;
 }
 
 .table-toolbar {
+  background: white;
+  overflow: auto;
+  padding: 10px;
+}
+
+.table-searchbar {
   background: rgb(238, 238, 238);
   overflow: auto;
   padding: 10px;
-  border: 1px solid #CCC;
+  border-bottom: 1px solid #CCC;
+}
+
+.deselect-action-container {
+  display: block;
+  float: left;
+}
+
+.select-all-action-container {
+  text-align: center;
+}
+
+.search-input-container {
+  width: 100%;
 }

component/templates/selected.html

@@ -0,0 +1,15 @@
+<div>
+  <div class="deselect-action-container">
+    <span ng-model="selected.numSelected">{{ selected.numSelected }} Selected</span>
+    <a class="deselect-action"
+       ng-class="{ 'disabled-link' : selected.numSelected == 0 }"
+       ng-click="deselectAll()">
+      Deselect All
+    </a>
+  </div>
+  <div class="select-all-action-container"
+       ng-show="selected.moreResults()">
+    All {{ table.offset }} results shown are currently selected. 
+    <a class="table-select-all-action">Select all {{ table.total }} results.</a>
+  </div>
+</div>

component/templates/table.html

@@ -1,18 +1,4 @@
 <thead>
-  <tr>
-    <th class="table-selection-row" 
-        colspan="{{ table.data.columns.length +1 }}"
-        ng-show="table.numSelected">
-        <div class="fl table-deselect-action">
-          <span ng-model="table.numSelected">{{ table.numSelected }} Selected</span>
-          <a ng-click="deselectAll()" href="">Deselect All</a>
-        </div>
-        <div ng-show="table.moreResults()">
-          All {{ table.offset }} results shown are currently selected. 
-          <a href="" class="table-select-all-action">Select all {{ table.total }} results.</a>
-        </div>
-    </th>
-  </tr>
   <tr>
     <th ng-show="rowSelect" class="row-select">
       <input class="selectAll" 
@@ -33,7 +19,7 @@
 <tbody infinite-scroll="table.nextPage()" 
        infinite-scroll-disable="table.loadingMore" 
        infinite-scroll-distance="table.scrollDistance">
-  <tr ng-class="{active : row.selected }" 
+  <tr ng-class="{ 'active-row' : row.selected }" 
       ng-repeat="row in table.data.rows" 
       ng-show="showRow(row)">
     <td ng-show="rowSelect" class="row-select">

demo/index.html

@@ -32,6 +32,7 @@
     <!-- build:js scripts/scripts.js -->
     <script src="component/scripts/table.directive.js"></script>
     <script src="component/scripts/search.directive.js"></script>
+    <script src="component/scripts/selected.directive.js"></script>
     <script src="scripts/app.js"></script>
     <!-- endbuild -->
 

demo/scripts/app.js

@@ -21,7 +21,7 @@ angular.module('componentExampleApp').controller('table1Ctrl', function($scope){
     $scope.table_data = {};
     $scope.table_data.data = tmp_data;
 
-    $scope.title = "Table 1 - Main Example";
+    $scope.table_data.title = "Table 1 - Main Example";
     $scope.table_data.model = "Systems";
     $scope.table_data.total = tmp_data.rows.length * 3;
     $scope.table_data.start = 1;

demo/styles/example.scss

@@ -7,6 +7,7 @@
 @import "alchemy/normalize";
 @import "alchemy/alchemy";
 @import "alchemy-forms/forms";
+@import "alchemy-buttons/buttons";
 @import "main";
 
 .fl { float: left; }
@@ -15,3 +16,7 @@
 body {
   font-family: Overpass, sans-serif;
 }
+
+a, a:hover, a:link, a:visited {
+  color: $link_color;
+}

demo/views/example.html

@@ -1,7 +1,10 @@
 <div ng-controller="table1Ctrl">
-  <div class="form table-toolbar">
+  <div class="form table-searchbar">
     <h2>{{ table_data.title }}</h2>
-    <div alch-search="table_data"></div>
+    <div alch-search="table_data" class="fl search-input-container"></div>
+  </div>
+  <div class="form table-toolbar">
+    <div alch-selected="table_data"></div>
   </div>
   <table alch-table="table_data" class="table table-striped table-bordered" row-select="true">
   </table>

test/directives/selected.directive_test.js

@@ -0,0 +1,52 @@
+'use strict';
+
+describe('Directive: Search', function () {
+    var element,
+        scope,
+        testModel;
+
+    beforeEach(module('alchemy', 'alch-templates'));
+
+    beforeEach(function(){
+        testModel = {
+            selectAll: function(selected) {
+                        if (!selected) {
+                            testModel.numSelected = 0;
+                        }
+                    },
+            numSelected: 0,
+            offset: 10,
+            total: 20
+        };
+    });
+
+    describe('', function(){
+
+        beforeEach(inject(function($rootScope, $compile){
+            element = angular.element('<div alch-selected="model"></div>');
+
+            scope = $rootScope;
+            scope.model = testModel;
+
+            $compile(element)(scope);
+            scope.$digest();
+        }));
+
+        it('should update the numSelected', inject(function ($rootScope, $compile) {
+            testModel.numSelected = 5;
+
+            expect(scope.model.numSelected).toBe(5);
+        }));
+
+        it('should reset the selected count to zero when deselect is clicked', inject(function ($rootScope, $compile) {
+            var deselect = element.find('.deselect-action');
+
+            scope.model.numSelected = 5;
+            $(deselect).click();
+
+            expect(testModel.numSelected).toBe(0);
+            expect($(deselect).hasClass('disabled-link')).toBeTruthy();
+        }));
+    });
+
+});

test/directives/table_test.js

@@ -7,11 +7,11 @@ describe('Directive: Alchemy Tables', function () {
 
     beforeEach(function(){
         row_data = {
-            'columns' : [{ 
-                id : 1, 
-                name : 'Column 1', 
-                show : true 
-            }, { 
+            'columns' : [{
+                id : 1,
+                name : 'Column 1',
+                show : true
+            }, {
                 id: 2,
                 name: 'Column 2',
                 show: true
@@ -28,7 +28,7 @@ describe('Directive: Alchemy Tables', function () {
                     column: 2
                 }]
             },{
-                'id': 'row_2',      
+                'id': 'row_2',
                 'cells' : [{
                     id: 1,
                     display: 1,
@@ -42,7 +42,7 @@ describe('Directive: Alchemy Tables', function () {
         }
     });
 
-    describe('table', function(){
+    describe('', function(){
 
         beforeEach(inject(function($rootScope, $compile){
             element = angular.element('<table alch-table="table_data"></table>');
@@ -71,7 +71,7 @@ describe('Directive: Alchemy Tables', function () {
         it('should generate two columns', inject(function () {
             var head = element.find('thead');
 
-           expect(head.find('th').length).toBe(row_data.columns.length + 2);
+           expect(head.find('th').length).toBe(row_data.columns.length + 1);
         }));
 
         it('should be able to retrieve selected rows', function () {
@@ -86,13 +86,13 @@ describe('Directive: Alchemy Tables', function () {
 
         xit('should allow an action when clicking a column header', inject(function () {
             var column_id = undefined;
-            
+
             scope.sort = function(column){
                 if (column.id === 1){
                     column_id = column.id;
                 }
             };
-            
+
             $(element.find('th')[2]).click();
 
             expect(column_id).toBe(row_data.columns[0].id);