@zeedhi/teknisa-components-common 1.63.0 → 1.65.0

package/dist/tek-components-common.esm.js

@@ -540,21 +540,15 @@ class Notifications extends Iterable {
         this.createAccessors();
     }
     markAsRead({ event, element }) {
-        if (this.events.markAllAsReadClick) {
-            this.events.markAllAsReadClick({ event, element, component: this });
-        }
+        this.callEvent('markAllAsReadClick', { event, element, component: this });
     }
     showAll(event, element) {
-        if (this.events.showAllClick) {
-            this.events.showAllClick({ event, element, component: this });
-        }
+        this.callEvent('showAllClick', { event, element, component: this });
     }
     notificationClick(event, notification, element) {
-        if (this.events.notificationClick) {
-            this.events.notificationClick({
-                event, notification, element, component: this,
-            });
-        }
+        this.callEvent('notificationClick', {
+            event, notification, element, component: this,
+        });
     }
 }
 
@@ -884,50 +878,34 @@ class GridBase {
         ];
     }
     addButtonClick({ event }) {
-        if (this.grid.events.addClick) {
-            this.grid.events.addClick({ component: this.grid, event });
-        }
+        this.grid.callEvent('addClick', { component: this.grid, event });
     }
     deleteButtonClick({ event }) {
-        if (this.grid.events.beforeDelete) {
-            this.grid.events.beforeDelete({ component: this.grid, event });
-        }
+        this.grid.callEvent('beforeDelete', { component: this.grid, event });
         if (!event.defaultPrevented) {
             this.grid.deleteRows();
-            if (this.grid.events.afterDelete) {
-                this.grid.events.afterDelete({ component: this.grid });
-            }
+            this.grid.callEvent('afterDelete', { component: this.grid });
         }
     }
     reloadGrid() {
         this.grid.reload();
     }
     saveChanges({ event }) {
-        if (this.grid.events.beforeSave) {
-            this.grid.events.beforeSave({ component: this.grid, event });
-        }
+        this.grid.callEvent('beforeSave', { component: this.grid, event });
         if (!event.defaultPrevented) {
             this.grid.saveEditedRows();
-            if (this.grid.events.afterSave) {
-                this.grid.events.afterSave({ component: this.grid });
-            }
+            this.grid.callEvent('afterSave', { component: this.grid });
         }
     }
     cancelChanges({ event }) {
-        if (this.grid.events.beforeCancel) {
-            this.grid.events.beforeCancel({ component: this.grid, event });
-        }
+        this.grid.callEvent('beforeCancel', { component: this.grid, event });
         if (!event.defaultPrevented) {
             this.grid.cancelEditedRows();
-            if (this.grid.events.afterCancel) {
-                this.grid.events.afterCancel({ component: this.grid });
-            }
+            this.grid.callEvent('afterCancel', { component: this.grid });
         }
     }
     filterClick({ event }) {
-        if (this.grid.events.filterClick) {
-            this.grid.events.filterClick({ event, component: this.grid });
-        }
+        this.grid.callEvent('filterClick', { component: this.grid, event });
         if (!event.defaultPrevented) {
             this.createFilterFromColumns();
         }
@@ -1136,6 +1114,7 @@ class GridBase {
         const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
         if (filterForm.validate()) {
             const { datasource } = this.grid;
+            this.grid.callEvent('beforeApplyFilter', { component: this.grid, event });
             if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
                 const dynamicFilter = {};
                 Object.keys(filterForm.value).forEach((item) => {
@@ -1156,25 +1135,25 @@ class GridBase {
                     }
                 });
                 datasource.dynamicFilter = dynamicFilter;
+                if (!event.defaultPrevented) {
+                    datasource.setDynamicFilter(dynamicFilter);
+                    this.filterModal.hide();
+                }
             }
             else {
+                const filter = {};
                 Object.keys(filterForm.value).forEach((item) => {
                     let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
                     columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
                     if (filterForm.value[item]) {
-                        datasource.filter[columnName] = filterForm.value[item];
-                    }
-                    else {
-                        delete datasource.filter[columnName];
+                        filter[columnName] = filterForm.value[item];
                     }
                 });
-            }
-            if (this.grid.events.beforeApplyFilter) {
-                this.grid.events.beforeApplyFilter({ event, component: this });
-            }
-            if (!event.defaultPrevented) {
-                datasource.get();
-                this.filterModal.hide();
+                datasource.filter = filter;
+                if (!event.defaultPrevented) {
+                    datasource.setFilter(filter);
+                    this.filterModal.hide();
+                }
             }
             this.grid.changeLayout(event);
         }
@@ -2403,13 +2382,17 @@ class TekGrid extends GridEditable {
                 const reportFilter = new ReportFilter(dynamicFilter);
                 filter = reportFilter.build();
             }
+            let beforeOpen;
+            if (typeof this.events.beforeOpenReport === 'function') {
+                beforeOpen = this.events.beforeOpenReport;
+            }
             return report.getReport(type, portrait, {
                 metaData: merge(rowObj, {
                     filter,
                     groups: reportGroups,
                     columns: reportAggregations,
                 }),
-            }, this.events.beforeOpenReport).then((reportUrl) => window.open(reportUrl));
+            }, beforeOpen).then((reportUrl) => window.open(reportUrl));
         });
     }
     initGrouping(lazyLoad) {
@@ -3146,13 +3129,17 @@ class TekTreeGrid extends TreeGridEditable {
                 const reportFilter = new ReportFilter(this.datasource.dynamicFilter);
                 filter = reportFilter.build();
             }
+            let beforeOpen;
+            if (typeof this.events.beforeOpenReport === 'function') {
+                beforeOpen = this.events.beforeOpenReport;
+            }
             return report.getReport(type, portrait, {
                 metaData: merge(rowObj, {
                     filter,
                     groups: reportGroups,
                     columns: reportAggregations,
                 }),
-            }, this.events.beforeOpenReport).then((reportUrl) => window.open(reportUrl));
+            }, beforeOpen).then((reportUrl) => window.open(reportUrl));
         });
     }
     setSearch(search) {

package/dist/tek-components-common.umd.js

@@ -545,21 +545,15 @@
           this.createAccessors();
       }
       markAsRead({ event, element }) {
-          if (this.events.markAllAsReadClick) {
-              this.events.markAllAsReadClick({ event, element, component: this });
-          }
+          this.callEvent('markAllAsReadClick', { event, element, component: this });
       }
       showAll(event, element) {
-          if (this.events.showAllClick) {
-              this.events.showAllClick({ event, element, component: this });
-          }
+          this.callEvent('showAllClick', { event, element, component: this });
       }
       notificationClick(event, notification, element) {
-          if (this.events.notificationClick) {
-              this.events.notificationClick({
-                  event, notification, element, component: this,
-              });
-          }
+          this.callEvent('notificationClick', {
+              event, notification, element, component: this,
+          });
       }
   }
 
