Edit array member in a form


#1

Hi, can you give me some ideas please?

I am working on a farm management system and I have about 10 different forms for adding various events that can happen to the animals. Events is an array of objects like this:
Animals = [ { name: Fred, events: [ { type: birth, date: yesterday }, … ] }

I have implemented deleting of the events. There is a list of them on the page with a delete button that calls a server-side code (with kind-of unique event identifiers as parameters), and the server side iterates through the events array, pushing its members back into a temp array - except for the one that is supposed to be deleted. Then I $set the temp array again into Mongo. Is there a better way?

What I struggle with is editing the events though. Ideally, I would like to be able to click on the edit button, and the correct form loads with all corresponding data pre-entered (buttons would change also their texts “Add new” to “Submit changes” and “Cancel edit”). I have no idea how to do it elegantly - I only came up with dumb solutions like complicated IFs with loads of jQuery, or I started working on a set of session variables that would be feeding the form fields, but it is getting too complex as well. Also, how will I actually update the data? Similarly to deleting events? (iterate through the array members, create its copy and change the one that is supposed to be edited) Is there a more elegant solution?

I am using the iron router.

Template.events showing a list of all events:

'click .editEvent'(e) {
  Session.set('editableEvent', this._originalData);
}

A template.helper for one of the forms (e.g. births):

data() { return ( Session.get('editableEvent').type == 'birth') ? Session.get('editableEvent') : null; }

HTML:

<input ... value={{data.date}}>
{{#if data}}Edit{{else}}Add new{{/if}}