feat(services): add Toggle Filtering/Sorting & Hide Column methods (#587

)

- The new methods are:
   - `filterService.toggleFilterFunctionality()`
   - `sortService.toggleSortFunctionality()`
   - `gridService.hideColumnByIndex(columnIndex)`
   - `gridService.hideColumn(column)`

.circleci/config.yml

@@ -5,7 +5,7 @@ jobs:
   build:
     working_directory: ~/angular-slickgrid
     docker:
-      - image: circleci/node:10-browsers
+      - image: circleci/node:12-browsers
     steps:
       - checkout
       - restore_cache:

package.json

@@ -109,7 +109,7 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.24.0",
     "rxjs": "^6.3.3",
-    "slickgrid": "^2.4.27",
+    "slickgrid": "^2.4.29",
     "text-encoding-utf-8": "^1.0.2"
   },
   "peerDependencies": {

src/app/examples/grid-rowmove.component.html

@@ -2,9 +2,34 @@
   <h2>{{title}}</h2>
   <div class="subtitle" [innerHTML]="subTitle"></div>
 
+  <div class="row">
+    <button class="btn btn-default btn-sm" data-test="hide-duration-btn" (click)="hideDurationColumnDynamically()">
+      <i class="fa fa-eye-slash"></i>
+      Dynamically Hide "Duration"
+    </button>
+    <button class="btn btn-default btn-sm" data-test="disable-filters-btn" (click)="disableFilters()">
+      <i class="fa fa-times"></i>
+      Disable Filters
+    </button>
+    <button class="btn btn-default btn-sm" data-test="disable-sorting-btn" (click)="disableSorting()">
+      <i class="fa fa-times"></i>
+      Disable Sorting
+    </button>
+    <button class="btn btn-default btn-sm" data-test="toggle-filtering-btn" (click)="toggleFilter()">
+      <i class="fa fa-random"></i>
+      Toggle Filtering
+    </button>
+    <button class="btn btn-default btn-sm" data-test="toggle-sorting-btn" (click)="toggleSorting()">
+      <i class="fa fa-random"></i>
+      Toggle Sorting
+    </button>
+  </div>
+
+  <br />
+
   <div class="col-sm-12">
     <angular-slickgrid gridId="grid17" (onAngularGridCreated)="angularGridReady($event)"
-      [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
+                       [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
     </angular-slickgrid>
   </div>
 </div>

src/app/examples/grid-rowmove.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { AngularGridInstance, Column, ExtensionName, Formatters, GridOption } from './../modules/angular-slickgrid';
+import { AngularGridInstance, Column, ExtensionName, Filters, Formatters, GridOption } from './../modules/angular-slickgrid';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -43,12 +43,27 @@ export class GridRowMoveComponent implements OnInit {
 
   ngOnInit(): void {
     this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title' },
-      { id: 'duration', name: 'Duration', field: 'duration', sortable: true },
-      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
-      { id: 'start', name: 'Start', field: 'start' },
-      { id: 'finish', name: 'Finish', field: 'finish' },
-      { id: 'effort-driven', name: 'Completed', field: 'effortDriven', formatter: Formatters.checkmark }
+      { id: 'title', name: 'Title', field: 'title', filterable: true, },
+      { id: 'duration', name: 'Duration', field: 'duration', filterable: true, sortable: true },
+      { id: '%', name: '% Complete', field: 'percentComplete', filterable: true, sortable: true },
+      {
+        id: 'start', name: 'Start', field: 'start', filterable: true, sortable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'finish', name: 'Finish', field: 'finish',
+        filterable: true, sortable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'effort-driven', name: 'Completed', field: 'effortDriven',
+        formatter: Formatters.checkmark,
+        filterable: true, sortable: true,
+        filter: {
+          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
+          model: Filters.singleSelect
+        },
+      }
     ];
 
     this.gridOptions = {
@@ -58,7 +73,13 @@ export class GridRowMoveComponent implements OnInit {
         sidePadding: 10
       },
       enableCellNavigation: true,
+      enableFiltering: true,
       enableCheckboxSelector: true,
+      checkboxSelector: {
+        // you can toggle these 2 properties to show the "select all" checkbox in different location
+        hideInFilterHeaderRow: false,
+        hideInColumnTitleRow: true
+      },
       enableRowSelection: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)
@@ -73,6 +94,7 @@ export class GridRowMoveComponent implements OnInit {
         singleRowMove: true,
         disableRowSelection: true,
         cancelEditOnDrag: true,
+        width: 30,
         onBeforeMoveRows: (e, args) => this.onBeforeMoveRow(e, args),
         onMoveRows: (e, args) => this.onMoveRows(e, args),
 
@@ -147,4 +169,33 @@ export class GridRowMoveComponent implements OnInit {
     this.angularGrid.slickGrid.resetActiveCell();
     this.dataset = tmpDataset;
   }
+
+  hideDurationColumnDynamically() {
+    const columnIndex = this.angularGrid.slickGrid.getColumns().findIndex(col => col.id === 'duration');
+    if (columnIndex >= 0) {
+      this.angularGrid.gridService.hideColumnByIndex(columnIndex);
+    }
+  }
+
+  // Disable/Enable Filtering/Sorting functionalities
+  // --------------------------------------------------
+
+  disableFilters() {
+    this.angularGrid.filterService.disableFilterFunctionality(true);
+  }
+
+  disableSorting() {
+    this.angularGrid.sortService.disableSortFunctionality(true);
+  }
+
+  // or Toggle Filtering/Sorting functionalities
+  // ---------------------------------------------
+
+  toggleFilter() {
+    this.angularGrid.filterService.toggleFilterFunctionality();
+  }
+
+  toggleSorting() {
+    this.angularGrid.sortService.toggleSortFunctionality();
+  }
 }

src/app/modules/angular-slickgrid/extensions/__tests__/extensionUtility.spec.ts

@@ -5,7 +5,7 @@ import { ExtensionUtility } from '../extensionUtility';
 import { ExtensionName, GridOption } from '../../models';
 import { SharedService } from '../../services/shared.service';
 
-declare const Slick: any;
+declare let Slick: any;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
@@ -88,16 +88,6 @@ describe('ExtensionUtility', () => {
       translate.use('fr');
     });
 
-    describe('arrayRemoveItemByIndex method', () => {
-      it('should remove an item from the array', () => {
-        const input = [{ field: 'field1', name: 'Field 1' }, { field: 'field2', name: 'Field 2' }, { field: 'field3', name: 'Field 3' }];
-        const expected = [{ field: 'field1', name: 'Field 1' }, { field: 'field3', name: 'Field 3' }];
-
-        const output = utility.arrayRemoveItemByIndex(input, 1);
-        expect(output).toEqual(expected);
-      });
-    });
-
     describe('loadExtensionDynamically method', () => {
       it('should check that autoTooltip gets loaded', () => {
         utility.loadExtensionDynamically(ExtensionName.autoTooltip);

src/app/modules/angular-slickgrid/extensions/extensionUtility.ts

@@ -12,15 +12,6 @@ declare function require(name: string);
 export class ExtensionUtility {
   constructor(private sharedService: SharedService, @Optional() private translate: TranslateService) { }
 
-  /**
-   * Remove a column from the grid by it's index in the grid
-   * @param array input
-   * @param index
-   */
-  arrayRemoveItemByIndex<T>(array: T[], index: number): T[] {
-    return array.filter((el: T, i: number) => index !== i);
-  }
-
   /**
    * Load SlickGrid Extension (Control/Plugin) dynamically (on demand)
    * This will basically only load the extension when user enables the feature

src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

@@ -18,7 +18,7 @@ import {
 import { FilterService } from '../services/filter.service';
 import { SortService } from '../services/sort.service';
 import { SharedService } from '../services/shared.service';
-import { getTranslationPrefix } from '../services/utilities';
+import { arrayRemoveItemByIndex, getTranslationPrefix } from '../services/utilities';
 import { ExtensionUtility } from './extensionUtility';
 
 // using external non-typed js libraries
@@ -219,7 +219,7 @@ export class HeaderMenuExtension implements Extension {
     if (this.sharedService.grid && this.sharedService.grid.getColumns && this.sharedService.grid.setColumns && this.sharedService.grid.getColumnIndex) {
       const columnIndex = this.sharedService.grid.getColumnIndex(column.id);
       const currentColumns = this.sharedService.grid.getColumns() as Column[];
-      const visibleColumns = this.extensionUtility.arrayRemoveItemByIndex(currentColumns, columnIndex);
+      const visibleColumns = arrayRemoveItemByIndex(currentColumns, columnIndex);
       this.sharedService.visibleColumns = visibleColumns;
       this.sharedService.grid.setColumns(visibleColumns);
       this.sharedService.onColumnsChanged.next(visibleColumns);

src/app/modules/angular-slickgrid/models/gridMenuItem.interface.ts

@@ -7,12 +7,15 @@ export interface GridMenuItem {
   /** A CSS class to be added to the menu item container. */
   cssClass?: string;
 
-  /** Defaults to false, whether the item is disabled. */
+  /** Defaults to false, whether the item/command is disabled. */
   disabled?: boolean;
 
   /** Defaults to false, whether the command is actually a divider (separator). */
   divider?: boolean;
 
+  /** Defaults to false, whether the item/command is hidden. */
+  hidden?: boolean;
+
   /** CSS class to be added to the menu item icon. */
   iconCssClass?: string;
 

src/app/modules/angular-slickgrid/models/headerMenu.interface.ts

@@ -17,9 +17,6 @@ export interface HeaderMenu {
   /** A command identifier to be passed to the onCommand event handlers. */
   command?: string;
 
-  /** Whether the item is disabled. */
-  disabled?: boolean;
-
   /** Defaults to false, which will hide the "Remove Filter" command in the Header Menu (Grid Option "enableHeaderMenu: true" has to be enabled) */
   hideClearFilterCommand?: boolean;
 

src/app/modules/angular-slickgrid/models/menuItem.interface.ts

@@ -4,12 +4,15 @@ export interface MenuItem {
   /** A CSS class to be added to the menu item container. */
   cssClass?: string;
 
-  /** Defaults to false, whether the item is disabled. */
+  /** Defaults to false, whether the item/command is disabled. */
   disabled?: boolean;
 
   /** Defaults to false, whether the command is actually a divider (separator). */
   divider?: boolean | string;
 
+  /** Defaults to false, whether the item/command is hidden. */
+  hidden?: boolean;
+
   /** CSS class to be added to the menu item icon. */
   iconCssClass?: string;
 

src/app/modules/angular-slickgrid/models/slickEditorLock.interface.ts

@@ -0,0 +1,56 @@
+import { Editor } from './editor.interface';
+
+/**
+ * A locking helper to track the active edit controller and ensure that only a single controller
+ * can be active at a time.  This prevents a whole class of state and validation synchronization
+ * issues.  An edit controller (such as SlickGrid) can query if an active edit is in progress
+ * and attempt a commit or cancel before proceeding.
+ * @class EditorLock
+ * @constructor
+ */
+export interface SlickEditorLock {
+
+  /**
+   * Returns true if a specified edit controller is active (has the edit lock).
+   * If the parameter is not specified, returns true if any edit controller is active.
+   * @method isActive
+   * @param editController {EditController}
+   * @return {Boolean}
+   */
+  isActive(editController?: Editor): boolean;
+
+  /**
+   * Sets the specified edit controller as the active edit controller (acquire edit lock).
+   * If another edit controller is already active, and exception will be thrown.
+   * @method activate
+   * @param editController {EditController} edit controller acquiring the lock
+   */
+  activate(editController: Editor): void;
+
+  /**
+   * Unsets the specified edit controller as the active edit controller (release edit lock).
+   * If the specified edit controller is not the active one, an exception will be thrown.
+   * @method deactivate
+   * @param editController {EditController} edit controller releasing the lock
+   */
+  deactivate(editController: Editor): void;
+
+  /**
+   * Attempts to commit the current edit by calling "commitCurrentEdit" method on the active edit
+   * controller and returns whether the commit attempt was successful (commit may fail due to validation
+   * errors, etc.).  Edit controller's "commitCurrentEdit" must return true if the commit has succeeded
+   * and false otherwise.  If no edit controller is active, returns true.
+   * @method commitCurrentEdit
+   * @return {Boolean}
+   */
+  commitCurrentEdit(): boolean;
+
+  /**
+   * Attempts to cancel the current edit by calling "cancelCurrentEdit" method on the active edit
+   * controller and returns whether the edit was successfully cancelled.  If no edit controller is
+   * active, returns true.
+   * @method cancelCurrentEdit
+   * @return {Boolean}
+   */
+  cancelCurrentEdit(): boolean;
+}