Getting Started

Minimal Setup

Install the Bundle

composer require a5sys/easyadminpopup-bundle

Register in AppKernel.php

new A5sys\EasyAdminPopupBundle\EasyAdminPopupBundle(),

Configure the Bundle In config/packages/easy_admin_popup.yaml:

easy_admin_popup:
    layout: "::admin_layout.html.twig"  # Path to your Twig layout
    customized_flash: false  # Set to `true` if using custom flash translations

Ensure Layout Compliance Your admin_layout.html.twig must:

Include a body block.

Load dependencies:

<!-- In <head> -->
{{ include('EasyAdminPopupBundle::scripts.html.twig') }}

Include required JS via Assetic:

{% block stylesheets %}
    {% javascripts '@EasyAdminPopupBundle/Resources/assets/js/form-modal.js' %}
        <script src="{{ asset(url) }}"></script>
    {% endjavascripts %}
    {% javascripts '@EasyAdminPopupBundle/Resources/assets/js/humane-error.js' %}
        <script src="{{ asset(url) }}"></script>
    {% endjavascripts %}
{% endblock %}

First Use Case: Popup CRUD Extend the provided AdminController and annotate a route:

use A5sys\EasyAdminPopupBundle\Controller\AdminController;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;

class UserAdminController extends AdminController
{
    /**
     * @Route("/admin/users/popup", name="admin_users_popup")
     */
    public function popupAction()
    {
        return $this->render('EasyAdminPopupBundle:CRUD:index.html.twig');
    }
}

Implementation Patterns

1. Controller Integration

Extend AdminController for all popup-enabled CRUD operations.

Override Methods for custom logic:

class PostAdminController extends AdminController
{
    protected function configureFields(string $pageName): iterable
    {
        return [
            // Custom fields with popup-friendly configurations
            Field::new('title')->setFormType(PopupTextType::class),
        ];
    }
}

2. Field-Specific Popup Behavior

Use provided form types (e.g., PopupTextType, PopupDateTimeType) for modal-based inputs:

use A5sys\EasyAdminPopupBundle\Form\Type\PopupTextType;

$builder->add('description', PopupTextType::class, [
    'popup_route' => 'admin_posts_edit_description', // Custom route for the popup
    'options' => ['attr' => ['class' => 'popup-field']],
]);

3. Dynamic Popup Routes

Define routes for popup content in config/routes.yaml:

admin_posts_edit_description:
    path: /admin/posts/edit-description/{id}
    controller: App\Controller\Admin\PostAdminController::editDescriptionPopup
    methods: [GET, POST]

4. Layout Inheritance

Extend EasyAdminPopupBundle::base.html.twig for consistent popup styling:

{% extends 'EasyAdminPopupBundle::base.html.twig' %}

{% block body %}
    {{ parent() }}
    <div class="popup-overlay"></div>
{% endblock %}

5. Event Listeners

Hook into popup lifecycle events (e.g., popup.pre_open, popup.post_save):

// src/EventListener/PopupListener.php
public function onPopupPreOpen(PopupEvent $event)
{
    $event->setOption('maxWidth', 800); // Customize popup dimensions
}

Gotchas and Tips

Pitfalls

Missing Dependencies
- Forgetting to include jquery, bootstrap-datetimepicker, select2, or humane in your layout will break popup functionality.
- Fix: Verify scripts.html.twig is included in your base template.

Assetic/Webpack Conflicts

If using Webpack Encore, manually copy JS assets to public/build/ or configure Encore to process:

// webpack.config.js
Encore.addEntry('admin-popup', './vendor/a5sys/easyadminpopup-bundle/Resources/assets/js/form-modal.js');

CSRF Token Mismatch
- Popup forms may fail if CSRF tokens aren’t refreshed. Use {% csrf_token() %} in Twig templates or pass tokens via AJAX.
Route Caching
- After adding popup routes, clear the route cache:
```
php bin/console cache:clear --env=prod
```
Flash Message Translation
- If customized_flash: true, ensure translation keys exist (e.g., flash.User.persist in messages.yml).

Debugging Tips

Check Console Errors
- Open browser dev tools (F12) to verify JS errors (e.g., missing form-modal.js).
Inspect Popup HTML
- Use {{ dump(app.request) }} in Twig to debug route parameters passed to popups.

Log Events

Enable Symfony’s event dispatcher logging:

# config/packages/dev/monolog.yaml
handlers:
    main:
        type: stream
        level: debug
        channels: ["event"]

Override Default Templates
- Copy EasyAdminPopupBundle::CRUD/edit.html.twig to templates/admin/CRUD/edit_popup.html.twig for customizations.

Extension Points

Custom Popup Templates
- Override EasyAdminPopupBundle::popup.html.twig to modify modal structure.

Dynamic Popup Content

Use AJAX to load popup content dynamically:

// form-modal.js extension
$.fn.easyAdminPopup.loadContent = function(url) {
    return this.load(url).promise().done(function() {
        $(this).find('.popup-body').show();
    });
};

Add New Field Types
- Extend PopupFieldType to support custom inputs (e.g., PopupSelect2Type).
Integrate with EasyAdmin 4.x
- If using EasyAdmin 4, alias the bundle in config/bundles.php:
```
A5sys\EasyAdminPopupBundle\EasyAdminPopupBundle::class => ['all' => true],
```

Easyadminpopup Bundle Laravel Package