@zeedhi/teknisa-components-common 1.125.0 → 1.126.0

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

@@ -1335,6 +1335,9 @@ Messages.add({
             TEKGRID_WITH_GROUPS: '(Com grupos)',
             TEKGRID_GRID_MIRROR: '(Espelho do grid)',
             TEKGRID_NO_DATA: 'Não há dados para exportar',
+            TEKGRID_LAYOUT_FILTER_CONFIRMATION: 'O layout possui informações de filtro. '
+                + 'Deseja salvar o filtro com o layout?',
+            TEKGRID_LAYOUT_HAS_FILTER: 'possui filtro',
         },
     },
     'en-US': {
@@ -1409,6 +1412,9 @@ Messages.add({
             TEKGRID_WITH_GROUPS: '(With groups)',
             TEKGRID_GRID_MIRROR: '(Grid mirror)',
             TEKGRID_NO_DATA: 'There is no data to export',
+            TEKGRID_LAYOUT_FILTER_CONFIRMATION: 'The layout contains filter information. '
+                + 'Do you want to save the filter with the layout?',
+            TEKGRID_LAYOUT_HAS_FILTER: 'has filter',
         },
     },
     'es-CL': {
@@ -1483,6 +1489,9 @@ Messages.add({
             TEKGRID_WITH_GROUPS: '(Con grupos)',
             TEKGRID_GRID_MIRROR: '(Espejo de grid)',
             TEKGRID_NO_DATA: 'No hay datos para exportar',
+            TEKGRID_LAYOUT_FILTER_CONFIRMATION: 'La disposición contiene información de filtro. '
+                + '¿Desea guardar el filtro junto con la disposición?',
+            TEKGRID_LAYOUT_HAS_FILTER: 'contiene filtro',
         },
     },
 });
@@ -3834,6 +3843,9 @@ class TekGridLayoutOptions extends ComponentRender {
             }
         });
     }
+    checkLayoutsData(data) {
+        return Object.assign(Object.assign({}, data), { layouts: Array.isArray(data === null || data === void 0 ? void 0 : data.layouts) ? {} : ((data === null || data === void 0 ? void 0 : data.layouts) || {}) });
+    }
     loadLayoutsInfo() {
         return __awaiter(this, void 0, void 0, function* () {
             const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
@@ -3844,9 +3856,9 @@ class TekGridLayoutOptions extends ComponentRender {
                 const route = Config.loadGridLayoutsEndPoint;
                 const response = yield Http.get(`${route}?id=${this.grid.name}`);
                 const responseData = response.data.data;
-                return responseData.length && responseData[0]
+                return this.checkLayoutsData(responseData.length && responseData[0]
                     ? responseData[0].layouts
-                    : responseData.layouts || {};
+                    : responseData.layouts);
             }
             return JSON.parse(localStorage.getItem(this.grid.name) || '{}');
         });
@@ -3859,8 +3871,91 @@ class TekGridLayoutOptions extends ComponentRender {
         }
         return '';
     }
