@zeedhi/teknisa-components-common 1.131.0 → 1.132.0

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

@@ -1596,6 +1596,40 @@ const extractProperties = (obj, props) => {
     return result;
 };
 
+const EMPTY_VALUE = null;
+function cloneComparableValue(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+function normalizeComparableValue(value) {
+    if (value === undefined || value === null || value === '') {
+        return EMPTY_VALUE;
+    }
+    if (Array.isArray(value)) {
+        if (!value.length)
+            return EMPTY_VALUE;
+        return value.map((item) => normalizeComparableValue(item));
+    }
+    if (value && typeof value === 'object') {
+        const normalizedValue = Object.keys(value)
+            .sort()
+            .reduce((result, key) => {
+            const normalizedItem = normalizeComparableValue(value[key]);
+            if (normalizedItem !== EMPTY_VALUE) {
+                result[key] = normalizedItem;
+            }
+            return result;
+        }, {});
+        if (!Object.keys(normalizedValue).length)
+            return EMPTY_VALUE;
+        return normalizedValue;
+    }
+    return value;
+}
+function areObjectsEqual(first, second) {
+    return JSON.stringify(normalizeComparableValue(first))
+        === JSON.stringify(normalizeComparableValue(second));
+}
+
 const DynamicFilterOperations = {
     CONTAINS: true,
     NOT_CONTAINS: true,
@@ -2417,7 +2451,7 @@ class TekGrid extends GridEditable {
          */
         this.tasksBeforeLoad = [];
         this.request = debounce(() => { this.datasource.get(); }, 500);
-        this.updateGrouping = debounce((lazyLoad = false) => {
+        this.updateGrouping = debounce((lazyLoad = this.defaultLazy) => {
             this.updateGroupedData(lazyLoad);
         }, 100);
         this.title = this.getInitValue('title', props.title, this.title);
@@ -3906,7 +3940,7 @@ class TekGridLayoutOptions extends ComponentRender {
         return this.grid;
     }
     onGridChangeLayout() {
-        this.layoutEdited = true;
+        this.layoutEdited = this.hasLayoutChanges();
     }
     registerChangeLayoutEvent() {
         if (!this.grid || this.changeLayoutEventGrid === this.grid)
@@ -3925,20 +3959,8 @@ class TekGridLayoutOptions extends ComponentRender {
             this.originalDatasourceOrder = [...this.grid.datasource.order];
             this.originalDatasourceDynamicFilter = Object.assign({}, this.grid.datasource.dynamicFilter);
             this.originalDatasourceFilter = Object.assign({}, this.grid.datasource.filter);
-            this.originalColumnProps = this.grid.columns.map((column) => ({
-                name: column.name,
-                label: column.label,
-                align: column.align,
-                isVisible: column.isVisible,
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth,
-                width: column.width,
-                fixed: column.fixed,
-                grouped: column.grouped,
-                groupOpened: column.groupOpened,
-                aggregation: column.aggregation,
-                filterHelperValue: this.getHelperValue(column),
-            }));
+            this.originalColumnProps = this.grid.columns.map((column) => this.getLayoutColumnSnapshot(column));
+            this.originalLayoutSnapshot = cloneComparableValue(this.getCurrentLayoutSnapshot(''));
             let layoutsInfo = {};
             const promise = this.loadLayoutsInfo();
             if (this.grid instanceof TekGrid) {
@@ -3983,6 +4005,74 @@ class TekGridLayoutOptions extends ComponentRender {
         }
         return '';
     }
+    getLayoutColumnSnapshot(column, isVisible = column.isVisible) {
+        const filterHelperValue = this.getHelperValue(column);
+        return {
+            name: column.name,
+            label: column.label,
+            align: column.align,
+            isVisible,
+            minWidth: column.minWidth || '',
+            maxWidth: column.maxWidth || '',
+            width: column.width,
+            fixed: !!column.fixed,
+            grouped: !!column.grouped,
+            groupOpened: !!column.groupOpened,
+            aggregation: column.aggregation,
+            filterHelperValue: Array.isArray(filterHelperValue)
+                ? filterHelperValue
+                : filterHelperValue || '',
+        };
+    }
+    getCurrentLayoutSnapshot(name) {
+        if (this.viewGetCurrentLayout) {
+            return this.viewGetCurrentLayout(name);
+        }
+        return {
+            name,
+            gridWidth: 'auto',
+            order: [...this.grid.datasource.order],
+            filter: Object.assign({}, this.grid.datasource.filter),
+            dynamicFilter: Object.assign({}, this.grid.datasource.dynamicFilter),
+            columns: this.grid.columns.map((column) => this.getLayoutColumnSnapshot(column)),
+        };
+    }
+    getBaselineLayoutSnapshot() {
+        if (this.currentLayoutName) {
+            const currentLayout = this.layouts[this.currentLayoutName];
+            return currentLayout;
+        }
+        return this.originalLayoutSnapshot;
+    }
+    getOriginalLayoutSnapshot() {
+        return cloneComparableValue({
+            name: '',
+            gridWidth: 'auto',
+            order: [...this.originalDatasourceOrder],
+            filter: Object.assign({}, this.originalDatasourceFilter),
+            dynamicFilter: Object.assign({}, this.originalDatasourceDynamicFilter),
+            columns: this.originalColumnProps,
+        });
+    }
+    hasLayoutChanges() {
+        const baselineLayout = this.getBaselineLayoutSnapshot();
+        if (!baselineLayout)
+            return false;
+        const currentLayout = this.getCurrentLayoutSnapshot(this.currentLayoutName);
+        return !areObjectsEqual(currentLayout, baselineLayout);
+    }
+    getCurrentLayout() {
+        return this.getCurrentLayoutSnapshot(this.currentLayoutName);
+    }
+    getLayout(name = this.currentLayoutName) {
+        if (name === '') {
+            return this.getOriginalLayoutSnapshot();
+        }
+        const layout = this.layouts[name];
+        if (!layout)
+            return undefined;
+        return cloneComparableValue(layout);
+    }
     layoutHasFilter(layout) {
         if (layout === '')
             return false;
@@ -4087,16 +4177,16 @@ class TekGridLayoutOptions extends ComponentRender {
         this.layoutEdited = false;
     }
     applyLayout(name, save = true) {
+        const layoutSelected = name === '' ? this.getLayout(name) : this.layouts[name];
         if (this.grid.events.beforeApplyLayout) {
             const canApply = this.grid.callEvent('beforeApplyLayout', {
                 component: this.grid,
-                layout: this.layouts[name],
+                layout: layoutSelected,
             });
             if (canApply === false)
                 return;
         }
         this.currentLayoutName = name;
-        const layoutSelected = this.layouts[name];
         if (this.viewApplyLayout) {
             this.viewApplyLayout(layoutSelected);
         }
@@ -4131,7 +4221,12 @@ class TekGridLayoutOptions extends ComponentRender {
         delete this.layouts[name];
         this.saveLayouts();
     }
-    updateLayout(name, layout) {
+    updateLayout(name = this.currentLayoutName, layout = this.getCurrentLayout()) {
+        if (name === '') {
+            this.updateDefaultLayout(layout);
+            this.layoutEdited = false;
+            return;
+        }
         this.fixColumns(layout);
         this.currentLayoutName = name;
         layout.name = name;
@@ -4153,6 +4248,7 @@ class TekGridLayoutOptions extends ComponentRender {
                 return Object.assign(Object.assign({}, originalColumn), column);
             });
         }
+        this.originalLayoutSnapshot = this.getOriginalLayoutSnapshot();
         if (this.currentLayoutName === '') {
             this.applyLayout(this.currentLayoutName, false);
         }
@@ -4164,20 +4260,7 @@ class TekGridLayoutOptions extends ComponentRender {
         this.grid.columns.forEach((gridColumn) => {
             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,
-                    grouped: gridColumn.grouped,
-                    groupOpened: gridColumn.groupOpened,
-                    aggregation: gridColumn.aggregation,
-                    filterHelperValue: this.getHelperValue(gridColumn),
-                });
+                layout.columns.push(this.getLayoutColumnSnapshot(gridColumn, !hasLayoutColumns && gridColumn.isVisible));
             }
         });
     }

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

@@ -1600,6 +1600,40 @@
       return result;
   };
 
+  const EMPTY_VALUE = null;
+  function cloneComparableValue(value) {
+      return JSON.parse(JSON.stringify(value));
+  }
+  function normalizeComparableValue(value) {
+      if (value === undefined || value === null || value === '') {
+          return EMPTY_VALUE;
+      }
+      if (Array.isArray(value)) {
+          if (!value.length)
+              return EMPTY_VALUE;
+          return value.map((item) => normalizeComparableValue(item));
+      }
+      if (value && typeof value === 'object') {
+          const normalizedValue = Object.keys(value)
+              .sort()
+              .reduce((result, key) => {
+              const normalizedItem = normalizeComparableValue(value[key]);
+              if (normalizedItem !== EMPTY_VALUE) {
+                  result[key] = normalizedItem;
+              }
+              return result;
+          }, {});
+          if (!Object.keys(normalizedValue).length)
+              return EMPTY_VALUE;
+          return normalizedValue;
+      }
+      return value;
+  }
+  function areObjectsEqual(first, second) {
+      return JSON.stringify(normalizeComparableValue(first))
+          === JSON.stringify(normalizeComparableValue(second));
+  }
+
   const DynamicFilterOperations = {
       CONTAINS: true,
       NOT_CONTAINS: true,
@@ -2421,7 +2455,7 @@
            */
           this.tasksBeforeLoad = [];
           this.request = debounce__default["default"](() => { this.datasource.get(); }, 500);
-          this.updateGrouping = debounce__default["default"]((lazyLoad = false) => {
+          this.updateGrouping = debounce__default["default"]((lazyLoad = this.defaultLazy) => {
               this.updateGroupedData(lazyLoad);
           }, 100);
           this.title = this.getInitValue('title', props.title, this.title);
@@ -3910,7 +3944,7 @@
           return this.grid;
       }
       onGridChangeLayout() {
-          this.layoutEdited = true;
+          this.layoutEdited = this.hasLayoutChanges();
       }
       registerChangeLayoutEvent() {
           if (!this.grid || this.changeLayoutEventGrid === this.grid)
@@ -3929,20 +3963,8 @@
               this.originalDatasourceOrder = [...this.grid.datasource.order];
               this.originalDatasourceDynamicFilter = Object.assign({}, this.grid.datasource.dynamicFilter);
               this.originalDatasourceFilter = Object.assign({}, this.grid.datasource.filter);
-              this.originalColumnProps = this.grid.columns.map((column) => ({
-                  name: column.name,
-                  label: column.label,
-                  align: column.align,
-                  isVisible: column.isVisible,
-                  minWidth: column.minWidth,
-                  maxWidth: column.maxWidth,
-                  width: column.width,
-                  fixed: column.fixed,
-                  grouped: column.grouped,
-                  groupOpened: column.groupOpened,
-                  aggregation: column.aggregation,
-                  filterHelperValue: this.getHelperValue(column),
-              }));
+              this.originalColumnProps = this.grid.columns.map((column) => this.getLayoutColumnSnapshot(column));
+              this.originalLayoutSnapshot = cloneComparableValue(this.getCurrentLayoutSnapshot(''));
               let layoutsInfo = {};
               const promise = this.loadLayoutsInfo();
               if (this.grid instanceof TekGrid) {
@@ -3987,6 +4009,74 @@
           }
           return '';
       }
+      getLayoutColumnSnapshot(column, isVisible = column.isVisible) {
+          const filterHelperValue = this.getHelperValue(column);
+          return {
+              name: column.name,
+              label: column.label,
+              align: column.align,
+              isVisible,
+              minWidth: column.minWidth || '',
+              maxWidth: column.maxWidth || '',
+              width: column.width,
+              fixed: !!column.fixed,
+              grouped: !!column.grouped,
+              groupOpened: !!column.groupOpened,
+              aggregation: column.aggregation,
+              filterHelperValue: Array.isArray(filterHelperValue)
+                  ? filterHelperValue
+                  : filterHelperValue || '',
+          };
+      }
+      getCurrentLayoutSnapshot(name) {
+          if (this.viewGetCurrentLayout) {
+              return this.viewGetCurrentLayout(name);
+          }
+          return {
+              name,
+              gridWidth: 'auto',
+              order: [...this.grid.datasource.order],
+              filter: Object.assign({}, this.grid.datasource.filter),
+              dynamicFilter: Object.assign({}, this.grid.datasource.dynamicFilter),
+              columns: this.grid.columns.map((column) => this.getLayoutColumnSnapshot(column)),
+          };
+      }
+      getBaselineLayoutSnapshot() {
+          if (this.currentLayoutName) {
+              const currentLayout = this.layouts[this.currentLayoutName];
+              return currentLayout;
+          }
+          return this.originalLayoutSnapshot;
+      }
+      getOriginalLayoutSnapshot() {
+          return cloneComparableValue({
+              name: '',
+              gridWidth: 'auto',
+              order: [...this.originalDatasourceOrder],
+              filter: Object.assign({}, this.originalDatasourceFilter),
+              dynamicFilter: Object.assign({}, this.originalDatasourceDynamicFilter),
+              columns: this.originalColumnProps,
+          });
+      }
+      hasLayoutChanges() {
+          const baselineLayout = this.getBaselineLayoutSnapshot();
+          if (!baselineLayout)
+              return false;
+          const currentLayout = this.getCurrentLayoutSnapshot(this.currentLayoutName);
+          return !areObjectsEqual(currentLayout, baselineLayout);
+      }
+      getCurrentLayout() {
+          return this.getCurrentLayoutSnapshot(this.currentLayoutName);
+      }
+      getLayout(name = this.currentLayoutName) {
+          if (name === '') {
+              return this.getOriginalLayoutSnapshot();
+          }
+          const layout = this.layouts[name];
+          if (!layout)
+              return undefined;
+          return cloneComparableValue(layout);
+      }
       layoutHasFilter(layout) {
           if (layout === '')
               return false;
@@ -4091,16 +4181,16 @@
           this.layoutEdited = false;
       }
       applyLayout(name, save = true) {
+          const layoutSelected = name === '' ? this.getLayout(name) : this.layouts[name];
           if (this.grid.events.beforeApplyLayout) {
               const canApply = this.grid.callEvent('beforeApplyLayout', {
                   component: this.grid,
-                  layout: this.layouts[name],
+                  layout: layoutSelected,
               });
               if (canApply === false)
                   return;
           }
           this.currentLayoutName = name;
-          const layoutSelected = this.layouts[name];
           if (this.viewApplyLayout) {
               this.viewApplyLayout(layoutSelected);
           }
@@ -4135,7 +4225,12 @@
           delete this.layouts[name];
           this.saveLayouts();
       }
-      updateLayout(name, layout) {
+      updateLayout(name = this.currentLayoutName, layout = this.getCurrentLayout()) {
+          if (name === '') {
+              this.updateDefaultLayout(layout);
+              this.layoutEdited = false;
+              return;
+          }
           this.fixColumns(layout);
           this.currentLayoutName = name;
           layout.name = name;
@@ -4157,6 +4252,7 @@
                   return Object.assign(Object.assign({}, originalColumn), column);
               });
           }
+          this.originalLayoutSnapshot = this.getOriginalLayoutSnapshot();
           if (this.currentLayoutName === '') {
               this.applyLayout(this.currentLayoutName, false);
           }
@@ -4168,20 +4264,7 @@
           this.grid.columns.forEach((gridColumn) => {
               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,
-                      grouped: gridColumn.grouped,
-                      groupOpened: gridColumn.groupOpened,
-                      aggregation: gridColumn.aggregation,
-                      filterHelperValue: this.getHelperValue(gridColumn),
-                  });
+                  layout.columns.push(this.getLayoutColumnSnapshot(gridColumn, !hasLayoutColumns && gridColumn.isVisible));
               }
           });
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.131.0",
+  "version": "1.132.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "^1.97.0"
   },
-  "gitHead": "d69433a80af7e19465bcdc279415daf367743b0c"
+  "gitHead": "9f44cb7b5d254a6e8bdfc2ac2288239b75b31313"
 }

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

@@ -1864,6 +1864,46 @@ describe('TekGrid', () => {
       httpSpy.mockReset();
     });
 
+    it('should not call loadAfterTasks when initialized with lazyLoad datasource', async () => {
+      const instance = createAndMount({
+        name: 'grid_grouping_lazy_load',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'id',
+          },
+          {
+            name: 'name',
+            label: 'name',
+          },
+          {
+            name: 'department',
+            label: 'department',
+            grouped: true,
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          type: 'tek-rest',
+          limit: 10,
+          watchUrl: false,
+          lazyLoad: true,
+        },
+      });
+
+      const updateGroupedDataSpy = jest.spyOn(instance, 'updateGroupedData');
+      const loadAfterTasksSpy = jest.spyOn(instance, 'loadAfterTasks');
+
+      jest.runAllTimers();
+
+      expect(updateGroupedDataSpy).toHaveBeenCalled();
+      expect(loadAfterTasksSpy).not.toHaveBeenCalled();
+
+      loadAfterTasksSpy.mockRestore();
+    });
+
     it('editedRows should return cleaned rows', async () => {
       const instance = new TekGrid({
         name: 'grid_grouping_4',