@zeedhi/teknisa-components-common 1.90.1 → 1.92.0

package/tests/unit/components/tek-grid/grid.spec.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 
 import {
-  Button, Dropdown, IButton, IModal, Modal, ModalService, Search, TextInput, Text, Report,
+  Button, Dropdown, IModal, Modal, ModalService, Search, TextInput, Text, Report,
 } from '@zeedhi/common';
 import {
-  KeyMap, Http, Metadata, IDictionary,
+  KeyMap, Http, Metadata, IDictionary, IEventParam,
 } from '@zeedhi/core';
 import {
   ITekGrid,
@@ -157,48 +157,6 @@ describe('TekGrid', () => {
       expect(instance.toolbarSlot.length).toBe(0);
     });
 
-    it('should create default export buttons from exportConfig', () => {
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-      });
-
-      expect((instance as any).gridBase.exportConfigButtons[0].label).toBe('Export as PDF');
-      expect((instance as any).gridBase.exportConfigButtons[0].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[0].name).toBe('grid_export_pdf_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[0].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[0].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[0].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[1].label).toBe('Export as XLS TEKGRID_WITHOUT_GROUPS');
-      expect((instance as any).gridBase.exportConfigButtons[1].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[1].name).toBe('grid_export_xls_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[1].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[1].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[1].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[2].label).toBe('Export as XLS TEKGRID_WITH_GROUPS');
-      expect((instance as any).gridBase.exportConfigButtons[2].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[2].name).toBe('grid_export_xls2_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[2].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[2].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[2].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[3].label).toBe('Export as XLS TEKGRID_GRID_MIRROR');
-      expect((instance as any).gridBase.exportConfigButtons[3].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[3].name).toBe('grid_export_xls3_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[3].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[3].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[3].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[4].label).toBe('Export as CSV');
-      expect((instance as any).gridBase.exportConfigButtons[4].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[4].name).toBe('grid_export_csv_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[4].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[4].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[4].events).toBeDefined();
-    });
-
     it('should change export buttons from exportConfig', () => {
       const instance = new TekGrid({
         name: 'grid',
@@ -243,44 +201,14 @@ describe('TekGrid', () => {
       httpReportSpy.mockReset();
     });
 
-    it('should call getReport on export button click', () => {
-      (window as any).open = jest.fn();
-
-      const instance = new TekGrid({
-        name: 'grid_getReport',
-        component: 'TekGrid',
-        events: {
-          beforeOpenReport: jest.fn(),
-        },
-      });
-
-      instance.onCreated();
-
-      const buttonProps = (instance as any).gridBase.exportConfigButtons[0] as IButton;
-      const button = new Button(buttonProps);
-
-      const event = new Event('click');
-      button.click(event, {} as HTMLElement);
-
-      expect(reportSpy).toBeCalledTimes(1);
-
-      (window as any).open.mockClear();
-    });
-
     it('should call window open on getReport method', async () => {
       (window as any).open = jest.fn();
 
       const instance = new TekGrid({
         name: 'grid',
         component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          uniqueKey: 'id',
-          route: '/zeedhi',
-          lazyLoad: true,
-          data: [
-            { id: '1', department_id: '1' },
-          ],
+        events: {
+          beforeOpenReport: jest.fn(),
         },
         columns: [
           {
@@ -1419,7 +1347,7 @@ describe('TekGrid', () => {
       expect(instance.groupedData[5].salary).toBe(50);
     });
 
-    it('should aggregation with different functions', async () => {
+    it('should aggregate with different functions', async () => {
       const instance = createAndMount({
         name: 'grid_aggregate_4',
         component: 'TekGrid',
@@ -1491,6 +1419,88 @@ describe('TekGrid', () => {
       expect(instance.groupedData[6].column_count).toBe(3);
     });
 
+    it('should aggregate using calcSummary event', async () => {
+      const doCalcSummary = ({ summary, rowValue }: IEventParam<any>) => {
+        summary.sum = `${(summary.sum || '')}${rowValue}`;
+        summary.avg = `${summary.sum}/${summary.count}`;
+        summary.max = summary.max === undefined || summary.max < rowValue ? rowValue : summary.max;
+        summary.min = summary.min === undefined || summary.min > rowValue ? rowValue : summary.min;
+      };
+
+      const instance = createAndMount({
+        name: 'grid_aggregate_5',
+        component: 'TekGrid',
+        showSummaryTotal: true,
+        events: {
+          calcSummary: doCalcSummary,
+        },
+        columns: [
+          {
+            name: 'id',
+            label: 'id',
+          },
+          {
+            name: 'column_sum',
+            label: 'sum',
+            aggregation: 'SUM',
+          },
+          {
+            name: 'column_min',
+            label: 'min',
+            aggregation: 'MIN',
+          },
+          {
+            name: 'column_max',
+            label: 'max',
+            aggregation: 'MAX',
+          },
+          {
+            name: 'column_avg',
+            label: 'avg',
+            aggregation: 'AVG',
+          },
+          {
+            name: 'column_count',
+            label: 'count',
+            aggregation: 'COUNT',
+          },
+          {
+            name: 'department',
+            label: 'department',
+            grouped: true,
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data: [
+            {
+              id: 1, department: 1, column_sum: 'd', column_min: 'd', column_max: 'd', column_avg: 'd', column_count: 'd',
+            },
+            {
+              id: 2, department: 1, column_sum: 'b', column_min: 'b', column_max: 'b', column_avg: 'b', column_count: 'b',
+            },
+            {
+              id: 3, department: 1, column_sum: 'a', column_min: 'a', column_max: 'a', column_avg: 'a', column_count: 'a',
+            },
+            {
+              id: 4, department: 1, column_sum: 'c', column_min: 'c', column_max: 'c', column_avg: 'c', column_count: 'c',
+            },
+          ],
+        },
+      });
+
+      await flushPromises();
+
+      expect(instance.datasource.data.length).toBe(4);
+      expect(instance.groupedData.length).toBe(7);
+      expect(instance.groupedData[6].groupSummary).toBeTruthy();
+      expect(instance.groupedData[6].column_sum).toBe('dbac');
+      expect(instance.groupedData[6].column_min).toBe('a');
+      expect(instance.groupedData[6].column_max).toBe('d');
+      expect(instance.groupedData[6].column_avg).toBe('dbac/4');
+      expect(instance.groupedData[6].column_count).toBe(4);
+    });
+
     it('should group data on rest datasource with lazyLoad', async () => {
       const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
         data: {

package/tests/unit/components/tek-user-info/TekUserInfoContoller.spec.ts

@@ -133,22 +133,8 @@ describe('TekUserInfoController', () => {
       });
       const controller = new TekUserInfoController(component);
 
-      expect(controller.defaultEmail).toBe('zeedhi@zd.com');
       expect(controller.hasDefaultEmail).toBeTruthy();
     });
-
-    it('when prop is defined, should set the component value', () => {
-      const component = new TekUserInfo({
-        name: 'user-info',
-        component: 'TekUserInfo',
-      });
-      const controller = new TekUserInfoController(component);
-
-      controller.defaultEmail = 'teste@email.com';
-
-      expect(controller.defaultEmail).toBe('teste@email.com');
-      expect(component.defaultEmail).toBe('teste@email.com');
-    });
   });
 
   describe('mainVersion property', () => {

package/tests/unit/components/tek-user-info/tek-user-info.spec.ts

@@ -192,7 +192,7 @@ describe('TekUserInfo', () => {
                 name: 'report_email',
                 component: 'ZdTextInput',
                 label: 'E-mail',
-                value: '{{TekUserInfoController_1.defaultEmail}}',
+                value: 'zeedhi@zd.com',
               },
               {
                 name: 'report_cc',

package/tests/unit/components/tree-grid/tree-grid.spec.ts

@@ -477,44 +477,53 @@ describe('TekTreeGrid', () => {
       httpReportSpy.mockClear();
     });
 
-    it('should call getReport on export button click', () => {
+    it('should call window open on getReport method', async () => {
       (window as any).open = jest.fn();
 
       const instance = new TekTreeGrid({
-        name: 'grid_getReport',
+        name: 'grid',
         component: 'TekTreeGrid',
         events: {
           beforeOpenReport: jest.fn(),
         },
+        datasource: {
+          type: 'tek-rest',
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          lazyLoad: false,
+          data: [
+            { id: '1', department_id: '1' },
+          ],
+        },
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+          },
+          {
+            name: 'department_id',
+            label: 'Department ID',
+          },
+        ],
       });
 
-      instance.onCreated();
-
-      const buttonProps = (instance as any).gridBase.exportConfigButtons[0] as IButton;
-      const button = new Button(buttonProps);
-
-      const event = new Event('click');
-      button.click(event, {} as HTMLElement);
+      const spy = jest.spyOn(window, 'open');
+      await instance.getReport('pdf');
 
-      expect(reportSpy).toBeCalledTimes(1);
+      expect(spy).toHaveBeenCalledTimes(1);
 
       (window as any).open.mockClear();
+      spy.mockClear();
     });
 
-    it('should call window open on getReport method', async () => {
+    it('should call window open on getReport method when using tekmemorydatasource', async () => {
       (window as any).open = jest.fn();
 
       const instance = new TekTreeGrid({
         name: 'grid',
         component: 'TekTreeGrid',
-        datasource: {
-          type: 'tek-rest',
-          uniqueKey: 'id',
-          route: '/zeedhi',
-          lazyLoad: false,
-          data: [
-            { id: '1', department_id: '1' },
-          ],
+        events: {
+          beforeOpenReport: jest.fn(),
         },
         columns: [
           {

package/tests/unit/utils/grid-base/export-options/button-option.spec.ts

@@ -0,0 +1,44 @@
+import { Button } from '@zeedhi/common';
+import { TekGrid } from '../../../../../src/components';
+import { ButtonOption } from '../../../../../src/utils';
+
+describe('ButtonOption', () => {
+  describe('buildComponent()', () => {
+    it('when called, should build a simple button component', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+      };
+      const option = new ButtonOption(config);
+
+      const component = option.buildComponent(grid);
+
+      expect(component).toEqual(expect.objectContaining({
+        label: config.label,
+        name: 'Grid_export_pdf_portrait',
+        component: 'ZdButton',
+        iconName: undefined,
+        flat: true,
+      }));
+    });
+
+    it('the generated button component should call grid.getReport on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const spy = jest.fn();
+      grid.getReport = spy;
+      const config = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+      };
+      const option = new ButtonOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Button(component);
+      instance.click();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/tests/unit/utils/grid-base/export-options/multi-option.spec.ts

@@ -0,0 +1,135 @@
+import { Button, IText, Text } from '@zeedhi/common';
+import { ITekGridExportConfig, TekGrid } from '../../../../../src/components';
+import { MultiOption } from '../../../../../src/utils';
+
+describe('MultiOption', () => {
+  describe('buildComponent()', () => {
+    it('when called, should build a row with multiple buttons', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      expect(component).toEqual({
+        name: 'Grid_export_pdf_row',
+        component: 'ZdRow',
+        cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+        children: [
+          expect.objectContaining({
+            name: 'Grid_export_pdf_text',
+            component: 'ZdText',
+            text: 'Exportar PDF',
+            cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+          }),
+          {
+            name: 'Grid_export_pdf_tooltip_portrait',
+            component: 'ZdTooltip',
+            bottom: true,
+            label: 'portrait',
+            children: [
+              expect.objectContaining({
+                name: 'Grid_export_pdf_button_portrait',
+                component: 'ZdButton',
+                icon: true,
+                iconName: 'icon-portrait',
+              }),
+            ],
+          },
+          expect.objectContaining({
+            name: 'Grid_export_pdf_divider_portrait',
+            component: 'ZdDivider',
+            cssClass: 'zd-my-1',
+            vertical: true,
+          }),
+          {
+            name: 'Grid_export_pdf_tooltip_landscape',
+            component: 'ZdTooltip',
+            bottom: true,
+            label: 'landscape',
+            children: [
+              expect.objectContaining({
+                name: 'Grid_export_pdf_button_landscape',
+                component: 'ZdButton',
+                icon: true,
+                iconName: 'icon-landscape',
+              }),
+            ],
+          },
+        ],
+      });
+    });
+
+    it('the generated text component should call stopPropagation on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Text(component.children![0] as IText);
+      const spy = jest.fn();
+      const event = { stopPropagation: spy } as unknown as Event;
+      instance.click(event);
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('the generated text component should not throw if event is undefined', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Text(component.children![0] as IText);
+
+      expect(() => instance.callEvent('click', { event: undefined })).not.toThrow();
+    });
+
+    it('the generated button components should call grid.getReport on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const spy = jest.fn();
+      grid.getReport = spy;
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Button(component.children![1].children![0]);
+      instance.click();
+
+      const instance2 = new Button(component.children![3].children![0]);
+      instance2.click();
+
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/types/components/tek-grid/interfaces.d.ts

@@ -4,8 +4,13 @@ import { IDynamicFilterItem, TekGrid, TekGridLayoutOptions, TekTreeGrid } from '
 export interface ITekGridLayoutEventParams extends IEventParam<ITekGrid> {
     layouts: ITekGridLayoutInfo;
 }
+export interface ITekGridCalcSummaryEventParams extends IEventParam<ITekGrid> {
+    summary: ITekGridSummary;
+    columnName: string;
+    rowValue: IDictionary<any>;
+}
 export declare type ITekGridEvent<T> = (event: T) => Promise<any>;
-export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams> extends IComponentEvents<T> {
+export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams | ITekGridCalcSummaryEventParams> extends IComponentEvents<T> {
     addClick?: EventDef<T>;
     afterCancel?: EventDef<T>;
     afterDelete?: EventDef<T>;
@@ -14,6 +19,7 @@ export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams
     beforeCancel?: EventDef<T>;
     beforeDelete?: EventDef<T>;
     beforeSave?: EventDef<T>;
+    calcSummary?: EventDef<T>;
     filterClick?: EventDef<T>;
     loadLayouts?: EventDef<T, ITekGridEvent<T>>;
     saveLayouts?: EventDef<T>;
@@ -54,11 +60,21 @@ export interface ITekGrid extends IGridEditable {
     layoutOptions?: TekGridLayoutOptions;
     mainGrid?: boolean;
 }
+export declare type MultiOptionParams = {
+    iconName: string;
+    label: string;
+    cssClass?: string;
+    reportParams?: {
+        portrait?: boolean;
+        rowObj?: any;
+    };
+};
 export interface ITekGridExportConfig {
     type: string;
     portrait?: boolean;
     label?: string;
     iconName?: string;
+    multiOption?: MultiOptionParams[];
 }
 export interface ITekGridLayoutInfo {
     currentLayoutName?: string;
@@ -141,7 +157,8 @@ export interface ITekGridFooter {
     [key: string]: ITekGridSummary;
 }
 export interface ITekGridSummary {
-    sum: number;
+    sum: any;
+    avg: any;
     count: number;
     min: any;
     max: any;

package/types/components/tek-user-info/TekUserInfoController.d.ts

@@ -7,8 +7,6 @@ export declare class TekUserInfoController {
     set name(value: string);
     get version(): string;
     set version(value: string);
-    get defaultEmail(): string;
-    set defaultEmail(value: string);
     get hasDefaultEmail(): boolean;
     get hasAboutImage(): boolean;
     mergeText(name: string, version: string): string;

package/types/utils/grid-base/export-options/button-option.d.ts

@@ -0,0 +1,16 @@
+import { ITekGridExportConfig, TekGrid, TekTreeGrid } from '../../../components';
+import { IExportOption } from './interfaces';
+export declare class ButtonOption implements IExportOption {
+    private config;
+    constructor(config: ITekGridExportConfig);
+    buildComponent(grid: TekGrid | TekTreeGrid): {
+        label: string | undefined;
+        iconName: string | undefined;
+        name: string;
+        component: string;
+        flat: boolean;
+        events: {
+            click: () => any;
+        };
+    };
+}

package/types/utils/grid-base/export-options/index.d.ts

@@ -0,0 +1,3 @@
+export * from './button-option';
+export * from './multi-option';
+export * from './interfaces';

package/types/utils/grid-base/export-options/interfaces.d.ts

@@ -0,0 +1,5 @@
+import { IComponentRender } from '@zeedhi/common';
+import { TekGrid, TekTreeGrid } from '../../../components';
+export interface IExportOption {
+    buildComponent: (grid: TekGrid | TekTreeGrid) => IComponentRender;
+}

package/types/utils/grid-base/export-options/multi-option.d.ts

@@ -0,0 +1,12 @@
+import { IRow } from '@zeedhi/common';
+import { ITekGridExportConfig, TekGrid, TekTreeGrid } from '../../../components';
+import { IExportOption } from './interfaces';
+export declare class MultiOption implements IExportOption {
+    private config;
+    constructor(config: ITekGridExportConfig);
+    private formatName;
+    private buildTooltip;
+    private buildButton;
+    private buildDivider;
+    buildComponent(grid: TekGrid | TekTreeGrid): IRow;
+}

package/types/utils/grid-base/grid-base.d.ts

@@ -1,4 +1,4 @@
-import { IButton } from '@zeedhi/common';
+import { IComponentRender } from '@zeedhi/common';
 import { IEventParam } from '@zeedhi/core';
 import { TekGrid, TekGridFilterButton, TekTreeGrid } from '../../components';
 export interface ITekGridAtoms {
@@ -23,6 +23,7 @@ export declare class GridBase {
     private grid;
     private exportConfigButtons;
     constructor(grid: TekGrid | TekTreeGrid);
+    private getOption;
     private getExportConfigButtons;
     createToolbarProps(): ({
         name: string;
@@ -153,7 +154,7 @@ export declare class GridBase {
                 iconName: string;
                 isVisible: string;
             };
-            children: IButton[] | import("@zeedhi/common").IComponentRender[];
+            children: IComponentRender[];
             label?: undefined;
             bottom?: undefined;
             vertical?: undefined;

package/types/utils/index.d.ts

@@ -1,5 +1,5 @@
-import { ReportFilter } from './report-filter/report-filter';
-import { GridBase, ITekGridAtoms } from './grid-base/grid-base';
-import { GridController } from './grid-base/grid-controller';
-import { ITekConfig } from './config/config';
-export { ReportFilter, GridBase, ITekGridAtoms, GridController, ITekConfig, };
+export * from './report-filter/report-filter';
+export * from './grid-base/grid-base';
+export * from './grid-base/grid-controller';
+export * from './grid-base/export-options';
+export * from './config/config';