+    layoutHasFilter(layout) {
+        const layoutValue = typeof layout === 'string' ? this.layouts[layout] : layout;
+        return Object.keys(layoutValue.filter || {}).length
+            || Object.keys(layoutValue.dynamicFilter || {}).length;
+    }
     newLayout(layout) {
-        this.fixColumns(layout);
+        this.newLayoutValue = layout;
+        if (this.layoutHasFilter(layout)) {
+            if (!this.confirmFilterModal) {
+                this.confirmFilterModal = ModalService.create({
+                    name: 'tekgrid_layout_filter_modal',
+                    persistent: true,
+                    children: [
+                        {
+                            name: 'tekgrid_layout_filter_header',
+                            component: 'ZdHeader',
+                            height: 32,
+                            cssClass: 'zd-mb-4',
+                            color: 'transparent',
+                            padless: true,
+                            elevation: 0,
+                            leftSlot: [
+                                {
+                                    name: 'tekgrid_layout_filter_title',
+                                    component: 'ZdText',
+                                    text: I18n.translate('TEKGRID_LAYOUT_FILTER_CONFIRMATION'),
+                                    cssClass: 'zd-theme-font-title',
+                                },
+                            ],
+                            rightSlot: [
+                                {
+                                    name: 'closeModalButton',
+                                    component: 'ZdModalCloseButton',
+                                    small: true,
+                                    modalName: 'tekgrid_layout_filter_modal',
+                                },
+                            ],
+                        },
+                        {
+                            name: 'tekgrid_layout_filter_footer',
+                            component: 'ZdFooter',
+                            color: 'transparent',
+                            padless: true,
+                            rightSlot: [
+                                {
+                                    name: 'tekgrid_layout_filter_no',
+                                    component: 'ZdButton',
+                                    label: I18n.translate('NO'),
+                                    outline: true,
+                                    cssClass: 'zd-mr-2',
+                                    events: {
+                                        click: () => {
+                                            this.doNewLayout(this.newLayoutValue, false);
+                                            this.confirmFilterModal.hide();
+                                        },
+                                    },
+                                },
+                                {
+                                    name: 'tekgrid_layout_filter_yes',
+                                    component: 'ZdButton',
+                                    label: I18n.translate('YES'),
+                                    cssClass: 'zd-mr-2',
+                                    events: {
+                                        click: () => {
+                                            this.doNewLayout(this.newLayoutValue, true);
+                                            this.confirmFilterModal.hide();
+                                        },
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                });
+            }
+            this.confirmFilterModal.show();
+        }
+        else {
+            this.doNewLayout(layout);
+        }
+    }
+    doNewLayout(layout, saveFilter = true) {
+        if (!saveFilter) {
+            layout.filter = undefined;
+            layout.dynamicFilter = undefined;
+        }
         this.currentLayoutName = layout.name;
         this.addLayout(layout);
         this.layoutEdited = false;
@@ -3878,6 +3973,14 @@ class TekGridLayoutOptions extends ComponentRender {
         this.layoutEdited = false;
     }
     applyLayout(name, save = true) {
+        if (this.grid.events.beforeApplyLayout) {
+            const canApply = this.grid.callEvent('beforeApplyLayout', {
+                component: this.grid,
+                layout: this.layouts[name],
+            });
+            if (canApply === false)
+                return;
+        }
         this.currentLayoutName = name;
         const layoutSelected = this.layouts[name];
         if (this.viewApplyLayout) {

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

@@ -1339,6 +1339,9 @@
               TEKGRID_WITH_GROUPS: '(Com grupos)',
               TEKGRID_GRID_MIRROR: '(Espelho do grid)',
               TEKGRID_NO_DATA: 'Não há dados para exportar',
+              TEKGRID_LAYOUT_FILTER_CONFIRMATION: 'O layout possui informações de filtro. '
+                  + 'Deseja salvar o filtro com o layout?',
+              TEKGRID_LAYOUT_HAS_FILTER: 'possui filtro',
           },
       },
       'en-US': {
@@ -1413,6 +1416,9 @@
               TEKGRID_WITH_GROUPS: '(With groups)',
               TEKGRID_GRID_MIRROR: '(Grid mirror)',
               TEKGRID_NO_DATA: 'There is no data to export',
+              TEKGRID_LAYOUT_FILTER_CONFIRMATION: 'The layout contains filter information. '
+                  + 'Do you want to save the filter with the layout?',
+              TEKGRID_LAYOUT_HAS_FILTER: 'has filter',
           },
       },
       'es-CL': {
@@ -1487,6 +1493,9 @@
               TEKGRID_WITH_GROUPS: '(Con grupos)',
               TEKGRID_GRID_MIRROR: '(Espejo de grid)',
               TEKGRID_NO_DATA: 'No hay datos para exportar',
+              TEKGRID_LAYOUT_FILTER_CONFIRMATION: 'La disposición contiene información de filtro. '
+                  + '¿Desea guardar el filtro junto con la disposición?',
+              TEKGRID_LAYOUT_HAS_FILTER: 'contiene filtro',
           },
       },
   });
@@ -3838,6 +3847,9 @@
               }
           });
       }
+      checkLayoutsData(data) {
+          return Object.assign(Object.assign({}, data), { layouts: Array.isArray(data === null || data === void 0 ? void 0 : data.layouts) ? {} : ((data === null || data === void 0 ? void 0 : data.layouts) || {}) });
+      }
       loadLayoutsInfo() {
           return __awaiter(this, void 0, void 0, function* () {
               const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
@@ -3848,9 +3860,9 @@
                   const route = core.Config.loadGridLayoutsEndPoint;
                   const response = yield core.Http.get(`${route}?id=${this.grid.name}`);
                   const responseData = response.data.data;
-                  return responseData.length && responseData[0]
+                  return this.checkLayoutsData(responseData.length && responseData[0]
                       ? responseData[0].layouts
-                      : responseData.layouts || {};
+                      : responseData.layouts);
               }
               return JSON.parse(localStorage.getItem(this.grid.name) || '{}');
           });
@@ -3863,8 +3875,91 @@
           }
           return '';
       }
