Workflow for clone and save Model with associations

[fratzinger]

Steps to reproduce

I got a simple setup for models: customers and addresses and a custom component in which I input the data. This component I use for new data as well as changing data. Here is an example how the customers-model is set up:

// customers.model.js
  static setupInstance(data, { models, store, options }) {
    const { Address } = models.api;
    data.address = data.address && new Address(data.address);

    data.createdAt = data.createdAt && new Date(data.createdAt);
    data.updatedAt = data.updatedAt && new Date(data.updatedAt);
    data.deletedAt = data.deletedAt && new Date(data.deletedAt);
  
    return data;
  }

Now I want to use the clone/reset/commit/save-workflow with the diffOnPatch-function. To make temporare changes and discard them or save them I use this.customer.clone() and save() or reset() which works perfect for direct customer-fields like company/fullName/... but obviously not for the associated customer.address-fields like street/zipCode/...

Here are my questions:

1. When I clone customer it seems to make sense to me that customer.address is also a copy. Do you agree? Is this something worth implementing? Maybe by passing the options-object to setupInstance.
2. If it's not a good idea. Is there an easy way to discard changes to customer.address without programming to much? I want to keep my custom component clean because I use it also for new data where clone doesnt make sense.
3. What is the use-case of commit at all?

Do you had the use case of nested clones and how did you solve this? Maybe it's more about documentation of the clone-workflow than new code.

Any help or hints are kindly appreciated. If there is a code idea which can be baked into feathers-vuex I would be happy to help with this.

Thanks in advance.

Module versions (especially the part that's not working):

"@feathersjs/authentication-client": "^4.3.3",
"@feathersjs/feathers": "^4.3.3",
"@feathersjs/socketio-client": "^4.3.3",
"feathers-vuex": "^2.0.0-pre.78",

[marshallswain]

1. Related records are independent in the store, and must be treated that way. This mean that when you clone customer, the nested records are still original records and not clones. You'll need to call clone on an address record before you edit it.
2. After you call clone on an address records, to discard changes and revert back to the original store record, just call addressClone.reset().
3. The .commit() method copies modified clone data back to the original record while maintaining reactivity for all of the properties. I regularly use it for eager updating store data after submitting a form.

addressClone.commit() // Updates the store and parts of UI displaying the record.
addressClone.save() // Sends update to server, which can take however much time to respond.

[marshallswain]

const customerClone = customer.clone()

addressClone = customerClone.addresses[0].clone()

Pass the cloned address to some address editor component. Setup the component to $emit('save') and handle the event with .commit() or .save(). You can also hook up a $emit('reset') to call addressClone.reset() when you want to reset the form.

[fratzinger]

addressClone.commit() // Updates the store and parts of UI displaying the record.
addressClone.save() // Sends update to server, which can take however much time to respond.

When I use the diffOnPatch method it is necessary to call save() before commit(), isn't it?

[marshallswain]

@fratzinger that's correct. The simplest implementation of a diffOnPatch method would probably just need to call save. Save will commit the changes when they return from the API server.

[marshallswain]

I've added this to the docs for version 3.0, to be release within the next couple of days.