@zeedhi/teknisa-components-common 1.130.0 → 1.131.0

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

@@ -84,6 +84,27 @@ describe('TekGridFilterButton', () => {
 
       expect(filterButton.grid).toEqual(instance);
     });
+
+    it('should load grid by gridName after the filter button is created', () => {
+      const filterButton = new TekGridFilterButton({
+        name: 'external-filter-button',
+        component: 'TekGridFilterButton',
+        gridName: 'grid-created-after-filter-button',
+      });
+
+      expect(filterButton.grid).toBeUndefined();
+
+      const instance = new TekGrid({
+        name: 'grid-created-after-filter-button',
+        component: 'TekGrid',
+      });
+      instance.onCreated();
+
+      filterButton.loadGrid();
+
+      expect(filterButton.grid).toEqual(instance);
+      expect((instance as any).gridBase.filterButton).toBe(filterButton);
+    });
   });
 
   describe('filterClick()', () => {
@@ -117,6 +138,85 @@ describe('TekGridFilterButton', () => {
       spyMetadata.mockReset();
     });
 
+    it('should open the filter modal from an external button when grid filterButton is false', () => {
+      const instance = new TekGrid({
+        name: 'grid_external_filter_button',
+        component: 'TekGrid',
+        filterButton: false,
+        columns: [
+          { name: 'id' },
+          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+
+      const button = new TekGridFilterButton({
+        name: 'external-filter-button',
+        component: 'TekGridFilterButton',
+        gridName: instance.name,
+      });
+      setClick(button);
+
+      expect(button.grid).toEqual(instance);
+      expect((instance as any).gridBase.filterButton).toBe(button);
+      expect(formElements[0].name).toBe(`${instance.name}-filter-AND-CONTAINS-name-0`);
+
+      spy.mockReset();
+    });
+
+    it('should not open the filter modal when click cannot resolve a grid', () => {
+      const spy = jest.spyOn(ModalService, 'create');
+      const button = new TekGridFilterButton({
+        name: 'external-filter-button-without-grid',
+        component: 'TekGridFilterButton',
+        gridName: 'missing-grid',
+      });
+
+      setClick(button);
+
+      expect(button.grid).toBeUndefined();
+      expect(spy).not.toBeCalled();
+
+      spy.mockReset();
+    });
+
+    it('should close the owning filter modal from the header close button', () => {
+      const instance = new TekGrid({
+        name: 'grid_filter_close_button',
+        component: 'TekGrid',
+      });
+
+      let closeButton: IButton = { name: 'close', component: 'ZdButton' };
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const header = getChild(modal.children || [], `${instance.name}-filter-header-container`);
+        closeButton = getChild(header.children || [], `${instance.name}-filter-close-button`);
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+
+      const buttonProps = getChild<ITekGridFilterButton>(instance.toolbarSlot, `${instance.name}_filterButton`);
+      const button = new TekGridFilterButton(buttonProps);
+      setClick(button);
+
+      const hideSpy = jest.spyOn((button as any).filterModal, 'hide');
+      const closeButtonObject = new Button(closeButton);
+      setClick(closeButtonObject);
+
+      expect(closeButton.component).toBe('ZdButton');
+      expect(hideSpy).toBeCalled();
+
+      spy.mockReset();
+    });
+
     it('should call events', () => {
       let filterClickCalled = false;
       const instance = new TekGrid({
@@ -207,6 +307,49 @@ describe('TekGridFilterButton', () => {
       spy.mockReset();
     });
 
+    it('should create filter form elements without dataValueOut from componentProps', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick_dataValueOut',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'name',
+            filterable: true,
+            componentProps: {
+              name: 'name_edit',
+              component: 'ZdSelect',
+              dataText: 'description',
+              dataValueOut: 'id',
+            },
+            filterProps: [{ name: 'name_filter', label: 'name' }],
+          },
+          {
+            name: 'description',
+            filterable: true,
+            filterProps: [{ name: 'description_filter', label: 'description' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      (instance.columns[1] as any).componentProps = undefined;
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].component).toBe('ZdSelect');
+      expect(formElements[0].dataText).toBe('description');
+      expect(formElements[0].dataValueOut).toBeUndefined();
+      expect(formElements[1].name).toBe(`${instance.name}-filter-AND-CONTAINS-description-0`);
+
+      spy.mockReset();
+    });
+
     it('when creating a SelectMultiple filter, default should not add showCheckboxAll prop', () => {
       const instance = new TekGrid({
         name: 'grid_filterClick5',
@@ -318,7 +461,7 @@ describe('TekGridFilterButton', () => {
       formObject.value['grid_filterClick5-filter-AND-CONTAINS-id-0'] = ['example'];
       setClick(applyButtonObject);
 
-      expect(instance.datasource.filter).toEqual({});
+      expect(instance.datasource.filter).toEqual({ id: ['example'] });
 
       selectObject.checkboxAll = true;
       setClick(applyButtonObject);
@@ -327,7 +470,7 @@ describe('TekGridFilterButton', () => {
 
       (Config as any).set({ selectAllCompatibilityMode: true });
       setClick(applyButtonObject);
-      expect(instance.datasource.filter).toEqual({});
+      expect(instance.datasource.filter).toEqual({ id: 'T' });
 
       spy.mockReset();
     });
@@ -952,10 +1095,10 @@ describe('TekGridFilterButton', () => {
       };
       const applyButtonObject = new Button(applyButton);
       setClick(applyButtonObject);
-      expect(instance.datasource.filter).toEqual({});
+      expect(instance.datasource.filter).toEqual({ id: '1;2;3', name: 'teste', salary: '1000' });
       expect(beforeApplyFilterCalled).toBeTruthy();
       expect(changeLayoutCalled).toBeTruthy();
-      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBe(undefined);
+      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBe(true);
 
       setClick(applyButtonObject, { defaultPrevented: true });
       expect(spyDatasourceGet).toBeCalledTimes(1);

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

@@ -15,7 +15,7 @@ import {
   ITekGrid,
   ITekGridFilterButton,
   ITekGridGroupFooter,
-  TekGrid, TekGridColumn, TekGridFilterButton, TekRestDatasource,
+  TekGrid, TekGridColumn, TekGridExportButton, TekGridFilterButton, TekRestDatasource,
 } from '../../../../src';
 import { ReportFilter } from '../../../../src/utils';
 import { setClick, getChild } from '../../../__helpers__';
@@ -232,12 +232,19 @@ describe('TekGrid', () => {
         ],
       });
 
-      expect((instance as any).gridBase.exportConfigButtons[0].label).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[0].iconName).toBe('icon');
-      expect((instance as any).gridBase.exportConfigButtons[0].name).toBe('grid_export_pdf_landscape');
-      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();
+      const exportButton = new TekGridExportButton({
+        name: 'grid_export_dropdown',
+        component: 'TekGridExportButton',
+        grid: instance,
+      });
+      const exportConfigButton = exportButton.children![0];
+
+      expect(exportConfigButton.label).toBeUndefined();
+      expect(exportConfigButton.iconName).toBe('icon');
+      expect(exportConfigButton.name).toBe('grid_export_pdf_landscape');
+      expect(exportConfigButton.component).toBe('ZdButton');
+      expect(exportConfigButton.flat).toBeTruthy();
+      expect(exportConfigButton.events).toBeDefined();
     });
 
     it('should create new TekGrid with accessor datasource', () => {
@@ -1032,6 +1039,10 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
+      instance.navigateDatasource(false);
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
+      instance.datasource.currentRow = {};
+
       dispatchEvent('arrowdown', {}); // arrow down
       expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
 
@@ -1198,11 +1209,10 @@ describe('TekGrid', () => {
       spyMetadata.mockReset();
     });
 
-    it('when using cellSelection, should use viewNavigate', async () => {
+    it('when grouped, should use viewNavigate', async () => {
       const instance = new TekGrid({
         name: 'grid_navigation_1',
         component: 'TekGrid',
-        cellSelection: true,
         columns: [
           {
             name: 'name',
@@ -2286,6 +2296,126 @@ describe('TekGrid', () => {
 
       expect(grid.columnHasFilterData(column)).toBe(true);
     });
+
+    it('should search only in columns listed in searchIn when searchIn is non-empty', async () => {
+      const instance = new TekGrid({
+        name: 'grid_search',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          {
+            name: 'employee_id',
+            componentProps: {
+              name: 'ZdSelect',
+              dataText: ['name'],
+              datasource: {
+                type: 'tek-rest',
+                uniqueKey: 'id',
+                route: '/zeedhi',
+                lazyLoad: false,
+              },
+            },
+          },
+          {
+            name: 'department_id',
+            componentProps: {
+              name: 'ZdSelect',
+              dataText: ['name'],
+              datasource: {
+                type: 'tek-rest',
+                uniqueKey: 'id',
+                route: '/departments',
+                lazyLoad: false,
+              },
+            },
+          },
+        ],
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+          route: '/grid',
+          searchIn: ['employee_id'],
+        } as any,
+      });
+
+      await instance.setSearch('1');
+
+      expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
+      expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({ employee_id: [1, 15] });
+      expect(httpSpy).toHaveBeenCalledTimes(2);
+    });
+
+    it('should search all lookup columns when searchIn is empty', async () => {
+      const instance = new TekGrid({
+        name: 'grid_search_empty_searchin',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          {
+            name: 'employee_id',
+            componentProps: {
+              name: 'ZdSelect',
+              dataText: ['name'],
+              datasource: {
+                type: 'tek-rest',
+                uniqueKey: 'id',
+                route: '/zeedhi',
+                lazyLoad: false,
+              },
+            },
+          },
+        ],
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+          route: '/grid',
+          searchIn: [],
+        } as any,
+      });
+
+      await instance.setSearch('1');
+
+      expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
+      expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({ employee_id: [1, 15] });
+      expect(httpSpy).toHaveBeenCalledTimes(2);
+    });
+
+    it('should fall back to empty array when datasource.searchIn is null', async () => {
+      const instance = new TekGrid({
+        name: 'grid_search_null_searchin',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          {
+            name: 'employee_id',
+            componentProps: {
+              name: 'ZdSelect',
+              dataText: ['name'],
+              datasource: {
+                type: 'tek-rest',
+                uniqueKey: 'id',
+                route: '/zeedhi',
+                lazyLoad: false,
+              },
+            },
+          },
+        ],
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+          route: '/grid',
+          searchIn: [],
+        } as any,
+      });
+
+      (instance.datasource as any).searchIn = null;
+
+      await instance.setSearch('1');
+
+      expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
+      expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({ employee_id: [1, 15] });
+      expect(httpSpy).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('rowClick', () => {
@@ -3372,6 +3502,9 @@ describe('TekGrid', () => {
       expect(toolbarSlot.find((c: IComponentRender) => c.name?.includes('_title'))).toBeUndefined();
       expect(toolbarSlot.find((c: IComponentRender) => c.name?.includes('_hideTooltip'))).toBeUndefined();
       expect(toolbarSlot[0].name).toBe('grid_toolbarDiv');
+      expect(getChild<any>(toolbarSlot, 'grid_columnsButton').gridName).toBe('grid');
+      expect(getChild<any>(toolbarSlot, 'grid_columnsButton').iterableComponentName).toBeUndefined();
+      expect(getChild<IComponentRender>(toolbarSlot, 'grid_layout_options').gridName).toBe('grid');
     });
   });
 });

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

@@ -51,9 +51,175 @@ describe('LayoutOptions', () => {
       expect(instance.layoutNames).toEqual([]);
       expect(instance.originalColumnProps).toEqual([]);
     });
+
+    it('should create layout options object with gridName', () => {
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_with_grid_name',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_grid_name',
+      });
+
+      expect(instance.gridName).toBe('layout_grid_name');
+    });
+  });
+
+  describe('loadGrid()', () => {
+    it('should load grid by gridName', () => {
+      const grid = new TekGrid({
+        name: 'layout_options_load_grid',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_load_grid',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_load_grid',
+      });
+
+      instance.loadGrid();
+
+      expect(instance.grid).toBe(grid);
+      expect(instance.gridName).toBe(grid.name);
+    });
+
+    it('should load grid by gridName after layout options is created', () => {
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_load_grid_late',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_late_grid',
+      });
+
+      expect(instance.grid).toBeUndefined();
+
+      const grid = new TekGrid({
+        name: 'layout_options_late_grid',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      instance.loadGrid();
+
+      expect(instance.grid).toBe(grid);
+      expect(instance.gridName).toBe(grid.name);
+    });
+
+    it('should load grid by gridName argument', () => {
+      const grid = new TekGrid({
+        name: 'layout_options_argument_grid',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_load_grid_argument',
+        component: 'TekGridLayoutOptions',
+      });
+
+      instance.loadGrid('layout_options_argument_grid');
+
+      expect(instance.grid).toBe(grid);
+      expect(instance.gridName).toBe(grid.name);
+    });
   });
 
   describe('mounted()', () => {
+    it('should store original props from gridName when mounted outside the grid', async () => {
+      const parentGrid = new Grid({
+        name: 'layout_options_parent_grid',
+        component: 'Grid',
+        columns: [{ name: 'parent_id' }],
+      });
+      const grid = new TekGrid({
+        name: 'layout_options_named_grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+        ],
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_named_grid',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_named_grid',
+      });
+      instance.parent = parentGrid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.grid).toBe(grid);
+      expect(instance.originalColumnProps.map((column) => column.name)).toEqual(['id', 'name']);
+    });
+
+    it('should mark layout as edited when named grid layout changes', async () => {
+      const grid = new TekGrid({
+        name: 'layout_options_change_layout_grid',
+        component: 'TekGrid',
+        columns: [{ name: 'id' }],
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'external_layout_options',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_change_layout_grid',
+      });
+
+      await instance.onMounted({} as HTMLElement);
+      expect(instance.layoutEdited).toBe(false);
+
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(true);
+    });
+
+    it('should preserve existing changeLayout event handlers', async () => {
+      let changeLayoutCalled = false;
+      const grid = new TekGrid({
+        name: 'layout_options_existing_change_layout_grid',
+        component: 'TekGrid',
+        columns: [{ name: 'id' }],
+        events: {
+          changeLayout: () => {
+            changeLayoutCalled = true;
+          },
+        },
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'external_existing_layout_options',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_existing_change_layout_grid',
+      });
+
+      await instance.onMounted({} as HTMLElement);
+      grid.changeLayout();
+
+      expect(changeLayoutCalled).toBe(true);
+      expect(instance.layoutEdited).toBe(true);
+    });
+
+    it('should mark layout as edited when parent grid layout changes', async () => {
+      const grid = new Grid({
+        name: 'layout_options_parent_change_layout_grid',
+        component: 'Grid',
+        columns: [{ name: 'id' }],
+      });
+      const instance = new TekGridLayoutOptions({
+        name: 'parent_layout_options',
+        component: 'TekGridLayoutOptions',
+      });
+      instance.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(true);
+    });
+
     it('should store the original column props of a TekGrid', () => {
       const tag = new Tag({
         name: 'toolbar',

package/types/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './tek-grid/grid';
 export * from './tek-grid/grid-column';
 export * from './tek-grid/grid-columns-button';
 export * from './tek-grid/grid-columns-button-controller';
+export * from './tek-grid/grid-export-button';
 export * from './tek-grid/grid-filter-button';
 export * from './tek-grid/layout-options';
 export * from './tek-grid/filter-helper';

package/types/components/tek-ag-grid/default-icons.d.ts

@@ -0,0 +1,53 @@
+declare const defaultIcons: {
+    columnGroupOpened: string;
+    columnGroupClosed: string;
+    columnSelectClosed: string;
+    columnSelectOpen: string;
+    columnSelectIndeterminate: string;
+    columnMovePin: string;
+    columnMoveHide: string;
+    columnMoveMove: string;
+    columnMoveLeft: string;
+    columnMoveRight: string;
+    columnMoveGroup: string;
+    columnMoveValue: string;
+    dropNotAllowed: string;
+    groupContracted: string;
+    groupExpanded: string;
+    chart: string;
+    close: string;
+    cancel: string;
+    check: string;
+    first: string;
+    previous: string;
+    next: string;
+    last: string;
+    linked: string;
+    unlinked: string;
+    colorPicker: string;
+    groupLoading: string;
+    menu: string;
+    filter: string;
+    columns: string;
+    maximize: string;
+    minimize: string;
+    menuPin: string;
+    menuValue: string;
+    menuAddRowGroup: string;
+    menuRemoveRowGroup: string;
+    clipboardCopy: string;
+    clipboardPaste: string;
+    rowGroupPanel: string;
+    valuePanel: string;
+    columnDrag: string;
+    rowDrag: string;
+    save: string;
+    smallDown: string;
+    smallLeft: string;
+    smallRight: string;
+    smallUp: string;
+    sortAscending: string;
+    sortDescending: string;
+    sortUnSort: string;
+};
+export default defaultIcons;

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

@@ -0,0 +1,9 @@
+import { IIterable } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+export interface ITekAgGrid extends IIterable {
+    dense?: boolean;
+    frameworkComponents?: IDictionary;
+    gridOptions?: IDictionary;
+    height?: string | number;
+    icons?: IDictionary<string>;
+}

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

@@ -0,0 +1,35 @@
+import { Iterable } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { ITekAgGrid } from './interfaces';
+/** Grid Component */
+export declare class TekAgGrid extends Iterable implements ITekAgGrid {
+    cssClass: string;
+    dense: boolean;
+    frameworkComponents: IDictionary;
+    gridOptions: IDictionary;
+    height: string | number;
+    icons: IDictionary<string>;
+    gridComponent: any;
+    /**
+     * Creates a new AgGrid.
+     * @param props AgGrid properties
+     */
+    constructor(props: ITekAgGrid);
+    private createOptionsAccessors;
+    private setAccessor;
+    /**
+     * Reload dataset
+     */
+    reload(): Promise<any>;
+    /**
+     * Compares two dates
+     * @param date1
+     * @param date2
+     * @param format
+     * @returns -1 if date1 after date2
+     * @returns 0 if date1 equal date2
+     * @returns 1 if date1 before date2
+     */
+    dateComparator(date1: string | Date, date2: string | Date, format?: string): 1 | -1 | 0;
+    private getDateAsString;
+}