@zeedhi/teknisa-components-common 1.84.0 → 1.84.1

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

@@ -19,11 +19,12 @@ class CrudForm extends Form {
          */
         this.editing = false;
         if (Object.keys(this.value).length > 0) {
-            this.beforeEditValue = Object.assign({}, this.value);
+            this.setValue(this.value);
         }
     }
     setValue(value, autoSave = true) {
         this.value = value;
+        this.unSavedValue = value;
         if (autoSave)
             this.saveEdit();
     }
@@ -41,7 +42,7 @@ class CrudForm extends Form {
      */
     saveEdit() {
         this.editing = false;
-        this.beforeEditValue = Object.assign({}, this.value);
+        this.beforeEditValue = Object.assign({}, this.unSavedValue);
     }
     /**
      * Update value using child input value
@@ -66,6 +67,7 @@ class CrudForm extends Form {
         return ['', null, undefined].includes(value) ? null : value;
     }
     onMounted(element) {
+        this.cancelEdit();
         super.onMounted(element);
         element.addEventListener('focus', this.focus.bind(this), true);
     }
@@ -2413,11 +2415,17 @@ class TekGrid extends GridEditable {
         this.groupColumns = [];
         this.groupedData = [];
         this.toolbarSlotProps = false;
+        this.defaultLazy = false;
         this.groups = [];
         this.summary = {};
+        /**
+         * Tasks that should be finished before loading the grid data
+         */
+        this.tasksBeforeLoad = [];
+        this.request = debounce(() => { this.datasource.get(); }, 500);
         this.updateGrouping = debounce((lazyLoad = false) => {
             this.updateGroupedData(lazyLoad);
-        }, 500);
+        }, 100);
         this.title = this.getInitValue('title', props.title, this.title);
         this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
         this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
@@ -2476,7 +2484,7 @@ class TekGrid extends GridEditable {
         this.filterOperationsDatasource = this.gridBase.getFilterOperationsDatasource();
         this.filterRelationsDatasource = this.gridBase.getFilterRelationsDatasource();
         this.createAccessors();
-        this.initGrouping((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.lazyLoad);
+        this.defaultLazy = (_a = props.datasource) === null || _a === void 0 ? void 0 : _a.lazyLoad;
     }
     onCreated() {
         super.onCreated();
@@ -2497,6 +2505,7 @@ class TekGrid extends GridEditable {
     onMounted(element) {
         super.onMounted(element);
         KeyMap.bind(this.keyShortcutKeyMapping, this, element);
+        this.initGrouping(this.defaultLazy);
     }
     onBeforeDestroy() {
         super.onBeforeDestroy();
@@ -2604,6 +2613,19 @@ class TekGrid extends GridEditable {
                 .then((reportUrl) => window.open(reportUrl));
         });
     }
+    registerTask(task) {
+        this.tasksBeforeLoad.push(task);
+    }
+    /**
+     * Loads grid data after resolving all tasks
+     */
+    loadAfterTasks() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(this.tasksBeforeLoad);
+            this.tasksBeforeLoad = [];
+            this.request();
+        });
+    }
     initGrouping(lazyLoad) {
         this.initGroups();
         this.initSummaryColumns();
@@ -2643,7 +2665,7 @@ class TekGrid extends GridEditable {
                 this.datasource.limit = this.originalDatasourceLimit;
             }
             if (!lazyLoad && this.datasource) {
-                yield this.datasource.get();
+                yield this.loadAfterTasks();
             }
             if (this.virtualScroll && this.viewUpdateScrollData) {
                 this.viewUpdateScrollData();
@@ -3099,21 +3121,11 @@ class TekGridLayoutOptions extends ComponentRender {
                 filterHelperValue: this.getHelperValue(column),
             }));
             let layoutsInfo = {};
-            const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
-            if (eventFunction && typeof eventFunction === 'function') {
-                layoutsInfo = yield eventFunction({ component: this.grid });
-            }
-            else if (Config.loadGridLayoutsEndPoint) {
-                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 || {};
-            }
-            else {
-                layoutsInfo = JSON.parse(localStorage.getItem(this.grid.name) || '{}');
+            const promise = this.loadLayoutsInfo();
+            if (this.grid instanceof TekGrid) {
+                this.grid.registerTask(promise);
             }
+            layoutsInfo = yield promise;
             if (layoutsInfo.layouts) {
                 this.layouts = layoutsInfo.layouts;
                 this.layoutNames = Object.keys(this.layouts);
@@ -3124,6 +3136,23 @@ class TekGridLayoutOptions extends ComponentRender {
             }
         });
     }
