ember-changeset-history

Check out the live demo

Extension of ember-changeset, providing undo/redo features. Also ships with a debounced-value helper for grouping changes together

To install:

ember install ember-changeset-history

Usage

Create a new changeset

  // omitting maxHistoryLength option or setting to 0 keeps infinite history
  ChangesetHistory(model, validator, {}, { maxHistoryLength: 0 }); 

import Ember from 'ember';
import ChangesetWithHistory from 'ember-changeset-history';

const { Component, computed } = Ember;
 
export default Component.extend({
  init() {
    this._super(...arguments);
    this.changeset = new ChangesetWithHistory(this.get('model'), () => true, {}, { maxHistoryLength: 100}); 
  },
  
  undoDisabled: computed.not('changeset.canUndo'),
  
  actions: {
    undo() {
      this.changeset.undo();
    }
  }
});

<form>
  {{#debounced-value property=changeset.property as |debouncer|}}
    <input type="text" value=changeset.property oninput={{action debouncer value="target.value"}}>
  {{/debounced-value}}
  
  <button {{action "undo"}} disabled={{undoDisabled}}>Undo</button>
</form>

API

ChangesetHistory

• Properties
  • canUndo
  • canRedo
• Methods
  • undo
  • redo
  • resetHistory

canUndo

Returns a Boolean - true if there is something that can be undone in the changeset

get(changeset, 'canUndo'); // true

⬆️ back to top

canRedo

Returns a Boolean - true if there is something that can be redone in the changeset

get(changeset, 'canRedo'); // false

⬆️ back to top

undo

Undoes the last change made to the changeset, if there is one available:

changeset.undo();

⬆️ back to top

redo

Redoes the last change made to the changeset, if some changes have been undo:

changeset.redo();

⬆️ back to top

resetHistory

Removes all stored history for a changeset. Can be useful if rolling back a changeset and you want to destroy previous history:

changeset.resetHistory();

debounced-helper

Yields an action which is debounced.

• Properties
  • wait
  • property
  • propertyPath
  • onChange

wait

The time in milliseconds to debounce changes. The default is 400.

property

The property to debounce changes to. Not required if you're updating the property yourselve via the onchange action

propertyPath

Will be send along with the new value to the onChange action, if one is provided

onChange

Action to fire after changes have been debounced. If this is not provided, the value will be mutated by debounced-value component directly.

{{#debounced-value
  propertyPath="changeset.description"
  onChange=(action "customSetter")
  as |debouncer|}}

    <input class="form-control" value={{changeset.description}} oninput={{action debouncer value="target.value"}}>

{{/debounced-value}}

  actions: {
    customSetter(propertyPath, newValue) {
      this.set(propertyPath, newValue);
    }
  }

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.