[FEATURE] #4725 Add Form Tabs support

[jeromeengeln]

[3.X] Add Form Tabs support #4725

Add feature to support form tabs on cruds

I've found a rapid way to make it works.
What do you think about it ?

Example of how to use this feature

_

In pages where you display lots of fields, you can divide them in tabs using
the "tabs" created with the special FormField object::

use EasyCorp\Bundle\EasyAdminBundle\Field\FormField;

    use EasyCorp\Bundle\EasyAdminBundle\Field\FormField;

    public function configureFields(string $pageName): iterable
    {
        return [
            IdField::new('id')->hideOnForm(),

            // Add a tab
            FormField::addTab('First Tab'),

            // You can use a Form Panel inside a Form Tab
            FormField::addPanel('User Details'),

            // Your fields
            TextField::new('firstName'),
            TextField::new('lastName'),

            // Add a second Form Tab
            // Tabs can also define their icon, CSS class and help message
            FormField::addTab('Contact information Tab')
                ->setIcon('phone')->addCssClass('optional')
                ->setHelp('Phone number is preferred'),

            TextField::new('phone'),

        ];
    }

_

[john-dufrene-dev]

@JeromeEngelnAdeliom do you have some visual for this feature ?
Thanks

[jeromeengeln]

@john-dufrene-dev I used the existing bootstrap template :

[john-dufrene-dev]

@JeromeEngelnAdeliom excellent ! Hope to see this New feature

[parijke]

I cannot see why the composer.json should be changed

[jeromeengeln]

It was my way to pass the commit's checks. The problem is linked to doctrine/orm 2.10.0 + that allow doctrine/dbal 3 since 3 days.
Maybe a temporarily solution is to exclude doctrine/dbal > 3.0.0 in composer file ?

[javiereguiluz]

@JeromeEngelnAdeliom thanks for working on this. I want this feature to be added as soon as possible, but I'm lacking the energy to work on this ... so your PR is what we need to move this forward.

As you probably know, we already had this feature in 2.x branch, but we had to remove it in order to release the 3.x version without much delay.

1. I have some clear ideas about the UI design of this feature and I'd like to make some changes in your PR ... but after this PR is finished and merged ... so, please don't wast much time on the design because I'll change some things.

2. I like how this feature is used by end-users. It's exactly the declarative style that I was thinking. Nice!

3. Sometimes fields inside some tab have validation errors. We need to display a badge with the number of errors of each tab ... and on page load, display the first tab with errors, if any. The 2.x code might help you as inspiration for this:

   EasyAdminBundle/src/Resources/views/default/edit.html.twig

   Lines 68 to 113 in 83fecc1

   	// forms with tabs require some special treatment for errors. The problem
   	// is when the field with errors is included in a tab not currently visible.
   	// Browser shows this error "An invalid form control with name='...' is not focusable."
   	// So, the user clicks on Submit button, the form is not submitted and the error
   	// is not displayed. This JavaScript code ensures that each tab shows a badge with
   	// the number of errors in it.
   	formSubmitButton.addEventListener('click', function() {
   	const formTabPanes = entityForm.querySelectorAll('.tab-pane');
   	if (0 === formTabPanes.length) {
   	return;
   	}
   	let firstNavTabItemWithError = null;
   	formTabPanes.forEach(function (tabPane) {
   	let tabPaneNumErrors = 0;
   	tabPane.querySelectorAll(inputFieldsSelector).forEach(function (input) {
   	if (!input.validity.valid) {
   	tabPaneNumErrors++;
   	}
   	});
   	let navTabItem = entityForm.querySelector('.nav-item a[href="#' + tabPane.id + '"]');
   	let existingErrorBadge = navTabItem.querySelector('span.badge.badge-danger');
   	if (null !== existingErrorBadge) {
   	navTabItem.removeChild(existingErrorBadge);
   	}
   	if (tabPaneNumErrors > 0) {
   	let newErrorBadge = document.createElement('span');
   	newErrorBadge.classList.add('badge', 'badge-danger');
   	newErrorBadge.title = 'form.tab.error_badge_title';
   	newErrorBadge.textContent = tabPaneNumErrors;
   	navTabItem.appendChild(newErrorBadge);
   	if (null === firstNavTabItemWithError) {
   	firstNavTabItemWithError = navTabItem;
   	}
   	}
   	});
   	if (firstNavTabItemWithError) {
   	firstNavTabItemWithError.click();
   	}
   	});

Thanks!

[jeromeengeln]

