From 5ba9423200e60460c22f05253901707ef7055782 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Fri, 11 Jun 2021 14:27:43 -0400
Subject: [PATCH] feat(formatters): add Bootstrap Dropdown Formatter - add this
 missing Formatter that was available in Angular-Slickgrid

---
 .../__tests__/bsDropdownFormatter.spec.ts     | 39 +++++++++++++++++++
 .../src/formatters/bsDropdownFormatter.ts     | 18 +++++++++
 .../common/src/formatters/formatters.index.ts |  7 ++++
 packages/common/src/formatters/index.ts       |  1 +
 4 files changed, 65 insertions(+)
 create mode 100644 packages/common/src/formatters/__tests__/bsDropdownFormatter.spec.ts
 create mode 100644 packages/common/src/formatters/bsDropdownFormatter.ts

diff --git a/packages/common/src/formatters/__tests__/bsDropdownFormatter.spec.ts b/packages/common/src/formatters/__tests__/bsDropdownFormatter.spec.ts
new file mode 100644
index 000000000..2d12375c9
--- /dev/null
+++ b/packages/common/src/formatters/__tests__/bsDropdownFormatter.spec.ts
@@ -0,0 +1,39 @@
+import { Column, SlickGrid } from '../../interfaces';
+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, {}, {} as SlickGrid))
+      .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, {}, {} as SlickGrid);
+
+    expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown pointer">
+    <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, {}, {} as SlickGrid);
+
+    expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown pointer">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`);
+  });
+});
\ No newline at end of file
diff --git a/packages/common/src/formatters/bsDropdownFormatter.ts b/packages/common/src/formatters/bsDropdownFormatter.ts
new file mode 100644
index 000000000..2f519990a
--- /dev/null
+++ b/packages/common/src/formatters/bsDropdownFormatter.ts
@@ -0,0 +1,18 @@
+import { Formatter } from '../interfaces/formatter.interface';
+
+/** A simple Bootstrap Dropdown Formatter which requires a Formatter Label */
+export const bsDropdownFormatter: Formatter = (row, cell, _val, columnDef) => {
+  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 pointer">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`;
+};
\ No newline at end of file
diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts
index 833782ce5..c8f8036a1 100644
--- a/packages/common/src/formatters/formatters.index.ts
+++ b/packages/common/src/formatters/formatters.index.ts
@@ -4,6 +4,7 @@ import { alignRightFormatter } from './alignRightFormatter';
 import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter';
 import { arrayToCsvFormatter } from './arrayToCsvFormatter';
 import { boldFormatter } from './boldFormatter';
+import { bsDropdownFormatter } from './bsDropdownFormatter';
 import { centerFormatter } from './centerFormatter';
 import { checkboxFormatter } from './checkboxFormatter';
 import { checkmarkFormatter } from './checkmarkFormatter';
@@ -60,6 +61,12 @@ export const Formatters = {
   /** show value in bold font weight */
   bold: boldFormatter,
 
+  /**
+   * a simple Bootstrap Dropdown Formatter which requires a Formatter Label
+   * example:: { formatter: Formatters.bsDropdown, params: { formatterLabel: 'Label' }}
+   */
+  bsDropdown: bsDropdownFormatter,
+
   /** Center a text value horizontally */
   center: centerFormatter,
 
diff --git a/packages/common/src/formatters/index.ts b/packages/common/src/formatters/index.ts
index 8fae8b29c..21efc2e24 100644
--- a/packages/common/src/formatters/index.ts
+++ b/packages/common/src/formatters/index.ts
@@ -2,6 +2,7 @@ export * from './alignRightFormatter';
 export * from './arrayObjectToCsvFormatter';
 export * from './arrayToCsvFormatter';
 export * from './boldFormatter';
+export * from './bsDropdownFormatter';
 export * from './centerFormatter';
 export * from './checkboxFormatter';
 export * from './checkmarkMaterialFormatter';