Symfony 4 / Sonata : Gérer l’ordre en drag’n drop

Il faut installer pixassociates/sortable-behavior-bundle et stof/doctrine-extensions-bundle

composer require stof/doctrine-extensions-bundle
composer require pixassociates/sortable-behavior-bundle

Ajouter la configuration dans pix_sortable.yaml
En ajoutant l’entité et le champs dans position_field (ici wconf, et le champs position)

pix_sortable_behavior:
    db_driver: orm # mongodb default value : orm
    position_field:
        default: position #default value : position
        entities:
            App\Entity\Wconf: position
    sortable_groups:
        entities:
            #AppBundle\Entity\Baz: [ group ]
            
stof_doctrine_extensions:
    orm:
        default:
            sortable: true

Dans l’entitée il faut créer un champs qui va gérer la position (au hazard on l’appel position)

use Gedmo\Mapping\Annotation as Gedmo;

    /**
     * @Gedmo\SortablePosition
     * @ORM\Column(type="integer")
     */
    private $position;

    public function getPosition(): ?int
    {
        return $this->position;
    }

    public function setPosition(int $position): self
    {
        $this->position = $position;

        return $this;
    }

Dans le controller, il faut rajouter la ref dans use, ajouter la route, et le bouton

use Sonata\AdminBundle\Route\RouteCollection;
use Pix\SortableBehaviorBundle\Services\PositionORMHandler as PositionHandler;


public $last_position = 0;
private $positionService;

protected $datagridValues = array(
	'_page' => 1,
	'_sort_by' => 'position',
	'_sort_order' => 'ASC',
);

public function setPositionService(PositionHandler $positionHandler)
{
        $this->positionService = $positionHandler;
}


protected function configureListFields(ListMapper $listMapper)
{
$listMapper->add('_action', null, array(
            'actions' => array(
                'move' => array(
                    'template' => '@PixSortableBehavior/Default/_sort_drag_drop.html.twig',
                    'enable_top_bottom_buttons' => false, 
                ),
            ),
        ))
        ;
}

protected function configureRoutes(RouteCollection $collection)
{
        $collection->add('move', $this->getRouterIdParameter().'/move/{position}');
}

Ajouter ensuite les assets javascripts dans config/sonata_admin.yaml ajouter le service gedmo, et ajouter la configuration des arguments et calls

                    
    assets:
        extra_javascripts:
            - bundles/pixsortablebehavior/js/jquery-ui.min.js // if you haven't got jQuery UI yet.
            - bundles/pixsortablebehavior/js/init.js

Dans la configuration des services :

    gedmo.listener.sortable:
        class: Gedmo\Sortable\SortableListener
        calls:
            - [setAnnotationReader, ['@annotation_reader']]
        tags:
            - { name: doctrine.event_subscriber, connection: default }


    admin.wconf:
        class: App\Admin\WconfAdmin
        arguments: [~, App\Entity\Wconf, 'PixSortableBehaviorBundle:SortableAdmin']
        tags:
            - { name: sonata.admin, manager_type: orm, label: "Configuration des types" }
        public: true        
        calls:
              - [setPositionService, ["@pix_sortable_behavior.position"]]

Adapter l’exemple à la version installée

Les exemples Symfony et Sonata restent attachés aux versions indiquées dans l’article. Symfony 4.x et Symfony 6.2 ne sont plus maintenus : pour un projet actuel, utilisez une branche maintenue et la documentation correspondant exactement à vos dépendances.

php bin/console about
composer show symfony/framework-bundle sonata-project/admin-bundle

Avant de reprendre le code, contrôlez les signatures, les services, les routes et les templates concernés. Ajoutez ensuite un test fonctionnel couvrant les autorisations, le code HTTP et le résultat visible.

Référence : versions Symfony maintenues.