I'm trying to work out the best way to allow users to non-destructively
edit data before saving.

Scenario:

I have a list of clients stored at a firebase location. The clients are
returned to an angularFactory and returned to a controller as an $asArray().

As part of the reference data maintenance I need to be able to allow users
to amend client information. However, if I bind a form to the record in the
array, the user will be overwriting the locally synced values. This is of
course ok if the user then chooses to save the data to the server. But what
happens if the user has made a mistake and wants to cancel the action? At
this point the array already reflects the changed data, the only way to
revert is to reload the entire array from the server.

I have experimented with angular.copy() of the source data, make changes to
that and when the user clicks save updating the record but it is feeling
horribly clunky.

Is this a use case others have had to consider? Is there a design that
would be accepted as best practise?


--
You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
To post to this group, send email to firebase-angular@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/780072c7-9bd4-4927-ad39-7911fcc1b455%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Search Discussions

  • Michael Wulf at Sep 9, 2014 at 4:54 pm
    If what you want a temporary copy of the data for restore operations, I
    don't see anything clunky about angular.copy().

    One alternative, if this really bothers you, would be to grab the latest
    server data during the cancel op with a once('value', ...) or something
    similar. You can utilize $$updated on the synchronized array to apply that
    snapshot to the dirty record.

    The other end of the spectrum is to take the fully collaborative approach
    and store each update as a series of events. In which case they can be
    reverted by unapplying the updates, or even merged with other user changes
    on the fly. This is what tools like Firepad do under the hood. But that
    seems like a great deal of effort for a straightforward cancel feature.

    On Tue, Sep 9, 2014 at 6:27 AM, Phil Hodey wrote:

    I'm trying to work out the best way to allow users to non-destructively
    edit data before saving.

    Scenario:

    I have a list of clients stored at a firebase location. The clients are
    returned to an angularFactory and returned to a controller as an $asArray().

    As part of the reference data maintenance I need to be able to allow users
    to amend client information. However, if I bind a form to the record in the
    array, the user will be overwriting the locally synced values. This is of
    course ok if the user then chooses to save the data to the server. But what
    happens if the user has made a mistake and wants to cancel the action? At
    this point the array already reflects the changed data, the only way to
    revert is to reload the entire array from the server.

    I have experimented with angular.copy() of the source data, make changes
    to that and when the user clicks save updating the record but it is feeling
    horribly clunky.

    Is this a use case others have had to consider? Is there a design that
    would be accepted as best practise?


    --
    You received this message because you are subscribed to the Google Groups
    "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an
    email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit
    https://groups.google.com/d/msgid/firebase-angular/780072c7-9bd4-4927-ad39-7911fcc1b455%40googlegroups.com
    <https://groups.google.com/d/msgid/firebase-angular/780072c7-9bd4-4927-ad39-7911fcc1b455%40googlegroups.com?utm_medium=email&utm_source=footer>
    .
    For more options, visit https://groups.google.com/d/optout.
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/CAFHX4%3Dpq0rGcmAVAPzuZbPhLHUhL-bH9hsRg46CghEzY2_PsUw%40mail.gmail.com.
    For more options, visit https://groups.google.com/d/optout.
  • Phil Hodey at Sep 9, 2014 at 9:36 pm
    Thanks for the response. The fully collaborative approach would be great but as you say, overkill, for the simple feature I am looking for.

    If I take a snapshot via angular.copy for restore. Can I simply angular.copy back to the original $firebaseObject on cancel? I've not dug that deeply into the inner workings of the angular fire, is that type of operation supported?

    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/f15f2649-d9ad-4e13-abe8-01162f1a5e0f%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.
  • Michael Wulf at Sep 9, 2014 at 10:09 pm
    You could do this. A more elegant approach would be to use $$updated, as
    this will apply the updates, trigger events, update any bindings, and so on.

    So, for example, you could $extendFactory to include a "reset" method as
    part of the factory: https://gist.github.com/katowulf/8eaa39eab05a4d975cd9
    On Tue, Sep 9, 2014 at 2:35 PM, Phil Hodey wrote:

    Thanks for the response. The fully collaborative approach would be great
    but as you say, overkill, for the simple feature I am looking for.

    If I take a snapshot via angular.copy for restore. Can I simply
    angular.copy back to the original $firebaseObject on cancel? I've not dug
    that deeply into the inner workings of the angular fire, is that type of
    operation supported?

    --
    You received this message because you are subscribed to the Google Groups
    "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an
    email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit
    https://groups.google.com/d/msgid/firebase-angular/f15f2649-d9ad-4e13-abe8-01162f1a5e0f%40googlegroups.com
    .
    For more options, visit https://groups.google.com/d/optout.
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/CAFHX4%3DqJ8JoNzHjvPKO25YDmAyGaK26rJ4F_xoPD1D07W67U9g%40mail.gmail.com.
    For more options, visit https://groups.google.com/d/optout.
  • Phil Hodey at Sep 10, 2014 at 2:28 pm
    now that is *very* cool!! Loving the new version of angularfire api, didn't
    click just how simple this was going to be! Thanks very much!

    (a $reset() method seems like a decent candidate to be incorporated into
    the main api in my view....)



    On Tuesday, 9 September 2014 23:09:18 UTC+1, Michael Kato Wulf wrote:

    You could do this. A more elegant approach would be to use $$updated, as
    this will apply the updates, trigger events, update any bindings, and so on.

    So, for example, you could $extendFactory to include a "reset" method as
    part of the factory:
    https://gist.github.com/katowulf/8eaa39eab05a4d975cd9

    On Tue, Sep 9, 2014 at 2:35 PM, Phil Hodey <phil....@hcstech.co.uk
    <javascript:>> wrote:
    Thanks for the response. The fully collaborative approach would be great
    but as you say, overkill, for the simple feature I am looking for.

    If I take a snapshot via angular.copy for restore. Can I simply
    angular.copy back to the original $firebaseObject on cancel? I've not dug
    that deeply into the inner workings of the angular fire, is that type of
    operation supported?

    --
    You received this message because you are subscribed to the Google Groups
    "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an
    email to firebase-angul...@googlegroups.com <javascript:>.
    To post to this group, send email to firebase...@googlegroups.com
    <javascript:>.
    To view this discussion on the web visit
    https://groups.google.com/d/msgid/firebase-angular/f15f2649-d9ad-4e13-abe8-01162f1a5e0f%40googlegroups.com
    .
    For more options, visit https://groups.google.com/d/optout.
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/0918d28b-3abb-4e5a-b5b7-400b8699db0e%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupfirebase-angular @
postedSep 9, '14 at 4:30p
activeSep 10, '14 at 2:28p
posts5
users2

2 users in discussion

Phil Hodey: 3 posts Michael Wulf: 2 posts

People

Translate

site design / logo © 2021 Grokbase