+    loadLayoutsInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
+            if (eventFunction && typeof eventFunction === 'function') {
+                return eventFunction({ component: this.grid });
+            }
+            if (Config.loadGridLayoutsEndPoint) {
+                const route = Config.loadGridLayoutsEndPoint;
+                const response = yield Http.get(`${route}?id=${this.grid.name}`);
+                const responseData = response.data.data;
+                return responseData.length && responseData[0]
+                    ? responseData[0].layouts
+                    : responseData.layouts || {};
+            }
+            return JSON.parse(localStorage.getItem(this.grid.name) || '{}');
+        });
+    }
     getHelperValue(column) {
         if (column instanceof TekGridColumn) {
             if (!Array.isArray(column.filterProps))

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

@@ -24,11 +24,12 @@
            */
           this.editing = false;
           if (Object.keys(this.value).length > 0) {
-              this.beforeEditValue = Object.assign({}, this.value);
+              this.setValue(this.value);
           }
       }
       setValue(value, autoSave = true) {
           this.value = value;
+          this.unSavedValue = value;
           if (autoSave)
               this.saveEdit();
       }
@@ -46,7 +47,7 @@
        */
       saveEdit() {
           this.editing = false;
-          this.beforeEditValue = Object.assign({}, this.value);
+          this.beforeEditValue = Object.assign({}, this.unSavedValue);
       }
       /**
        * Update value using child input value
@@ -71,6 +72,7 @@
           return ['', null, undefined].includes(value) ? null : value;
       }
       onMounted(element) {
+          this.cancelEdit();
           super.onMounted(element);
           element.addEventListener('focus', this.focus.bind(this), true);
       }
@@ -2418,11 +2420,17 @@
           this.groupColumns = [];
           this.groupedData = [];
           this.toolbarSlotProps = false;
+          this.defaultLazy = false;
           this.groups = [];
           this.summary = {};
+          /**
+           * Tasks that should be finished before loading the grid data
+           */
+          this.tasksBeforeLoad = [];
+          this.request = debounce__default["default"](() => { this.datasource.get(); }, 500);
           this.updateGrouping = debounce__default["default"]((lazyLoad = false) => {
               this.updateGroupedData(lazyLoad);
-          }, 500);
+          }, 100);
           this.title = this.getInitValue('title', props.title, this.title);
           this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
           this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
@@ -2481,7 +2489,7 @@
           this.filterOperationsDatasource = this.gridBase.getFilterOperationsDatasource();
           this.filterRelationsDatasource = this.gridBase.getFilterRelationsDatasource();
           this.createAccessors();
-          this.initGrouping((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.lazyLoad);
+          this.defaultLazy = (_a = props.datasource) === null || _a === void 0 ? void 0 : _a.lazyLoad;
       }
       onCreated() {
           super.onCreated();
@@ -2502,6 +2510,7 @@
       onMounted(element) {
           super.onMounted(element);
           core.KeyMap.bind(this.keyShortcutKeyMapping, this, element);
+          this.initGrouping(this.defaultLazy);
       }
       onBeforeDestroy() {
           super.onBeforeDestroy();
@@ -2609,6 +2618,19 @@
                   .then((reportUrl) => window.open(reportUrl));
           });
       }
+      registerTask(task) {
+          this.tasksBeforeLoad.push(task);
+      }
+      /**
+       * Loads grid data after resolving all tasks
+       */
+      loadAfterTasks() {
+          return __awaiter(this, void 0, void 0, function* () {
+              yield Promise.all(this.tasksBeforeLoad);
+              this.tasksBeforeLoad = [];
+              this.request();
+          });
+      }
       initGrouping(lazyLoad) {
           this.initGroups();
           this.initSummaryColumns();
@@ -2648,7 +2670,7 @@
                   this.datasource.limit = this.originalDatasourceLimit;
               }
               if (!lazyLoad && this.datasource) {
-                  yield this.datasource.get();
+                  yield this.loadAfterTasks();
               }
               if (this.virtualScroll && this.viewUpdateScrollData) {
                   this.viewUpdateScrollData();
@@ -3104,21 +3126,11 @@
                   filterHelperValue: this.getHelperValue(column),
               }));
               let layoutsInfo = {};
