Ajout des slugs

assets/controllers/slugger_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = ['title', 'slug', 'bouton']
+
+    async open() {
+        if (this.slugTarget.hasAttribute('readonly')) {
+            sessionStorage.setItem('oldSlugValue', this.slugTarget.value)
+            this.slugTarget.removeAttribute('readonly');
+            this.slugTarget.value = await this.getSlug(this.titleTarget.value);
+            this.slugTarget.focus();
+            this.boutonTarget.innerText = 'Annuler la modification';
+        } else {
+            this.slugTarget.value = sessionStorage.getItem('oldSlugValue')
+            sessionStorage.removeItem('oldSlugValue')
+            this.slugTarget.setAttribute('readonly', true);
+            this.boutonTarget.innerText = 'Générer le slug';
+        }
+    }
+
+    async getSlug(text) {
+        // Envoyer le titre au serveur pour générer le slug
+        const response = await fetch('/generate-slug', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest'
+            },
+            body: JSON.stringify({ title: text })
+        })
+        const data = await response.json()
+        return data.slug
+    }
+
+    generateSlug(text) {
+        return text.toString().toLowerCase()
+            .replace(/\s+/g, '-')           // Remplace les espaces par des tirets
+            .replace(/[^\w\-]+/g, '')       // Enlève les caractères non alphanumériques
+            .replace(/\-\-+/g, '-')         // Remplace les tirets doubles
+            .replace(/^-+/, '')             // Enlève les tirets au début
+            .replace(/-+$/, '');            // Enlève les tirets à la fin
+    }
+}

assets/styles/forms.css

@@ -35,14 +35,34 @@ form {
   }
   
   /* Style pour les erreurs (si Symfony utilise des classes pour les erreurs) */
-  form .is-invalid {
-    border-color: #e74c3c;
-  }
-  
-  form .is-invalid + .invalid-feedback {
+  form label + ul li {
     color: #e74c3c;
     font-size: 0.875rem;
   }
+
+  /* Help de l'input */
+  form .help-text {
+    color: gray;
+    margin-top: 0;
+    margin-bottom: 30px;
+    margin-left: 20px;
+  }
+
+  form #bouton-slug {
+    margin: 0;
+    padding: 5px;
+    
+    display: inline-block;
+    color: gray;
+    border: 1px solid black;
+    text-decoration: none;
+    border-radius: 5px;
+  }
+
+  form .div-bouton-slug {
+    display: flex;
+    justify-content: right;
+  }
   
   /* Focus pour améliorer l'expérience utilisateur */
   form input[type="text"]:focus,

src/Controller/SlugController.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
+use Symfony\Component\String\Slugger\SluggerInterface;
+
+class SlugController extends AbstractController
+{
+    #[Route('/generate-slug', name: 'app_slug')]
+    public function index(Request $request, SluggerInterface $slugger): JsonResponse
+    {
+        $data = json_decode($request->getContent(), true);
+        $title = $data['title'] ?? '';
+
+        $slug = $slugger->slug($title)->lower();
+
+        return new JsonResponse(['slug' => $slug]);
+    }
+}

src/Form/ArticleType.php

@@ -4,7 +4,6 @@ namespace App\Form;
 
 use App\Entity\Article;
 use App\Entity\User;
-use FOS\CKEditorBundle\Form\Type\CKEditorType;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
@@ -18,8 +17,17 @@ class ArticleType extends AbstractType
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
         $builder
-            ->add('title')
-            ->add('slug')
+            ->add('title', TextType::class, [
+                'attr'  => [
+                    'data-slugger-target'  => 'title'
+                ]
+            ])
+            ->add('slug', TextType::class, [
+                'attr'  => [
+                    'readonly'  => true,
+                    'data-slugger-target'  => 'slug'
+                ],
+            ])
             ->add('content', TextareaType::class, [
                 'attr'  =>  [
                     'data-controller'   => 'easymde'

src/Form/PageType.php

@@ -3,7 +3,6 @@
 namespace App\Form;
 
 use App\Entity\Page;
-use FOS\CKEditorBundle\Form\Type\CKEditorType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\FormBuilderInterface;

templates/article/_form.html.twig

@@ -1,8 +1,23 @@
 <p>
     Etat de l'article : <span class="badge badge-{{ article.state }}">{{ article.state | trans }}</span>
 </p>
-
-{{ form_start(form) }}
-    {{ form_widget(form) }}
-    <button class="btn btn-green">{{ button_label|default('Sauvegarder') }}</button>
-{{ form_end(form) }}
+<div data-controller="slugger" >
+    {{ form_start(form) }}
+        {{ form_row(form.title) }}
+    
+        <div id="formulaire-slug">
+            {{ form_label(form.slug) }}
+            {{ form_errors(form.slug) }}
+            {{ form_widget(form.slug) }}
+            <div class="div-bouton-slug"><button type="button" id="bouton-slug" data-slugger-target="bouton" data-action="click->slugger#open">Générer un slug</butt></div>
+            {{ form_help(form.slug) }}
+        </div>
+        
+        {{ form_row(form.content) }}
+        {{ form_row(form.publicationDate) }}
+        {{ form_row(form.author) }}
+        {{ form_row(form.publicationChoice) }}
+        {{ form_rest(form)}}
+        <button  class="btn btn-green">{{ button_label|default('Sauvegarder') }}</button>
+    {{ form_end(form) }}
+</div>

translations/messages.fr.yaml

@@ -12,4 +12,5 @@ Id: Id
 Title: Titre
 Publication Date: Date de publication
 Content: Contenu
-Author: Auteur
+Author: Auteur
+Slug: Permalien