Add to FormField the tab and group features + improve the panel feature

[freepius]

• Resolve #3527 and more.
• The errors are managed (tabs are displayed in red, and the first tab with errors is activated).
• The new collapsible feature is integrated.
• Panel header now uses Bootsrap navbar.
• Tabs links are displayed is the panel header (in the navbar so).
• The restrictions on a panel, tab or group (hideOnForm, setPermission, onlyOnDetail...) are applied on cascade (on the children decorators and fields).
• The "orphan fields" case and the "empty decorator" case are managed.
• The forms and detail page display panels, tabs and groups using the same Twig blocks.
• The index page doesn't display decorators.
• I DON'T regenerated in this PR the assets (I let you do)

I hope that this PR will have a good welcome :-) We can discuss on it.

[freepius]

It may look like this. The css has probably to be improved.

[john-dufrene-dev]

Really nice feature !

@javiereguiluz do you think you will implement this ?

[javiereguiluz]

@john-dufrene-dev I like this feature and I'm going to review it. I have some design changes in mind to make the tabs look like traditional tabs.

However, I'd need some review from some Symfony Form experts to make sure that we're not introducing some bad practices. Thanks 🙏

[ChangePlaces]

I'll agree that the tabs should look "more" like tabs, rather than text that's just spaced apart.

However, I was wondering if the form could have tabs, rather than a panel? e.g. User entity could have main tabs of "Contact Details, Site Settings, Payment History" etc. I don't see how panels could be used to implement a form like the above?

[freepius]

@ChangePlaces With this new feature, yes it is possible. You can do like that:

public function configureFields(string $pageName): iterable
{
    return [
        FormField::addTab('Contact details'),
        'firstname', 'lastname', 'birthdate', 'address', 'postcode', 'country',

        FormField::addTab('Site Settings'),
        'subscribeNewsletter', 'password', 'email',

        FormField::addTab('Payment History'),
        'aField, 'anOtherField', 'againOne',

        // etc.
    ];
}

If there is no panel for these tabs, one parent panel is created (without label neither icon) to do the form background.

Inside the tabs, if you want to organize your fields (eg to have some special css for a group of fields), you can group them with the 'group' feature: FormField:addGroup(). You can even write FormField::addGroup()->setProperty('mySpecialGroup') and then your group will have the html id #mySpecialGroup

Bellow, a little (not beautiful) example:

public function configureFields(string $pageName): iterable
{
    return [
        FormField::addTab('My tab', 'flag')->setHelp('You need help? <b>This my tab\'s help!</b>'),
            'identification',

        FormField::addTab('A 2nd tab'),
            TextField::new('name'),

        FormField::addTab('The birthdate', 'calendar'),
            FormField::addGroup()->setProperty('mySpecialGroup'),
                IntegerField::new('birthyear'),
            FormField::addGroup()->addCssClass('alert alert-success'),
                IntegerField::new('birthmonth'),
                IntegerField::new('birthday'),

        FormField::addTab('Others fields'),
            TextField::new('breed'),
    ];
}

But yes, the tabs styles have to be improve. During my development, I kept focus on the technical parts :-)

[john-dufrene-dev]

@javiereguiluz thanks for your answer, Hope to see this new feature :)

[freepius]

Hello @javiereguiluz

Just to know (not to hurry you), do you have some plans about possibly merge/implement this PR? Perhaps an idea of the time to do it? I'm starting a new pro Symfony5 project, and I hesitate between EasyAdmin or SonotaAdmin for admin part. I will probably need the tabs & groups features, but I can't afford to use my fork.

Also, if I can help for this...

Thanks a lot for all your work ;-)

[skianter]

Hope to see this new feature... please, let me know if you decide to add it. thanks very much for you work

[tpformybh]

What's happening with this? Has the feature been dropped or is someone's health suffering?

[bsdrazor]

@tpformybh I join the comment. Are there any plans to implement this feature in the near future? Now having several projects on Symphony 5, it would be very useful to manage the panel design not only with the help of the CSS Grid.

[freepius]

When I published this pull-request, the feature was complete and tested. Now, @javiereguiluz have to accept it or not. But I think he has other plans for the UI/UX of EasyAdmin...

Note : I read again my code and... then... it's pretty good and well commented (even tested) :-) It even simplifies some EasyAdmin peaces of code. I really think it's ready to be merged! Hopefully...

[weerdenburg]

@javiereguiluz I also would love to now the status of this PR. With every release, I check again if group and tab features are available, but they aren't yet in the 3.2.3 version :-( I would love to use them in my current project.

