@zeedhi/teknisa-components-common 1.69.0 → 1.71.0

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

@@ -887,7 +887,10 @@ class GridBase {
             this.grid.callEvent('afterDelete', { component: this.grid });
         }
     }
-    reloadGrid() {
+    reloadGrid({ event }) {
+        this.grid.callEvent('beforeReload', { component: this.grid, event });
+        if (event && event.defaultPrevented)
+            return;
         this.grid.reload();
     }
     saveChanges({ event }) {
@@ -1026,6 +1029,9 @@ class GridBase {
             };
             this.filterModal = ModalService.create(filterModalDef);
         }
+        else {
+            this.loadFilterValues({ component: Metadata.getInstance(`${this.grid.name}-filter-form`) });
+        }
         this.filterModal.show();
     }
     hideFilterModal() {
@@ -1083,6 +1089,7 @@ class GridBase {
         }
     }
     loadFilterValues({ component }) {
+        const changedCompNames = [];
         const { datasource } = this.grid;
         if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
             const { dynamicFilter } = datasource;
@@ -1092,6 +1099,7 @@ class GridBase {
                         const relation = filterItem.relation || 'AND';
                         const operation = filterItem.operation || 'CONTAINS';
                         const compName = `${this.grid.name}-filter-${relation}-${operation}-${column}-${index}`;
+                        changedCompNames.push(compName);
                         component.value[compName] = filterItem.value;
                         let helperValue = '';
                         const columnObj = this.grid.getColumn(column);
@@ -1120,10 +1128,17 @@ class GridBase {
             const { filter } = datasource;
             Object.keys(filter).forEach((item) => {
                 if (filter[item]) {
-                    component.value[`${this.grid.name}-filter-AND-CONTAINS-${item}-0`] = filter[item];
+                    const compName = `${this.grid.name}-filter-AND-CONTAINS-${item}-0`;
+                    changedCompNames.push(compName);
+                    component.value[compName] = filter[item];
                 }
             });
         }
+        Object.keys(component.value).forEach((compName) => {
+            if (changedCompNames.indexOf(compName) === -1) {
+                component.value[compName] = null;
+            }
+        });
     }
     applyFilter({ event }) {
         const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
@@ -2916,7 +2931,9 @@ class TekGridLayoutOptions extends ComponentRender {
     }
     getParentGrid() {
         let { parent } = this;
-        while (parent && !(parent.constructor === Grid || parent.constructor.prototype instanceof Grid)) {
+        while (parent
+            && !(parent.constructor === Grid
+                || parent.constructor.prototype instanceof Grid)) {
             parent = parent.parent;
         }
         return parent;
@@ -2938,6 +2955,7 @@ class TekGridLayoutOptions extends ComponentRender {
                 isVisible: column.isVisible,
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
+                width: column.width,
                 fixed: column.fixed,
                 grouped: column.grouped,
                 groupOpened: column.groupOpened,
@@ -2953,7 +2971,9 @@ class TekGridLayoutOptions extends ComponentRender {
                 const route = Config.loadGridLayoutsEndPoint;
                 const response = yield Http.get(`${route}?id=${this.grid.name}`);
                 const responseData = response.data.data;
-                layoutsInfo = responseData.length && responseData[0] ? responseData[0].layouts : responseData.layouts || {};
+                layoutsInfo = responseData.length && responseData[0]
+                    ? responseData[0].layouts
+                    : responseData.layouts || {};
             }
             else {
                 layoutsInfo = JSON.parse(localStorage.getItem(this.grid.name) || '{}');
@@ -2989,8 +3009,9 @@ class TekGridLayoutOptions extends ComponentRender {
     }
     applyLayout(name, save = true) {
         this.currentLayoutName = name;
+        const layoutSelected = this.layouts[name];
         if (this.viewApplyLayout) {
-            this.viewApplyLayout(this.layouts[name]);
+            this.viewApplyLayout(layoutSelected);
         }
         if (save) {
             this.saveLayouts();
@@ -3039,7 +3060,9 @@ class TekGridLayoutOptions extends ComponentRender {
         if (layout.columns) {
             this.originalColumnProps = layout.columns.map((column) => {
                 const originalColumnIdx = this.originalColumnProps.findIndex((item) => item.name === column.name);
-                const originalColumn = originalColumnIdx !== -1 ? this.originalColumnProps[originalColumnIdx] : {};
+                const originalColumn = originalColumnIdx !== -1
+                    ? this.originalColumnProps[originalColumnIdx]
+                    : {};
                 return Object.assign(Object.assign({}, originalColumn), column);
             });
         }
@@ -3052,12 +3075,14 @@ class TekGridLayoutOptions extends ComponentRender {
         layout.columns = layout.columns || [];
         const layoutColumnNames = layout.columns.map((layoutColumn) => layoutColumn.name);
         this.grid.columns.forEach((gridColumn) => {
-            if (!hasLayoutColumns || layoutColumnNames.indexOf(gridColumn.name) === -1) {
+            if (!hasLayoutColumns
+                || layoutColumnNames.indexOf(gridColumn.name) === -1) {
                 layout.columns.push({
                     name: gridColumn.name,
                     label: gridColumn.label,
                     align: gridColumn.align,
                     isVisible: !hasLayoutColumns && gridColumn.isVisible,
+                    width: gridColumn.width,
                     minWidth: gridColumn.minWidth,
                     maxWidth: gridColumn.maxWidth,
                     fixed: gridColumn.fixed,

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

@@ -892,7 +892,10 @@
               this.grid.callEvent('afterDelete', { component: this.grid });
           }
       }
-      reloadGrid() {
+      reloadGrid({ event }) {
+          this.grid.callEvent('beforeReload', { component: this.grid, event });
+          if (event && event.defaultPrevented)
+              return;
           this.grid.reload();
       }
       saveChanges({ event }) {
@@ -1031,6 +1034,9 @@
               };
               this.filterModal = common.ModalService.create(filterModalDef);
           }
+          else {
+              this.loadFilterValues({ component: core.Metadata.getInstance(`${this.grid.name}-filter-form`) });
+          }
           this.filterModal.show();
       }
       hideFilterModal() {
@@ -1088,6 +1094,7 @@
           }
       }
       loadFilterValues({ component }) {
+          const changedCompNames = [];
           const { datasource } = this.grid;
           if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
               const { dynamicFilter } = datasource;
@@ -1097,6 +1104,7 @@
                           const relation = filterItem.relation || 'AND';
                           const operation = filterItem.operation || 'CONTAINS';
                           const compName = `${this.grid.name}-filter-${relation}-${operation}-${column}-${index}`;
+                          changedCompNames.push(compName);
                           component.value[compName] = filterItem.value;
                           let helperValue = '';
                           const columnObj = this.grid.getColumn(column);
@@ -1125,10 +1133,17 @@
               const { filter } = datasource;
               Object.keys(filter).forEach((item) => {
                   if (filter[item]) {
-                      component.value[`${this.grid.name}-filter-AND-CONTAINS-${item}-0`] = filter[item];
+                      const compName = `${this.grid.name}-filter-AND-CONTAINS-${item}-0`;
+                      changedCompNames.push(compName);
+                      component.value[compName] = filter[item];
                   }
               });
           }
+          Object.keys(component.value).forEach((compName) => {
+              if (changedCompNames.indexOf(compName) === -1) {
+                  component.value[compName] = null;
+              }
+          });
       }
       applyFilter({ event }) {
           const filterForm = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
@@ -2921,7 +2936,9 @@
       }
       getParentGrid() {
           let { parent } = this;
-          while (parent && !(parent.constructor === common.Grid || parent.constructor.prototype instanceof common.Grid)) {
+          while (parent
+              && !(parent.constructor === common.Grid
+                  || parent.constructor.prototype instanceof common.Grid)) {
               parent = parent.parent;
           }
           return parent;
@@ -2943,6 +2960,7 @@
                   isVisible: column.isVisible,
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
+                  width: column.width,
                   fixed: column.fixed,
                   grouped: column.grouped,
                   groupOpened: column.groupOpened,
@@ -2958,7 +2976,9 @@
                   const route = core.Config.loadGridLayoutsEndPoint;
                   const response = yield core.Http.get(`${route}?id=${this.grid.name}`);
                   const responseData = response.data.data;
-                  layoutsInfo = responseData.length && responseData[0] ? responseData[0].layouts : responseData.layouts || {};
+                  layoutsInfo = responseData.length && responseData[0]
+                      ? responseData[0].layouts
+                      : responseData.layouts || {};
               }
               else {
                   layoutsInfo = JSON.parse(localStorage.getItem(this.grid.name) || '{}');
@@ -2994,8 +3014,9 @@
       }
       applyLayout(name, save = true) {
           this.currentLayoutName = name;
+          const layoutSelected = this.layouts[name];
           if (this.viewApplyLayout) {
-              this.viewApplyLayout(this.layouts[name]);
+              this.viewApplyLayout(layoutSelected);
           }
           if (save) {
               this.saveLayouts();
@@ -3044,7 +3065,9 @@
           if (layout.columns) {
               this.originalColumnProps = layout.columns.map((column) => {
                   const originalColumnIdx = this.originalColumnProps.findIndex((item) => item.name === column.name);
-                  const originalColumn = originalColumnIdx !== -1 ? this.originalColumnProps[originalColumnIdx] : {};
+                  const originalColumn = originalColumnIdx !== -1
+                      ? this.originalColumnProps[originalColumnIdx]
+                      : {};
                   return Object.assign(Object.assign({}, originalColumn), column);
               });
           }
@@ -3057,12 +3080,14 @@
           layout.columns = layout.columns || [];
           const layoutColumnNames = layout.columns.map((layoutColumn) => layoutColumn.name);
           this.grid.columns.forEach((gridColumn) => {
-              if (!hasLayoutColumns || layoutColumnNames.indexOf(gridColumn.name) === -1) {
+              if (!hasLayoutColumns
+                  || layoutColumnNames.indexOf(gridColumn.name) === -1) {
                   layout.columns.push({
                       name: gridColumn.name,
                       label: gridColumn.label,
                       align: gridColumn.align,
                       isVisible: !hasLayoutColumns && gridColumn.isVisible,
+                      width: gridColumn.width,
                       minWidth: gridColumn.minWidth,
                       maxWidth: gridColumn.maxWidth,
                       fixed: gridColumn.fixed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.69.0",
+  "version": "1.71.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -31,5 +31,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "825aebaf78050f0cef17f42767bae473920d1c37"
+  "gitHead": "5d07dd32186fce8f874881da6b7fb8327c7b462e"
 }

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

@@ -976,6 +976,32 @@ describe('TekGrid', () => {
       }
       spy.mockReset();
     });
+
+    it('should call beforeReload event', () => {
+      const beforeSpy = jest.fn();
+      const instance = new TekGrid({
+        name: 'grid_reloadClick2',
+        component: 'TekGrid',
+        events: {
+          beforeReload: beforeSpy,
+        },
+      });
+
+      const spy = jest.spyOn(instance, 'reload');
+      instance.onCreated();
+      const notEditingSpan = instance.toolbarSlot[2];
+      if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 3) {
+        const reloadTooltip = notEditingSpan.children[3];
+        if (reloadTooltip && reloadTooltip.children && reloadTooltip.children.length > 0) {
+          const reloadButton = reloadTooltip.children[0];
+          const button = new Button(reloadButton);
+          setClick(button, { defaultPrevented: true });
+          expect(beforeSpy).toBeCalled();
+          expect(spy).not.toBeCalled();
+        }
+      }
+      spy.mockReset();
+    });
   });
 
   describe('grouping', () => {
@@ -1642,7 +1668,13 @@ describe('TekGrid', () => {
         component: 'TekGrid',
       });
 
+      const formInstance = new Form({
+        name: 'form',
+        component: 'ZdForm',
+      });
+
       const spy = jest.spyOn(ModalService, 'create');
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formInstance);
       instance.onCreated();
 
       const button = clickOnFilterButton(instance);
@@ -1651,7 +1683,9 @@ describe('TekGrid', () => {
       expect(spy).toBeCalledTimes(1);
       expect(button.isVisible).toBeFalsy();
       (instance as any).gridBase.hideFilterModal();
+
       spy.mockReset();
+      spyMetadata.mockReset();
     });
 
     it('should call events', () => {
@@ -1981,7 +2015,6 @@ describe('TekGrid', () => {
           type: 'tek-rest',
           lazyLoad: true,
           dynamicFilter: {
-            id: [],
             name: [
               {
                 operation: 'NOT_EQUALS',
@@ -2039,10 +2072,17 @@ describe('TekGrid', () => {
 
       expect(form.name).toBe('grid_filterClick9-filter-form');
       const formObject = new Form(form);
+      formObject.value = {
+        'grid_filterClick9-filter-AND_CONTAINS-id-0': null,
+        'grid_filterClick9-filter-OR-NOT_EQUALS-name-0': null,
+        'grid_filterClick9-filter-AND-CONTAINS-phone-0': null,
+        'grid_filterClick9-filter-OR-IN-date-0': null,
+      };
       const dateObject = new Date({ name: 'date', component: 'ZdDate' });
       const spyMetadata = jest.spyOn(Metadata, 'getInstances').mockImplementation(() => [dateObject]);
       formObject.onMounted({} as HTMLElement);
       expect(formObject.value).toEqual({
+        'grid_filterClick9-filter-AND_CONTAINS-id-0': null,
         'grid_filterClick9-filter-OR-NOT_EQUALS-name-0': 'teste',
         'grid_filterClick9-filter-AND-CONTAINS-phone-0': '9',
         'grid_filterClick9-filter-OR-IN-date-0': ['2021-11-12', '2021-12-12'],

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

@@ -21,6 +21,7 @@ export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams
     groupSelect?: EventDef<T>;
     groupUnselect?: EventDef<T>;
     beforeOpenReport?: EventDef<T, IBeforeReportEvent>;
+    beforeReload?: EventDef<T>;
     [key: string]: any;
 }
 export declare type ITekGridLayoutOptionsEvent<T> = (event: T) => Promise<any>;