Thanks for your comment.
I tested the badge system rapidly this morning and displaying a badge with the number of errors of each tab ... and on page load, display the first tab with errors was already working.
I just made 2 changes in the EasyAdminTabSubscriber.

[jeromeengeln]

Ok I see your point. My test has worked only when the submit action was triggered. I will try to add the old js code for front-end validation errors.

[jeromeengeln]

@javiereguiluz I made some changes to answer to your third point. Can you check ?

[parijke]

I've added this as a patch to my dev env but I don't see the tabs? No errors shown.

[jeromeengeln]

I've added this as a patch to my dev env but I don't see the tabs? No errors shown.

To verify, I've removed all my changes from my vendor test project directory and re added then pull PR 4727 directly in vendor/easycorp/easyadmin-bundle. Works fine for me after adding :

        public function configureFields(string $pageName): iterable
        {
             yield FormField::addTab('Tab');

Can you tell me more ?

[parijke]

I have patched easyadmin using:

  },
            "easycorp/easyadmin-bundle": {
                "tabs feature": "https://patch-diff.githubusercontent.com/raw/EasyCorp/EasyAdminBundle/pull/4727.patch"
            }

which added the addTab method (which I can add to my crudController without problems). It won't show in the front end though.
I cannot see anything new rendered. Of course I cleared cache and removed var/cache/* to be sure

[jeromeengeln]

Very strange, I've tried your method with patches. Works fine in my project.

Gathering patches for dependencies. This might take a minute.
  - Installing easycorp/easyadmin-bundle (v3.5.10): Extracting archive
  - Applying patches for easycorp/easyadmin-bundle
    https://patch-diff.githubusercontent.com/raw/EasyCorp/EasyAdminBundle/pull/4727.patch (tabs feature)

Can try a dump in vendor/easycorp/easyadmin-bundle/src/Resources/views/crud/form_theme.html.twig :

{# EasyAdmin form type #}
{% block ea_crud_widget %}
    {{ dump(ea_crud_form.form_tabs) }}
    {% if ea_crud_form.form_tabs|length > 0 %}

Or share me your dev project to investigate more ? Or show me your configureFields() method ?

[parijke]

Damn me... sorry I've wasted your time... It appears ONLY to work on edit/new (Forms) and I was constantly checking the DETAIL page

It works on the forms

[jeromeengeln]

Ok np, I excluded the detail page as it needs some twig adjustments.

[jeromeengeln]

minor style udpate :

• initial margin config : margin: -20px -20px 20px;
  

• updated margin : margin: 0px -20px 20px;
  

[jmsche]

Hi, is there any way to "close" a tab so some other fields can be added after the tabs?

[jeromeengeln]

I have found a issue when you add some fields inside a tab and not wrapped in a panel :

The behavior was :

9bda3d5 fixed this wrong behavior :

[jeromeengeln]

Hi, is there any way to "close" a tab so some other fields can be added after the tabs?

Can you tell me more about your idea ? I think that if you want to use tabs it for to put all your fields inside.
Or maybe you want to add some fields in a bottom section always visible and displayed the tabs fields on a top section ?

[jmsche]

Or maybe you want to add some fields in a bottom section always visible and displayed the tabs fields on a top section ?

That's just an example of what I'd do: put some fields on top and/or bottom of the tabs content.

An other example would be translations: I'd have some tabs for each translation, but some fields wouldn't be translated (eg. price, weight...).

[jeromeengeln]

That kind of integration can be added after this PR ? But I agree, having many tabs section in one page (or a static bottom field list) can be useful.
For translations maybe the best way is to use An A2lix custom TranslationField, it will use his own tab system to display fields. Then you can add fields anywhere.

[jeromeengeln]

Job done since beginning :

• Add tab support
• Add some javascript to intercept tabs errors when submitting a form
• Display an error counter directly inside tabs
• Manage recent conflicts
• Adjust nav-tabs container margin top

[DylanKas]

Is there any task left or help needed ?

[jeromeengeln]

Maybe some advanced tests or some UI adaptations (maybe after this PR as javiereguiluz said above "I have some clear ideas about the UI design of this feature and I'd like to make some changes in your PR") ?

[jeromeengeln]

I use this PR as a patch in my dev project since 2 month without encountering any problems.
Do I have anything more to do to see this pull request merged ?

[javiereguiluz]

Jérôme, I apologize to you for not having merged your contribution earlier. I just did, so I can only send you a BIG THANK YOU for having implemented this feature. It will be available in the next stable release. Thanks!