@@ -889,50 +883,34 @@
           ];
       }
       addButtonClick({ event }) {
-          if (this.grid.events.addClick) {
-              this.grid.events.addClick({ component: this.grid, event });
-          }
+          this.grid.callEvent('addClick', { component: this.grid, event });
       }
       deleteButtonClick({ event }) {
-          if (this.grid.events.beforeDelete) {
-              this.grid.events.beforeDelete({ component: this.grid, event });
-          }
+          this.grid.callEvent('beforeDelete', { component: this.grid, event });
           if (!event.defaultPrevented) {
               this.grid.deleteRows();
-              if (this.grid.events.afterDelete) {
-                  this.grid.events.afterDelete({ component: this.grid });
-              }
+              this.grid.callEvent('afterDelete', { component: this.grid });
           }
       }
       reloadGrid() {
           this.grid.reload();
       }
       saveChanges({ event }) {
-          if (this.grid.events.beforeSave) {
-              this.grid.events.beforeSave({ component: this.grid, event });
-          }
+          this.grid.callEvent('beforeSave', { component: this.grid, event });
           if (!event.defaultPrevented) {
               this.grid.saveEditedRows();
-              if (this.grid.events.afterSave) {
-                  this.grid.events.afterSave({ component: this.grid });
-              }
+              this.grid.callEvent('afterSave', { component: this.grid });
           }
       }
       cancelChanges({ event }) {
-          if (this.grid.events.beforeCancel) {
-              this.grid.events.beforeCancel({ component: this.grid, event });
-          }
+          this.grid.callEvent('beforeCancel', { component: this.grid, event });
           if (!event.defaultPrevented) {
               this.grid.cancelEditedRows();
-              if (this.grid.events.afterCancel) {
-                  this.grid.events.afterCancel({ component: this.grid });
-              }
+              this.grid.callEvent('afterCancel', { component: this.grid });
           }
       }
       filterClick({ event }) {
-          if (this.grid.events.filterClick) {
-              this.grid.events.filterClick({ event, component: this.grid });
-          }
+          this.grid.callEvent('filterClick', { component: this.grid, event });
           if (!event.defaultPrevented) {
               this.createFilterFromColumns();
           }
@@ -1141,6 +1119,7 @@
           const filterForm = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
           if (filterForm.validate()) {
               const { datasource } = this.grid;
+              this.grid.callEvent('beforeApplyFilter', { component: this.grid, event });
               if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
                   const dynamicFilter = {};
                   Object.keys(filterForm.value).forEach((item) => {
@@ -1161,25 +1140,25 @@
                       }
                   });
                   datasource.dynamicFilter = dynamicFilter;
+                  if (!event.defaultPrevented) {
+                      datasource.setDynamicFilter(dynamicFilter);
+                      this.filterModal.hide();
+                  }
               }
               else {
+                  const filter = {};
                   Object.keys(filterForm.value).forEach((item) => {
                       let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
                       columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
                       if (filterForm.value[item]) {
-                          datasource.filter[columnName] = filterForm.value[item];
-                      }
-                      else {
-                          delete datasource.filter[columnName];
+                          filter[columnName] = filterForm.value[item];
                       }
                   });
-              }
-              if (this.grid.events.beforeApplyFilter) {
-                  this.grid.events.beforeApplyFilter({ event, component: this });
-              }
-              if (!event.defaultPrevented) {
-                  datasource.get();
-                  this.filterModal.hide();
+                  datasource.filter = filter;
+                  if (!event.defaultPrevented) {
+                      datasource.setFilter(filter);
+                      this.filterModal.hide();
+                  }
               }
               this.grid.changeLayout(event);
           }
