adding twig extensions to select how many items per page

* twig anchor: {{ chill_items_per_page(pagination) }}
* select field changed with javascript event listener
This commit is contained in:
Mathieu Jaumotte 2021-07-16 13:23:10 +02:00
parent d2c631ae20
commit 3ee676600e
7 changed files with 98 additions and 10 deletions

View File

@ -0,0 +1,67 @@
<?php
/*
* Chill is a software for social workers
*
* Copyright (C) 2021, Champs Libres Cooperative SCRLFS,
* <http://www.champs-libres.coop>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
namespace Chill\MainBundle\Pagination;
use Twig\Environment;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
/**
* add twig function to render pagination
*
* @author Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
* @author Champs Libres <info@champs-libres.coop>
*/
class ChillItemsPerPageTwig extends AbstractExtension
{
public function getName()
{
return 'chill_items_per_page';
}
public function getFunctions()
{
return array(
new TwigFunction(
'chill_items_per_page',
array($this, 'paginationRender'),
array(
'needs_environment' => true,
'is_safe' => ['html']
)
)
);
}
public function paginationRender(
Environment $env,
PaginatorInterface $paginator,
$template = '@ChillMain/Pagination/items_per_page.html.twig'
) {
return $env->render($template, array(
'paginator' => $paginator,
'current' => $paginator->getItemsPerPage()
));
}
}

View File

@ -61,7 +61,7 @@ class PaginatorFactory
public function __construct(
RequestStack $requestStack,
RouterInterface $router,
$itemPerPage = 50
$itemPerPage = 20
) {
$this->itemPerPage = $itemPerPage;
$this->requestStack = $requestStack;

View File

@ -0,0 +1,20 @@
<select class="form-select" aria-label="items Per Page" id="itemsPerPage">
<option value="10">10 {{ 'results'|trans }}</option>
<option value="20">20 {{ 'results'|trans }}</option>
<option value="50">50 {{ 'results'|trans }}</option>
<option value="100">100 {{ 'results'|trans }}</option>
</select>
<script>
let select = document.querySelector("select#itemsPerPage");
window.addEventListener('load', () =>
select.value = {{ current }}
);
select.addEventListener('change', () => {
let url = new URL(window.location.href);
let params = url.searchParams;
params.set('page', '1');
params.set('item_per_page', select.value);
url.search = params.toString();
window.location.href = url.toString();
});
</script>

View File

@ -8,8 +8,13 @@ services:
- "%chill_main.pagination.item_per_page%"
Chill\MainBundle\Pagination\PaginatorFactory: '@chill_main.paginator_factory'
chill_main.paginator.twig_extensions:
class: Chill\MainBundle\Pagination\ChillPaginationTwig
tags:
- { name: twig.extension }
chill_main.paginator.items_per_page.twig_extensions:
class: Chill\MainBundle\Pagination\ChillItemsPerPageTwig
tags:
- { name: twig.extension }

View File

@ -85,6 +85,7 @@ Search %pattern%: Recherche de "%pattern%"
Results %start%-%end% of %total%: Résultats %start%-%end% sur %total%
See all results: Voir tous les résultats
Advanced search: Recherche avancée
results: résultats
# timeline
Global timeline: Historique global

View File

@ -70,8 +70,6 @@ class ThirdPartyController extends Controller
$nbThirdParties = $repository->countByMemberOfCenters($centers);
$pagination = $this->paginatorFactory->create($nbThirdParties);
$pagination->setItemsPerPage(20);
$thirdParties = $repository->findByMemberOfCenters(
$centers,
$pagination->getCurrentPage()->getFirstItemNumber(),

View File

@ -15,6 +15,7 @@
<nav class="filter-actions border border-secondary my-4 p-3">
filter nav
{{ dump() }}
</nav>
</div>
@ -23,7 +24,7 @@
<div class="col-md-10 col-xxl">
<label class="counter">
<span>xxx</span> {{ 'third parties'|trans }}
<span>{{ pagination.totalItems }}</span> {{ 'third parties'|trans }}
</label>
<table class="table table-striped table-hover align-middle">
@ -82,11 +83,7 @@
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<select class="form-select" aria-label="itemsPerPage">
<option value="20">20 / page</option>
<option value="50">50 / page</option>
<option value="100">100 / page</option>
</select>
{{ chill_items_per_page(pagination) }}
</li>
{% if is_granted('CHILL_3PARTY_3PARTY_CREATE') %}
<li>