@zeedhi/teknisa-components-common 1.130.0 → 1.132.0

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

@@ -8,6 +8,7 @@ import {
   ITekGridLayoutInfo,
   TekGrid,
   TekGridLayoutOptions,
+  TekRestDatasource,
 } from '../../../../src';
 import { setClick } from '../../../__helpers__';
 
@@ -51,9 +52,321 @@ 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 not mark layout as edited when named grid layout change does not change layout state', 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(false);
+    });
+
+    it('should mark layout as edited only when column width changes explicitly', async () => {
+      const grid = new TekGrid({
+        name: 'layout_options_column_width_grid',
+        component: 'TekGrid',
+        columns: [{ name: 'id' }],
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_options_column_width',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_column_width_grid',
+      });
+
+      await instance.onMounted({} as HTMLElement);
+      expect(instance.layoutEdited).toBe(false);
+
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(false);
+
+      grid.columns[0].width = '120px';
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(true);
+
+      grid.columns[0].width = undefined;
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(false);
+    });
+
+    it('should compare current grid layout with selected named layout', async () => {
+      const grid = new TekGrid({
+        name: 'layout_options_named_baseline_grid',
+        component: 'TekGrid',
+        columns: [{ name: 'id' }],
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_options_named_baseline',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_named_baseline_grid',
+      });
+
+      await instance.onMounted({} as HTMLElement);
+
+      const selectedLayout = instance.getCurrentLayout();
+      selectedLayout.name = 'Name first';
+      instance.layouts = {
+        'Name first': selectedLayout,
+      };
+      instance.currentLayoutName = 'Name first';
+
+      expect(instance.hasLayoutChanges()).toBe(false);
+
+      grid.columns[0].width = '120px';
+
+      expect(instance.hasLayoutChanges()).toBe(true);
+    });
+
+    it('should not detect layout changes when there is no baseline layout', async () => {
+      const grid = new TekGrid({
+        name: 'layout_options_without_baseline_grid',
+        component: 'TekGrid',
+        columns: [{ name: 'id' }],
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_options_without_baseline',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_without_baseline_grid',
+      });
+
+      await instance.onMounted({} as HTMLElement);
+      instance.currentLayoutName = 'Missing layout';
+
+      expect(instance.hasLayoutChanges()).toBe(false);
+    });
+
+    it('should mark layout as edited when filter changes and clear when filter is restored', async () => {
+      const grid = new TekGrid({
+        name: 'layout_options_filter_undo_grid',
+        component: 'TekGrid',
+        columns: [{ name: 'id' }],
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_options_filter_undo',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_filter_undo_grid',
+      });
+
+      await instance.onMounted({} as HTMLElement);
+      expect(instance.layoutEdited).toBe(false);
+
+      grid.datasource.filter = { id: '10' };
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(true);
+
+      grid.datasource.filter = {};
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(false);
+    });
+
+    it('should mark layout as edited when dynamic filter changes and clear when dynamic filter is restored', async () => {
+      const grid = new TekGrid({
+        name: 'layout_options_dynamic_filter_undo_grid',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+          dynamicFilter: {
+            id: [{ relation: 'AND', operation: 'EQUALS', value: '10' }],
+          },
+        },
+        columns: [{ name: 'id' }],
+      });
+      grid.onCreated();
+
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_options_dynamic_filter_undo',
+        component: 'TekGridLayoutOptions',
+        gridName: 'layout_options_dynamic_filter_undo_grid',
+      });
+
+      await instance.onMounted({} as HTMLElement);
+      expect(instance.layoutEdited).toBe(false);
+
+      (grid.datasource as TekRestDatasource).dynamicFilter.id[0].value = '20';
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(true);
+
+      (grid.datasource as TekRestDatasource).dynamicFilter.id[0].value = '10';
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(false);
+    });
+
+    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(false);
+    });
+
+    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.datasource.filter = { id: '10' };
+      grid.changeLayout();
+
+      expect(instance.layoutEdited).toBe(true);
+    });
+
     it('should store the original column props of a TekGrid', () => {
       const tag = new Tag({
         name: 'toolbar',
@@ -103,11 +416,11 @@ describe('LayoutOptions', () => {
           isVisible: true,
           fixed: false,
           grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
+          minWidth: '',
+          maxWidth: '',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: [],
         },
@@ -116,11 +429,11 @@ describe('LayoutOptions', () => {
           isVisible: true,
           fixed: false,
           grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
+          minWidth: '',
+          maxWidth: '',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: [],
         },
@@ -129,11 +442,11 @@ describe('LayoutOptions', () => {
           isVisible: true,
           fixed: false,
           grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
+          minWidth: '',
+          maxWidth: '',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: [],
         },
@@ -142,11 +455,11 @@ describe('LayoutOptions', () => {
           isVisible: true,
           fixed: false,
           grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
+          minWidth: '',
+          maxWidth: '',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: 'TODAY',
         },
@@ -155,11 +468,11 @@ describe('LayoutOptions', () => {
           isVisible: true,
           fixed: false,
           grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
+          minWidth: '',
+          maxWidth: '',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: ['TODAY', 'TOMORROW'],
         },
@@ -189,37 +502,37 @@ describe('LayoutOptions', () => {
           minWidth: '100px',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: '',
           fixed: false,
-          grouped: undefined,
+          grouped: false,
         },
         {
           name: 'name',
           isVisible: true,
-          minWidth: undefined,
-          maxWidth: undefined,
+          minWidth: '',
+          maxWidth: '',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: '',
           fixed: false,
-          grouped: undefined,
+          grouped: false,
         },
         {
           name: 'salary',
           isVisible: true,
-          minWidth: undefined,
-          maxWidth: undefined,
+          minWidth: '',
+          maxWidth: '',
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: '',
           fixed: false,
-          grouped: undefined,
+          grouped: false,
         },
       ]);
     });
@@ -603,6 +916,41 @@ describe('LayoutOptions', () => {
       expect(instance.currentLayoutName).toBe('Name first');
       expect(instance.layouts['Name last'].gridWidth).toBe('740px');
     });
+
+    it('should call beforeApplyLayout with default layout', async () => {
+      let appliedLayout: ITekGridApplyLayoutEventParams['layout'];
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid_apply_default_layout',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+        events: {
+          beforeApplyLayout: ({ layout }: ITekGridApplyLayoutEventParams) => {
+            appliedLayout = layout;
+            return true;
+          },
+        },
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout_apply_default', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      instance.applyLayout('');
+
+      expect(appliedLayout).toEqual(instance.getLayout(''));
+      expect(appliedLayout!.name).toBe('');
+      expect(instance.currentLayoutName).toBe('');
+    });
   });
 
   describe('deleteLayout()', () => {
@@ -664,6 +1012,209 @@ describe('LayoutOptions', () => {
     });
   });
 
+  describe('getCurrentLayout()', () => {
+    it('should return layout from view bridge when available', () => {
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_current_from_view',
+        component: 'TekGridLayoutOptions',
+      });
+      const layout = {
+        name: '',
+        gridWidth: 'auto',
+        order: [],
+        filter: {},
+        dynamicFilter: {},
+        columns: [],
+      };
+      instance.viewGetCurrentLayout = jest.fn(() => layout);
+
+      expect(instance.getCurrentLayout()).toBe(layout);
+      expect(instance.viewGetCurrentLayout).toBeCalledWith('');
+    });
+
+    it('should return current grid layout', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid_current_layout',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout_current', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      grid.datasource.order = ['name.asc'];
+      grid.datasource.filter = { name: 'a' };
+      (grid.datasource as any).dynamicFilter = {
+        name: [
+          {
+            operation: 'CONTAINS',
+            relation: 'AND',
+            value: 'a',
+          },
+        ],
+      };
+      grid.columns[1].isVisible = false;
+      grid.columns[1].width = '120px';
+
+      expect(instance.getCurrentLayout()).toEqual({
+        name: '',
+        gridWidth: 'auto',
+        order: ['name.asc'],
+        filter: { name: 'a' },
+        dynamicFilter: {
+          name: [
+            {
+              operation: 'CONTAINS',
+              relation: 'AND',
+              value: 'a',
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'id',
+            label: '',
+            align: 'left',
+            isVisible: true,
+            minWidth: '',
+            maxWidth: '',
+            width: undefined,
+            fixed: false,
+            grouped: false,
+            groupOpened: false,
+            aggregation: undefined,
+            filterHelperValue: [],
+          },
+          {
+            name: 'name',
+            label: '',
+            align: 'left',
+            isVisible: false,
+            minWidth: '',
+            maxWidth: '',
+            width: '120px',
+            fixed: false,
+            grouped: false,
+            groupOpened: false,
+            aggregation: undefined,
+            filterHelperValue: [],
+          },
+          {
+            name: 'salary',
+            label: '',
+            align: 'left',
+            isVisible: true,
+            minWidth: '',
+            maxWidth: '',
+            width: undefined,
+            fixed: false,
+            grouped: false,
+            groupOpened: false,
+            aggregation: undefined,
+            filterHelperValue: [],
+          },
+        ],
+      });
+    });
+  });
+
+  describe('getLayout()', () => {
+    it('should return undefined when named layout does not exist', () => {
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_get_missing',
+        component: 'TekGridLayoutOptions',
+      });
+
+      expect(instance.getLayout('Missing layout')).toBeUndefined();
+    });
+
+    it('should return current layout when called without parameters', () => {
+      const instance = new TekGridLayoutOptions({
+        name: 'layout_get_without_parameters',
+        component: 'TekGridLayoutOptions',
+      });
+      instance.layouts = testLayouts.layouts!;
+      instance.currentLayoutName = 'Name first';
+
+      const layout = instance.getLayout();
+
+      expect(layout).toEqual(testLayouts.layouts!['Name first']);
+
+      layout!.gridWidth = '999px';
+      expect(instance.layouts['Name first'].gridWidth).toBe('544px');
+    });
+
+    it('should return a named layout clone', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid_get_layout',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout_get', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      const layout = instance.getLayout('Name first');
+      expect(layout).toEqual(instance.layouts['Name first']);
+
+      layout!.gridWidth = '999px';
+      expect(instance.layouts['Name first'].gridWidth).toBe('544px');
+    });
+
+    it('should return default layout when name is empty', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid_get_default_layout',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout_get_default', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.getLayout('')).toEqual({
+        name: '',
+        gridWidth: 'auto',
+        order: [],
+        filter: {},
+        dynamicFilter: {},
+        columns: instance.originalColumnProps,
+      });
+    });
+  });
+
   describe('updateLayout()', () => {
     it('should update layout and save', async () => {
       const tag = new Tag({
@@ -725,6 +1276,110 @@ describe('LayoutOptions', () => {
         },
       });
     });
+
+    it('should update named layout using current grid configuration', async () => {
+      let eventSavedLayouts: ITekGridLayoutInfo = {};
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid_update_current_layout',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+        events: {
+          saveLayouts: ({ layouts }) => { eventSavedLayouts = layouts; },
+        },
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout_update_current', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      grid.datasource.order = ['salary.desc'];
+      grid.datasource.filter = { salary: 100 };
+      grid.columns[2].width = '160px';
+
+      instance.updateLayout('Custom layout');
+
+      expect(instance.currentLayoutName).toBe('Custom layout');
+      expect(instance.layouts['Custom layout'].name).toBe('Custom layout');
+      expect(instance.layouts['Custom layout'].gridWidth).toBe('auto');
+      expect(instance.layouts['Custom layout'].order).toEqual(['salary.desc']);
+      expect(instance.layouts['Custom layout'].filter).toEqual({ salary: 100 });
+      expect(instance.layouts['Custom layout'].columns![2].width).toBe('160px');
+      expect(eventSavedLayouts.currentLayoutName).toBe('Custom layout');
+      expect(eventSavedLayouts.layouts!['Custom layout'].filter).toEqual({ salary: 100 });
+    });
+
+    it('should update current selected layout when name is unset', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid_update_selected_layout',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout_update_selected', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      instance.currentLayoutName = 'Name first';
+      grid.datasource.filter = { name: 'selected' };
+
+      instance.updateLayout();
+
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(instance.layouts['Name first'].filter).toEqual({ name: 'selected' });
+    });
+
+    it('should update default layout when name is empty', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid_update_default_layout',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout_update_default', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      grid.datasource.order = ['id.desc'];
+      grid.datasource.filter = { id: 1 };
+      instance.layoutEdited = true;
+
+      instance.updateLayout('');
+
+      expect(instance.layouts['']).toBeUndefined();
+      expect(instance.originalDatasourceOrder).toEqual(['id.desc']);
+      expect(instance.originalDatasourceFilter).toEqual({ id: 1 });
+      expect(instance.layoutEdited).toBeFalsy();
+    });
   });
 
   describe('discardChanges()', () => {