@@ -2408,13 +2387,17 @@
                   const reportFilter = new ReportFilter(dynamicFilter);
                   filter = reportFilter.build();
               }
+              let beforeOpen;
+              if (typeof this.events.beforeOpenReport === 'function') {
+                  beforeOpen = this.events.beforeOpenReport;
+              }
               return report.getReport(type, portrait, {
                   metaData: merge__default["default"](rowObj, {
                       filter,
                       groups: reportGroups,
                       columns: reportAggregations,
                   }),
-              }, this.events.beforeOpenReport).then((reportUrl) => window.open(reportUrl));
+              }, beforeOpen).then((reportUrl) => window.open(reportUrl));
           });
       }
       initGrouping(lazyLoad) {
@@ -3151,13 +3134,17 @@
                   const reportFilter = new ReportFilter(this.datasource.dynamicFilter);
                   filter = reportFilter.build();
               }
+              let beforeOpen;
+              if (typeof this.events.beforeOpenReport === 'function') {
+                  beforeOpen = this.events.beforeOpenReport;
+              }
               return report.getReport(type, portrait, {
                   metaData: merge__default["default"](rowObj, {
                       filter,
                       groups: reportGroups,
                       columns: reportAggregations,
                   }),
-              }, this.events.beforeOpenReport).then((reportUrl) => window.open(reportUrl));
+              }, beforeOpen).then((reportUrl) => window.open(reportUrl));
           });
       }
       setSearch(search) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.63.0",
+  "version": "1.65.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -31,5 +31,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "b43f5f0f2f1a341165d854f1692022575356e13c"
+  "gitHead": "83d40038a8a18ce4f1a59b888aa42b97d6f70cc6"
 }

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

