@progress/kendo-angular-grid 19.1.2 → 19.2.0-develop.10

package/esm2022/state-management/undo-redo.directive.mjs

@@ -8,15 +8,20 @@ import { GridComponent } from '../grid.component';
 import { UndoRedoEvent } from './grid-state.models';
 import { Subscription } from 'rxjs';
 import { EditService } from '../editing/edit.service';
-import { filter, tap } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
 import { UndoRedoService } from './undo-redo.service';
-import { hasObservers } from '@progress/kendo-angular-common';
+import { hasObservers, isPresent } from '@progress/kendo-angular-common';
 import { ChangeNotificationService } from '../data/change-notification.service';
+import { ContextService } from '../common/provider.service';
+import { LocalDataChangesService } from '../editing/local-data-changes.service';
+import { recursiveFlatMap } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/edit.service";
 import * as i3 from "./undo-redo.service";
 import * as i4 from "../data/change-notification.service";
+import * as i5 from "../common/provider.service";
+import * as i6 from "../editing/local-data-changes.service";
 /**
  * Represents the directive that manages undo-redo operations in the Grid.
  * Use this directive to enable undo and redo functionality for user actions in the Grid.
@@ -33,11 +38,17 @@ export class UndoRedoDirective {
     editService;
     undoRedoService;
     changeNotification;
+    ctx;
+    localDataChangesService;
     /**
      * Sets the maximum number of actions to keep in the undo-redo stack.
      * @default 10
      */
     maxStoredStates = 10;
+    /**
+     * Defines the property name of the data item unique key that will be used to identify the items when performing undo-redo actions.
+     */
+    itemIdKey;
     /**
      * Fires when you perform the undo action. Provides the Grid state to apply.
      */
@@ -55,11 +66,13 @@ export class UndoRedoDirective {
     stack;
     subs = new Subscription();
     addToState = true;
-    constructor(host, editService, undoRedoService, changeNotification) {
+    constructor(host, editService, undoRedoService, changeNotification, ctx, localDataChangesService) {
         this.host = host;
         this.editService = editService;
         this.undoRedoService = undoRedoService;
         this.changeNotification = changeNotification;
+        this.ctx = ctx;
+        this.localDataChangesService = localDataChangesService;
         this.host.undoRedoService = this.undoRedoService;
     }
     ngOnInit() {
@@ -71,7 +84,7 @@ export class UndoRedoDirective {
                 sort: this.host.sort,
                 filter: this.host.filter,
                 group: this.host.group
-            }, gridState: structuredClone(this.host.currentState)
+            }, gridState: this.host.currentState
         });
         this.subs = this.host.gridStateChange.subscribe((state) => {
             if (this.addToState) {
@@ -83,7 +96,7 @@ export class UndoRedoDirective {
                         filter: state.filter,
                         group: state.group
                     },
-                    gridState: structuredClone(state)
+                    gridState: state
                 });
             }
             let stackEndPointReached;
@@ -96,36 +109,72 @@ export class UndoRedoDirective {
             this.undoRedoService.stackEndReached.next(stackEndPointReached);
         });
         this.subs.add(this.editService.changes
-            .pipe(filter(event => event.action === 'save' || event.action === 'remove'), tap(event => this.undoRedoService.originalEvent = event))
+            .pipe(filter((event) => event.action === 'save' || event.action === 'remove'))
             .subscribe(event => {
             this.stack.add({
-                originalEvent: event,
-                gridState: structuredClone(this.host.currentState)
+                originalEvent: { ...event, dataItem: structuredClone(event.dataItem) },
+                gridState: this.host.currentState
             });
             this.addToState = false;
             this.host.gridStateChange.emit(this.stack.current.gridState);
             this.addToState = true;
             this.updateUndoRedoDisabled();
         }));
-        this.subs.add(this.changeNotification.changes.subscribe(() => this.stack.current.gridState = this.host.currentState));
+        this.subs.add(this.changeNotification.changes.subscribe(() => {
+            if (!this.ctx.dataBindingDirective) {
+                this.stack.current.gridState = this.host.currentState;
+            }
+        }));
         ['Undo', 'Redo'].forEach((action) => {
             this.subs.add(this.undoRedoService[`on${action}`].subscribe(() => {
                 if (!this.stack[`can${action}`]) {
                     return;
                 }
-                this.stack[`${action.toLowerCase()}`]();
+                let eventData;
+                if (action === 'Undo') {
+                    const isSaveOrRemove = this.stack.current.originalEvent.action === 'save' || this.stack.current.originalEvent.action === 'remove';
+                    eventData = isSaveOrRemove ? this.stack.current : this.stack.peekPrev();
+                }
+                else {
+                    eventData = this.stack.peekNext();
+                }
+                const event = new UndoRedoEvent(eventData);
                 if (hasObservers(this[`on${action}`])) {
-                    const event = new UndoRedoEvent(this.stack.current);
                     this[`on${action}`].emit(event);
                     if (event.isDefaultPrevented()) {
                         return;
                     }
                 }
+                this.stack[`${action.toLowerCase()}`]();
                 this.updateUndoRedoDisabled();
-                this.host.loadState(this.stack.current.gridState);
+                const originalAction = event.originalEvent.action;
+                const isLocalData = isPresent(this.ctx?.dataBindingDirective);
+                if (!isLocalData) {
+                    return;
+                }
+                const isSaveOrRemove = originalAction === 'save' || originalAction === 'remove';
+                if (isSaveOrRemove) {
+                    if (originalAction === 'save') {
+                        const stateItem = this.getGridDataItems(this.stack.current.gridState.currentData).find(item => item[this.itemIdKey] === event.originalEvent.dataItem[this.itemIdKey]);
+                        Object.assign(event.originalEvent.originalDataItem, stateItem);
+                    }
+                    else if (action === 'Undo') {
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 0, event.originalEvent.dataItem);
+                    }
+                    else {
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 1);
+                    }
+                    this.localDataChangesService?.changes.emit();
+                }
+                else {
+                    this.host.loadState({ ...this.stack.current.gridState, currentData: null });
+                    if (this.isDataStateChangeEvent(event.originalEvent)) {
+                        const { skip, take, sort, filter, group } = this.stack.current.gridState;
+                        this.host.dataStateChange.emit({ skip, take, sort, filter, group });
+                    }
+                }
             }));
         });
