iut/herbarium
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style pagination with Bootstrap

Browse Source
This commit is contained in:
Clément Fréville
2024-06-08 15:50:45 +02:00
parent 9aa8416442
commit 4a699fd0b8
5 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Controller/PostController.php
View File

@@ -6,20 +6,22 @@ use App\Repository\PostRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route; use Symfony\Component\Routing\Attribute\Route;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Request;
class PostController extends AbstractController class PostController extends AbstractController
{ {
private const POSTS_PER_PAGE = 10;
#[Route('/', name: 'app_posts')] #[Route('/', name: 'app_posts')]
public function index(PostRepository $repository, Request $request): Response public function index(PostRepository $repository, Request $request): Response
{ {
$page = $request->query->getInt('page', 1); $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', [ return $this->render('post/index.html.twig', [
'posts' => $posts, 'posts' => $posts,
'maxPosts' => $page * 10, 'maxPage' => $maxPage,
'currentPage' => $page 'page' => $page,
]); ]);
} }
} }

6
src/Repository/PostRepository.php
View File

@@ -17,6 +17,11 @@ class PostRepository extends ServiceEntityRepository
parent::__construct($registry, Post::class); parent::__construct($registry, Post::class);
} }
/**
* @param int $page
* @param int $limit
* @return Paginator<Post>
*/
public function findPaginatedPosts(int $page, int $limit): Paginator public function findPaginatedPosts(int $page, int $limit): Paginator
{ {
$query = $this->createQueryBuilder('p') $query = $this->createQueryBuilder('p')
@@ -25,6 +30,7 @@ class PostRepository extends ServiceEntityRepository
return new Paginator($query, fetchJoinCollection: false); return new Paginator($query, fetchJoinCollection: false);
} }
// /** // /**
// * @return Post[] Returns an array of Post objects // * @return Post[] Returns an array of Post objects
// */ // */

24
templates/_pagination.html.twig Normal file
View File

@@ -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>

3
templates/base.html.twig
View File

@@ -4,9 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}Welcome to Herbarium!{% endblock %}</title> <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 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 %} {% 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 %} {% endblock %}
{% block javascripts %} {% block javascripts %}

24
templates/post/index.html.twig
View File

@@ -2,35 +2,19 @@
{% block title %}Posts!{% endblock %} {% block title %}Posts!{% endblock %}
{% block body %} {% 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 %} {% for post in posts.iterator %}
<div class="card" style="width: 42rem; margin: 20px 0 50px 100px;"> <div class="card" style="width: 42rem; margin: 20px 0 50px 100px;">
<div class="card-body"> <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> <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-subtitle mb-2 text-muted">{{ post.latitude }}, {{ post.longitude }}, {{ post.altitude }}m</p>
<p class="card-text">{{ post.commentary }}</p> <p class="card-text">{{ post.commentary }}</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a class="fa fa-heart">28</a> 28 ❤️
<a class="fa fa-comment">128</a> 128 💬
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
{% include '_pagination.html.twig' %}
{% 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 %}
{% endblock %} {% endblock %}