@@ -193,8 +193,10 @@ describe('TekGrid', () => {
 
   describe('getReport()', () => {
     let httpReportSpy: jest.SpyInstance;
+    let reportSpy: jest.SpyInstance;
 
     beforeEach(() => {
+      reportSpy = jest.spyOn(Report.prototype, 'getReport').mockReturnValue(Promise.resolve(''));
       httpReportSpy = jest.spyOn(Http, 'post').mockImplementation((url) => {
         if (url === 'https://zhreport.teknisa.com/generateReport') {
           return Promise.resolve({
@@ -207,6 +209,7 @@ describe('TekGrid', () => {
     });
 
     afterEach(() => {
+      reportSpy.mockClear();
       httpReportSpy.mockReset();
     });
 
@@ -216,9 +219,11 @@ describe('TekGrid', () => {
       const instance = new TekGrid({
         name: 'grid_getReport',
         component: 'TekGrid',
+        events: {
+          beforeOpenReport: jest.fn(),
+        },
       });
 
-      const spy = jest.spyOn(instance, 'getReport');
       instance.onCreated();
 
       const buttonProps = (instance as any).gridBase.exportConfigButtons[0] as IButton;
@@ -227,24 +232,13 @@ describe('TekGrid', () => {
       const event = new Event('click');
       button.click(event, {} as HTMLElement);
 
-      expect(spy).toBeCalledTimes(1);
-      spy.mockReset();
+      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 httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
-        data: {
-          data: [],
-          pagination: {
-            page: 1,
-            total: 0,
-            limit: 10,
-          },
-        },
-      }));
 
       const instance = new TekGrid({
         name: 'grid',
@@ -253,7 +247,7 @@ describe('TekGrid', () => {
           type: 'tek-rest',
           uniqueKey: 'id',
           route: '/zeedhi',
-          lazyLoad: false,
+          lazyLoad: true,
           data: [
             { id: '1', department_id: '1' },
           ],
@@ -279,7 +273,6 @@ describe('TekGrid', () => {
 
       (window as any).open.mockClear();
       spy.mockReset();
-      httpSpy.mockReset();
     });
 
     it('when called with a dynamicFilter, should format the filter values', async () => {
@@ -2341,8 +2334,8 @@ describe('TekGrid', () => {
         'grid_filterClick13-filter-AND-CONTAINS-salary-0': '1000',
       };
       const applyButtonObject = new Button(applyButton);
-      setClick(applyButtonObject, { defaultPrevented: true });
-      expect((instance.datasource as TekRestDatasource).filter).toEqual({
+      setClick(applyButtonObject);
+      expect(instance.datasource.filter).toEqual({
         id: '1;2;3',
         name: 'teste',
         salary: '1000',
@@ -2350,7 +2343,9 @@ describe('TekGrid', () => {
       expect(beforeApplyFilterCalled).toBeTruthy();
       expect(changeLayoutCalled).toBeTruthy();
       expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBeTruthy();
-      expect(spyDatasourceGet).not.toBeCalled();
+
+      setClick(applyButtonObject, { defaultPrevented: true });
+      expect(spyDatasourceGet).toBeCalledTimes(1);
       spyMetadata.mockReset();
       spyDatasourceGet.mockReset();
       spyModalService.mockReset();

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

@@ -1,5 +1,5 @@
 import {
-  Button, Form, IButton, IForm, IModal, Modal, ModalService, Text, TextInput,
+  Button, Form, IButton, IForm, IModal, Modal, ModalService, Report, Text, TextInput,
 } from '@zeedhi/common';
 import { Http, IDictionary, Metadata } from '@zeedhi/core';
 import {
@@ -7,6 +7,8 @@ import {
 } from '../../../../src';
 import { getChild, setClick } from '../../../__helpers__';
 
+const flushPromises = () => new Promise(setImmediate);
+
 const clickOnFilterButton = (grid: TekTreeGrid, event?: any) => {
   const buttonProps = getChild<IButton>(grid.toolbarSlot, `${grid.name}_filterButton`);
   const button = new Button(buttonProps);
@@ -336,8 +338,10 @@ describe('TekTreeGrid', () => {
 
   describe('getReport()', () => {
     let httpReportSpy: jest.SpyInstance;
+    let reportSpy: jest.SpyInstance;
 
     beforeEach(() => {
+      reportSpy = jest.spyOn(Report.prototype, 'getReport').mockReturnValue(Promise.resolve(''));
       httpReportSpy = jest.spyOn(Http, 'post').mockImplementation((url) => {
         if (url === 'https://zhreport.teknisa.com/generateReport') {
           return Promise.resolve({
@@ -350,6 +354,7 @@ describe('TekTreeGrid', () => {
     });
 
     afterEach(() => {
+      reportSpy.mockClear();
       httpReportSpy.mockClear();
     });
 
@@ -359,9 +364,11 @@ describe('TekTreeGrid', () => {
       const instance = new TekTreeGrid({
         name: 'grid_getReport',
         component: 'TekTreeGrid',
+        events: {
+          beforeOpenReport: jest.fn(),
+        },
       });
 
-      const spy = jest.spyOn(instance, 'getReport');
       instance.onCreated();
 
       const buttonProps = (instance as any).gridBase.exportConfigButtons[0] as IButton;
@@ -370,24 +377,13 @@ describe('TekTreeGrid', () => {
       const event = new Event('click');
       button.click(event, {} as HTMLElement);
 
-      expect(spy).toBeCalledTimes(1);
-      spy.mockClear();
+      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 httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
-        data: {
-          data: [],
-          pagination: {
-            page: 1,
-            total: 0,
-            limit: 10,
-          },
-        },
-      }));
 
       const instance = new TekTreeGrid({
         name: 'grid',
@@ -420,7 +416,6 @@ describe('TekTreeGrid', () => {
 
       (window as any).open.mockClear();
       spy.mockClear();
-      httpSpy.mockClear();
     });
   });
 
@@ -462,7 +457,6 @@ describe('TekTreeGrid', () => {
     });
 
     it('should not call events.rowClick if cellClick prevents it', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const rowClick = jest.fn();
 
       const data = [

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

@@ -1,4 +1,4 @@
-import { IBeforeReportEvent, IComponent, IComponentEvents, IComponentRender, IGridColumnEditable, IGridEditable, IIterableColumnsButton } from '@zeedhi/common';
+import { IBeforeReportEvent, IComponent, IComponentEvents, IComponentRender, IGridColumnEditable, IGridEditable, IIterableColumnsButton, EventDef } from '@zeedhi/common';
 import { IDictionary, IEvent, IEventParam, IDateHelperValue, IDateHelperValues } from '@zeedhi/core';
 import { IDynamicFilterItem, TekGridLayoutOptions } from '..';
 export interface ITekGridLayoutEventParams extends IEventParam<ITekGrid> {
@@ -6,21 +6,21 @@ export interface ITekGridLayoutEventParams extends IEventParam<ITekGrid> {
 }
 export declare type ITekGridEvent<T> = (event: T) => Promise<any>;
 export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams> extends IComponentEvents<T> {
-    addClick?: IEvent<T>;
-    afterCancel?: IEvent<T>;
-    afterDelete?: IEvent<T>;
-    afterSave?: IEvent<T>;
-    beforeApplyFilter?: IEvent<T>;
-    beforeCancel?: IEvent<T>;
-    beforeDelete?: IEvent<T>;
-    beforeSave?: IEvent<T>;
-    filterClick?: IEvent<T>;
-    loadLayouts?: ITekGridEvent<T>;
-    saveLayouts?: IEvent<T>;
-    groupRowClick?: IEvent<T>;
-    groupSelect?: IEvent<T>;
-    groupUnselect?: IEvent<T>;
-    beforeOpenReport?: IBeforeReportEvent;
+    addClick?: EventDef<T>;
+    afterCancel?: EventDef<T>;
+    afterDelete?: EventDef<T>;
+    afterSave?: EventDef<T>;
+    beforeApplyFilter?: EventDef<T>;
+    beforeCancel?: EventDef<T>;
+    beforeDelete?: EventDef<T>;
+    beforeSave?: EventDef<T>;
+    filterClick?: EventDef<T>;
+    loadLayouts?: EventDef<T, ITekGridEvent<T>>;
+    saveLayouts?: EventDef<T>;
+    groupRowClick?: EventDef<T>;
+    groupSelect?: EventDef<T>;
+    groupUnselect?: EventDef<T>;
+    beforeOpenReport?: EventDef<T, IBeforeReportEvent>;
     [key: string]: any;
 }
 export declare type ITekGridLayoutOptionsEvent<T> = (event: T) => Promise<any>;

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

@@ -1,5 +1,5 @@
-import { IIterable, IComponentEvents } from '@zeedhi/common';
-import { IEventParam, IEvent } from '@zeedhi/core';
+import { IIterable, IComponentEvents, EventDef } from '@zeedhi/common';
+import { IEventParam } from '@zeedhi/core';
 import { Notifications } from './notifications';
 export interface INotification {
     id: string;
@@ -12,9 +12,9 @@ export interface INotificationsEvent extends IEventParam<Notifications> {
     notification: INotification;
 }
 export interface INotificationsEvents<T = INotificationsEvent | IEventParam<any>> extends IComponentEvents<T> {
-    showAllClick?: IEvent<T>;
-    notificationClick?: IEvent<T>;
-    markAllAsReadClick?: IEvent<T>;
+    showAllClick?: EventDef<T>;
+    notificationClick?: EventDef<T>;
+    markAllAsReadClick?: EventDef<T>;
 }
 export interface INotifications extends IIterable {
     allNotificationsPath?: string;