-              const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
-              if (eventFunction && typeof eventFunction === 'function') {
-                  layoutsInfo = yield eventFunction({ component: this.grid });
-              }
-              else if (core.Config.loadGridLayoutsEndPoint) {
-                  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 || {};
-              }
-              else {
-                  layoutsInfo = JSON.parse(localStorage.getItem(this.grid.name) || '{}');
+              const promise = this.loadLayoutsInfo();
+              if (this.grid instanceof TekGrid) {
+                  this.grid.registerTask(promise);
               }
+              layoutsInfo = yield promise;
               if (layoutsInfo.layouts) {
                   this.layouts = layoutsInfo.layouts;
                   this.layoutNames = Object.keys(this.layouts);
@@ -3129,6 +3141,23 @@
               }
           });
       }
+      loadLayoutsInfo() {
+          return __awaiter(this, void 0, void 0, function* () {
+              const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
+              if (eventFunction && typeof eventFunction === 'function') {
+                  return eventFunction({ component: this.grid });
+              }
+              if (core.Config.loadGridLayoutsEndPoint) {
+                  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]
+                      ? responseData[0].layouts
+                      : responseData.layouts || {};
+              }
+              return JSON.parse(localStorage.getItem(this.grid.name) || '{}');
+          });
+      }
       getHelperValue(column) {
           if (column instanceof TekGridColumn) {
               if (!Array.isArray(column.filterProps))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.84.0",
+  "version": "1.84.1",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -31,5 +31,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "3eaf53e10555888cf55df0c1519b3a553cb6fa5d"
+  "gitHead": "8bcccfd90c4cf7a1cb127a141ddaadb875efc03b"
 }

package/tests/__helpers__/flush-promises-helper.ts

@@ -0,0 +1,3 @@
+const flushPromises = () => (new Promise(setImmediate));
+
+export { flushPromises };

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

@@ -13,6 +13,7 @@ import {
 } from '../../../../src';
 import { ReportFilter } from '../../../../src/utils';
 import { setClick, getChild } from '../../../__helpers__';
+import { flushPromises } from '../../../__helpers__/flush-promises-helper';
 
 jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
 
@@ -26,6 +27,12 @@ const clickOnFilterButton = (grid: TekGrid, event?: any) => {
   return button;
 };
 
+const createAndMount = (props: ITekGrid) => {
+  const instance = new TekGrid(props);
+  instance.onMounted({} as HTMLElement);
+  return instance;
+};
+
 describe('TekGrid', () => {
   beforeEach(() => {
     // clear all metadata instances before testing
@@ -733,7 +740,6 @@ describe('TekGrid', () => {
           },
         },
       }));
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_navigation_1',
         component: 'TekGrid',
@@ -799,7 +805,6 @@ describe('TekGrid', () => {
           },
         },
       }));
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_navigation_2',
         component: 'TekGrid',
@@ -831,13 +836,13 @@ describe('TekGrid', () => {
         },
       });
 
-      await flushPromises();
-
       const elem = document.createElement('DIV');
       (KeyMap as any).isElementActive = () => true;
       instance.onCreated();
       instance.onMounted(elem);
 
+      await flushPromises();
+
       dispatchEvent('arrowdown', {}); // arrow down
       expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
 
