Symfony 4 / Sonata : utilizzare i tipi di modulo

Ecco un elenco di moduli comuni utilizzatiés nelle interfacce d’amministratore.

Selettore data e ora

Aggiungere il template nel file config/packages/twig.yaml

twig:
    form_themes:
        - '@SonataCore/Form/datepicker.html.twig'

E nel controller :

            $formMapper->with('Date d\'activation', ['class' => 'col-md-4 abcdaire'])
                ->add('activation_debut', DatePickerType::class, ['required' => false,  'label'=>'Activation début','attr' => ['placeholder' => '']])
                ->add('activation_fin', DatePickerType::class, ['required' => false,  'label'=>'Activation fin','attr' => ['placeholder' => '']])
            ->end();

Area Html

È necessario installare il bundle formatter:
https://sonata-project.org/bundles/formatter/3-x/doc/reference/installation.html

Ajouter una configurazione nel composer.json

    "replace": {
        "egeloen/ckeditor-bundle": "*"
    },

Creare il file di configurazione /config/sonata_formatter.yml con il seguente contenuto:

sonata_formatter:
    default_formatter: richhtml
    formatters:
        markdown:
            service: sonata.formatter.text.markdown
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
        #        - sonata.media.formatter.twig #keep this commented unless you are using media bundle.


        text:
            service: sonata.formatter.text.text
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
        #        - sonata.media.formatter.twig


        rawhtml:
            service: sonata.formatter.text.raw
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
        #        - sonata.media.formatter.twig


        richhtml:
            service: sonata.formatter.text.raw
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
        #        - sonata.media.formatter.twig


        twig:
            service: sonata.formatter.text.twigengine
            extensions: [] # Twig formatter cannot have extensions
            
    ckeditor:
        templates:
            browser: 'CaueEdpBundle:Ckeditor:browser.html.twig'
            upload: 'CaueEdpBundle:Ckeditor:upload.html.twig'
            
            
fos_ck_editor:
    default_config: default
    configs:
        default:
            # default toolbar plus Format button
            toolbar:
            - [Bold, Italic, Underline, -, 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ,-, Cut, Copy, Paste, PasteText, PasteFromWord, -, Undo, Redo, -, NumberedList, BulletedList, -, Outdent, Indent, -,Blockquote, -, Image, Link, Unlink, Table]
            - [Format, Maximize, Source, Iframe]

In config/sonata_admin.yaml aggiungete i CSS e gli JS

sonata_admin:
       [...]                      
    assets:
        extra_stylesheets:
            - bundles/sonataformatter/markitup/skins/sonata/style.css
            - bundles/sonataformatter/markitup/sets/markdown/style.css
            - bundles/sonataformatter/markitup/sets/html/style.css
            - bundles/sonataformatter/markitup/sets/textile/style.css
        extra_javascripts:
            - bundles/fosckeditor/ckeditor.js
            - bundles/sonataformatter/vendor/markitup-markitup/markitup/jquery.markitup.js
            - bundles/sonataformatter/markitup/sets/markdown/set.js
            - bundles/sonataformatter/markitup/sets/html/set.js
            - bundles/sonataformatter/markitup/sets/textile/set.js

In config/twig.yaml

twig:
[..]
    form_themes:
        - '@SonataFormatter/Form/formatter.html.twig'

Esegui i comandi:

composer require sonata-project/formatter-bundle
composer dump-autoload
php bin/console assets:install public
php bin/console ckeditor:install

E nel vostro controller:

use Sonata\FormatterBundle\Form\Type\SimpleFormatterType;

                $formMapper->add('introduction', SimpleFormatterType::class, [
                    'format' => 'richhtml',
                    'ckeditor_context' => 'default',
                    'required' => false,  'label'=>'Introduction','attr' => ['placeholder' => '']]);

Casella di controllo (booleano)

