On refait le formualaire du slug

assets/controllers/slugger_controller.js

@@ -1,7 +1,12 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static targets = ['title', 'slug', 'bouton']
+    static targets = ['title', 'slug', 'bouton', 'formulaire', 'ligneSlug']
+
+    show() {
+        this.ligneSlugTarget.classList.toggle('hidden', true)
+        this.formulaireTarget.classList.toggle('hidden', false)
+    }
 
     async open() {
         const basePath = this.slugTarget.dataset.url

assets/styles/app.css

@@ -243,6 +243,10 @@ main h1 a:hover {
   max-width: 85vw;
 }
 
+.hidden {
+  display: none !important;
+}
+
 @media screen and (max-width: 1400px) {
   #header {
     height: 250px;

assets/styles/forms.css

@@ -48,7 +48,7 @@ form {
     margin-left: 20px;
   }
 
-  form #bouton-slug {
+  form .bouton-slug {
     margin: 0;
     padding: 5px;
     
@@ -63,6 +63,18 @@ form {
     display: flex;
     justify-content: right;
   }
+
+  form .ligne-slug {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  form .ligne-slug span {
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #333;
+  }
   
   /* Focus pour améliorer l'expérience utilisateur */
   form input[type="text"]:focus,

templates/article/_form.html.twig

@@ -4,12 +4,17 @@
 <div data-controller="slugger" >
     {{ form_start(form) }}
         {{ form_row(form.title) }}
-    
-        <div id="formulaire-slug">
+
+        {% set cacherFormulaire = article.slug and not article.slug is same as '' and form.children.slug.vars.errors|length == 0 %}
+        <div data-slugger-target="ligneSlug" class="ligne-slug {{ cacherFormulaire ? '' : 'hidden' }}">
+            <div><span>Permalien</span> {{ article.slug }}</div>
+            <button type="button" class="bouton-slug" data-slugger-target="bouton-show" data-action="click->slugger#show">Modifier</button>
+        </div>
+        <div id="formulaire-slug" data-slugger-target="formulaire" class="{{ cacherFormulaire ? 'hidden' : ''}}">
             {{ 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>
+            <div class="div-bouton-slug"><button type="button" class="bouton-slug" data-slugger-target="bouton" data-action="click->slugger#open">Générer un slug</butt></div>
             {{ form_help(form.slug) }}
         </div>
         

templates/article/index.html.twig

@@ -6,6 +6,8 @@
 <div>
     <h1>gestion des articles</h1>
 
+    <a class="btn btn-blue" href="{{ path('app_article_new') }}">Créer un nouvel article</a>
+    
     <table class="table-articles">
         <thead>
             <tr>
@@ -45,8 +47,6 @@
         </tbody>
     </table>
 
-    <a class="btn btn-blue" href="{{ path('app_article_new') }}">Créer un nouvel article</a>
-
 </div>
 
 {{ include('article/_bouton_agrandir.html.twig') }}