refactor(editor): move all Editor params into editor

- instead of using the generic "params" to pass collection and other arguments, we will use the "editor" object - doing this brings TS types and intellisense
ghiscoding · May 29, 2018 · bd8440b · bd8440b
1 parent c691bc3
commit bd8440b
Show file tree

Hide file tree

Showing 20 changed files with 349 additions and 62 deletions.
diff --git a/src/app/examples/custom-inputEditor.ts b/src/app/examples/custom-inputEditor.ts
@@ -0,0 +1,80 @@
+import { Editor, KeyCode } from './../modules/angular-slickgrid';
+
+// using external non-typed js libraries
+declare var $: any;
+
+/*
+ * An example of a 'detached' editor.
+ * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
+ */
+export class CustomInputEditor implements Editor {
+  $input: any;
+  defaultValue: any;
+
+  constructor(private args: any) {
+    this.init();
+  }
+
+  init(): void {
+    this.$input = $(`<input type="text" class="editor-text" placeholder="custom" />`)
+      .appendTo(this.args.container)
+      .on('keydown.nav', (e) => {
+        if (e.keyCode === KeyCode.LEFT || e.keyCode === KeyCode.RIGHT) {
+          e.stopImmediatePropagation();
+        }
+      });
+
+    setTimeout(() => {
+      this.$input.focus().select();
+    }, 50);
+  }
+
+  destroy() {
+    this.$input.remove();
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  getValue() {
+    return this.$input.val();
+  }
+
+  setValue(val: string) {
+    this.$input.val(val);
+  }
+
+  loadValue(item: any) {
+    this.defaultValue = item[this.args.column.field] || '';
+    this.$input.val(this.defaultValue);
+    this.$input[0].defaultValue = this.defaultValue;
+    this.$input.select();
+  }
+
+  serializeValue() {
+    return this.$input.val();
+  }
+
+  applyValue(item: any, state: any) {
+    item[this.args.column.field] = state;
+  }
+
+  isValueChanged() {
+    return (!(this.$input.val() === '' && this.defaultValue === null)) && (this.$input.val() !== this.defaultValue);
+  }
+
+  validate() {
+    if (this.args.column.validator) {
+      const validationResults = this.args.column.validator(this.$input.val());
+      if (!validationResults.valid) {
+        return validationResults;
+      }
+    }
+
+    return {
+      valid: true,
+      msg: null
+    };
+  }
+}
diff --git a/src/app/examples/grid-additem.component.ts b/src/app/examples/grid-additem.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Injectable } from '@angular/core';
-import { AngularGridInstance, Column, Editors, FieldType, Formatters, GridOption, OnEventArgs } from './../modules/angular-slickgrid';
+import { AngularGridInstance, Column, EditorType, FieldType, Formatters, GridOption, OnEventArgs } from './../modules/angular-slickgrid';
 
 @Component({
   templateUrl: './grid-additem.component.html'
@@ -33,17 +33,58 @@ export class GridAddItemComponent implements OnInit {
 
   ngOnInit(): void {
     this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: Editors.longText },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text,
+      {
+        id: 'title', name: 'Title', field: 'title',
+        sortable: true,
+        type: FieldType.string,
+        editor: {
+          type: EditorType.longText
+        }
+      },
+      {
+        id: 'duration', name: 'Duration (days)', field: 'duration',
+        sortable: true,
+        type: FieldType.number,
+        editor: {
+          type: EditorType.text
+        },
         onCellChange: (args: OnEventArgs) => {
         alert('onCellChange directly attached to the column definition');
         console.log(args);
         }
       },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: Editors.integer },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date/*, editor: Editors.date*/ },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, editor: Editors.checkbox }
