This article shows how to implement auto save, Undo and Redo commands in an Angular 2 SPA. The Undo and the Redo commands work for the whole application and not just for single components. The Angular 2 app uses an ASP.NET Core service implemented in the previous blog.
Code: https://github.com/damienbod/Angular2AutoSaveCommands
Other articles in this series:
- Implementing UNDO, REDO in ASP.NET Core
- Angular 2 Auto Save, Undo and Redo
- ASP.NET Core Action Arguments Validation using an ActionFilter
The CommandDto class is used for all create, update and delete HTTP requests to the server. This class is used in the different components and so the payload is always different. The CommandType defines the type of command to be executed. Possible values supported by the server are ADD, UPDATE, DELETE, UNDO, REDO. The PayloadType defines the type of object used in the Payload. The PayloadType is used by the server to convert the Payload object to a c# specific class object. The ActualClientRoute is used for the Undo, Redo functions. When an Undo command is executed, or a Redo, the next client path is returned in the CommandDto response. As this is an Angular 2 application, the Angular 2 routing value is used.
export class CommandDto {
constructor(commandType: string,
payloadType: string,
payload: any,
actualClientRoute: string) {
this.CommandType = commandType;
this.PayloadType = payloadType;
this.Payload = payload;
this.ActualClientRoute = actualClientRoute;
}
CommandType: string;
PayloadType: string;
Payload: any;
ActualClientRoute: string;
}
The CommandService is used to access the ASP.NET Core API implemented in the CommandController class. The service implements the Execute, Undo and Redo HTTP POST requests to the server using the CommandDto as the body. The service also implements an EventEmitter output which can be used to update child components, if an Undo command or a Redo command has been executed. When the function UndoRedoUpdate is called, the event is sent to all listeners.
import { Injectable, EventEmitter, Output } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { Configuration } from '../app.constants';
import { CommandDto } from './CommandDto';
@Injectable()
export class CommandService {
@Output() OnUndoRedo = new EventEmitter<string>();
private actionUrl: string;
private headers: Headers;
constructor(private _http: Http, private _configuration: Configuration) {
this.actionUrl = `${_configuration.Server}api/command/`;
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append('Accept', 'application/json');
}
public Execute = (command: CommandDto): Observable<CommandDto> => {
let url = `${this.actionUrl}execute`;
return this._http.post(url, command, { headers: this.headers }).map(res => res.json());
}
public Undo = (): Observable<CommandDto> => {
let url = `${this.actionUrl}undo`;
return this._http.post(url, '', { headers: this.headers }).map(res => res.json());
}
public Redo = (): Observable<CommandDto> => {
let url = `${this.actionUrl}redo`;
return this._http.post(url, '', { headers: this.headers }).map(res => res.json());
}
public GetAll = (): Observable<any> => {
return this._http.get(this.actionUrl).map((response: Response) => <any>response.json());
}
public UndoRedoUpdate = (payloadType: string) => {
this.OnUndoRedo.emit(payloadType);
}
}
The app.component implements the Undo and the Redo user interface.
<div class="container" style="margin-top: 15px;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" [routerLink]="['/commands']">Commands</a>
</div>
<ul class="nav navbar-nav">
<li><a [routerLink]="['/home']">Home</a></li>
<li><a [routerLink]="['/about']">About</a></li>
<li><a [routerLink]="['/httprequests']">HTTP API Requests</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a (click)="Undo()">Undo</a></li>
<li><a (click)="Redo()">Redo</a></li>
<li><a href="https://twitter.com/damien_bod"><img src="assets/damienbod.jpg" height="40" style="margin-top: -10px;" /></a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
<footer>
<p>
<a href="https://twitter.com/damien_bod">twitter(damienbod)</a> <a href="https://damienbod.com/">damienbod.com</a>
© 2016
</p>
</footer>
</div>
The Undo method uses the _commandService to execute an Undo HTTP POST request. If successful, the UndoRedoUpdate function from the _commandService is executed, which broadcasts an update event in the client app, and then the application navigates to the route returned in the Undo commandDto response using the ActualClientRoute.
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CommandService } from './services/commandService';
import { CommandDto } from './services/commandDto';
@Component({
selector: 'my-app',
template: require('./app.component.html'),
styles: [require('./app.component.scss'), require('../style/app.scss')]
})
export class AppComponent {
constructor(private router: Router, private _commandService: CommandService) {
}
public Undo() {
let resultCommand: CommandDto;
this._commandService.Undo()
.subscribe(
data => resultCommand = data,
error => console.log(error),
() => {
this._commandService.UndoRedoUpdate(resultCommand.PayloadType);
this.router.navigate(['/' + resultCommand.ActualClientRoute]);
}
);
}
public Redo() {
let resultCommand: CommandDto;
this._commandService.Redo()
.subscribe(
data => resultCommand = data,
error => console.log(error),
() => {
this._commandService.UndoRedoUpdate(resultCommand.PayloadType);
this.router.navigate(['/' + resultCommand.ActualClientRoute]);
}
);
}
}
The HomeComponent is used to implement the ADD, UPDATE, DELETE for the HomeData object. A simple form is used to add, or update the different items with an auto save implemented on the input element using the keyup event. A list of existing HomeData items are displayed in a table which can be updated or deleted.
<div class="container">
<div class="col-lg-12">
<h1>Selected Item: {{model.Id}}</h1>
<form *ngIf="active" (ngSubmit)="onSubmit()" #homeItemForm="ngForm">
<input type="hidden" class="form-control" id="id" [(ngModel)]="model.Id" name="id" #id="ngModel">
<input type="hidden" class="form-control" id="deleted" [(ngModel)]="model.Deleted" name="deleted" #id="ngModel">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required (keyup)="createCommand($event)" [(ngModel)]="model.Name" name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
<button type="button" class="btn btn-default" (click)="newHomeData()">New Home</button>
</form>
</div>
</div>
<hr />
<div>
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr style="height:20px;" *ngFor="let homeItem of HomeDataItems">
<td>{{homeItem.Id}}</td>
<td>{{homeItem.Name}}</td>
<td>
<button class="btn btn-default" (click)="Edit(homeItem)">Edit</button>
</td>
<td>
<button class="btn btn-default" (click)="Delete(homeItem)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
The HomeDataService is used to selected all the HomeData items using the ASP.NET Core service implemented in rhe HomeController class.
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { Configuration } from '../app.constants';
@Injectable()
export class HomeDataService {
private actionUrl: string;
private headers: Headers;
constructor(private _http: Http, private _configuration: Configuration) {
this.actionUrl = `${_configuration.Server}api/home/`;
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append('Accept', 'application/json');
}
public GetAll = (): Observable<any> => {
return this._http.get(this.actionUrl).map((response: Response) => <any>response.json());
}
}
The HomeComponent implements the different CUD operations and also the listeners for Undo, Redo events, which are relevant for its display. When a keyup is received, the createCommand is executed. This function adds the data to the keyDownEvents subject. A deboucedInput Observable is used together with debounceTime, so that only when the user has not entered any inputs for more than a second, a command is sent to the server using the OnSumbit function.
The component also subscribes to the OnUndoRedo event sent from the _commandservice. When this event is received, the OnUndoRedoRecieved is called. The function updates the table with the actual data if the undo, redo command has changed data displayed in this component.
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Http } from '@angular/http';
import { HomeData } from './HomeData';
import { CommandService } from '../services/commandService';
import { CommandDto } from '../services/commandDto';
import { HomeDataService } from '../services/homeDataService';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
@Component({
selector: 'homecomponent',
template: require('./home.component.html')
})
export class HomeComponent implements OnInit {
public message: string;
public model: HomeData;
public submitted: boolean;
public active: boolean;
public HomeDataItems: HomeData[];
private deboucedInput: Observable<string>;
private keyDownEvents = new Subject<string>();
constructor(private _commandService: CommandService, private _homeDataService: HomeDataService) {
this.message = "Hello from Home";
this._commandService.OnUndoRedo.subscribe(item => this.OnUndoRedoRecieved(item));
}
ngOnInit() {
this.model = new HomeData(0, 'name', false);
this.submitted = false;
this.active = true;
this.GetHomeDataItems();
this.deboucedInput = this.keyDownEvents;
this.deboucedInput
.debounceTime(1000)
.distinctUntilChanged()
.subscribe((filter: string) => {
this.onSubmit();
});
}
public GetHomeDataItems() {
console.log('HomeComponent starting...');
this._homeDataService.GetAll()
.subscribe((data) => {
this.HomeDataItems = data;
},
error => console.log(error),
() => {
console.log('HomeDataService:GetAll completed');
}
);
}
public Edit(aboutItem: HomeData) {
this.model.Name = aboutItem.Name;
this.model.Id = aboutItem.Id;
}
// TODO remove the get All request and update the list using the return item
public Delete(homeItem: HomeData) {
let myCommand = new CommandDto("DELETE", "HOME", homeItem, "home");
console.log(myCommand);
this._commandService.Execute(myCommand)
.subscribe(
data => this.GetHomeDataItems(),
error => console.log(error),
() => {
if (this.model.Id === homeItem.Id) {
this.newHomeData();
}
}
);
}
public createCommand(evt: any) {
this.keyDownEvents.next(this.model.Name);
}
// TODO remove the get All request and update the list using the return item
public onSubmit() {
if (this.model.Name != "") {
this.submitted = true;
let myCommand = new CommandDto("ADD", "HOME", this.model, "home");
if (this.model.Id > 0) {
myCommand.CommandType = "UPDATE";
}
console.log(myCommand);
this._commandService.Execute(myCommand)
.subscribe(
data => {
this.model.Id = data.Payload.Id;
this.GetHomeDataItems();
},
error => console.log(error),
() => console.log('Command executed')
);
}
}
public newHomeData() {
this.model = new HomeData(0, 'add a new name', false);
this.active = false;
setTimeout(() => this.active = true, 0);
}
private OnUndoRedoRecieved(payloadType) {
if (payloadType === "HOME") {
this.GetHomeDataItems();
// this.newHomeData();
console.log("OnUndoRedoRecieved Home");
console.log(payloadType);
}
}
}
When the application is built (both server and client) and started, the items can be added, updated or deleted using the commands.
The executed commands can be viewed using the commands tab in the Angular 2 application.
And the commands or the data can also be viewed in the SQL database.
Links
http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
https://angular.io/docs/ts/latest/guide/forms.html
