Hello,
I have a question about a form I need to code (with VueJS).
I have trainings, each training can have many units, and each unit can have many topics, and each topic can have many trainers.
training => many units (units table : name, hours_number, comments)
unit => many topics (topics table : name, hours_number, color --- to display in the calendar ---)
topic => many trainers (topic_trainer table : topic_id, trainer_id, hours_number)
To save / edit units, I do it from the show view of the training : the description of the training (training table) on the left side of the screen (1/4) and the units list on the right side of the screen (3/4).
I have at least 2 possibilities to save / edit units. I specify that all my forms are in modal windows.
FIRST SCENARIO : a unique form to edit each unit and all nested datas
- one big form where the user can type the unit datas (name, hours_number, comments, ...), add / remove topics (name, hours_number, ... JS handled), and for each topic add / remove trainers (with assigned hours_number)
SECOND SCENARIO : three different forms
-
a form to add / edit a unit : name, hours_number, comments, ... each unit will appear in a separate card in the view
-
in the unit card body, a list of the topics with a button to add / edit the topics with a new form : name, hours_number, ...
-
in each topic line, a button to add / edit the trainers assigned to the topics : trainer, hours_number, ...
I have seen advantages and inconvenients for both scenarii.
What could be the better user experience between each scenario ?
Is there another way to design this case with multiple nested datas ?
What do you suggest me ?
Thanks a lot for your help.
V