Enhancement: section-based data entry (large entities, group fields with Tabs or similar)

[sglebs]

Is your feature request related to a problem? Please describe.

It is common to have large (wide) tables, especially for non-normalized entities (in particular in legacy systems).
The columns often can be grouped together logically in "categories". Unfortunately the current data entry is "flat".

Describe the solution you'd like

It would be nice if we could define these "groups of fields". And possibly the "ways of grouping". I can think of 3 ways of grouping:

1. Multi-tab https://getbootstrap.com/docs/5.0/components/navs-tabs/
2. Wizard-like (NEXT/PREVIOUS). https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045
3. Collapsible (accordion style) https://getbootstrap.com/docs/4.0/components/collapse/

Describe alternatives you've considered

1. Overriding the template html and doing "by hand" with Bootstrap
2. https://htmx.org . Tabs: https://htmx.org/examples/tabs-hateoas/
3. Maybe "CompositeField", where a name and N fields are passed in? Not sure this is the right way
4. Maybe the concept of a "grouper" which has the grouping description? I mean, just like "exclude_fields_from_create" controls the visibility, perhaps a "group_fields_in_create", "group_fields_in_edit"?

Additional context
None.

[hasansezertasan]

Well, I totally agree. I believe we need something like form_edit_rules from flask admin. Do you have a progress on this @sglebs?

[sglebs]

I don't have the know-how on starlette-admin & JS to do this the optimal way. But I believe one would need to change templates/modals/edit.html and instead of traversing fields linearly like this:

                            {% block edit_form %}
                                {% for field in model.get_fields_list(request, 'EDIT' | ra) %}
                                    <div class="mb-3">
                                        {% with action=('EDIT' | ra),data=obj[field.name], error=errors.get(field.name, None) if errors else None %}
                                            {% include field.label_template %}
                                            {% include field.form_template %}
                                        {% endwith %}
                                    </div>
                                {% endfor %}
                            {% endblock %}

One would need to traverse them by groups/categories. That means using an API like model.get_field_groups instead of what we have today, which is model.get_fields_list. You can think of the current approach as being a specialization of when there is only 1 group, named "_default". That means no TAB in the UI, just spew them TAB-less. Otherwise you need to honor the groups and have the TABs according to the result of model.get_field_groups.

I may try this in my overriden ModelView (where I currently have similar workarounds) and overriden template file.