feat(formatters): add AlignRight Formatter & alias AlignCenter=>Center (

#161)

* feat(formatters): add AlignRight Formatter & alias AlignCenter=>Center
- center already existed but we can add alignCenter to be in line with the other alignRight formatter
- note also that there's no need for alignLeft since everything is aligned to the left in SlickGrid

packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts

@@ -0,0 +1,32 @@
+import { Column } from '../../interfaces/index';
+import { alignRightFormatter } from '../alignRightFormatter';
+
+describe('Right Alignment Formatter', () => {
+  it('should return an empty string when no value is passed', () => {
+    const output = alignRightFormatter(1, 1, '', {} as Column, {});
+    expect(output).toBe('<div style="float: right"></div>');
+  });
+
+  it('should return an empty string when value is null or undefined', () => {
+    const output1 = alignRightFormatter(1, 1, null, {} as Column, {});
+    const output2 = alignRightFormatter(1, 1, undefined, {} as Column, {});
+
+    expect(output1).toBe('<div style="float: right"></div>');
+    expect(output2).toBe('<div style="float: right"></div>');
+  });
+
+  it('should return a string all in uppercase', () => {
+    const output = alignRightFormatter(1, 1, 'hello', {} as Column, {});
+    expect(output).toBe('<div style="float: right">hello</div>');
+  });
+
+  it('should return a number as a string', () => {
+    const output = alignRightFormatter(1, 1, 99, {} as Column, {});
+    expect(output).toBe('<div style="float: right">99</div>');
+  });
+
+  it('should return a boolean as a string all in uppercase', () => {
+    const output = alignRightFormatter(1, 1, false, {} as Column, {});
+    expect(output).toBe('<div style="float: right">false</div>');
+  });
+});

packages/common/src/formatters/__tests__/centerFormatter.spec.ts

@@ -1,12 +1,21 @@
 import { Column } from '../../interfaces/index';
 import { centerFormatter } from '../centerFormatter';
 
-describe('the Uppercase Formatter', () => {
+describe('Center Alignment Formatter', () => {
   it('should return an empty string when no value is passed', () => {
     const output = centerFormatter(1, 1, '', {} as Column, {});
     expect(output).toBe('<center></center>');
   });
 
+  it('should return an empty string when value is null or undefined', () => {
+    const output1 = centerFormatter(1, 1, null, {} as Column, {});
+    const output2 = centerFormatter(1, 1, undefined, {} as Column, {});
+
+    expect(output1).toBe('<center></center>');
+    expect(output2).toBe('<center></center>');
+  });
+
+
   it('should return a string all in uppercase', () => {
     const output = centerFormatter(1, 1, 'hello', {} as Column, {});
     expect(output).toBe('<center>hello</center>');

packages/common/src/formatters/__tests__/treeFormatter.spec.ts

@@ -12,7 +12,7 @@ const gridStub = {
   getOptions: jest.fn(),
 } as unknown as SlickGrid;
 
-describe('the Uppercase Formatter', () => {
+describe('Tree Formatter', () => {
   let dataset;
   let mockGridOptions: GridOption;
 

packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts

@@ -1,7 +1,7 @@
 import { Column } from '../../interfaces/index';
 import { yesNoFormatter } from '../yesNoFormatter';
 
-describe('the Uppercase Formatter', () => {
+describe('Yes/No Formatter', () => {
   it('should return a "Yes" string when value is passed', () => {
     const output = yesNoFormatter(1, 1, 'blah', {} as Column, {});
     expect(output).toBe('Yes');

packages/common/src/formatters/alignRightFormatter.ts

@@ -0,0 +1,10 @@
+import { Formatter } from './../interfaces/index';
+
+export const alignRightFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => {
+  let outputValue = value;
+
+  if (value === null || value === undefined) {
+    outputValue = '';
+  }
+  return `<div style="float: right">${outputValue}</div>`;
+};

packages/common/src/formatters/centerFormatter.ts

@@ -1,9 +1,10 @@
 import { Formatter } from './../interfaces/index';
 
 export const centerFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => {
-  // make sure the value is a string
-  if (value !== undefined && typeof value !== 'string') {
-    value = value + '';
+  let outputValue = value;
+
+  if (value === null || value === undefined) {
+    outputValue = '';
   }
-  return `<center>${value}</center>`;
+  return `<center>${outputValue}</center>`;
 };

packages/common/src/formatters/formatters.index.ts

@@ -1,5 +1,6 @@
 import { FieldType } from '../enums/index';
 import { getAssociatedDateFormatter } from './formatterUtilities';
+import { alignRightFormatter } from './alignRightFormatter';
 import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter';
 import { arrayToCsvFormatter } from './arrayToCsvFormatter';
 import { boldFormatter } from './boldFormatter';
@@ -38,6 +39,12 @@ import { yesNoFormatter } from './yesNoFormatter';
 
 /** Provides a list of different Formatters that will change the cell value displayed in the UI */
 export const Formatters = {
+  /** Align cell value to the center (alias to Formatters.center)  */
+  alignCenter: centerFormatter,
+
+  /** Align cell value to the right */
+  alignRight: alignRightFormatter,
+
   /**
    * Takes an array of complex objects converts it to a comma delimited string.
    * Requires to pass an array of "propertyNames" in the column definition the generic "params" property

packages/common/src/formatters/index.ts

@@ -1,3 +1,4 @@
+export * from './alignRightFormatter';
 export * from './arrayObjectToCsvFormatter';
 export * from './arrayToCsvFormatter';
 export * from './boldFormatter';