feat(hidePin): Added option to hide pinLeft or pinRight from pinning …

…menu (#6334) * Added option to hide pinLeft or pinRight from pinning menu * Updated documentation * Updated ngDoc for PinLeft and PinRight * Updated Unit tests * Possible unit test fix
angular-ui · Nov 11, 2017 · 145e366 · 145e366
1 parent 8dd0359
commit 145e366
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 6 deletions.
diff --git a/misc/tutorial/203_pinning.ngdoc b/misc/tutorial/203_pinning.ngdoc
@@ -57,3 +57,50 @@ It is also possible to disable pinning on column level. Note the 'id' column def
     }
   </file>
 </example>
+
+You can also hide Pin Left or Pin Right individually
+Below example will hide Pin Right option from id column [by setting hidePinRight: true]
+
+@example
+<example module="app">
+  <file name="app.js">
+    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']);
+
+    app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
+      $scope.gridOptions = {};
+
+      $scope.gridOptions.columnDefs = [
+        { name:'id', width:50, enablePinning:true, hidePinLeft: false, hidePinRight: true },
+        { name:'name', width:100, pinnedLeft:true },
+        { name:'age', width:100, pinnedRight:true  },
+        { name:'address.street', width:150  },
+        { name:'address.city', width:150 },
+        { name:'address.state', width:50 },
+        { name:'address.zip', width:50 },
+        { name:'company', width:100 },
+        { name:'email', width:100 },
+        { name:'phone', width:200 },
+        { name:'about', width:300 },
+        { name:'friends[0].name', displayName:'1st friend', width:150 },
+        { name:'friends[1].name', displayName:'2nd friend', width:150 },
+        { name:'friends[2].name', displayName:'3rd friend', width:150 },
+      ];
+
+      $http.get('/data/500_complex.json')
+        .success(function(data) {
+          $scope.gridOptions.data = data;
+        });
+    }]);
+  </file>
+  <file name="index.html">
+    <div ng-controller="MainCtrl">
+      <div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
+    </div>
+  </file>
+  <file name="main.css">
+    .grid {
+      width: 100%;
+      height: 400px;
+    }
+  </file>
+</example>
diff --git a/src/features/pinning/js/pinning.js b/src/features/pinning/js/pinning.js
@@ -101,7 +101,22 @@
          *  <br/>Defaults to true
          */
         gridOptions.enablePinning = gridOptions.enablePinning !== false;
