refactor(formatter): fix some type warnings & add demo

- use latest version of SlickGrid to have latest fixes including some needed for this PR
- fix some problems with the export and make it return empty string when value is null

Author: Ghislain Beaulac

package.json

@@ -69,7 +69,7 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.22.1",
     "rxjs": "^6.3.3",
-    "slickgrid": "github:6pac/SlickGrid",
+    "slickgrid": "^2.4.3",
     "text-encoding-utf-8": "^1.0.2",
     "tslib": "^1.9.3",
     "vinyl-paths": "^2.1.0"

src/app/app.component.scss

@@ -1,6 +1,9 @@
 .body-content {
   margin-top: 50px;
 }
+.lightblue {
+  color: lightblue;
+}
 .red {
   color: red;
 }

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

@@ -2,8 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { Column, FieldType, Formatter, Formatters, GridOption } from './../modules/angular-slickgrid';
 
 // create my custom Formatter with the Formatter type
-const myCustomCheckmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>
-  value ? `<i class="fa fa-fire" aria-hidden="true"></i>` : '<i class="fa fa-snowflake-o" aria-hidden="true"></i>';
+const myCustomCheckmarkFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
+  // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
+  return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
+};
 
 @Component({
   templateUrl: './grid-formatter.component.html'
@@ -13,6 +15,7 @@ export class GridFormatterComponent implements OnInit {
   subTitle = `
     Grid with Custom and/or included Slickgrid Formatters (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Formatters" target="_blank">Wiki docs</a>).
     <ul>
+      <li>Last column is a Custom Formatter</li>
       <li>
         Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag.
         Note that it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExportOptions" or the column definition)
@@ -28,7 +31,7 @@ export class GridFormatterComponent implements OnInit {
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 },
       { id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimalPlaces: 1, maxDecimalPlaces: 2 }, sortable: true, type: FieldType.number, minWidth: 90 },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimalPlaces: 1, maxDecimalPlaces: 2 }, sortable: true, type: FieldType.number, minWidth: 90, exportWithFormatter: true },
       { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 },
       { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 },
       { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },

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

@@ -40,7 +40,13 @@ export class CellExternalCopyManagerExtension implements Extension {
             if (columnDef.formatter && isEvaluatingFormatter) {
               const formattedOutput = columnDef.formatter(0, 0, item[columnDef.field], columnDef, item, this.sharedService.grid);
               if (columnDef.sanitizeDataExport || (this.sharedService.gridOptions.exportOptions && this.sharedService.gridOptions.exportOptions.sanitizeDataExport)) {
-                const outputString = typeof formattedOutput === 'string' ? formattedOutput : formattedOutput.text;
+                let outputString = formattedOutput as string;
+                if (formattedOutput && typeof formattedOutput === 'object' && formattedOutput.hasOwnProperty('text')) {
+                  outputString = formattedOutput.text;
+                }
+                if (outputString === null) {
+                  outputString = '';
+                }
                 return sanitizeHtmlToText(outputString);
               }
               return formattedOutput;

src/app/modules/angular-slickgrid/formatters/decimalFormatter.ts

@@ -3,8 +3,8 @@ import { decimalFormatted } from './../services/utilities';
 
 export const decimalFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
   const params = columnDef.params || {};
-  const minDecimalPlaces = params.minDecimalPlaces || params.decimalPlaces || 2;
-  const maxDecimalPlaces = params.maxDecimalPlaces || 2;
+  const minDecimalPlaces = (params.minDecimalPlaces !== null && params.minDecimalPlaces) || (params.decimalPlaces !== null && params.decimalPlaces) || 2;
+  const maxDecimalPlaces = (params.maxDecimalPlaces !== null && params.maxDecimalPlaces) || 2;
   const isNumber = (value === null || value === undefined) ? false : !isNaN(+value);
 
   return !isNumber ? value : `${decimalFormatted(value, minDecimalPlaces, maxDecimalPlaces)}`;

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

@@ -1,4 +1,4 @@
 import { Column } from './column.interface';
-import { FormatterResultObject } from './formatterResultObject';
+import { FormatterResultObject } from './formatterResultObject.interface';
 
 export declare type Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) => string | FormatterResultObject;

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

@@ -0,0 +1,13 @@
+export interface FormatterResultObject {
+  /** Optional CSS classes to add to the cell div */
+  addClasses?: string;
+
+  /** Optional CSS classes to remove from the cell div */
+  removeClasses?: string;
+
+  /** Text to be displayed in the cell, basically the formatter output */
+  text: string;
+
+  /** Optional tooltip text */
+  toolTip?: string;
+}

src/app/modules/angular-slickgrid/models/formatterResultObject.ts

@@ -45,7 +45,7 @@ export * from './filterConditionOption.interface';
 export * from './filterMultiplePassType.enum';
 export * from './filterMultiplePassTypeString';
 export * from './formatter.interface';
-export * from './formatterResultObject';
+export * from './formatterResultObject.interface';
 export * from './graphqlDatasetFilter.interface';
 export * from './graphqlCursorPaginationOption.interface';
 export * from './graphqlFilteringOption.interface';

src/app/modules/angular-slickgrid/models/index.ts

@@ -215,14 +215,29 @@ export class ExportService {
 
       let itemData = '';
 
-      if (exportCustomFormatter) {
-        const customFormattedData = exportCustomFormatter(row, col, itemObj[fieldId], columnDef, itemObj, this._grid);
-        itemData = typeof customFormattedData === 'string' ? customFormattedData : customFormattedData.text;
-      } else if (isEvaluatingFormatter && !!columnDef.formatter) {
+      if (itemObj && itemObj[fieldId] && exportCustomFormatter !== undefined && exportCustomFormatter !== null) {
+        const formattedData = exportCustomFormatter(row, col, itemObj[fieldId], columnDef, itemObj, this._grid);
+        itemData = formattedData as string;
+        if (formattedData && typeof formattedData === 'object' && formattedData.hasOwnProperty('text')) {
+          itemData = formattedData.text;
+        }
+        if (itemData === null) {
+          itemData = '';
+        }
+      } else if (isEvaluatingFormatter && columnDef.formatter !== undefined && columnDef.formatter !== null) {
         const formattedData = columnDef.formatter(row, col, itemObj[fieldId], columnDef, itemObj, this._grid);
-        itemData = typeof formattedData === 'string' ? formattedData : formattedData.text;
+        itemData = formattedData as string;
+        if (formattedData && typeof formattedData === 'object' && formattedData.hasOwnProperty('text')) {
+          itemData = formattedData.text;
+        }
+        if (itemData === null) {
+          itemData = '';
+        }
       } else {
         itemData = (itemObj[fieldId] === null || itemObj[fieldId] === undefined) ? '' : itemObj[fieldId];
+        if (itemData === null) {
+          itemData = '';
+        }
       }
 
       // does the user want to sanitize the output data (remove HTML tags)?