Training Wizard

<?php

namespace App\Form\Flow\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Flow\FormFlowCursor;
use Symfony\Component\Form\Flow\ButtonFlowInterface;
use Symfony\Component\Form\Flow\Type\FinishFlowType;
use Symfony\Component\Form\Flow\FormFlowInterface;
use Symfony\Component\Form\Flow\Type\NextFlowType;
use Symfony\Component\Form\Flow\Type\PreviousFlowType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class FlowNavigatorType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            // BOUTON PRÉCÉDENT
            // Visible seulement si on n'est pas au premier step
            ->add('previous', PreviousFlowType::class, [
                'label' => $options['previous_label'],
                'label_html' => $options['label_html'],
                'translation_domain' => false,
                'include_if' => fn (FormFlowCursor $cursor) => !$cursor->isFirstStep(),
                'clear_submission' => false,
                'validate' => false,
                'validation_groups' => [],
                'attr' => $options['previous_attr'],
            ])

            // BOUTON SUIVANT
            // Visible seulement si on n'est pas au dernier step
            ->add('next', NextFlowType::class, [
                'label' => $options['next_label'],
                'label_html' => $options['label_html'],
                'translation_domain' => false,
                'include_if' => fn (FormFlowCursor $cursor) => !$cursor->isLastStep(),
                'attr' => $options['next_attr'],
            ])

            // BOUTON TERMINER
            // Visible seulement au dernier step
            ->add('finish', FinishFlowType::class, [
                'label' => $options['finish_label'],
                'label_html' => $options['label_html'],
                'translation_domain' => false,
                'include_if' => fn (FormFlowCursor $cursor) => $cursor->isLastStep(),
                'attr' => $options['finish_attr'],
            ]);

        // BOUTON BROUILLON (Optionnel)
        // Toujours visible si activé, ne valide pas le formulaire
        if ($options['show_save_draft']) {
            $builder->add('saveDraft', FinishFlowType::class, [
                'label' => $options['save_draft_label'],
                'translation_domain' => false,
                'include_if' => fn (FormFlowCursor $cursor) => true,
                'handler' => fn (mixed $data, ButtonFlowInterface $button, FormFlowInterface $flow) => null,
                'validate' => false,
                'attr' => $options['save_draft_attr'],
            ]);
        }
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'label' => false,
            'mapped' => false,
            'label_html' => false,

            'previous_label' => 'Précédent',
            'next_label' => 'Continuer',
            'finish_label' => 'Terminer',
            'save_draft_label' => 'Enregistrer et fermer',

            'previous_attr' => ['class' => 'btn btn-outline-secondary'],
            'next_attr' => ['class' => 'btn btn-primary'],
            'finish_attr' => ['class' => 'btn btn-success'],
            'save_draft_attr' => ['class' => 'btn btn-outline-primary'],

            'show_save_draft' => false,
        ]);
    }
}

<?php

// Dans TrainingCreationFlowType.php (ou tout autre wizard)

use App\Form\Flow\Type\FlowNavigatorType;

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    // ... ajout des champs du formulaire ...

    // Ajout des boutons de navigation
    $builder->add('navigator', FlowNavigatorType::class, [
        // Labels personnalisés avec icônes HTML
        'previous_label' => '<i class="fa-solid fa-arrow-left me-1"></i> Retour',
        'next_label' => 'Continuer <i class="fa-solid fa-arrow-right ms-1"></i>',
        'finish_label' => '<i class="fa-solid fa-check me-1"></i> Valider',
        'save_draft_label' => '<i class="fa-solid fa-floppy-disk me-1"></i> Brouillon',

        // Activer le rendu HTML dans les labels
        'label_html' => true,

        // Activer le bouton brouillon
        'show_save_draft' => true,

        // Classes CSS personnalisées
        'next_attr' => ['class' => 'btn btn-primary btn-lg'],
        'finish_attr' => ['class' => 'btn btn-success btn-lg'],
    ]);
}