-
+        /**
+         *  @ngdoc object
+         *  @name hidePinLeft
+         *  @propertyOf  ui.grid.pinning.api:GridOptions
+         *  @description Hide Pin Left for the entire grid.
+         *  <br/>Defaults to false
+         */
+        gridOptions.hidePinLeft = gridOptions.enablePinning && gridOptions.hidePinLeft;
+        /**
+         *  @ngdoc object
+         *  @name hidePinRight
+         *  @propertyOf  ui.grid.pinning.api:GridOptions
+         *  @description Hide Pin Right pinning for the entire grid.
+         *  <br/>Defaults to false
+         */
+        gridOptions.hidePinRight = gridOptions.enablePinning && gridOptions.hidePinRight;
       },
 
       pinningColumnBuilder: function (colDef, col, gridOptions) {
@@ -123,7 +138,22 @@
          *  <br/>Defaults to true
          */
         colDef.enablePinning = colDef.enablePinning === undefined ? gridOptions.enablePinning : colDef.enablePinning;
-
+        /**
+         *  @ngdoc object
+         *  @name hidePinLeft
+         *  @propertyOf  ui.grid.pinning.api:ColumnDef
+         *  @description Hide Pin Left for the individual column.
+         *  <br/>Defaults to false
+         */
+        colDef.hidePinLeft = colDef.hidePinLeft === undefined ? gridOptions.hidePinLeft : colDef.hidePinLeft;
+        /**
+         *  @ngdoc object
+         *  @name hidePinRight
+         *  @propertyOf  ui.grid.pinning.api:ColumnDef
+         *  @description Hide Pin Right for the individual column.
+         *  <br/>Defaults to false
+         */
+        colDef.hidePinRight = colDef.hidePinRight === undefined ? gridOptions.hidePinRight : colDef.hidePinRight;
 
         /**
          *  @ngdoc object
@@ -189,10 +219,11 @@
           }
         };
 
-        if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinLeft')) {
+        //// Skip from menu if hidePinLeft or hidePinRight is true
+        if (!colDef.hidePinLeft && !gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinLeft')) {
           col.menuItems.push(pinColumnLeftAction);
         }
-        if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinRight')) {
+        if (!colDef.hidePinRight && !gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinRight')) {
           col.menuItems.push(pinColumnRightAction);
         }
         if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.unpin')) {

diff --git a/src/features/pinning/test/pinning.spec.js b/src/features/pinning/test/pinning.spec.js
@@ -20,6 +20,8 @@
               id: 512,
               registerColumnBuilder: jasmine.createSpy('registerColumnBuilder'),
               enablePinning: jasmine.createSpy('enablePinning'),
+              hidePinLeft: jasmine.createSpy('hidePinLeft'),
+              hidePinRight: jasmine.createSpy('hidePinRight'),
               registerStyleComputation: jasmine.createSpy('registerStyleComputation'),
               registerViewportAdjusters: jasmine.createSpy('registerViewportAdjusters'),
               renderingComplete: jasmine.createSpy('renderingComplete'),
@@ -57,6 +59,8 @@
 
       $scope.gridOpts = {
         enablePinning: true,
+        hidePinLeft: false,
+        hidePinRight: false,
         data: data
       };
 
@@ -201,4 +205,4 @@
       });
     });
   });
-})();
+})();
diff --git a/src/features/pinning/test/uiGridPinningService.spec.js b/src/features/pinning/test/uiGridPinningService.spec.js
@@ -34,6 +34,14 @@ describe('ui.grid.pinning uiGridPinningService', function () {
       expect(grid.options.enablePinning).toBe(true);
     });
 
+    it('should have hide PinLeft disabled', function () {
+      expect(grid.options.hidePinLeft).toBeFalsy();
+    });
+
+    it('should have hide PinRight disabled', function () {
+      expect(grid.options.hidePinRight).toBeFalsy();
+    });
+
     it('should register a column builder to the grid', function() {
       expect(grid.registerColumnBuilder).toHaveBeenCalledWith(uiGridPinningService.pinningColumnBuilder);
     });
@@ -50,6 +58,41 @@ describe('ui.grid.pinning uiGridPinningService', function () {
       uiGridPinningService.defaultGridOptions(options);
       expect(options.enablePinning).toBe(false);
     });
+
+    it('should default to false for hidePinLeft', function () {
+      var options = {};
+      uiGridPinningService.defaultGridOptions(options);
+      expect(options.hidePinLeft).toBeFalsy();
+    });
+    it('should allow true for hidePinLeft when pinning is enabled', function () {
+      var options = { enablePinning: true, hidePinLeft: true};
+      uiGridPinningService.defaultGridOptions(options);
+      expect(options.hidePinLeft).toBe(true);
+    });
+    it('should NOT allow true for hidePinLeft when pinning is Disabled', function () {
+      var options = { enablePinning: false, hidePinLeft: true};
+      uiGridPinningService.defaultGridOptions(options);
+      expect(options.hidePinLeft).toBe(false);
+    });
+
+
+    it('should default to false for hidePinRight', function () {
+      var options = {};
+      uiGridPinningService.defaultGridOptions(options);
+      expect(options.hidePinRight).toBeFalsy();
+    });
+    it('should allow true for hidePinRight when pinning is enabled', function () {
+      var options = { enablePinning: true, hidePinRight: true};
+      uiGridPinningService.defaultGridOptions(options);
+      expect(options.hidePinRight).toBe(true);
+    });
+    it('should NOT allow true for hidePinRight when pinning is Disabled', function () {
+      var options = { enablePinning: false, hidePinRight: true};
+      uiGridPinningService.defaultGridOptions(options);
+      expect(options.hidePinRight).toBe(false);
+    });
+
+
   });
 
   describe('pinningColumnBuilder', function() {
@@ -58,7 +101,7 @@ describe('ui.grid.pinning uiGridPinningService', function () {
     beforeEach(function() {
       mockCol = {menuItems: [], grid: grid};
       colOptions = {};
-      gridOptions = {enablePinning:true};
+      gridOptions = {enablePinning:true, hidePinLeft: false, hidePinRight: false};
     });
 
     it('should enable column pinning when pinning allowed for the grid', function() {
@@ -84,6 +127,30 @@ describe('ui.grid.pinning uiGridPinningService', function () {
       expect(colOptions.enablePinning).toBe(true);
     });
 
+    it('should be true in columnOptions when hidePinLeft=true for the grid', function() {
+      gridOptions = {enablePinning: true, hidePinLeft: true};
+
+      uiGridPinningService.pinningColumnBuilder(colOptions, mockCol, gridOptions);
+
+      expect(colOptions.hidePinLeft).toBe(true);
+    });
+    it('should be true when hidePinLeft=true for the column', function() {
+      colOptions = {enablePinning: true, hidePinLeft: true};
+      gridOptions = {enablePinning: true, hidePinLeft: false};
+
+      uiGridPinningService.pinningColumnBuilder(colOptions, mockCol, gridOptions);
+
+      expect(colOptions.hidePinLeft).toBe(true);
+    });
+    it('should be true when hidePinRight=true for the column', function() {
+      colOptions = {enablePinning: true, hidePinRight: true};
+      gridOptions = {enablePinning: true, hidePinRight: false};
+
+      uiGridPinningService.pinningColumnBuilder(colOptions, mockCol, gridOptions);
+
+      expect(colOptions.hidePinRight).toBe(true);
+    });
+
     it('should pin left when pinnedLeft=true', function() {
         colOptions = {pinnedLeft: true};
         gridOptions = {enablePinning: false};