-        this.subs.add(this.undoRedoService.setState.subscribe((state) => this.stack.add({ originalEvent: 'dataChange', gridState: state })));
     }
     ngOnDestroy() {
         this.stack.clear();
@@ -167,8 +216,15 @@ export class UndoRedoDirective {
         }
         this.undoRedoService.stackEndReached.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, deps: [{ token: i1.GridComponent }, { token: i2.EditService }, { token: i3.UndoRedoService }, { token: i4.ChangeNotificationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UndoRedoDirective, isStandalone: true, selector: "[kendoGridUndoRedo]", inputs: { maxStoredStates: "maxStoredStates" }, outputs: { onUndo: "undo", onRedo: "redo" }, providers: [UndoRedoService], exportAs: ["kendoGridUndoRedo"], ngImport: i0 });
+    getGridDataItems(data) {
+        return Array.isArray(data) ? data.flatMap(recursiveFlatMap) :
+            data.data.flatMap(recursiveFlatMap);
+    }
+    isDataStateChangeEvent(event) {
+        return event && ['skip', 'take', 'sort', 'filter', 'group'].some(prop => prop in event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, deps: [{ token: i1.GridComponent }, { token: i2.EditService }, { token: i3.UndoRedoService }, { token: i4.ChangeNotificationService }, { token: i5.ContextService }, { token: i6.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UndoRedoDirective, isStandalone: true, selector: "[kendoGridUndoRedo]", inputs: { maxStoredStates: "maxStoredStates", itemIdKey: "itemIdKey" }, outputs: { onUndo: "undo", onRedo: "redo" }, providers: [UndoRedoService], exportAs: ["kendoGridUndoRedo"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, decorators: [{
             type: Directive,
@@ -178,7 +234,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoGridUndoRedo',
                     providers: [UndoRedoService]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.EditService }, { type: i3.UndoRedoService }, { type: i4.ChangeNotificationService }]; }, propDecorators: { maxStoredStates: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.EditService }, { type: i3.UndoRedoService }, { type: i4.ChangeNotificationService }, { type: i5.ContextService }, { type: i6.LocalDataChangesService }]; }, propDecorators: { maxStoredStates: [{
+                type: Input
+            }], itemIdKey: [{
                 type: Input
             }], onUndo: [{
                 type: Output,

package/esm2022/state-management/undo-redo.service.mjs

@@ -13,7 +13,6 @@ export class UndoRedoService {
     onUndo = new Subject();
     onRedo = new Subject();
     stackEndReached = new Subject();
-    setState = new Subject();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoService });
 }

package/esm2022/state-management/undo-redo.stack.mjs

@@ -139,6 +139,12 @@ export class UndoRedoStack {
         this.currentNode = this.currentNode.previous;
         return this.currentNode.state;
     }
+    peekNext() {
+        return this.currentNode.next?.state || null;
+    }
+    peekPrev() {
+        return this.currentNode.previous?.state || null;
+    }
     /**
      * Performs a redo operation, moving to the next state
      * @returns The next state or null if can't redo

package/esm2022/utils.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { InjectionToken } from '@angular/core';
 import { merge, of } from 'rxjs';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
 export { isChanged, anyChanged, hasObservers } from '@progress/kendo-angular-common';
 const EMPTY_REGEX = /^\s*$/;
 /**
@@ -199,3 +200,21 @@ export const isMultipleRangesEnabled = (selectableSettings) => {
         typeof selectableSettings === 'object' &&
         selectableSettings.selectable.multipleRanges;
 };
+/**
+ * @hidden
+ * Calculates the height of a table row by inserting a temporary row into the table body when the `rowHeight` option is not set.
+ */
+export const calcRowHeight = (tableBody) => {
+    let result = 0;
+    if (!isDocumentAvailable()) {
+        return result;
+    }
+    if (tableBody) {
+        const row = tableBody.insertRow(0);
+        const cell = row.insertCell(0);
+        cell.textContent = ' ';
+        result = row.getBoundingClientRect().height;
+        tableBody.deleteRow(0);
+    }
+    return result;
+};