feat(footer): add option to customize right footer text

ghiscoding · Jun 15, 2021 · 2ea41cc · 2ea41cc
1 parent d2e5685
commit 2ea41cc
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 91 deletions.
diff --git a/packages/common/src/interfaces/customFooterOption.interface.ts b/packages/common/src/interfaces/customFooterOption.interface.ts
@@ -1,7 +1,7 @@
 import { MetricTexts } from './metricTexts.interface';
 
 export interface CustomFooterOption {
-  /** Optionally pass some text to be displayed on the left side (in the "left-footer" css class) */
+  /** Optionally provide some text to be displayed on the left side of the footer (in the "left-footer" css class) */
   leftFooterText?: string;
 
   /** CSS class used for the left container */
@@ -39,4 +39,7 @@ export interface CustomFooterOption {
 
   /** CSS class used for the right container */
   rightContainerClass?: string;
+
+  /** Optionally provide some text to be displayed on the right side of the footer (in the "right-footer" css class) */
+  rightFooterText?: string;
 }
diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss
@@ -24,7 +24,7 @@
     float: $footer-left-float;
   }
 
-  .right-footer.metrics {
+  .right-footer {
     color: $footer-right-text-color;
     text-align: $footer-right-text-align;
     font-style: $footer-right-font-style;
@@ -33,7 +33,7 @@
     padding: $footer-right-padding;
     width: $footer-right-width;
     float: $footer-right-float;
-    .separator {
+    &.metrics .separator {
       margin: $footer-right-separator-margin;
     }
   }

diff --git a/packages/vanilla-bundle/src/components/__tests__/slick-footer.spec.ts b/packages/vanilla-bundle/src/components/__tests__/slick-footer.spec.ts
@@ -1,3 +1,4 @@
+import 'jest-extended';
 import { CustomFooterOption, GridOption, SlickGrid } from '@slickgrid-universal/common';
 import { SlickFooterComponent } from '../slick-footer.component';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -67,7 +68,7 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(translateService.getCurrentLanguage()).toBe('en');
       expect(footerContainerElm).toBeTruthy();
@@ -85,7 +86,7 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer') as HTMLSpanElement;
 
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
@@ -101,18 +102,18 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics ">
-          <span class="timestamp"><span><span class="text-last-update">some last update</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span>
+        `<span class="timestamp"><span><span class="text-last-update">some last update</span>
+        <span class="last-update-timestamp">2019-05-03, 12:00:01am</span>
           <span class="separator"> | </span></span></span>
-          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
-        </div>`));
+          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span>
+          <span class="text-items">some items</span>`));
     });
 
     it('should create a the Slick-Footer component in the DOM with metrics but without timestamp when hidding it', () => {
@@ -125,17 +126,16 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics ">
-          <span class="timestamp"></span>
-          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
-        </div>`));
+        `<span class="timestamp"></span>
+          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span>
+          <span class="text-items">some items</span>`));
     });
 
     it('should create a the Slick-Footer component in the DOM with metrics but without timestamp neither totalCount when hidding it', () => {
@@ -149,17 +149,16 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics ">
-          <span class="timestamp"></span>
-          <span class="item-count">7</span><span class="text-items">some items</span>
-        </div>`));
+        `<span class="timestamp"></span>
+          <span class="item-count">7</span>
+          <span class="text-items">some items</span>`));
     });
 
     it('should create a the Slick-Footer component in the DOM and expect to use default English locale when none of the metricsText are defined', () => {
@@ -171,18 +170,18 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics ">
-          <span class="timestamp"><span><span class="text-last-update">Last Update</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span>
+        `<span class="timestamp"><span><span class="text-last-update">Last Update</span>
+        <span class="last-update-timestamp">2019-05-03, 12:00:01am</span>
           <span class="separator"> | </span></span></span>
-          <span class="item-count">7</span><span class="text-of">of</span><span class="total-count">99</span><span class="text-items">items</span>
-        </div>`));
+          <span class="item-count">7</span><span class="text-of">of</span><span class="total-count">99</span>
+          <span class="text-items">items</span>`));
     });
 
     it('should create a the Slick-Footer component in the DOM and use different locale when enableTranslate is enabled', () => {
@@ -196,17 +195,34 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics ">
-          <span class="timestamp"><span><span class="text-last-update">Dernière mise à jour</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
-          <span class="item-count">7</span><span class="text-of">de</span><span class="total-count">99</span><span class="text-items">éléments</span>
-        </div>`));
+        `<span class="timestamp"><span><span class="text-last-update">Dernière mise à jour</span>
+          <span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
+          <span class="item-count">7</span><span class="text-of">de</span><span class="total-count">99</span>
+          <span class="text-items">éléments</span>`));
+    });
+
+    it('should read initial custom left text from grid options and display it on the left side footer section when calling the leftFooterText SETTER', () => {
+      mockGridOptions.enableCheckboxSelector = true;
+      const customFooterOptions = mockGridOptions.customFooterOptions as CustomFooterOption;
+      customFooterOptions.leftFooterText = 'initial left footer text';
+      component = new SlickFooterComponent(gridStub, customFooterOptions, translateService);
+      component.renderFooter(div);
+      component.metrics = { startTime: mockTimestamp, endTime: mockTimestamp, itemCount: 7, totalItemCount: 99 };
+
+      const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
+      const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
+
+      expect(component.eventHandler).toEqual(expect.toBeObject());
+      expect(footerContainerElm).toBeTruthy();
+      expect(leftFooterElm).toBeTruthy();
+      expect(leftFooterElm.innerHTML).toBe('initial left footer text');
     });
 
     it('should display custom text on the left side footer section when calling the leftFooterText SETTER', () => {
@@ -218,18 +234,17 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(component.eventHandler).toEqual(expect.toBeObject());
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('custom left footer text');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics ">
-          <span class="timestamp"><span><span class="text-last-update">some last update</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
-          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
-        </div>`));
+        `<span class="timestamp"><span><span class="text-last-update">some last update</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
+          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span>
+          <span class="text-items">some items</span>`));
     });
 
     it('should display 1 items selected on the left side footer section after triggering "onSelectedRowsChanged" event', () => {
@@ -241,19 +256,18 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(component.eventHandler).toEqual(expect.toBeObject());
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('1 items selected');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics ">
-          <span class="timestamp"><span><span class="text-last-update">some last update</span>
+        `<span class="timestamp"><span><span class="text-last-update">some last update</span>
           <span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
-          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
-        </div>`));
+          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span>
+          <span class="text-items">some items</span>`));
 
       gridStub.onSelectedRowsChanged.notify({ rows: [1, 2, 3, 4, 5], grid: gridStub, previousSelectedRows: [] });
       expect(leftFooterElm.innerHTML).toBe('5 items selected');
@@ -269,18 +283,18 @@ describe('Slick-Footer Component', () => {
 
       const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
       const leftFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.left-footer') as HTMLSpanElement;
-      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.metrics') as HTMLSpanElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer.metrics') as HTMLSpanElement;
 
       expect(component.eventHandler).toEqual(expect.toBeObject());
       expect(footerContainerElm).toBeTruthy();
       expect(leftFooterElm).toBeTruthy();
       expect(rightFooterElm).toBeTruthy();
       expect(leftFooterElm.innerHTML).toBe('');
       expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
-        `<div class="right-footer metrics "><span class="timestamp"><span><span class="text-last-update">some last update</span>
+        `<span class="timestamp"><span><span class="text-last-update">some last update</span>
           <span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
-          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
-          </div>`));
+          <span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span>
+          <span class="text-items">some items</span>`));
     });
 
     it('should display row selection count on the left side footer section after triggering "onSelectedRowsChanged" event', () => {
@@ -318,5 +332,38 @@ describe('Slick-Footer Component', () => {
       gridStub.onSelectedRowsChanged.notify({ rows: [1], previousSelectedRows: [], grid: gridStub, });
       expect(component.leftFooterText).toBe('0 items selected');
     });
+
+    it('should read initial custom right text from grid options and display it on the right side footer section when calling the rightFooterText SETTER', () => {
+      mockGridOptions.enableCheckboxSelector = true;
+      const customFooterOptions = mockGridOptions.customFooterOptions as CustomFooterOption;
+      customFooterOptions.rightFooterText = 'initial right footer text';
+      component = new SlickFooterComponent(gridStub, customFooterOptions, translateService);
+      component.renderFooter(div);
+      component.metrics = { startTime: mockTimestamp, endTime: mockTimestamp, itemCount: 7, totalItemCount: 99 };
+
+      const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer') as HTMLSpanElement;
+
+      expect(component.eventHandler).toEqual(expect.toBeObject());
+      expect(footerContainerElm).toBeTruthy();
+      expect(rightFooterElm).toBeTruthy();
+      expect(rightFooterElm.innerHTML).toBe('initial right footer text');
+    });
+
+    it('should display custom text on the right side footer section when calling the rightFooterText SETTER', () => {
+      mockGridOptions.enableCheckboxSelector = true;
+      component = new SlickFooterComponent(gridStub, mockGridOptions.customFooterOptions as CustomFooterOption, translateService);
+      component.renderFooter(div);
+      component.metrics = { startTime: mockTimestamp, endTime: mockTimestamp, itemCount: 7, totalItemCount: 99 };
+      component.rightFooterText = 'custom right footer text';
+
+      const footerContainerElm = document.querySelector('div.slick-custom-footer.slickgrid_123456') as HTMLDivElement;
+      const rightFooterElm = document.querySelector('div.slick-custom-footer.slickgrid_123456 > div.right-footer') as HTMLSpanElement;
+
+      expect(component.eventHandler).toEqual(expect.toBeObject());
+      expect(footerContainerElm).toBeTruthy();
+      expect(rightFooterElm).toBeTruthy();
+      expect(rightFooterElm.innerHTML).toBe('custom right footer text');
+    });
   });
 });