CODEWITHSUNDEEP
javascriptangularjsundoundo-redo
Klas Mellbourn
Klas Mellbourn

Reputation: 44377

Undo/Redo implementation for a CRUD AngularJS app

We are considering building a Excel-like app in AngularJS where we would like undo/redo support for the cell editing.

Any advice on the best strategy to implement this?

I am not just thinking of undoing text just entered in a textbox. I mean entering data in several cells and then undoing each of those entries.

I have experimented with pushing the current model on a stack before each modification. That makes it possible to undo by restoring the model to a previous state. However, how do I combine this with REST CRUD interaction?

The "natural" way of resolving the CRUD is to do an immediate REST call to the backend (updating the database) for each modification. But then undoing will just modify model in Angular, not the database. And there is no simple way of posting the delta between the two models over REST.

Upvotes: 2

Views: 1498

Answers (1)

Chris
Chris

Reputation: 58202

I would argue this is functionality not particular to angular-js but rather something achieved with the capture of state.

Your actions (such as editing, adding, moving cells, etc) would all alter the state of your app, the deltas of theses states could be pushed onto a structure that can be rolled back through.

If you undo, say 2 actions, then start a fresh action, then the 2 most states would be removed and the new states pushed on.

Applications such as Photoshop store history similar to this (and for similar reasons don't permit unlimited undo).

Again though, I would argue that this is functionality that should not be bound to the angular framework, but you could obviously serve it up as an angular service.

Upvotes: 1

Related Questions