@@ -896,7 +901,6 @@ describe('TekGrid', () => {
     });
 
     it('should open filter modal input with keymap', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_navigation_2',
         component: 'TekGrid',
@@ -931,7 +935,6 @@ describe('TekGrid', () => {
     });
 
     it('should open action dropdown with keymap', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_navigation_2',
         component: 'TekGrid',
@@ -970,7 +973,6 @@ describe('TekGrid', () => {
     });
 
     it('should focus in searchInput with keymap', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_navigation_3',
         component: 'TekGrid',
@@ -1056,8 +1058,7 @@ describe('TekGrid', () => {
 
   describe('grouping', () => {
     it('should group data based on columns that have grouped property', async () => {
-      const flushPromises = () => new Promise(setImmediate);
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_grouping_1',
         component: 'TekGrid',
         columns: [
@@ -1103,7 +1104,7 @@ describe('TekGrid', () => {
 
     it('should call debounced updateGroupData', () => {
       const spy = jest.spyOn(TekGrid.prototype, 'updateGroupedData');
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_grouping_1',
         component: 'TekGrid',
         columns: [
@@ -1143,8 +1144,7 @@ describe('TekGrid', () => {
     });
 
     it('should group data with aggregations', async () => {
-      const flushPromises = () => new Promise(setImmediate);
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_aggregate_1',
         component: 'TekGrid',
         columns: [
@@ -1194,10 +1194,9 @@ describe('TekGrid', () => {
     });
 
     it('should group data with multiple groups', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       let viewUpdateScrollDataCalled = false;
 
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_grouping_2',
         component: 'TekGrid',
         virtualScroll: true,
@@ -1271,8 +1270,7 @@ describe('TekGrid', () => {
     });
 
     it('should group data with multiple groups and aggregation', async () => {
-      const flushPromises = () => new Promise(setImmediate);
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_aggredate_2',
         component: 'TekGrid',
         showSummaryTotal: false,
@@ -1355,8 +1353,7 @@ describe('TekGrid', () => {
     });
 
     it('should aggregate even without groups', async () => {
-      const flushPromises = () => new Promise(setImmediate);
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_aggredate_3',
         component: 'TekGrid',
         showSummaryTotal: true,
@@ -1417,8 +1414,7 @@ describe('TekGrid', () => {
     });
 
     it('should aggregation with different functions', async () => {
-      const flushPromises = () => new Promise(setImmediate);
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_aggregate_4',
         component: 'TekGrid',
         showSummaryTotal: true,
@@ -1490,7 +1486,6 @@ describe('TekGrid', () => {
     });
 
     it('should group data on rest datasource with lazyLoad', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
         data: {
           data: [
@@ -1508,7 +1503,7 @@ describe('TekGrid', () => {
         },
       }));
 
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_grouping_3',
         component: 'TekGrid',
         columns: [
@@ -1548,7 +1543,6 @@ describe('TekGrid', () => {
     });
 
     it('editedRows should return cleaned rows', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_grouping_4',
         component: 'TekGrid',
@@ -1591,7 +1585,6 @@ describe('TekGrid', () => {
     });
 
     it('should do nothing if datasource is empty', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_grouping_5',
         component: 'TekGrid',
@@ -1624,11 +1617,10 @@ describe('TekGrid', () => {
     });
 
     it('should call view update methods', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       let viewUpdateScrollDataCalled = false;
       let viewUpdateFixedColumnsCalled = false;
 
-      const instance = new TekGrid({
+      const instance = createAndMount({
         name: 'grid_grouping_6',
         component: 'TekGrid',
         virtualScroll: true,
@@ -2566,7 +2558,6 @@ describe('TekGrid', () => {
     });
 
     it('should set datasource search_join based on columns that have datasource', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid(baseProps);
 
       instance.setSearch('1');
@@ -2693,7 +2684,6 @@ describe('TekGrid', () => {
     });
 
     it('should not call events.rowClick if cellClick prevents it', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const rowClick = jest.fn();
 
       const data = [
@@ -2730,7 +2720,6 @@ describe('TekGrid', () => {
 
   describe('groupRowClick', () => {
     it('groupRowClick method should call events.groupRowClick', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const groupRowClick = jest.fn();
 
       const data = [
@@ -2770,7 +2759,6 @@ describe('TekGrid', () => {
     });
 
     it('should not call events.groupRowClick if cellClick prevents it', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const groupRowClick = jest.fn();
 
       const data = [
@@ -2807,7 +2795,6 @@ describe('TekGrid', () => {
 
   describe('selectGroupClick', () => {
     it('should trigger events', async () => {
-      const flushPromises = () => new Promise(setImmediate);
       const groupSelected = jest.fn();
       const groupUnselected = jest.fn();
 

package/types/components/crud/crud-form.d.ts

@@ -13,6 +13,10 @@ export declare class CrudForm extends Form implements ICrudForm {
      * Stores value before editing
      */
     private beforeEditValue?;
+    /**
+     * Stores unsaved Value
+     */
+    private unSavedValue?;
     /**
      * Create new Crud Form
      * @param props component properties

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;
+}