+      {
+        id: 'complete', name: '% Complete', field: 'percentComplete',
+        formatter: Formatters.percentCompleteBar,
+        type: FieldType.number,
+        editor: {
+          type: EditorType.integer
+        }
+      },
+      {
+        id: 'start', name: 'Start', field: 'start',
+        formatter: Formatters.dateIso,
+        sortable: true,
+        type: FieldType.date,
+        /*
+        editor: {
+          type: EditorType.date
+        }
+        */
+      },
+      {
+        id: 'finish', name: 'Finish', field: 'finish',
+        formatter: Formatters.dateIso, sortable: true,
+        type: FieldType.date
+      },
+      {
+        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
+        formatter: Formatters.checkmark,
+        type: FieldType.number,
+        editor: {
+          type: EditorType.checkbox
+        }
+      }
     ];
 
     this.gridOptions = {

diff --git a/src/app/examples/grid-editor.component.ts b/src/app/examples/grid-editor.component.ts
@@ -3,12 +3,13 @@ import { TranslateService } from '@ngx-translate/core';
 import {
   AngularGridInstance,
   Column,
-  Editors,
+  EditorType,
   FieldType,
   Formatters,
   GridOption,
   OnEventArgs
 } from './../modules/angular-slickgrid';
+import { CustomInputEditor } from './custom-inputEditor';
 
 // using external non-typed js libraries
 declare var Slick: any;
@@ -84,36 +85,54 @@ export class GridEditorComponent implements OnInit {
       field: 'title',
       sortable: true,
       type: FieldType.string,
-      editor: Editors.longText,
+      editor: {
+        type: EditorType.longText
+      },
       minWidth: 100,
       onCellChange: (args: OnEventArgs) => {
         console.log(args);
         this.alertWarning = `Updated Title: ${args.dataContext.title}`;
       }
+    }, {
+      id: 'title2',
+      name: 'Title, Custom Editor',
+      field: 'title',
+      sortable: true,
+      type: FieldType.string,
+      editor: {
+        type: EditorType.custom,
+        customEditor: CustomInputEditor
+      },
+      minWidth: 70
     }, {
       id: 'duration',
       name: 'Duration (days)',
       field: 'duration',
       sortable: true,
       type: FieldType.number,
-      editor: Editors.float,
-      params: { decimalPlaces: 2 },
+      editor: {
+        type: EditorType.float,
+        params: { decimalPlaces: 2 },
+      },
       minWidth: 100
     }, {
       id: 'complete',
       name: '% Complete',
       field: 'percentComplete',
       formatter: Formatters.multiple,
       type: FieldType.number,
-      editor: Editors.singleSelect,
-      minWidth: 100,
-      params: {
-        formatters: [ Formatters.collection, Formatters.percentCompleteBar ],
+      editor: {
+        type: EditorType.singleSelect,
         collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k })),
         collectionSortBy: {
           property: 'label',
           sortDesc: true
-        },
+        }
+      },
+      minWidth: 100,
+      params: {
+        collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k })),
+        formatters: [ Formatters.collection, Formatters.percentCompleteBar ]
       }
     }, {
       id: 'start',
@@ -123,7 +142,9 @@ export class GridEditorComponent implements OnInit {
       sortable: true,
       minWidth: 100,
       type: FieldType.date,
-      editor: Editors.date
+      editor: {
+        type: EditorType.date
+      }
     }, {
       id: 'finish',
       name: 'Finish',
@@ -132,24 +153,27 @@ export class GridEditorComponent implements OnInit {
       sortable: true,
       minWidth: 100,
       type: FieldType.date,
-      editor: Editors.date
+      editor: {
+        type: EditorType.date
+      }
     }, {
       id: 'effort-driven',
       name: 'Effort Driven',
       field: 'effortDriven',
       formatter: Formatters.checkmark,
       type: FieldType.number,
-      editor: Editors.checkbox,
+      editor: {
+        type: EditorType.checkbox
+      },
       minWidth: 60
     }, {
       id: 'prerequisites',
       name: 'Prerequisites',
       field: 'prerequisites',
       sortable: true,
       type: FieldType.string,
-      editor: Editors.multipleSelect,
-      minWidth: 100,
-      params: {
+      editor: {
+        type: EditorType.multipleSelect,
         collection: Array.from(Array(12).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
         collectionSortBy: {
           property: 'label',
@@ -159,7 +183,8 @@ export class GridEditorComponent implements OnInit {
           property: 'label',
           value: 'Task 2'
         }
-      }
+      },
+      minWidth: 100
     }];
 
     this.gridOptions = {

diff --git a/src/app/examples/swt-common-grid.component.ts b/src/app/examples/swt-common-grid.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Injectable, ViewContainerRef, ComponentFactoryResolv
          AfterViewInit, Input, EventEmitter, Output, ViewChild ,
          ElementRef, Renderer} from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { AngularSlickgridComponent, Column, Editors, FieldType, Formatter, Formatters,
+import { AngularSlickgridComponent, Column, FieldType, Formatter, Formatters,
          GridOption, OnEventArgs, BackendService,
          BackendServiceOption, FilterChangedArgs, PaginationChangedArgs, SortChangedArgs, Pagination} from '../modules/angular-slickgrid';
 import { TranslateService } from '@ngx-translate/core';

diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
@@ -19,11 +19,22 @@ import 'slickgrid/plugins/slick.headerbuttons';
 import 'slickgrid/plugins/slick.headermenu';
 import 'slickgrid/plugins/slick.rowmovemanager';
 import 'slickgrid/plugins/slick.rowselectionmodel';
-import { AfterViewInit, Component, EventEmitter, Inject, Injectable, Input, Output, OnDestroy, OnInit, ViewChildren, ElementRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Inject, Injectable, Input, Output, OnDestroy, OnInit, ViewChildren, ElementRef, ViewChild, ReflectiveInjector } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { castToPromise, toKebabCase } from './../services/utilities';
 import { GlobalGridOptions } from './../global-grid-options';
-import { AngularGridInstance, BackendServiceOption, Column, GridOption, GridStateChange, GridStateType, Pagination } from './../models/index';
+import {
+  AngularGridInstance,
+  BackendServiceOption,
+  Column,
+  Editor,
+  EditorType,
+  GridOption,
+  GridStateChange,
+  GridStateType,
+  Pagination
+} from './../models/index';
+import { Editors, AVAILABLE_EDITORS } from './../editors/index';
 import { ControlAndPluginService } from './../services/controlAndPlugin.service';
 import { ExportService } from './../services/export.service';
 import { FilterService } from './../services/filter.service';
@@ -108,6 +119,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     return this._dataView.getItems();
   }
 
+
   constructor(
     private controlAndPluginService: ControlAndPluginService,
     private exportService: ExportService,
@@ -177,6 +189,12 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       this._dataView = new Slick.Data.DataView();
     }
 
+    // for convenience, we provide the property "editor" as an Angular-Slickgrid editor complex object
+    // however "editor" is used internally by SlickGrid for it's Editor Factory
+    // so in our lib we will swap "editor" and copy it into "internalColumnEditor"
+    // then take back "editor.type" and make it the new "editor" so that SlickGrid Editor Factory still works
+    this._columnDefinitions = this._columnDefinitions.map((c: Column | any) => ({ ...c, editor: this.getEditor((c.editor && c.editor.type), c), internalColumnEditor: { ...c.editor } })),
+
     this.controlAndPluginService.createPluginBeforeGridCreation(this._columnDefinitions, this.gridOptions);
     this.grid = new Slick.Grid(`#${this.gridId}`, this._dataView, this._columnDefinitions, this.gridOptions);
 
@@ -238,6 +256,25 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     });
   }
 