Sarà necessario configurare il campo in booleano in l’entità

    /**
     * @var int
     *
     * @ORM\Column(name="actif", type="boolean", nullable=false)
     */
    private $actif = '0';

    public function getActif(): ?bool
    {
        return $this->actif;
    }

    public function setActif(bool $actif): self
    {
        $this->actif = $actif;

        return $this;
    }

E utilizzare la seguente configurazione per il modulo

use Symfony\Component\Form\Extension\Core\Type\CheckboxType;

$formMapper->with('Status', ['class' => 'col-md-4 abcdaire'])
     ->add('actif', CheckboxType::class, ['required' => false])
>end();

E per visualizzare un pulsante on/off nella lista

protected function configureListFields(ListMapper $listMapper)
{
		$listMapper->add('actif', null, ['editable' => true])
}

Et pour finir les filtres

$datagridMapper->add('actif', null, ['label'=>'PRIX'])

Casella di elenco

use Symfony\Component\Form\Extension\Core\Type\ChoiceType;

->add('etape', ChoiceType::class, [
                        'choices' => array(
                            'coordonnees' => 'coordonnees',
                            'declaration' => 'declaration',
                        ),
                        'placeholder' => 'Selection du champs',
                        'required' => false,
                        'label' => 'Destination du champs'
                    ])

Si noti che le liste comprendono un campo di ricerca automatica oltreà di 25 élémenti.
Il n’non è possibile eliminarlo, tranne à sovraccaricare la funzione d’inizializzazione.
Per questo aggiungeremo un file js à il nostro admin in sonata_admin.yml

sonata_admin:
    assets:
        extra_javascripts:
            - js/admin.js

Aggiungeremo una funzione à l’identico a l’originale di l’inizializzazione della libreria select2 in Sonata ma con un parametroétrage difféaffitto.
Invece di minimumResultsForSearch: 25 lo metteremo à 100000, così, la ricerca si faénon stringerà per le nostre liste di meno di 100k (in sostanza, tutte le nostre liste).
E nella nostra inizializzazione della lista, aggiungeremo una classe CSS per puntarci sopra.

jQuery(document).ready(function() {
jQuery('select.select2-search-hidden, .select2-search-hidden select').each(function() {
        var select            = jQuery(this);
        var allowClearEnabled = false;
        var popover           = select.data('popover');

        select.removeClass('form-control');

        if (select.find('option[value=""]').length || select.attr('data-sonata-select2-allow-clear')==='true') {
            allowClearEnabled = true;
        } else if (select.attr('data-sonata-select2-allow-clear')==='false') {
            allowClearEnabled = false;
        }

        select.select2({
            width: function(){
                // Select2 v3 and v4 BC. If window.Select2 is defined, then the v3 is installed.
                // NEXT_MAJOR: Remove Select2 v3 support.
                return Admin.get_select2_width(window.Select2 ? this.element : select);
            },
            dropdownAutoWidth: true,
            minimumResultsForSearch: 100000,
            allowClear: allowClearEnabled
        });

        if (undefined !== popover) {
            select
                .select2('container')
                .popover(popover.options)
            ;
        }
    });

});

E il nostro campo con la classe « select2-ricerca-nascosta » :

->add('numberStudent', ChoiceType::class, [
                         'label' => 'Nombre maximum d\'élèves par classe',
                         'choices' => array_combine(range(5,50), range(5,50)),
                         'placeholder' => '',
                         'attr' => ['class' => 'select2-search-hidden']
                     ])

Adattare l’esempio alla versione installata

Gli esempi Symfony e Sonata rimangono legati alle versioni indicate nell’articolo. Symfony 4.x e Symfony 6.2 non sono più supportati: per un progetto attuale, utilizzate un ramo mantenuto e la documentazione corrispondente esattamente alle vostre dipendenze.

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

Prima di riprendere il codice, controllate le firme, i servizi, le rotte e i template interessati. Aggiungete poi un test funzionale che copra le autorizzazioni, il codice HTTP e il risultato visibile.

Riferimento : versioni di Symfony supportate.