svg

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.fontSize": 14
+}

assets/app.js

@@ -1,9 +1,9 @@
+// Stimulus
 import './bootstrap.js';
 
 // jQuery
 import $ from 'jquery';
 window.$ = $;
-window.jQuery = $;
 
 // Bootstrap
 import 'bootstrap'
@@ -13,9 +13,11 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import '@fortawesome/fontawesome-free'
 import '@fortawesome/fontawesome-free/css/all.min.css';
 
+// Datatable
+import 'datatables.net';
+import 'datatables.net-dt/css/jquery.dataTables.css';
+
 // Local CSS
 import './styles/bootswatch.min.css'
 import './styles/app.css';
 
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/datatables.init.js

@@ -0,0 +1,30 @@
+$(document).ready(function() {
+    $.extend( $.fn.dataTable.defaults, {
+        responsive: true,
+        "iDisplayLength": 1000,
+		"oLanguage": { 
+            "sThousands": " ",
+            "sProcessing":     "Traitement en cours...",
+            "sSearch":         "Rechercher :",
+            "sLengthMenu":     "Afficher _MENU_ éléments",
+            "sInfo":           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
+            "sInfoEmpty":      "Affichage de l'élement 0 à 0 sur 0 éléments",
+            "sInfoFiltered":   "(filtré de _MAX_ éléments au total)",
+            "sInfoPostFix":    "",
+            "sLoadingRecords": "Chargement en cours...",
+            "sZeroRecords":    "Aucun élément à afficher",
+            "sEmptyTable":     "Aucune donnée disponible dans le tableau",
+            "oPaginate": {
+                "sFirst":      "Premier",
+                "sPrevious":   "Précédent",
+                "sNext":       "Suivant",
+                "sLast":       "Dernier"
+            },
+            "oAria": {
+                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
+                "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
+            }		
+		 },
+		//"stateSave": true
+    });
+});

assets/jquery.js

@@ -0,0 +1,2 @@
+import $ from 'jquery';
+window.$ = window.jQuery = $;

assets/styles/app.css

