update slickgrid module( add bsdropdown service and formatter)

src/app/app.module.ts

@@ -50,7 +50,6 @@ import { SwtCommonGridComponent } from './examples/swt-common-grid.component';
 // https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
 import { AngularSlickgridModule } from './modules/angular-slickgrid/modules/angular-slickgrid.module';
 // import { SlickgridModule } from 'angular-slickgrid';
-import { BsDropDownService } from './examples/bsDropdown.service';
 
 // AoT requires an exported function for factories
 export function createTranslateLoader(http: HttpClient) {
@@ -148,7 +147,6 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     RowDetailViewComponent,
   ],
   providers: [
-    BsDropDownService,
     {
       provide: APP_INITIALIZER,
       useFactory: appInitializerFactory,

src/app/examples/custom-actionFormatter.component.ts

@@ -2,13 +2,13 @@ import { Component} from '@angular/core';
 
 @Component({
   template: `
-  <div id="myDrop" class="dropdown pointer" style="position:relative; z-index:12000;">
-    <button class="btn btn-default dropdown-toggle" type="button"
-       id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <div id="{{dropdownId}}" class="dropdown pointer" style="position:absolute; z-index:12000;">
+    <a class="dropdown-toggle"
+       id="{{dropDownTogleId}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Actions
       <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu padding10" aria-labelledby="dropdownMenu1">
+    </a>
+    <ul class="dropdown-menu padding10">
       <li><span class="text-primary text-center" >{{dataContext.title}}</span></li>
       <li role="separator" class="divider"></li>
       <li><span>Another action</span></li>
@@ -22,7 +22,10 @@ import { Component} from '@angular/core';
 })
 export class CustomActionFormatterComponent{
 
-  parent: any;
+  parent: any; // parent component context
   row: number;
   dataContext : any
+  dropdownId = 'myDrop';
+  dropDownTogleId = 'togleDrop';
+
 }

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

@@ -7,35 +7,24 @@ import {
   Editors,
   FieldType,
   Filters,
-  Formatter,
   Formatters,
   GridOption,
   OnEventArgs,
+  BsDropDownService,
 } from './../modules/angular-slickgrid';
 import { EditorNgSelectComponent } from './editor-ng-select.component';
 import { CustomActionFormatterComponent } from './custom-actionFormatter.component';
 import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
 import { CustomAngularComponentFilter } from './custom-angularComponentFilter';
 import { CustomTitleFormatterComponent } from './custom-titleFormatter.component';
 import { FilterNgSelectComponent } from './filter-ng-select.component';
-import { BsDropDownService } from './bsDropdown.service';
 
 // using external non-typed js libraries
 declare var Slick: any;
 declare var $: any;
 
 const NB_ITEMS = 100;
 
-const customActionFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
-  // use the same button text "Action" as the "CustomActionFormatterComponent" button text
-  // we basically recreate a dropdown on top of this one here which is just an empty one to show something in the grid
-  return `<div id="myDrop-r${row}-c${cell}" class="dropdown">
-    <a class="dropdown-toggle">
-      Action
-      <span class="caret"></span>
-    </a>
-  </div>`;;
-};
 
 @Component({
   templateUrl: './grid-angular.component.html',
@@ -83,7 +72,7 @@ export class GridAngularComponent implements OnInit {
     { id: '3', name: 'Paul' },
   ];
 
-  constructor(private angularUtilService: AngularUtilService, private translate: TranslateService, private bsDropdown : BsDropDownService) { }
+  constructor(private angularUtilService: AngularUtilService, private translate: TranslateService, private bsDropdown : BsDropDownService ) { }
 
   ngOnInit(): void {
     this.prepareGrid();
@@ -238,9 +227,11 @@ export class GridAngularComponent implements OnInit {
         name: 'Action',
         field: 'id',
         cssClass: 'pointer',
-        formatter: customActionFormatter,
+        formatter: Formatters.bsDropdown,
+        params: { label : 'Action' },
         minWidth: 40,
         onCellClick : (e: Event, args: OnEventArgs) => {
+
           this.bsDropdown.render(
             {
               grid: this.angularGrid,

src/app/modules/angular-slickgrid/formatters/__tests__/bsDropdownFormatter.spec.ts

@@ -0,0 +1,41 @@
+import { Column } from '../../models';
+import { bsDropdownFormatter } from '../bsDropdownFormatter';
+
+describe('the Bootstrap dropdown Formatter', () => {
+  it('should throw an error when omitting to pass "propertyNames" to "params"', () => {
+    expect(() => bsDropdownFormatter(0, 0, 'anything', {} as Column, {}))
+      .toThrowError('You must provide the "label" or "formatterLabel" via the generic "params"');
+  });
+
+  it('should always return a dropdown template with the label provided in the "label" property from "params"', () => {
+    const input = null;
+    const label = 'Action';
+    const row = 0;
+    const cell = 0;
+    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {});
+
+    expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`);
+
+  });
+
+  it('should always return a a dropdown template with the label provided in the "formatterLabel" property from "params"', () => {
+    const input = null;
+    const label = 'Action';
+    const row = 0;
+    const cell = 0;
+    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {});
+
+    expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`);
+
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Column } from './../models/column.interface';
+import { Formatter } from './../models/formatter.interface';
+
+export const bsDropdownFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
+  const columnParams = columnDef && columnDef.params || {};
+  const label = columnParams.label || columnParams.formatterLabel;
+
+  if (!label) {
+    throw new Error(`You must provide the "label" or "formatterLabel" via the generic "params" options (e.g.: { formatter: Formatters.bsDropdown, params: { formatterLabel: 'Label' }}`);
+  }
+
+  return `<div id="myDrop-r${row}-c${cell}" class="dropdown">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`;
+};

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

@@ -30,6 +30,7 @@ import { translateFormatter } from './translateFormatter';
 import { translateBooleanFormatter } from './translateBooleanFormatter';
 import { uppercaseFormatter } from './uppercaseFormatter';
 import { yesNoFormatter } from './yesNoFormatter';
+import { bsDropdownFormatter } from './bsDropdownFormatter';
 
 /** Provides a list of different Formatters that will change the cell value displayed in the UI */
 export const Formatters = {
@@ -47,6 +48,9 @@ export const Formatters = {
   /** show value in bold font weight */
   bold: boldFormatter,
 
+  /** boostrap dropdown formatter */
+  bsDropdown : bsDropdownFormatter,
+
   /** When value is filled (true), it will display a checkbox Unicode icon */
   checkbox: checkboxFormatter,
 

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

@@ -1,7 +1,7 @@
 // Public classes.
 export * from './models/index';
 export * from './services/index';
-
+export * from './services/bsDropdown.service';
 export * from './aggregators/index';
 export * from './editors/index';
 export * from './extensions/index';

src/app/modules/angular-slickgrid/modules/angular-slickgrid.module.ts

@@ -9,6 +9,7 @@ import { GraphqlService } from './../services/graphql.service';
 import { GridOdataService } from './../services/grid-odata.service';
 import { GridOption } from './../models/gridOption.interface';
 import { SlickPaginationComponent } from './../components/slick-pagination.component';
+import { BsDropDownService } from '../services/bsDropdown.service';
 
 
 @NgModule({
@@ -36,7 +37,8 @@ export class AngularSlickgridModule {
         CollectionService,
         FilterFactory,
         GraphqlService,
-        GridOdataService
+        GridOdataService,
+        BsDropDownService
       ]
     };
   }

src/app/examples/bsDropdown.service.ts → src/app/modules/angular-slickgrid/services/bsDropdown.service.ts

@@ -1,5 +1,7 @@
-import { AngularGridInstance, AngularUtilService } from './../modules/angular-slickgrid';
+
 import { Injectable } from '@angular/core';
+import { AngularGridInstance } from './../models/index';
+import { AngularUtilService } from './angularUtil.service';
 
 
 interface DropDownServiceParams {
@@ -20,8 +22,12 @@ export class BsDropDownService {
   render(Params: DropDownServiceParams) {
     const { grid, formatter, args, parent} = Params;
 
-    const myDropId = 'myDrop';
-    const dropdownMenuId = 'dropdownMenu1';
+
+    // get dropdown ids
+    const drop = new formatter();
+
+    const myDropId = drop.dropdownId || 'myDrop';
+    const dropDownTogleId = drop.dropDownTogleId || 'dropdownMenu1';
 
     $('#'+ myDropId).remove(); // make sure to remove previous Action dropdown, you don't want to have 100 after a 100 clicks...
     const cell = args.cell;
@@ -45,7 +51,7 @@ export class BsDropDownService {
       elm.css('top', cellPos.top + 30);
       elm.css('left', cellPos.left);
       $(`#${myDropId}`).addClass('open');
-      $(`#${dropdownMenuId}`).hide();
+      $(`#${dropDownTogleId}`).hide();
       // check if it should drop up or drop down
       var offset = 35;
       const iElement = $('.dropdown-menu');

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

@@ -1,5 +1,6 @@
 export * from './angularUtil.service';
 export * from './backend-utilities';
+export * from './bsDropdown.service';
 export * from './collection.service';
 export * from './export.service';
 export * from './extension.service';