{# templates/workspace/scoring/training_creation/_form.html.twig #}

<div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
    {# Bouton Précédent (à gauche) #}
    <div>
        {{ form_widget(form.navigator.previous) }}
    </div>

    {# Boutons à droite : Brouillon + Suivant/Terminer #}
    <div class="d-flex gap-2">
        {% if form.navigator.saveDraft is defined %}
            {{ form_widget(form.navigator.saveDraft) }}
        {% endif %}
        {{ form_widget(form.navigator.next) }}
        {{ form_widget(form.navigator.finish) }}
    </div>
</div>

<?php

namespace App\Repository\Traits;

use Doctrine\ORM\QueryBuilder;
use Doctrine\ORM\Tools\Pagination\Paginator;

/**
 * Trait reutilisable pour paginer les resultats Doctrine.
 * @template T of object
 */
trait TraitPaginate
{
    /**
     * @return array{items: T[], total: int, page: int, limit: int, pages: int}
     */
    private function paginate(QueryBuilder $queryBuilder, int $page = 1, int $limit = 10): array
    {
        $offset = ($page - 1) * $limit;

        $queryBuilder->setMaxResults($limit)
            ->setFirstResult($offset);

        $paginator = new Paginator($queryBuilder);
        $totalResults = count($paginator);

        return [
            'items' => iterator_to_array($paginator),
            'total' => $totalResults,
            'page' => $page,
            'limit' => $limit,
            'pages' => (int) ceil($totalResults / $limit),
        ];
    }
}

<?php

namespace App\Extension;

use Symfony\Component\HttpFoundation\RequestStack;
use Symfony\Component\Routing\RouterInterface;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
use Twig\TwigTest;

class PaginationExtension extends AbstractExtension
{
    public function __construct(
        private readonly RouterInterface $router,
        private readonly RequestStack $requestStack,
    ) {}

    public function getFunctions(): array
    {
        return [
            // Genere l'URL pour une page donnee
            new TwigFunction('paginate', $this->paginate(...)),
            // Retourne les numeros de pages a afficher (fenetre glissante)
            new TwigFunction('short_pagination', $this->getShortPagination(...)),
        ];
    }

    public function getTests(): array
    {
        return [
            // Test si des pages sont cachees avant la fenetre
            new TwigTest('short_pagination_hidden_before', ...),
            // Test si des pages sont cachees apres la fenetre
            new TwigTest('short_pagination_hidden_after', ...),
        ];
    }

    /**
     * Genere l'URL de pagination en conservant tous les parametres.
     */
    public function paginate(int $page, bool $relative = false): string
    {
        $request = $this->requestStack->getMainRequest();
        $name = $request->get('_route');
        $parameters = $request->get('_route_params');
        $queryParams = $request->query->all();

        // Retirer le parametre page existant
        unset($queryParams['page']);

        return $this->router->generate($name, [
            ...$parameters,
            ...$queryParams,
            ...(1 === $page ? [] : ['page' => $page]),
        ]);
    }

    /**
     * Fenetre glissante : affiche current-2 a current+2.
     * Ex: page 5 sur 10 → [3, 4, 5, 6, 7]
     */
    public function getShortPagination(int $total, int $current): array
    {
        $floor = max(1, $current - 2);
        $ceil = min($total, $current + 2);
        return range($floor, $ceil);
    }
}

{# templates/common/parts/pagination.html.twig #}
{# Pagination GET classique : liens <a href="{{ paginate(page) }}"> #}

{# templates/common/parts/form_pagination.html.twig #}
{# Pagination dans un formulaire : boutons submit + page cible #}
<button
    type="submit"
    class="page-link"
    name="_target_page"
    value="{{ page }}"
    formaction="{{ paginate(current) }}"
    formmethod="post"
    formnovalidate
>
    {{ page }}
</button>

<?php

namespace App\EventListener\Form;

use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;

/**
 * Fusionne les selections entre les pages de pagination.
 */
class ParticipantSelectionMergeListener implements EventSubscriberInterface
{
    /**
     * @param int[] $currentPageIds IDs affiches sur la page courante
     */
    public function __construct(
        private readonly array $currentPageIds,
    ) {}

    /** @var int[] */
    private array $previouslySelected = [];

    public static function getSubscribedEvents(): array
    {
        return [
            FormEvents::PRE_SUBMIT => 'storePreviousSelection',
            FormEvents::SUBMIT => 'mergeSelection',
        ];
    }

    public function storePreviousSelection(FormEvent $event): void
    {
        $existingData = $event->getForm()->getData();
        $this->previouslySelected = array_map('intval', $existingData?->selectedParticipantIds ?? []);
    }

    public function mergeSelection(FormEvent $event): void
    {
        $data = $event->getData();
        $checkedOnCurrentPage = array_map('intval', $data->selectedParticipantIds);
        $fromOtherPages = array_diff($this->previouslySelected, $this->currentPageIds);

        $data->selectedParticipantIds = array_values(array_unique(array_merge(
            $fromOtherPages,
            $checkedOnCurrentPage,
        )));

        $event->setData($data);
    }
}

<?php

// Dans ParticipantSelectionType.php

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    // ... autres champs ...

    // Ajouter le listener avec les IDs de la page courante
    $builder->addEventSubscriber(
        new ParticipantSelectionMergeListener(
            currentPageIds: array_map(
                fn($p) => $p->getId(),
                $options['paginated_participants']['items'] ?? []
            )
        )
    );
}

public function configureOptions(OptionsResolver $resolver): void
{
    $resolver->setDefaults([
        'paginated_participants' => [], // Resultat de TraitPaginate
    ]);
}

import { Controller } from '@hotwired/stimulus';
import { Modal } from 'bootstrap';

/**
 * Pattern reutilisable pour une modal interactive.
 * A adapter selon le contexte metier.
 */
export default class extends Controller {
    // Targets = elements dynamiques de la modal
    static targets = [
        'participantId',      // Input hidden pour l'ID
        'participantName',    // Zone d'affichage du nom
        'searchInput',        // Champ de recherche/filtre
        'referenceSelect',    // Select des options
    ];

    // Configuration statique (labels, classes CSS...)
    static statusLabels = {
        to_complete: 'A completer',
        confirmed: 'Confirme',
    };

    connect() {
        // Reference au bouton declencheur (pour restaurer le focus)
        this.triggerElement = null;

        // Ecouter l'ouverture de la modal
        this.element.addEventListener('show.bs.modal', (event) => {
            this.open(event);
        });

        // Gerer le focus avant fermeture (accessibilite)
        this.element.addEventListener('hide.bs.modal', () => {
            if (this.element.contains(document.activeElement)) {
                document.activeElement.blur();
            }
        });

        // Reset apres fermeture + restaurer focus
        this.element.addEventListener('hidden.bs.modal', () => {
            this.reset();
            this.restoreTriggerFocus();
        });

        // Event delegation pour les boutons du tableau
        this.handleEditClick = this.handleEditClick.bind(this);
        document.addEventListener('click', this.handleEditClick);
    }

    disconnect() {
        document.removeEventListener('click', this.handleEditClick);
    }

    handleEditClick(event) {
        const button = event.target.closest('.js-edit-button');
        if (button) {
            event.preventDefault();
            this.triggerElement = button;
            this.fillFromTrigger(button);
            Modal.getOrCreateInstance(this.element).show();
        }
    }

    /**
     * Pre-remplit la modal depuis les data-* du trigger.
     */
    fillFromTrigger(trigger) {
        this.participantIdTarget.value = trigger.dataset.participantId || '';
        this.participantNameTarget.textContent = trigger.dataset.participantName || '-';
        this.referenceSelectTarget.value = trigger.dataset.currentReferenceId || '';
    }

    /**
     * Filtre les options du select.
     */
    filterReferences() {
        const query = this.searchInputTarget.value.toLowerCase().trim();
        const options = this.referenceSelectTarget.querySelectorAll('option[data-name]');

        options.forEach((option) => {
            const name = option.dataset.name || '';
            option.style.display = name.includes(query) ? '' : 'none';
        });
    }

    /**
     * Sauvegarde et met a jour le formulaire Symfony.
     */
    save() {
        const participantId = this.participantIdTarget.value;
        const referenceId = this.referenceSelectTarget.value;

        // Mettre a jour le champ Symfony (select hidden)
        const formInput = document.querySelector(
            `select[data-reference-input-for="${participantId}"]`
        );
        if (formInput) {
            formInput.value = referenceId;
            formInput.dispatchEvent(new Event('change', { bubbles: true }));
        }

        // Mettre a jour l'affichage dans le tableau
        // ... (selon le contexte metier)

        Modal.getInstance(this.element)?.hide();
    }

    reset() {
        this.participantIdTarget.value = '';
        this.participantNameTarget.textContent = '-';
        this.searchInputTarget.value = '';
        this.filterReferences();
    }

    restoreTriggerFocus() {
        if (this.triggerElement && document.contains(this.triggerElement)) {
            this.triggerElement.focus();
        }
        this.triggerElement = null;
    }
}

{# templates/modals/_example_modal.html.twig #}

<div
    class="modal fade"
    id="example-modal"
    tabindex="-1"
    aria-labelledby="example-modal-label"
    aria-hidden="true"
    data-controller="example-modal"
>
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-modal-label">
                    Modification de :
                    <span data-example-modal-target="participantName">-</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>

            <div class="modal-body">
                {# Input hidden pour stocker l'ID #}
                <input type="hidden" data-example-modal-target="participantId">

                {# Zone de recherche #}
                <div class="mb-3">
                    <label class="form-label">Recherche</label>
                    <input
                        type="search"
                        class="form-control"
                        data-example-modal-target="searchInput"
                        data-action="input->example-modal#filterReferences"
                    >
                </div>

                {# Select des options #}
                <div class="mb-3">
                    <label class="form-label">Selection</label>
                    <select class="form-select" data-example-modal-target="referenceSelect">
                        <option value="">- Selectionner -</option>
                        {% for item in available_items %}
                            <option value="{{ item.id }}" data-name="{{ item.name|lower }}">
                                {{ item.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    Annuler
                </button>
                <button type="button" class="btn btn-primary" data-action="click->example-modal#save">
                    Enregistrer
                </button>
            </div>
        </div>
    </div>
</div>

{# Bouton declencheur dans le tableau #}
<button
    type="button"
    class="btn btn-sm btn-outline-primary js-edit-button"
    data-bs-toggle="modal"
    data-bs-target="#example-modal"
    data-participant-id="{{ participant.id }}"
    data-participant-name="{{ participant.fullName }}"
    data-current-reference-id="{{ participant.referenceId }}"
    data-current-reference-name="{{ participant.referenceName }}"
>
    <i class="fa-solid fa-pen"></i> Modifier
</button>