feat(groupRow): add expand/collapse toggle for group rows

esvit · Sep 5, 2015 · 32f208b · 32f208b
1 parent ea55c42
commit 32f208b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/ng-table/groupRow.html b/src/ng-table/groupRow.html
@@ -5,8 +5,16 @@
                   }">
         <a href="" ng-click="isSelectorOpen = !isSelectorOpen" class="ng-table-group-selector">
             <strong class="sort-indicator">{{$selGroupTitle}}</strong>
-            <button class="btn btn-default btn-xs" ng-click="$groupRow.show = false"
-                    ng-disabled="isSelectorOpen"><span class="glyphicon glyphicon-resize-small"></span>
+            <button class="btn btn-default btn-xs ng-table-group-close"
+                    ng-click="$groupRow.show = false; $event.preventDefault(); $event.stopPropagation();">
+                <span class="glyphicon glyphicon-remove"></span>
+            </button>
+            <button class="btn btn-default btn-xs ng-table-group-toggle"
+                    ng-click="toggleDetail(); $event.preventDefault(); $event.stopPropagation();">
+                <span class="glyphicon" ng-class="{
+                    'glyphicon-resize-small': params.settings().groupOptions.isExpanded,
+                    'glyphicon-resize-full': !params.settings().groupOptions.isExpanded
+                }"></span>
             </button>
         </a>
         <div class="list-group" ng-if="isSelectorOpen">

diff --git a/src/scripts/ngTableGroupRowController.js b/src/scripts/ngTableGroupRowController.js
@@ -26,6 +26,7 @@
             $scope.getVisibleColumns = getVisibleColumns;
             $scope.groupBy = groupBy;
             $scope.isSelectedGroup = isSelectedGroup;
+            $scope.toggleDetail = toggleDetail;
 
             $scope.$watch('params.group()', setGroup, true);
         }
@@ -107,5 +108,10 @@
                 }
             }
         }
+
+        function toggleDetail(){
+            $scope.params.settings().groupOptions.isExpanded = !$scope.params.settings().groupOptions.isExpanded;
+            return $scope.params.reload();
+        }
     }
 })();
diff --git a/src/styles/ng-table.less b/src/styles/ng-table.less
@@ -96,9 +96,12 @@
     }
     .ng-table-group-selector {
         display: block;
-        > button {
-            float: right;
-        }
+    }
+    .ng-table-group-close, .ng-table-group-toggle {
+        float: right;
+    }
+    .ng-table-group-toggle {
+        margin-right: 5px;
     }
     & + .pagination {
         margin-top: 0;