+      layoutHasFilter(layout) {
+          const layoutValue = typeof layout === 'string' ? this.layouts[layout] : layout;
+          return Object.keys(layoutValue.filter || {}).length
+              || Object.keys(layoutValue.dynamicFilter || {}).length;
+      }
       newLayout(layout) {
-          this.fixColumns(layout);
+          this.newLayoutValue = layout;
+          if (this.layoutHasFilter(layout)) {
+              if (!this.confirmFilterModal) {
+                  this.confirmFilterModal = common.ModalService.create({
+                      name: 'tekgrid_layout_filter_modal',
+                      persistent: true,
+                      children: [
+                          {
+                              name: 'tekgrid_layout_filter_header',
+                              component: 'ZdHeader',
+                              height: 32,
+                              cssClass: 'zd-mb-4',
+                              color: 'transparent',
+                              padless: true,
+                              elevation: 0,
+                              leftSlot: [
+                                  {
+                                      name: 'tekgrid_layout_filter_title',
+                                      component: 'ZdText',
+                                      text: core.I18n.translate('TEKGRID_LAYOUT_FILTER_CONFIRMATION'),
+                                      cssClass: 'zd-theme-font-title',
+                                  },
+                              ],
+                              rightSlot: [
+                                  {
+                                      name: 'closeModalButton',
+                                      component: 'ZdModalCloseButton',
+                                      small: true,
+                                      modalName: 'tekgrid_layout_filter_modal',
+                                  },
+                              ],
+                          },
+                          {
+                              name: 'tekgrid_layout_filter_footer',
+                              component: 'ZdFooter',
+                              color: 'transparent',
+                              padless: true,
+                              rightSlot: [
+                                  {
+                                      name: 'tekgrid_layout_filter_no',
+                                      component: 'ZdButton',
+                                      label: core.I18n.translate('NO'),
+                                      outline: true,
+                                      cssClass: 'zd-mr-2',
+                                      events: {
+                                          click: () => {
+                                              this.doNewLayout(this.newLayoutValue, false);
+                                              this.confirmFilterModal.hide();
+                                          },
+                                      },
+                                  },
+                                  {
+                                      name: 'tekgrid_layout_filter_yes',
+                                      component: 'ZdButton',
+                                      label: core.I18n.translate('YES'),
+                                      cssClass: 'zd-mr-2',
+                                      events: {
+                                          click: () => {
+                                              this.doNewLayout(this.newLayoutValue, true);
+                                              this.confirmFilterModal.hide();
+                                          },
+                                      },
+                                  },
+                              ],
+                          },
+                      ],
+                  });
+              }
+              this.confirmFilterModal.show();
+          }
+          else {
+              this.doNewLayout(layout);
+          }
+      }
+      doNewLayout(layout, saveFilter = true) {
+          if (!saveFilter) {
+              layout.filter = undefined;
+              layout.dynamicFilter = undefined;
+          }
           this.currentLayoutName = layout.name;
           this.addLayout(layout);
           this.layoutEdited = false;
@@ -3882,6 +3977,14 @@
           this.layoutEdited = false;
       }
       applyLayout(name, save = true) {
+          if (this.grid.events.beforeApplyLayout) {
+              const canApply = this.grid.callEvent('beforeApplyLayout', {
+                  component: this.grid,
+                  layout: this.layouts[name],
+              });
+              if (canApply === false)
+                  return;
+          }
           this.currentLayoutName = name;
           const layoutSelected = this.layouts[name];
           if (this.viewApplyLayout) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.125.0",
+  "version": "1.126.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "^1.97.0"
   },
-  "gitHead": "8419653d2cc2243ea75d74b0640589e6ecefe6d2"
+  "gitHead": "8783f8a1fc5b3ee71dc7bc21662065f9e5e7c653"
 }

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

@@ -1,11 +1,15 @@
-import { Grid, Tag } from '@zeedhi/common';
+import {
+  Grid, Tag, Button, ModalService, IModal, Modal,
+} from '@zeedhi/common';
 import { Config, Http } from '@zeedhi/core';
 import {
   ITekConfig,
+  ITekGridApplyLayoutEventParams,
   ITekGridLayoutInfo,
   TekGrid,
   TekGridLayoutOptions,
 } from '../../../../src';
+import { setClick } from '../../../__helpers__';
 
 let savedLayouts: string = '';
 const testLayouts: ITekGridLayoutInfo = {
@@ -379,6 +383,65 @@ describe('LayoutOptions', () => {
         layouts: { 'Name first': newLayout },
       }));
     });