+  /**
+   * From the list of available editors, find the editor associated to it's type
+   * and if it's a custom one, return the "customEditor" from the column
+   * @param type
+   * @param column
+   */
+  getEditor(type: EditorType, column: Column) {
+    if (type === EditorType.custom && column && column.editor && column.editor.hasOwnProperty('customEditor')) {
+      return column.editor['customEditor'];
+    }
+
+    const editorFound = AVAILABLE_EDITORS.find(editor => editor.type === type);
+    if (editorFound && editorFound.editor) {
+      return editorFound.editor;
+    }
+
+    return undefined;
+  }
+
   /**
    * Define what our internal Post Process callback, it will execute internally after we get back result from the Process backend call
    * For now, this is GraphQL Service only feautre and it will basically refresh the Dataset & Pagination without having the user to create his own PostProcess every time
@@ -477,7 +514,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       if (this.grid &&  this.gridOptions.enableAutoResize) {
         // resize the grid inside a slight timeout, in case other DOM element changed prior to the resize (like a filter/pagination changed)
         this.resizer.resizeGrid(10, { height: this.gridHeight, width: this.gridWidth });
-        // this.grid.autosizeColumns();
       }
     }
   }

diff --git a/src/app/modules/angular-slickgrid/editors/dateEditor.ts b/src/app/modules/angular-slickgrid/editors/dateEditor.ts
@@ -56,7 +56,7 @@ export class DateEditor implements Editor {
   }
 
   getCurrentLocale(columnDef: Column, gridOptions: GridOption) {
-    const params = gridOptions.params || columnDef.params || {};
+    const params = gridOptions || columnDef.params || {};
     if (params.i18n && params.i18n instanceof TranslateService) {
       return params.i18n.currentLang;
     }

diff --git a/src/app/modules/angular-slickgrid/editors/floatEditor.ts b/src/app/modules/angular-slickgrid/editors/floatEditor.ts
@@ -41,8 +41,8 @@ export class FloatEditor implements Editor {
 
   getDecimalPlaces() {
     // returns the number of fixed decimal places or null
-    const columnParams = this.args.column.params || {};
-    let rtn = (columnParams && columnParams.hasOwnProperty('decimalPlaces')) ? columnParams.decimalPlaces : undefined;
+    const columnEditor = this.args && this.args.column && this.args.column.internalColumnEditor && this.args.column.internalColumnEditor;
+    let rtn = (columnEditor && columnEditor.params && columnEditor.params.hasOwnProperty('decimalPlaces')) ? columnEditor.params.decimalPlaces : undefined;
     if (rtn === undefined) {
       rtn = defaultDecimalPlaces;
     }