feat(grid): update inline editor demo with undo, related to #15

Author: Ghislain Beaulac

src/app/examples/grid-editor.component.html

@@ -14,7 +14,14 @@ <h2>{{title}}</h2>
             </label>
         </span>
         <div class="row col-sm-12">
+            <span>
+                <button class="btn btn-default btn-sm" (click)="undo()">
+                    <i class="fa fa-undo"></i>
+                    Undo last edit
+                </button>
+            </span>
             <button class="btn btn-default btn-sm" (click)="switchLanguage()">Switch Language</button>
+            <br/>
             <b>Locale:</b> <span style="font-style: italic">{{selectedLanguage + '.json'}}</span>
         </div>
     </div>
@@ -25,6 +32,9 @@ <h2>{{title}}</h2>
         <div class="alert alert-info" *ngIf="updatedObject">
             <strong>Update Object:</strong> {{updatedObject | json}}
         </div>
+        <div class="alert alert-warning" *ngIf="alertWarning">
+            <strong>Update Object:</strong> {{alertWarning}}
+        </div>
     </div>
 
     <div class="col-sm-12">

src/app/examples/grid-editor.component.ts

@@ -2,6 +2,9 @@ import { Component, Injectable, OnInit, OnDestroy } from '@angular/core';
 import { Column, Editors, FieldType, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from './../modules/angular-slickgrid';
 import { TranslateService } from '@ngx-translate/core';
 
+// using external non-typed js libraries
+declare var Slick: any;
+
 @Component({
   templateUrl: './grid-editor.component.html'
 })
@@ -17,10 +20,12 @@ export class GridEditorComponent implements OnInit, OnDestroy {
   </ul>
   `;
 
+  private _commandQueue = [];
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
   isAutoEdit = true;
+  alertWarning: any;
   updatedObject: any;
   gridObj: any;
   dataviewObj: any;
@@ -31,6 +36,7 @@ export class GridEditorComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.prepareGrid();
   }
+
   ngOnDestroy(): void {
     // unsubscrible any Slick.Event you might have used
     // a reminder again, these are SlickGrid Event, not RxJS events
@@ -48,7 +54,7 @@ export class GridEditorComponent implements OnInit, OnDestroy {
         // use onCellClick OR grid.onClick.subscribe which you can see down below
         onCellClick: (args: OnEventArgs) => {
           console.log(args);
-          alert(`Editing: ${args.dataContext.title}`);
+          this.alertWarning = `Editing: ${args.dataContext.title}`;
           this.gridExtraService.highlightRow(args.row, 1500);
           this.gridExtraService.setSelectedRow(args.row);
         }
@@ -61,14 +67,14 @@ export class GridEditorComponent implements OnInit, OnDestroy {
         // use onCellClick OR grid.onClick.subscribe which you can see down below
         onCellClick: (args: OnEventArgs) => {
           console.log(args);
-          alert(`Deleting: ${args.dataContext.title}`);
+          this.alertWarning = `Deleting: ${args.dataContext.title}`;
         }
       },
       { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: Editors.longText },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text,
         onCellChange: (args: OnEventArgs) => {
-        alert('onCellChange directly attached to the column definition');
-        console.log(args);
+          console.log(args);
+          this.alertWarning = 'onCellChange triggered and attached to the column definition';
         }
       },
       { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: Editors.integer },
@@ -86,7 +92,11 @@ export class GridEditorComponent implements OnInit, OnDestroy {
       },
       editable: true,
       enableColumnPicker: true,
-      enableCellNavigation: true
+      enableCellNavigation: true,
+      editCommandHandler: (item, column, editCommand) => {
+        this._commandQueue.push(editCommand);
+        editCommand.execute();
+      }
     };
 
     // mock a dataset
@@ -126,7 +136,7 @@ export class GridEditorComponent implements OnInit, OnDestroy {
       const column = GridExtraUtils.getColumnDefinitionAndData(args);
       console.log('onClick', args, column);
       if (column.columnDef.id === 'edit') {
-        alert('open a modal window to edit: ' + column.dataContext.title);
+        this.alertWarning = `open a modal window to edit: ${column.dataContext.title}`;
 
         // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
         this.gridExtraService.highlightRow(args.row, 1500);
@@ -155,4 +165,12 @@ export class GridEditorComponent implements OnInit, OnDestroy {
     this.selectedLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
     this.translate.use(this.selectedLanguage);
   }
+
+  undo() {
+    const command = this._commandQueue.pop();
+    if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      command.undo();
+      this.gridObj.gotoCell(command.row, command.cell, false);
+    }
+  }
 }