@@ -1,3 +1,17 @@
+html,
+body {
+    height: 100%
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.form-group {
+    margin-bottom: 5px;
+}
 
 .navbar-brand img {
     width: 40px;
@@ -8,3 +22,57 @@
     border: none;
     box-shadow: none !important;
 }
+
+main {
+    display: flex;
+    flex-grow: 1;
+    align-items: stretch;
+}
+
+sidebar {
+    width: 300px;
+    padding: 15px;
+    background-color: rgba(var(--bs-dark-rgb));
+    display: flex;
+    flex-direction: column;
+}
+
+sidebar div {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid var(--bs-body-color);
+    padding-bottom: 10px;
+}
+
+sidebar a {
+    text-decoration: none;
+    color: var(--bs-body-color);
+    ;
+    opacity: 0.6;
+    margin: 5px 0px;
+}
+
+sidebar a:hover {
+    text-decoration: none;
+    opacity: 1;
+}
+
+content {
+    flex-grow: 1;
+    align-items: stretch;
+    padding: 15px;
+}
+
+@media (max-width: 991px) {
+    sidebar {
+        width: 70px;
+    }
+
+    sidebar i {
+        font-size: 200%;
+    }
+
+    sidebar span {
+        display: none;
+    }
+}

importmap.php

@@ -49,4 +49,14 @@ return [
     '@popperjs/core' => [
         'version' => '2.11.8',
     ],
+    'datatables.net' => [
+        'version' => '2.1.8',
+    ],
+    'datatables.net-dt' => [
+        'version' => '2.1.8',
+    ],
+    'datatables.net-dt/css/dataTables.dataTables.min.css' => [
+        'version' => '2.1.8',
+        'type' => 'css',
+    ],
 ];

src/Controller/HomeController.php

@@ -9,9 +9,18 @@ use Symfony\Component\Routing\Attribute\Route;
 class HomeController extends AbstractController
 {
     #[Route('/', name: 'app_home')]
-    public function index(): Response
+    public function home(): Response
     {
-        return $this->render('home/index.html.twig', [
+        return $this->render('home/home.html.twig', [
+            'usemenu' => true,
+            'usesidebar' => false,
+        ]); 
+    }
+
+    #[Route('/admin', name: 'app_admin')]
+    public function admin(): Response
+    {
+        return $this->render('home/home.html.twig', [
             'usemenu' => true,
             'usesidebar' => true,
         ]); 

src/Controller/UserController.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class UserController extends AbstractController
+{
+    #[Route('/admin/user', name: 'app_admin_user')]
+    public function list(): Response
+    {
+        return $this->render('user/list.html.twig', [
+            'usemenu' => true,
+            'usesidebar' => true,
+            'title' => 'Liste des Utilisateurs',
+            'routesubmit' => 'app_admin_user_submit',
+            'routeupdate' => 'app_admin_user_update',
+        ]);
+    }
+
+    #[Route('/admin/user', name: 'app_admin_user_submit')]
+    public function submit(): Response
+    {
+        return $this->render('user/edit.html.twig', [
+            'title' => 'Création Utilisateur',
+            'routecancel' => 'app_admin_user',
+            'routedelete' => 'app_admin_user_delete',
+        ]);
+    }
+
+    #[Route('/admin/user/update', name: 'app_admin_user_update')]
+    public function update(): Response
+    {
+
+
+    }
+
+    #[Route('/admin/user/delete', name: 'app_admin_user_delete')]
+    public function delete(): Response
+    {
+
+    }
+}

templates/base.html.twig

@@ -12,80 +12,13 @@
     </head>
 
     <style>
-      html, body {
-        height:100%
-      }
-
-      body {
-        display:flex;
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      main {
-        display:flex;
-        flex-grow:1;
-        align-items: stretch;
-      }
-
-      sidebar {
-        width:300px;
-        padding:15px;
-        background-color:rgba(var(--bs-dark-rgb));
-        display: flex;
-        flex-direction:column;
-      }
-
-      sidebar div {
-        display: flex;
-        flex-direction:column;        
-        border-bottom:1px solid var(--bs-body-color);
-        padding-bottom:10px;
-      }
-
-      sidebar a {
-        text-decoration: none;
-        color: var(--bs-body-color);;
-        opacity:0.6;
-        margin: 5px 0px;
-      }
-
-      sidebar a:hover {
-        text-decoration: none;
-        opacity:1;
-      }
-
-      content {
-        flex-grow:1;
-        align-items: stretch;
-        padding: 15px;
-      }
-
-      @media (max-width: 991px) {
-          sidebar {
-              width: 70px;
-          }
-
-          sidebar i {
-            font-size: 200%;
-          }
-
-          sidebar span {
-            display:none;
-          }
-      }   
-
-      .form-group {
-        margin-bottom:5px;
-      }
-
     </style>
+
     <body>
         {% if usemenu is defined and usemenu %}
             <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
                 <div class="container-fluid">                
-              
+                    <a class="navbar-brand" href="{{ path('app_home') }}"><img src="{{asset("medias/logo/logo.png")}}"> {{appName}}</a>
-              <a class="navbar-brand" href="#"><img src="{{asset("medias/logo/logo.png")}}"> {{appName}}</a>
                     
                     <div class="collapse navbar-collapse" id="navbarColor02">
                         <ul class="navbar-nav me-auto">
@@ -118,10 +51,14 @@
                 
                     <div class="navbar-nav ms-auto ps-3 d-flex flex-row position-absolute" style="right: 15px; top:15px">
                         {% if app.user %}
+                            {% if is_granted('ROLE_ADMIN') %}
+                                <a class="nav-link px-2" href="{{path('app_admin')}}"><i class="fa-solid fa-cog fa-2x"></i></a>
+                            {% endif %}
                             <a class="nav-link px-2" href="{{path('app_logout')}}"><i class="fa-solid fa-right-from-bracket fa-2x"></i></a>
                         {% else %}
                             <a class="nav-link px-2" href="{{path('app_login')}}"><i class="fa-solid fa-right-to-bracket fa-2x"></i></a>
                         {% endif %}
+                    
                         <a class="navbar-toggler nav-link px-2" href="#" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"><i class="fa-solid fa-bars fa-2x"></i></a>
                     </div>
                 </div>
@@ -134,12 +71,13 @@
                     <sidebar>
                         <div>
                             <span>GENERALE</span>
+                            
                             <a href="" title="Configurations">
                                 <i class="fas fa-cog fa-fw"></i>
                                 <span>Configurations</span>
                             </a>
 
-                <a href="" title="Utilisateurs">
+                            <a href="{{ path('app_admin_user') }}" title="Utilisateurs">
                                 <i class="fas fa-user fa-fw"></i>
                                 <span>Utilisateurs</span>
                             </a>

templates/security/login.html.twig

@@ -35,11 +35,11 @@
 {% endblock %}
 
 {% block localscript %}
-    <script>
+    <script type="module">
+        import $ from 'jquery';
+
         $(document).ready(function () {
-                $("#password").focus();
+            $("#username").focus();
-            console.log('DOM ready');
-            console.log($); // Vérifiez ici que $ est bien défini
         });
 
     </script>

templates/user/list.html.twig

@@ -0,0 +1,8 @@
+{% extends 'base.html.twig' %}
+
+{% block title %} = {{title}}{% endblock %}
+
+{% block body %}
+    <h1>{{title}}</h1>
+    <a href="{{ path(routesubmit) }}" class="btn btn-primary">Ajouter</a>
+{% endblock %}