Style pagination with Bootstrap

11 months ago · 4a699fd0b8
parent 9aa8416442
commit 4a699fd0b8
5 changed files with 42 additions and 27 deletions
--- a/src/Controller/PostController.php
+++ b/src/Controller/PostController.php
@ -6,20 +6,22 @@ use App\Repository\PostRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
-use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;

 class PostController extends AbstractController
 {
+    private const POSTS_PER_PAGE = 10;
+
    #[Route('/', name: 'app_posts')]
    public function index(PostRepository $repository, Request $request): Response
    {
        $page = $request->query->getInt('page', 1);
-        $posts = $repository->findPaginatedPosts($page, 10);
+        $posts = $repository->findPaginatedPosts($page, self::POSTS_PER_PAGE);
+        $maxPage = ceil($posts->count() / self::POSTS_PER_PAGE);
        return $this->render('post/index.html.twig', [
            'posts' => $posts,
-            'maxPosts' => $page * 10,
-            'currentPage' => $page
+            'maxPage' => $maxPage,
+            'page' => $page,
        ]);
    }
 }
--- a/src/Repository/PostRepository.php
+++ b/src/Repository/PostRepository.php
@ -17,6 +17,11 @@ class PostRepository extends ServiceEntityRepository
        parent::__construct($registry, Post::class);
    }

+    /**
+     * @param int $page
+     * @param int $limit
+     * @return Paginator<Post>
+     */
    public function findPaginatedPosts(int $page, int $limit): Paginator
    {
        $query = $this->createQueryBuilder('p')
@ -25,6 +30,7 @@ class PostRepository extends ServiceEntityRepository

        return new Paginator($query, fetchJoinCollection: false);
    }
+
 //    /**
 //     * @return Post[] Returns an array of Post objects
 //     */
--- a/templates/_pagination.html.twig
+++ b/templates/_pagination.html.twig
@ -0,0 +1,24 @@
+{% set route = app.request.attributes.get('_route') %}
+<nav>
+    <ul class="pagination">
+        <li class="page-item {{ page < 2 ? 'disabled' }}">
+            <a class="page-link" href="{{ path(route, {'page': page - 1}) }}">Previous</a>
+        </li>
+        {% if page > 1 %}
+            <li class="page-item">
+                <a class="page-link" href="{{ path(route, {'page': page - 1}) }}">{{ page - 1 }}</a>
+            </li>
+        {% endif %}
+        <li class="page-item active" aria-current="page">
+            <a class="page-link">{{ page }}</a>
+        </li>
+        {% if page + 1 <= maxPage %}
+            <li class="page-item">
+                <a class="page-link" href="{{ path(route, {'page': page + 1}) }}">{{ page + 1 }}</a>
+            </li>
+        {% endif %}
+        <li class="page-item {{ page + 1 > maxPage ? 'disabled' }}">
+            <a class="page-link" href="{{ path(route, {'page': page + 1}) }}">Next</a>
+        </li>
+    </ul>
+</nav>
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@ -4,9 +4,8 @@
        <meta charset="UTF-8">
        <title>{% block title %}Welcome to Herbarium!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        {% block stylesheets %}
+            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        {% endblock %}

        {% block javascripts %}
--- a/templates/post/index.html.twig
+++ b/templates/post/index.html.twig
@ -2,35 +2,19 @@
 {% block title %}Posts!{% endblock %}

 {% block body %}
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  </head>
-</html>
-<a href="/species/add" class="btn btn-primary">Ajouter une espèce</a>
-<a href="/post/add" class="btn btn-primary">Ajouter un post</a>
-
 {% for post in posts.iterator %}
    <div class="card" style="width: 42rem; margin: 20px 0 50px 100px;">
        <div class="card-body">
-            <h5 class="card-title">User</h5>
+            <h5 class="card-title">{{ post.species ? post.species.vernacularName : 'Post' }}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ post.foundDate | date("d/m/Y \\à H \\h") }}</h6>
            <p class="card-subtitle mb-2 text-muted">{{ post.latitude }}, {{ post.longitude }}, {{ post.altitude }}m</p>
            <p class="card-text">{{ post.commentary }}</p>
        </div>
        <div class="card-footer">
-            <a class="fa fa-heart">28</a>
-            <a class="fa fa-comment">128</a>
+            28 ❤️
+            128 💬
        </div>
    </div>
 {% endfor %}
-
-
-{% if posts.count > maxPosts %}
-    <a class="btn btn-primary" href="/?page={{currentPage+1}}" id="load-more" style="margin: 20px 0 50px 100px;">Load More</a>
-{% endif %}
-
+{% include '_pagination.html.twig' %}
 {% endblock %}