other plans for the UI/UX of EasyAdmin. Oh? What should we be thinking of?

[daffoxdev]

after this change panels also could be grouped? I mean the case when we need two panels that should be showed on same row using 'col-6' for both

[gaelb80]

Hi ! Is this PR will be merge one day or not ? Like others, I'll need this feature in my current project and having a response (yes/no) can help me to choose the best way to use the bundle or extend on my own side. @javiereguiluz thanks in advance !

[weerdenburg]

@javiernunez I just received an update notice of a new release, but this pull request is still not in there :-( I really would have loved to see this logic in the next release.

Could you please tell us what is needed to get this into a next release? Or will there be other (better?) solutions released in the near future?

Thanks in advance for your time.

[weerdenburg]

@javiernunez I'm sorry to ask you again, but can you please tell us what to do with tab groups? I still would like to use tab's in my project (now I group them as multiple blocks on one page). I see that there has been a new release 3.2.9, but still no ref. or info about this issue :-(

As I see in the votes on this page, multiple people would like to see this logic working or would like to hear how to make such logic in a better way.

Can you please shine some light on this 'issue'? Thanks in advance!

[Seb33300]

The Maker\Migrator class may need to be updated too to support tab migration from EA2

[john-dufrene-dev]

@javiereguiluz

Do you think this feature is planning or not at all ?

Thanks in advance.

[va5ja]

@javiereguiluz Would it help sponsoring you to add the tabs feature? It doesn't need to be this PR but in general the tabs feature from version 2 that's missing in version 3. I'm happy to sponsor you if it would speed up adding the tabs feature.

[parijke]

@javiereguiluz Would it help sponsoring you to add the tabs feature? It doesn't need to be this PR but in general the tabs feature from version 2 that's missing in version 3. I'm happy to sponsor you if it would speed up adding the tabs feature.

I would say sponsoring would certainly help. It doesn't come with "rights" on priorities though. I sponsor Javier from the beginning of v3, and I do that because of his great work. Only $5 a month, but if everybody does this, he'll certainly have more time to add features.

[freepius]

When I coded this feature, it was ready to merge and it was even unit-tested. Maybe it needed a better CSS design and some refactoring, but I think my PR was pretty ready.

Finally, it seems @javiereguiluz has its own dev rodmap for EasyAdmin and its own plan for this feature (in a v4 ?) He is probably no longer following this discussion. It's a bit of a shame: -S

[parijke]

Also read https://easycorp.github.io/blog/posts/a-month-without-contributions

As much as I want the tab feature as well, I am in Javiers corner. The other option is to fork the repo and make it a full community product somehow. But even then, there has to be some sort of "control" what to add and what not.

[freepius]

I think also Javiers does a really great work! And thanks to him a lot. Someones just need a roadmap / an answer for this feature.

NB: I just read its blog post (about a month without contributions) and I understand him. It must often be a headache to manage an open-source project like this. So good luck to him.

[va5ja]

Of course, I'm not trying to be pushy, I'm really thankful for all the work that Javier has done with this project. The last thing that he wrote in this thread is: "I like this feature and I'm going to review it". So all I'm asking for is a simple "I have no time, it will happen eventually or not" so that I/we know how to proceed. I read the blog post but this is not a bug fix nor a new feature. And as of today I'm also sponsoring Javier if that keeps him a little happier.

[wizhippo]

As pointed out by the blog post mentioned above this is not a bug fix. To quote the post "I can work with you to solve the issues that you are experiencing, but you need to do most of the work."

In this case, most of the work is already done. Please consider adding this or just letting the community know that features like this will not be added as they add too much additional work that this repo is not willing/able to commit resources to maintain.

[weerdenburg]

@javiereguiluz, I really like the new design, great work! https://easycorp.github.io/blog//posts/redesigning-easyadmin

I hope that it will be possible that we get grouping back into easy admin, because i.c.w. the new design that would work great. As @wizhippo wrote, please let us know what is needed to get it into one of the next releases ;-)

[javiereguiluz]

Mathieu, I'm grateful for your contribution and I'm really sorry I couldn't take a look on this earlier. However, while this wasn't merged we re-introduced "form tabs" (see #4725) which provides a very similar solution. That's why I think we should close this one without merging. I'm really sorry 😞

[freepius]

It's a pity and not very honest on your part, because the other proposed feature is much more (too) poor. Just take the time to consider my PR. So simple... And please look my very first message to see all the features my PR proposed.

And NO, the other feature is not similar at all ! :-) Just too simple.