From 56d91e7ee88b95dd677041514d30b3c88aedfe1a Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Tue, 17 Nov 2020 15:09:29 -0500 Subject: [PATCH 1/2] feat(formatters): add AlignRight and AlignCenter Formatters - 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 --- .../__tests__/alignRightFormatter.spec.ts | 32 ++++++++++++++++++ .../__tests__/centerFormatter.spec.ts | 33 +++++++++++++++++++ .../formatters/alignRightFormatter.ts | 10 ++++++ .../formatters/centerFormatter.ts | 10 ++++++ .../angular-slickgrid/formatters/index.ts | 11 +++++++ 5 files changed, 96 insertions(+) create mode 100644 src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts create mode 100644 src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts create mode 100644 src/app/modules/angular-slickgrid/formatters/alignRightFormatter.ts create mode 100644 src/app/modules/angular-slickgrid/formatters/centerFormatter.ts diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts new file mode 100644 index 000000000..b057a69a9 --- /dev/null +++ b/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts @@ -0,0 +1,32 @@ +import { Column } from '../../models/column.interface'; +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('
'); + }); + + 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('
'); + expect(output2).toBe('
'); + }); + + it('should return a string all in uppercase', () => { + const output = alignRightFormatter(1, 1, 'hello', {} as Column, {}); + expect(output).toBe('
hello
'); + }); + + it('should return a number as a string', () => { + const output = alignRightFormatter(1, 1, 99, {} as Column, {}); + expect(output).toBe('
99
'); + }); + + it('should return a boolean as a string all in uppercase', () => { + const output = alignRightFormatter(1, 1, false, {} as Column, {}); + expect(output).toBe('
false
'); + }); +}); diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts new file mode 100644 index 000000000..aca11c7ef --- /dev/null +++ b/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts @@ -0,0 +1,33 @@ +import { Column } from '../../models/column.interface'; +import { centerFormatter } from '../centerFormatter'; + +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('
'); + }); + + 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('
'); + expect(output2).toBe('
'); + }); + + + it('should return a string all in uppercase', () => { + const output = centerFormatter(1, 1, 'hello', {} as Column, {}); + expect(output).toBe('
hello
'); + }); + + it('should return a number as a string', () => { + const output = centerFormatter(1, 1, 99, {} as Column, {}); + expect(output).toBe('
99
'); + }); + + it('should return a boolean as a string all in uppercase', () => { + const output = centerFormatter(1, 1, false, {} as Column, {}); + expect(output).toBe('
false
'); + }); +}); diff --git a/src/app/modules/angular-slickgrid/formatters/alignRightFormatter.ts b/src/app/modules/angular-slickgrid/formatters/alignRightFormatter.ts new file mode 100644 index 000000000..ed46bdc43 --- /dev/null +++ b/src/app/modules/angular-slickgrid/formatters/alignRightFormatter.ts @@ -0,0 +1,10 @@ +import { Formatter } from './../models/index'; + +export const alignRightFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => { + let outputValue = value; + + if (value === null || value === undefined) { + outputValue = ''; + } + return `
${outputValue}
`; +}; diff --git a/src/app/modules/angular-slickgrid/formatters/centerFormatter.ts b/src/app/modules/angular-slickgrid/formatters/centerFormatter.ts new file mode 100644 index 000000000..76064d8c7 --- /dev/null +++ b/src/app/modules/angular-slickgrid/formatters/centerFormatter.ts @@ -0,0 +1,10 @@ +import { Formatter } from './../models/index'; + +export const centerFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => { + let outputValue = value; + + if (value === null || value === undefined) { + outputValue = ''; + } + return `
${outputValue}
`; +}; diff --git a/src/app/modules/angular-slickgrid/formatters/index.ts b/src/app/modules/angular-slickgrid/formatters/index.ts index 7721d045b..687c5475d 100644 --- a/src/app/modules/angular-slickgrid/formatters/index.ts +++ b/src/app/modules/angular-slickgrid/formatters/index.ts @@ -1,8 +1,10 @@ import { FieldType } from '../models/index'; import { getAssociatedDateFormatter } from './formatterUtilities'; +import { alignRightFormatter } from './alignRightFormatter'; import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter'; import { arrayToCsvFormatter } from './arrayToCsvFormatter'; import { boldFormatter } from './boldFormatter'; +import { centerFormatter } from './centerFormatter'; import { checkboxFormatter } from './checkboxFormatter'; import { checkmarkFormatter } from './checkmarkFormatter'; import { collectionFormatter } from './collectionFormatter'; @@ -36,6 +38,12 @@ import { bsDropdownFormatter } from './bsDropdownFormatter'; /** 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 @@ -53,6 +61,9 @@ export const Formatters = { /** boostrap dropdown formatter */ bsDropdown: bsDropdownFormatter, + /** Center a text value horizontally */ + center: centerFormatter, + /** When value is filled (true), it will display a checkbox Unicode icon */ checkbox: checkboxFormatter, From bd653d4af8f22f1bc56e90702917a2c685b710c8 Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Tue, 17 Nov 2020 15:10:05 -0500 Subject: [PATCH 2/2] refactor: small typo --- .../formatters/__tests__/treeFormatter.spec.ts | 2 +- .../formatters/__tests__/yesNoFormatter.spec.ts | 2 +- src/app/modules/angular-slickgrid/formatters/boldFormatter.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts index b47c1ad5b..403f21fdc 100644 --- a/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts +++ b/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts @@ -12,7 +12,7 @@ const gridStub = { getOptions: jest.fn(), }; -describe('the Uppercase Formatter', () => { +describe('Tree Formatter', () => { let dataset; let mockGridOptions: GridOption; diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts index 493b346cd..80361804e 100644 --- a/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts +++ b/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts @@ -1,7 +1,7 @@ import { Column } from '../../models'; 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'); diff --git a/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts b/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts index 9e196c369..4ea3fe233 100644 --- a/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts +++ b/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts @@ -1,5 +1,5 @@ import { Column, Formatter } from './../models/index'; -export const boldFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => { +export const boldFormatter: Formatter = (row: number, cell: number, value: any) => { return value ? `${value}` : ''; };