+
+    it('should add new layout with filter', () => {
+      const newLayout1 = {
+        name: 'teste1',
+        filter: { name: '1' },
+      };
+      const newLayout2 = {
+        name: 'teste2',
+        filter: { name: '1' },
+      };
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      instance.onMounted({} as HTMLElement);
+
+      let yesButton!: Button;
+      let noButton!: Button;
+
+      const modalServiceCreateSpy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const newModal = new Modal(modal);
+        noButton = new Button(newModal.children[1].rightSlot[0]);
+        yesButton = new Button(newModal.children[1].rightSlot[1]);
+        return newModal;
+      });
+
+      instance.newLayout(newLayout1);
+      setClick(yesButton!);
+
+      expect(instance.currentLayoutName).toBe('teste1');
+      expect(instance.layoutNames).toEqual(['teste1']);
+      expect(instance.layouts.teste1).toEqual(newLayout1);
+      expect(instance.layoutHasFilter('teste1')).toBeTruthy();
+
+      instance.newLayout(newLayout2);
+      setClick(noButton!);
+
+      expect(instance.currentLayoutName).toBe('teste2');
+      expect(instance.layoutNames).toEqual(['teste1', 'teste2']);
+      expect(instance.layouts.teste2.filter).toBeUndefined();
+      expect(instance.layouts.teste2.dynamicFilter).toBeUndefined();
+      expect(instance.layoutHasFilter('teste2')).toBeFalsy();
+
+      modalServiceCreateSpy.mockReset();
+    });
   });
 
   describe('addLayout()', () => {
@@ -499,6 +562,45 @@ describe('LayoutOptions', () => {
       expect(instance.currentLayoutName).toBe('Name first');
       expect(eventSavedLayouts.currentLayoutName).toBe('Name first');
     });
+
+    it('should call beforeApplyLayout', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+        events: {
+          beforeApplyLayout: ({ layout }: ITekGridApplyLayoutEventParams) => {
+            if (layout) layout.gridWidth = '740px';
+            return layout?.name === 'Name first';
+          },
+        },
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+      instance.addLayout({
+        name: 'Name last',
+      });
+
+      expect(instance.currentLayoutName).toBe('');
+      instance.applyLayout('Name first');
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(instance.layouts['Name first'].gridWidth).toBe('740px');
+      instance.applyLayout('Name last');
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(instance.layouts['Name last'].gridWidth).toBe('740px');
+    });
   });
 
   describe('deleteLayout()', () => {
@@ -826,7 +928,7 @@ describe('LayoutOptions', () => {
         },
       };
 
-      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: { layouts } } }));
+      let spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: { layouts } } }));
 
       await instance.onMounted({} as HTMLElement);
       await grid.onMounted({} as HTMLElement);
@@ -846,6 +948,20 @@ describe('LayoutOptions', () => {
         },
       });
       spy.mockReset();
+
+      // tratamento do erro no backend que esta retornando layouts como array vazio
+      instance.layouts = {};
+      spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: { data: { layouts: { currentLayoutName: '', layouts: [] } } },
+      }));
+      await instance.onMounted({} as HTMLElement);
+      await grid.onMounted({} as HTMLElement);
+
+      await flushPromises();
+      expect(spy).toBeCalled();
+      expect(instance.layouts).toEqual({});
+      spy.mockReset();
+
       (Config as ITekConfig).loadGridLayoutsEndPoint = '';
     });
 

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

@@ -4,18 +4,22 @@ import { IDynamicFilterItem, TekGrid, TekGridLayoutOptions, TekTreeGrid } from '
 export interface ITekGridLayoutEventParams extends IEventParam<ITekGrid> {
     layouts: ITekGridLayoutInfo;
 }
+export interface ITekGridApplyLayoutEventParams extends IEventParam<ITekGrid> {
+    layout?: ITekGridLayout;
+}
 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 | ITekGridCalcSummaryEventParams> extends IComponentEvents<T> {
+export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams | ITekGridApplyLayoutEventParams | ITekGridCalcSummaryEventParams> extends IComponentEvents<T> {
     addClick?: EventDef<T>;
     afterCancel?: EventDef<T>;
     afterDelete?: EventDef<T>;
     afterSave?: EventDef<T>;
     beforeApplyFilter?: EventDef<T>;
+    beforeApplyLayout?: EventDef<T>;
     beforeCancel?: EventDef<T>;
     beforeDelete?: EventDef<T>;
     beforeSave?: EventDef<T>;

package/types/components/tek-grid/layout-options.d.ts

@@ -17,9 +17,14 @@ export declare class TekGridLayoutOptions extends ComponentRender implements ITe
     grid: Grid;
     private getParentGrid;
     onMounted(element: HTMLElement): Promise<void>;
+    private checkLayoutsData;
     protected loadLayoutsInfo(): Promise<any>;
     getHelperValue(column: any): string | (string | undefined)[] | undefined;
+    layoutHasFilter(layout: string | ITekGridLayout): number;
+    private confirmFilterModal?;
+    private newLayoutValue?;
     newLayout(layout: ITekGridLayout): void;
+    private doNewLayout;
     addLayout(layout: ITekGridLayout): void;
     discardChanges(): void;
     applyLayout(name: string, save?: boolean): void;