Customiser Easyadmin

Pour rappel, Easyadmin permet de créer facilement et rapidement un "backoffice" ou "Dashboard" pour Symfony.
 Mais saviez-vous qu'il est possible de customiser le "look" d'Easyadmin afin de changer la couleur du background, la couleur des polices, ajouter un logo, etc. Voici donc quelques "trucs" pour customiser Easadmin. (Je pars évidemment du principe que Easyadmin est installé.)

Ajouter un logo dans la sidebar

Dans src/Controller/Admin/DashboardController.php

Ici j'ai modifié la fonction setTitle() et ajouté du HTML + CSS.

->renderContentMaximized() permet au dashboard de prendre tout l'écran.

public function configureDashboard(): Dashboard

 {

      return Dashboard::new()

      //->setTitle('MonBlog')

      ->setTitle('<img src="assets/img/logo.png" class="img-fluid d-block mx-auto" style="max-width:100px; width:100%;"><h2 class="mt-3 fw-bold text-white text-center">MonBlog</h2>')

      ->renderContentMaximized()

      ;

 }

Afficher l'avatar du User dans Easyadmin

Dans src/Controller/Admin/DashboardController.php

Par défaut, une fois connecté à Easyadmin, vous voyez votre pseudo (ou email) et un avatar par défaut. Mais il est possible de changer cet avatar... par le votre.

Si, dans votre entité User, vous disposez d'un champ avatar ou image, etc., vous pouvez récupérer cet avatar et l'afficher avec le code suivant.

Rien de bien compliqué non plus, mais attention de bien indiquer le bon chemin pour l'image de l'avatar et vous utiliserez la fonction ->setAvatarUrl()

public function configureUserMenu(UserInterface $user): UserMenu

 {

     if (!$user instanceof User) {

        throw new \Exception('Wrong user');

     }

    $image = 'assets/img/users/' . $user->getAvatar();

    return parent::configureUserMenu($user)

     ->setAvatarUrl($image);

 }

Modifier les crud

Dans src/controller/Admin/MyEntityCrudController.php

fonction configureFields()

Vous pouvez ajouter des grands titres de sections avec une icone Font Awesome afin de séparer les différentes parties.

Par exemple :

FormField::addPanel('Info')->setIcon('fas fa-info-circle')

... ajoutera un Titre Info avec une icone Info

Modifiez la largeur de colonne, comme dans Bootstrap

Vous pouvez modifier la largeur de la "col", comme dans boostrap, pour permettre à un input, un tableau ou un textarea de faire la moitié, le quart... ou l'intégralité de l'écran.

Rien de plus imple avec par exemple

EmailField::new('email', 'Email address')

    ->setColumns(3),

Evidemment, ->setColumns(12) prendra toute la largeur de la colonne.

Changer les couleurs, background, etc.

Il va falloir intervenir dans plusieurs fichiers.

Avec WebpackEncore, créez un fichier admin.css dans assets/styles et ajouter le code suivant :

:root {

     /* background du body principal - toutes pages */

     --body-bg: #ffffff;

    /* taille de la sidebar par défaut (230px par défaut) */

     --sidebar-max-width: 250px;

    /* couleur du background de la sidebar */

     --sidebar-bg: #283a5a;

    /* border de la sidebar */

     --sidebar-border-color: #9b0c04;

    /* couleur du titre principal si pas de logo image */

     --sidebar-logo-color: #fff;

    /* couleur des submenus */

     --sidebar-menu-submenu-color: #fff;

    /* couleur de la police des cruds */

     --sidebar-menu-color: #95969e;

    /* couleur des sections */

     --sidebar-menu-header-color: #00e1ff;

    /* couleur des icons font-awesome */

     --sidebar-menu-icon-color: #849bff;

    /* couleur du background des boutons actifs = lien sélectionné */

     --sidebar-menu-active-item-bg: #ffffff;

    /* couleur police des boutons actifs */

     --sidebar-menu-active-item-color: #283a5a;

    /*  */

     --sidebar-menu-badge-active-color: #000;

 }

Les commentaires sont, je pense, assez précis pour que vous puissiez vous y retrouver. Il existe évidemment plein d'autres possibilités.

Puis dans src/Controller/Admin/DashboardController.php, ajouter en fin de fichier :

public function configureAssets(): Assets

{

     return parent::configureAssets()

     ->addWebpackEncoreEntry('admin');

}

Nous allons donc ici créer une nouvelle "entry" dans Webpack. Il va donc falloir ajouter cette ligne :

.addStyleEntry('admin', './assets/styles/admin.css')

Puis recompilez tout ça : yarn build

 ... et rechargez la page du Dashboard easyadmin... vous devriez vois quelques changements ;)

Modifier le tri, la pagination et l'affichage de certains menus

Dans src/Controller/Admin/DashboardController.php

Dans la fonction configureCrud(), vous pouvez ajouter ces options :

->setDefaultSort(['id' => 'DESC'])

->setPaginatorPageSize(15)

->showEntityActionsInlined(true)

Explications :

 ->setDefaultSort() triera évidemment vos infos (ici, le tri s'effectue avec l'ID, du plus grand au plus petit)

 ->setPaginatorPageSize() vous permet de "jouer" sur la pagination...

 ->showEntityActionsInlined(true) va vous permettre de modifier le petit menu à droite de chaque ligne (les 3 petits points). En fait, ce la va enlever les 3 petits points pour mettre un mot ou une icone à la place. Il faudra donc ensuite configurer les "actions" afin de d'afficher la bonne icone ou le bon mot...