feat(gridState): Grid State & Presets for columns (position, size, visibility)

aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts

@@ -210,7 +210,7 @@ export class AureliaSlickgridCustomElement {
       this.attachBackendCallbackFunctions(this.gridOptions);
     }
 
-    this.gridStateService.init(this.grid, this.filterService, this.sortService);
+    this.gridStateService.init(this.grid, this.controlAndPluginService, this.filterService, this.sortService);
 
     // create the Aurelia Grid Instance with reference to all Services
     const aureliaElementInstance: AureliaGridInstance = {
@@ -337,6 +337,14 @@ export class AureliaSlickgridCustomElement {
       })
     );
 
+    // if user entered some Columns "presets", we need to reflect them all in the grid
+    if (gridOptions.presets && gridOptions.presets.columns && Array.isArray(gridOptions.presets.columns) && gridOptions.presets.columns.length > 0) {
+      const gridColumns: Column[] = this.gridStateService.getAssociatedGridColumns(grid, gridOptions.presets.columns);
+      if (gridColumns && Array.isArray(gridColumns)) {
+        grid.setColumns(gridColumns);
+      }
+    }
+
     // attach external sorting (backend) when available or default onSort (dataView)
     if (gridOptions.enableSorting) {
       gridOptions.backendServiceApi ? this.sortService.attachBackendOnSort(grid, dataView) : this.sortService.attachLocalOnSort(grid, dataView);
@@ -347,8 +355,8 @@ export class AureliaSlickgridCustomElement {
       this.filterService.init(grid);
 
       // if user entered some "presets", we need to reflect them all in the DOM
-      if (gridOptions.presets && gridOptions.presets.filters) {
-        this.filterService.populateColumnFilterSearchTerms(grid);
+      if (gridOptions.presets && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) {
+        this.filterService.populateColumnFilterSearchTerms();
       }
       gridOptions.backendServiceApi ? this.filterService.attachBackendOnFilter(grid) : this.filterService.attachLocalOnFilter(grid, this.dataview);
     }
@@ -435,13 +443,18 @@ export class AureliaSlickgridCustomElement {
     // update backend filters (if need be) before the query runs
     if (backendApi) {
       const backendService = backendApi.service;
+
+      // if user entered some any "presets", we need to reflect them all in the grid
       if (gridOptions && gridOptions.presets) {
-        if (backendService && backendService.updateFilters && gridOptions.presets.filters) {
+        // Filters "presets"
+        if (backendService && backendService.updateFilters && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) {
           backendService.updateFilters(gridOptions.presets.filters, true);
         }
-        if (backendService && backendService.updateSorters && gridOptions.presets.sorters) {
+        // Sorters "presets"
+        if (backendService && backendService.updateSorters && Array.isArray(gridOptions.presets.sorters) && gridOptions.presets.sorters.length > 0) {
           backendService.updateSorters(undefined, gridOptions.presets.sorters);
         }
+        // Pagination "presets"
         if (backendService && backendService.updatePagination && gridOptions.presets.pagination) {
           backendService.updatePagination(gridOptions.presets.pagination.pageNumber, gridOptions.presets.pagination.pageSize);
         }

aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundDateFilter.ts

@@ -74,7 +74,7 @@ export class CompoundDateFilter implements Filter {
   /**
    * Clear the filter value
    */
-  clear(triggerFilterKeyup = true) {
+  clear() {
     if (this.flatInstance && this.$selectOperatorElm) {
       this.$selectOperatorElm.val(0);
       this.flatInstance.clear();
@@ -125,9 +125,9 @@ export class CompoundDateFilter implements Filter {
         // when using the time picker, we can simulate a keyup event to avoid multiple backend request
         // since backend request are only executed after user start typing, changing the time should be treated the same way
         if (pickerOptions.enableTime) {
-          this.onTriggerEvent(new CustomEvent('keyup'));
+          this.onTriggerEvent(new CustomEvent('keyup'), dateStr === '');
         } else {
-          this.onTriggerEvent(undefined);
+          this.onTriggerEvent(undefined, dateStr === '');
         }
       }
     };
@@ -225,10 +225,14 @@ export class CompoundDateFilter implements Filter {
     return 'en';
   }
 
-  private onTriggerEvent(e: Event | undefined) {
-    const selectedOperator = this.$selectOperatorElm.find('option:selected').text();
-    (this._currentValue) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
-    this.callback(e, { columnDef: this.columnDef, searchTerms: [this._currentValue], operator: selectedOperator || '=' });
+  private onTriggerEvent(e: Event | undefined, clearFilterTriggered?: boolean) {
+    if (clearFilterTriggered) {
+      this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: true });
+    } else {
+      const selectedOperator = this.$selectOperatorElm.find('option:selected').text();
+      (this._currentValue) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
+      this.callback(e, { columnDef: this.columnDef, searchTerms: [this._currentValue], operator: selectedOperator || '' });
+    }
   }
 
   private hide() {

aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundInputFilter.ts

@@ -72,13 +72,11 @@ export class CompoundInputFilter implements Filter {
   /**
    * Clear the filter value
    */
-  clear(triggerFilterKeyup = true) {
+  clear() {
     if (this.$filterElm && this.$selectOperatorElm) {
       this.$selectOperatorElm.val(0);
       this.$filterInputElm.val('');
-      if (triggerFilterKeyup) {
-        this.$filterElm.trigger('keyup');
-      }
+      this.onTriggerEvent(undefined, true);
     }
   }
 
@@ -201,10 +199,14 @@ export class CompoundInputFilter implements Filter {
     return $filterContainerElm;
   }
 
-  private onTriggerEvent(e: Event | undefined) {
-    const selectedOperator = this.$selectOperatorElm.find('option:selected').text();
-    const value = this.$filterInputElm.val();
-    (value) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
-    this.callback(e, { columnDef: this.columnDef, searchTerms: [value], operator: selectedOperator || '' });
+  private onTriggerEvent(e: Event | undefined, clearFilterTriggered?: boolean) {
+    if (clearFilterTriggered) {
+      this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: true });
+    } else {
+      const selectedOperator = this.$selectOperatorElm.find('option:selected').text();
+      const value = this.$filterInputElm.val();
+      (value) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
+      this.callback(e, { columnDef: this.columnDef, searchTerms: [value], operator: selectedOperator || '' });
+    }
   }
 }

aurelia-slickgrid/src/aurelia-slickgrid/filters/filterFactory.ts

@@ -26,7 +26,7 @@ export class FilterFactory {
    * @param {columnFilter} a ColumnFilter object
    * @return {Filter} the new Filter
    */
-  public createFilter(columnFilter: ColumnFilter): Filter {
+  public createFilter(columnFilter: ColumnFilter | undefined): Filter | undefined {
     let filter: Filter | undefined;
 
     if (columnFilter && columnFilter.model) {

aurelia-slickgrid/src/aurelia-slickgrid/filters/inputFilter.ts

@@ -50,20 +50,24 @@ export class InputFilter implements Filter {
     // step 3, subscribe to the keyup event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
     this.$filterElm.keyup((e: any) => {
-      (e && e.target && e.target.value) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
-      this.callback(e, { columnDef: this.columnDef });
+      const value = e && e.target && e.target.value || '';
+      if (!value || value === '') {
+        this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: true });
+        this.$filterElm.removeClass('filled');
+      } else {
+        this.$filterElm.addClass('filled');
+        this.callback(e, { columnDef: this.columnDef, searchTerms: [value] });
+      }
     });
   }
 
   /**
    * Clear the filter value
    */
-  clear(triggerFilterKeyup = true) {
+  clear() {
     if (this.$filterElm) {
       this.$filterElm.val('');
-      if (triggerFilterKeyup) {
-        this.$filterElm.trigger('keyup');
-      }
+      this.$filterElm.trigger('keyup');
     }
   }
 

aurelia-slickgrid/src/aurelia-slickgrid/filters/multipleSelectFilter.ts

@@ -115,16 +115,13 @@ export class MultipleSelectFilter implements Filter {
   /**
    * Clear the filter values
    */
-  clear(triggerFilterChange = true) {
+  clear() {
     if (this.$filterElm && this.$filterElm.multipleSelect) {
       // reload the filter element by it's id, to make sure it's still a valid element (because of some issue in the GraphQL example)
       // this.$filterElm = $(`#${this.$filterElm[0].id}`);
       this.$filterElm.multipleSelect('setSelects', []);
-
-      if (triggerFilterChange) {
-        this.$filterElm.removeClass('filled');
-        this.callback(undefined, { columnDef: this.columnDef, operator: 'IN', searchTerms: [] });
-      }
+      this.$filterElm.removeClass('filled');
+      this.callback(undefined, { columnDef: this.columnDef, clearFilterTriggered: true });
     }
   }
 

aurelia-slickgrid/src/aurelia-slickgrid/filters/selectFilter.ts

@@ -52,20 +52,24 @@ export class SelectFilter implements Filter {
     // step 3, subscribe to the change event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
     this.$filterElm.change((e: any) => {
-      (e && e.target && e.target.value) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
-      this.callback(e, { columnDef: this.columnDef, operator: 'EQ' });
+      const value = e && e.target && e.target.value || '';
+      if (!value || value === '') {
+        this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: true });
+        this.$filterElm.removeClass('filled');
+      } else {
+        this.$filterElm.addClass('filled');
+        this.callback(e, { columnDef: this.columnDef, searchTerms: [value], operator: 'EQ' });
+      }
     });
   }
 
   /**
    * Clear the filter values
    */
-  clear(triggerFilterChange = true) {
+  clear() {
     if (this.$filterElm) {
       this.$filterElm.val('');
-      if (triggerFilterChange) {
-        this.$filterElm.trigger('change');
-      }
+      this.$filterElm.trigger('change');
     }
   }
 

aurelia-slickgrid/src/aurelia-slickgrid/filters/singleSelectFilter.ts

@@ -111,15 +111,12 @@ export class SingleSelectFilter implements Filter {
   /**
    * Clear the filter values
    */
-  clear(triggerFilterChange = true) {
+  clear() {
     if (this.$filterElm && this.$filterElm.multipleSelect) {
       // reload the filter element by it's id, to make sure it's still a valid element (because of some issue in the GraphQL example)
       // this.$filterElm = $(`#${this.$filterElm[0].id}`);
       this.$filterElm.multipleSelect('setSelects', []);
-
-      if (triggerFilterChange) {
-        this.callback(undefined, { columnDef: this.columnDef, operator: 'IN', searchTerms: [] });
-      }
+      this.callback(undefined, { columnDef: this.columnDef, clearFilterTriggered: true });
     }
   }
 

aurelia-slickgrid/src/aurelia-slickgrid/models/backendService.interface.ts

@@ -34,7 +34,7 @@ export interface BackendService {
   getCurrentPagination?: () => CurrentPagination;
 
   /** Get the Sorters that are currently used by the grid */
-  getCurrentSorters?: () => ColumnFilters | CurrentFilter[];
+  getCurrentSorters?: () => CurrentSorter[];
 
   /** Reset the pagination options */
   resetPaginationOptions: () => void;

aurelia-slickgrid/src/aurelia-slickgrid/models/column.interface.ts

@@ -113,21 +113,6 @@ export interface Column {
    */
   internalColumnEditor?: any;
 
-  /** is the column editable? Goes with grid option "editable: true". */
-  isEditable?: boolean;
-
-  /** is the field hidden? (part of the dataset but not shown in the grid/UI) */
-  isHidden?: boolean;
-
-  /** catchall for meta info */
-  json?: any;
-
-  /** a column key */
-  key?: string;
-
-  /** is the column manually sizable? */
-  manuallySized?: boolean;
-
   /** Maximum Width of the column in pixels (number only). */
   maxWidth?: number;
 
@@ -173,9 +158,6 @@ export interface Column {
   /** Is the column selectable? Goes with grid option "enableCellNavigation: true". */
   selectable?: boolean;
 
-  /** do we want to show hidden column? */
-  showHidden?: boolean;
-
   /** Is the column sortable? Goes with grid option "enableSorting: true". */
   sortable?: boolean;
 

aurelia-slickgrid/src/aurelia-slickgrid/models/currentColumn.interface.ts

@@ -0,0 +1,15 @@
+import { OperatorString, OperatorType, SearchTerm } from './../models/index';
+
+export interface CurrentColumn {
+  /** Column id (in the column definitions) */
+  columnId: string;
+
+  /** Column CSS Class  */
+  cssClass?: string;
+
+  /** Header CSS Class  */
+  headerCssClass?: string;
+
+  /** Column width */
+  width?: number;
+}

aurelia-slickgrid/src/aurelia-slickgrid/models/currentFilter.interface.ts

@@ -1,7 +1,12 @@
 import { OperatorString, OperatorType, SearchTerm } from './../models/index';
 
 export interface CurrentFilter {
+  /** Column id (in the column definitions) */
   columnId: string;
+
+  /** Fitler operator or use default operator when not provided */
   operator?: OperatorType | OperatorString;
+
+  /** Filter search terms  */
   searchTerms?: SearchTerm[];
 }

aurelia-slickgrid/src/aurelia-slickgrid/models/currentPagination.interface.ts

@@ -1,4 +1,7 @@
 export interface CurrentPagination {
+  /** Grid page number */
   pageNumber: number;
+
+  /** Grid page size */
   pageSize: number;
 }

aurelia-slickgrid/src/aurelia-slickgrid/models/currentSorter.interface.ts

@@ -1,6 +1,6 @@
 import { SortDirection, SortDirectionString } from './../models/index';
 
 export interface CurrentSorter {
-  columnId: string;
+  columnId: string | number;
   direction: SortDirection | SortDirectionString;
 }

aurelia-slickgrid/src/aurelia-slickgrid/models/extension.interface.ts

@@ -0,0 +1,4 @@
+export interface Extension {
+  name: string;
+  service: any;
+}

aurelia-slickgrid/src/aurelia-slickgrid/models/filterCallback.interface.ts

@@ -1,6 +1,7 @@
 import { Column, OperatorString, SearchTerm } from './../models/index';
 
 export interface FilterCallbackArg {
+  clearFilterTriggered?: boolean;
   columnDef: Column;
   operator?: OperatorString;
   searchTerms?: SearchTerm[];

aurelia-slickgrid/src/aurelia-slickgrid/models/gridState.interface.ts

@@ -1,6 +1,9 @@
-import { CurrentFilter, CurrentSorter } from './../models/index';
+import { CurrentColumn, CurrentFilter, CurrentSorter } from './../models/index';
 
 export interface GridState {
+  /** Columns (and their state: visibility/position) that are currently applied in the grid */
+  columns?: CurrentColumn[] | null;
+
   /** Filters (and their state, columnId, searchTerm(s)) that are currently applied in the grid */
   filters?: CurrentFilter[] | null;
 

aurelia-slickgrid/src/aurelia-slickgrid/models/gridStateChange.interface.ts

@@ -1,9 +1,9 @@
-import { CurrentFilter, CurrentSorter, GridState, GridStateType, Pagination } from './../models/index';
+import { Column, CurrentFilter, CurrentSorter, GridState, GridStateType, Pagination } from './../models/index';
 
 export interface GridStateChange {
   /** Changes that were triggered */
   change?: {
-    newValues: CurrentFilter[] | CurrentSorter[] | Pagination;
+    newValues: Column[] | CurrentFilter[] | CurrentSorter[] | Pagination;
     type: GridStateType;
   };
 

aurelia-slickgrid/src/aurelia-slickgrid/models/gridStateType.enum.ts

@@ -1,4 +1,5 @@
 export enum GridStateType {
+  columns = 'columns',
   filter = 'filter',
   pagination = 'pagination',
   sorter = 'sorter'

aurelia-slickgrid/src/aurelia-slickgrid/models/index.ts

@@ -17,13 +17,15 @@ export * from './columnFilters.interface';
 export * from './columnPicker.interface';
 export * from './columnSort.interface';
 export * from './customGridMenu.interface';
+export * from './currentColumn.interface';
 export * from './currentFilter.interface';
 export * from './currentPagination.interface';
 export * from './currentSorter.interface';
 export * from './delimiterType.enum';
 export * from './editor.interface';
 export * from './editCommand.interface';
 export * from './exportOption.interface';
+export * from './extension.interface';
 export * from './fieldType.enum';
 export * from './fileType.enum';
 export * from './filter.interface';