Merge pull request #2064 from mathiasdose/Issue#2042

Fix #2042 (pinning): Pinning column menu item duplication on resize

Author: PaulL1

misc/demo/grid-directive.html

@@ -10,7 +10,7 @@
     <link href="/dist/release/ui-grid.css" rel="stylesheet">
 
     <!--<script src="https://code.jquery.com/jquery-1.11.1.js"></script>-->
-    <script src="/lib/test/angular/1.2.21/angular.js"></script>
+    <script src="/lib/test/angular/1.2.26/angular.js"></script>
     <script src="/dist/release/ui-grid.js"></script>
 
     <style>
@@ -19,8 +19,8 @@
             min-height: 600px;
         }
         .grid {
-            height: 50%;
-            width: auto;
+            width: 500px;
+            height: 400px;
         }
         .placeholder {
             height: 50%;
@@ -35,29 +35,36 @@
 
 <!-- <div class="row main"> -->
 <h2>Grid</h2>
-<div ui-grid="gridOptions" class="grid" ui-grid-selection></div>
+<div ui-grid="gridOptions" class="grid" ui-grid-pinning ui-grid-resize-columns></div>
 <!-- <div class="placeholder"> -->
 <!-- </div> -->
 
 <br>
 <br>
 
 <script>
-    var app = angular.module('test', ['ui.grid', 'ui.grid.selection']);
+    var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns']);
     app.controller('Main', function($scope, $http) {
-        // $scope.gridOptions = { data: 'data' };
-        $scope.gridOptions = {
-            enableFiltering: true
-        };
+        $scope.gridOptions = {};
         $scope.gridOptions.columnDefs = [
-            {
-                name : "Name",
-                field: "name",
-                cellTemplate: '/misc/demo/cellTemplate.html'
-            }
+            { name:'id', width:50 },
+            { 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('/misc/site/data/100.json')
-                .success(function (data) {
+
+        $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
+                .success(function(data) {
                     $scope.gridOptions.data = data;
                 });
     });

misc/tutorial/401_AllFeatures.ngdoc

@@ -83,12 +83,12 @@ All features are enabled to get an idea of performance
   </file>
   <file name="index.html">
     <div ng-controller="MainCtrl">
-      <button type="button" class="btn btn-success" ng-click="refreshData()">Refresh Data</button>  <strong>Calls Pending:</strong> <span ng-bind="callsPending"></span>
+      <button id="refreshButton" type="button" class="btn btn-success" ng-click="refreshData()">Refresh Data</button>  <strong>Calls Pending:</strong> <span ng-bind="callsPending"></span>
       <br>
       <br>
       <strong>{{ myData.length }} rows</strong>
       <br>
-      <div ui-grid="gridOptions" ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection class="grid"></div>
+      <div id="grid1" ui-grid="gridOptions" ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection class="grid"></div>
     </div>
   </file>
   <file name="main.css">
@@ -97,4 +97,15 @@ All features are enabled to get an idea of performance
       height: 500px;
     }
   </file>
+  <file name="scenario.js">
+      var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
+
+      describe('a grid with all features', function () {
+        it('should not duplicate the menu options for pinning when resizing a column', function () {
+          element( by.id('refreshButton') ).click();
+          gridTestUtils.resizeHeaderCell( 'grid1', 1 );
+          gridTestUtils.expectVisibleColumnMenuItems( 'grid1', 1, 5)
+        });
+      });
+  </file>
 </example>

src/features/pinning/js/pinning.js

@@ -181,9 +181,15 @@
           }
         };
 
-        col.menuItems.push(pinColumnLeftAction);
-        col.menuItems.push(pinColumnRightAction);
-        col.menuItems.push(removePinAction);
+        if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'title', 'Pin Left')) {
+          col.menuItems.push(pinColumnLeftAction);
+        }
+        if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'title', 'Pin Right')) {
+          col.menuItems.push(pinColumnRightAction);
+        }
+        if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'title', 'Unpin')) {
+          col.menuItems.push(removePinAction);
+        }
       }
     };
 

src/js/core/services/ui-grid-util.js

@@ -600,6 +600,16 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC
       return str.indexOf(suffix, str.length - suffix.length) !== -1;
     },
 
+    arrayContainsObjectWithProperty: function(array, propertyName, propertyValue) {
+        var found = false;
+        angular.forEach(array, function (object) {
+            if (object[propertyName] === propertyValue) {
+                found = true;
+            }
+        });
+        return found;
+    },
+
     // Shim requestAnimationFrame
     requestAnimationFrame: $window.requestAnimationFrame && $window.requestAnimationFrame.bind($window) ||
                            $window.webkitRequestAnimationFrame && $window.webkitRequestAnimationFrame.bind($window) ||

test/e2e/gridTestUtils.spec.js

@@ -293,6 +293,37 @@ module.exports = {
       headerCell.click();
     },
 
+  /**
+   * @ngdoc method
+   * @methodOf ui.grid.e2eTestLibrary.api:gridTest
+   * @name resizeHeaderCell
+   * @description Drags the left resizer border towards the column menu button,
+   * which will perform a column resizing.
+   * @param {string} gridId the id of the grid that you want to adjust
+   * @param {integer} colNumber the number of the column (within the visible columns)
+   * which left resizer border you wish to drag (this will increase the size of colNumber-1).
+   *
+   * @example
+   * <pre>
+   *   gridTestUtils.resizeHeaderCell('myGrid', 1);
+   * </pre>
+   *
+   */
+    resizeHeaderCell: function( gridId, colNumber ) {
+      var headerCell = this.headerCell(gridId, colNumber);
+
+      var resizer = headerCell.all( by.css( '.ui-grid-column-resizer' )).first();
+      var menuButton = headerCell.element( by.css( '.ui-grid-column-menu-button' ));
+
+      protractor.getInstance().actions()
+        .mouseDown(resizer)
+        .mouseMove(menuButton)
+        .mouseUp()
+        .perform();
+
+    },
+
+
 
     /**
      * @ngdoc method
@@ -312,13 +343,13 @@ module.exports = {
      */
     shiftClickHeaderCell: function( gridId, colNumber ) {
       var headerCell = this.headerCell( gridId, colNumber);
-      
+
       protractor.getInstance().actions()
         .keyDown(protractor.Key.SHIFT)
         .click(headerCell)
         .keyUp(protractor.Key.SHIFT)
         .perform();
-    },    
+    },
 
      /**
      * @ngdoc method

test/unit/core/services/ui-grid-util.spec.js

@@ -404,6 +404,22 @@ describe('ui.grid.utilService', function() {
     });
   });
 
+  describe('arrayContainsObjectWithProperty', function () {
+    it('should return true if the array contains an object with the provided key and value, and false if not', function () {
+      var array = [
+        { name: 'Jonah', age: 12},
+        { name: 'Alice', age: 33},
+        { name: 'Joseph', age: 22}
+      ];
+
+      var contains = gridUtil.arrayContainsObjectWithProperty(array, 'name', 'Alice');
+      var notContains = gridUtil.arrayContainsObjectWithProperty(array, 'name', 'Mathias');
+      expect(contains).toEqual(true);
+      expect(notContains).toEqual(false);
+    });
+  });
+
+
   describe('postProcessTemplate', function () {
     it('should return unmodified template when interpolation symbols are the default values ( {{ / }} )', function () {
       var tmpl;