Using data from multiple tables in LiveView

Hello!

I have a representation of a printed document using the following hierarchy:

document
  section
    field

Each document has many sections and each section has many fields. The documents, sections and fields are persisted in their corresponding tables. So there is a table for documents, a table for sections and a table for fields.

I have a working front end written in Ember which I want to replace with LiveView. Some of the features that I want to implement in LiveView are:

• Update fields on blur
• Update fields based on the values of other fields (the calculations are run in the backend)
• Open embedded forms to insert new data in some sections (like adding multiple addresses)

I am not sure which, if any, of the following approaches is better.

Approach A

Convert the document tree to a single embedded_schema and use a changeset in the form. In this case it is easier to work with the form because all the data is handled as if it came from a single table. However I have to write a function to populate the embedded_schema and another one to get the data from the form and persist the data in the corresponding tables.

Approach B

Since the fields are not positioned in the page in the same order that they are retrieved from the database. Then in the template I could search the document tree for each field to get the value and input type and create the input tag accordingly. When a blur event is received in the server, search again the field’s struct in the document tree and persist the changes.

Approach C

Use a LiveView for each field in the document. In this case I am not sure if I can update automatically a field based in the values of other fields since they are in distinct LiveViews.

Which approach should I follow?
Are there other approaches that I have not considered?

Any comments will be very helpful.

Regards,
Hector Sansores