Remet en place les paginations

src/Infrastructure/Common/DTO/PaginationDTO.ts

@@ -1,9 +1,11 @@
+import { Transform } from 'class-transformer';
 import { IsNumber, IsOptional, Max, Min } from 'class-validator';
 
 export class PaginationDTO {
   @IsOptional()
   @Min(1)
   @Max(10000)
   @IsNumber()
+  @Transform((_, { page }) => +page)
   public page = 1;
 }

src/Infrastructure/Customer/Controller/ListCustomersController.ts

@@ -27,13 +27,13 @@ export class ListCustomersController {
   @Get()
   @WithName('crm_customers_list')
   @Render('pages/customers/list.njk')
-  public async get(@Query() pagination: PaginationDTO) {
-    const customers: Pagination<CustomerView> = await this.queryBus.execute(
-      new GetCustomersQuery(pagination.page)
+  public async get(@Query() paginationDto: PaginationDTO) {
+    const pagination: Pagination<CustomerView> = await this.queryBus.execute(
+      new GetCustomersQuery(paginationDto.page)
     );
 
-    const table = this.tableFactory.create(customers.items);
+    const table = this.tableFactory.create(pagination.items);
 
-    return { table };
+    return { table, pagination, currentPage: paginationDto.page };
   }
 }

src/Infrastructure/HumanResource/Leave/Controller/ListLeaveRequestsController.ts

@@ -30,15 +30,15 @@ export class ListLeaveRequestsController {
   @WithName('people_leave_requests_list')
   @Render('pages/leave_requests/list.njk')
   public async get(
-    @Query() pagination: PaginationDTO,
+    @Query() paginationDto: PaginationDTO,
     @LoggedUser() user: User
   ) {
-    const leaves: Pagination<LeaveRequestView> = await this.queryBus.execute(
-      new GetLeaveRequestsQuery(user.getId(), pagination.page)
+    const pagination: Pagination<LeaveRequestView> = await this.queryBus.execute(
+      new GetLeaveRequestsQuery(user.getId(), paginationDto.page)
     );
 
-    const table = this.tableFactory.create(leaves.items, user.getId());
+    const table = this.tableFactory.create(pagination.items, user.getId());
 
-    return { table };
+    return { table, pagination, currentPage: paginationDto.page };
   }
 }

src/Infrastructure/HumanResource/Leave/Controller/ListLeavesController.ts

@@ -31,17 +31,26 @@ export class ListLeavesController {
   @WithName('people_leaves_list')
   @Render('pages/leaves/list.njk')
   public async get(
-    @Query() pagination: PaginationDTO,
+    @Query() paginationDto: PaginationDTO,
     @LoggedUser() user: User
   ) {
-    const leaves: Pagination<LeaveRequestView> = await this.queryBus.execute(
-      new GetLeaveRequestsQuery(user.getId(), pagination.page, Status.ACCEPTED)
+    const pagination: Pagination<LeaveRequestView> = await this.queryBus.execute(
+      new GetLeaveRequestsQuery(
+        user.getId(),
+        paginationDto.page,
+        Status.ACCEPTED
+      )
     );
 
-    const table = this.tableFactory.create(leaves.items);
+    const table = this.tableFactory.create(pagination.items);
 
     const calendarToken = process.env.CALENDAR_TOKEN;
 
-    return { table, calendarToken };
+    return {
+      table,
+      calendarToken,
+      pagination,
+      currentPage: paginationDto.page
+    };
   }
 }

src/Infrastructure/Project/Controller/ListProjectsController.ts

@@ -27,13 +27,13 @@ export class ListProjectsController {
   @Get()
   @WithName('crm_projects_list')
   @Render('pages/projects/list.njk')
-  public async get(@Query() pagination: PaginationDTO) {
-    const projects: Pagination<ProjectView> = await this.queryBus.execute(
-      new GetProjectsQuery(pagination.page, false)
+  public async get(@Query() paginationDto: PaginationDTO) {
+    const pagination: Pagination<ProjectView> = await this.queryBus.execute(
+      new GetProjectsQuery(paginationDto.page, false)
     );
 
-    const table = this.tableFactory.create(projects.items);
+    const table = this.tableFactory.create(pagination.items);
 
-    return { table };
+    return { table, pagination, currentPage: paginationDto.page };
   }
 }

src/Infrastructure/Task/Controller/ListTasksController.ts

@@ -27,13 +27,13 @@ export class ListTasksController {
   @Get()
   @WithName('crm_tasks_list')
   @Render('pages/tasks/list.njk')
-  public async get(@Query() pagination: PaginationDTO) {
-    const tasks: Pagination<TaskView> = await this.queryBus.execute(
-      new GetTasksQuery(pagination.page)
+  public async get(@Query() paginationDto: PaginationDTO) {
+    const pagination: Pagination<TaskView> = await this.queryBus.execute(
+      new GetTasksQuery(paginationDto.page)
     );
 
-    const table = this.tableFactory.create(tasks.items);
+    const table = this.tableFactory.create(pagination.items);
 
-    return { table };
+    return { table, pagination, currentPage: paginationDto.page };
   }
 }

src/assets/styles/components/button.css

@@ -38,3 +38,11 @@
   display: grid;
   place-items: center;
 }
+
+button.pc-btn:disabled {
+  cursor: default;
+}
+
+a.pc-btn[aria-current='page'] {
+  background-color: var(--hover-tint);
+}

src/assets/styles/utilities/sizing.css

@@ -1,3 +1,7 @@
 .pc-max-w {
   max-width: var(--max-w);
 }
+
+.pc-h-full {
+  height: 100%;
+}

src/templates/includes/pagination.njk

@@ -0,0 +1,68 @@
+{% import 'macros/icons.njk' as icons %}
+
+{% set start = (currentPage - 1) * pagination.itemsPerPage + 1 %}
+{% set previousPage = start + pagination.itemsPerPage - 1 %}
+{% if previousPage > pagination.totalItems %}
+    {% set previousPage = pagination.totalItems %}
+{% endif %}
+
+<nav class="pc-pagination" aria-label="{{ 'pagination'|trans }}">
+    <ul class="pc-cluster pc-raw-list" style="--cluster-align: stretch">
+        <li class="pc-cluster pc-m" style="--m: 0 var(--w) 0 0">
+            {% if currentPage > 1 %}
+                <a
+                    href="{{ paginationUrl }}?page={{ currentPage - 1 }}"
+                    class="pc-btn pc-btn--secondary"
+                    title="{{ 'pagination-previous'|trans }}"
+                    aria-label="{{ 'pagination-previous'|trans }}"
+                >
+                    {{ icons.previous() }}
+                </a>
+            {% else %}
+                <button
+                    class="pc-btn pc-btn--muted"
+                    title="{{ 'pagination-previous'|trans }}"
+                    aria-label="{{ 'pagination-previous'|trans }}"
+                    disabled
+                >
+                    {{ icons.previous() }}
+                </button>
+            {% endif %}
+        </li>
+
+        {% for page in range(1, pagination.pageCount + 1) %}
+            <li class="pc-cluster">
+                <a
+                    href="{{ pagination_url }}?page={{ page }}"
+                    class="pc-btn pc-btn--secondary"
+                    aria-label="{{ 'pagination-page'|trans({ page: page }) }}"
+                    {% if page == currentPage %}aria-current="page"{% endif %}
+                >
+                    {{ page }}
+                </a>
+            </li>
+        {% endfor %}
+
+        <li class="pc-cluster pc-m" style="--m: 0 0 0 var(--w)">
+            {% if currentPage < pagination.pageCount %}
+                <a
+                    href="{{ paginationUrl }}?page={{ currentPage + 1 }}"
+                    class="pc-btn pc-btn--secondary"
+                    title="{{ 'pagination-next'|trans }}"
+                    aria-label="{{ 'pagination-next'|trans }}"
+                >
+                    {{ icons.next() }}
+                </a>
+            {% else %}
+                <button
+                    class="pc-btn pc-btn--muted"
+                    title="{{ 'pagination-next'|trans }}"
+                    aria-label="{{ 'pagination-next'|trans }}"
+                    disabled
+                >
+                    {{ icons.next() }}
+                </button>
+            {% endif %}
+        </li>
+    </ul>
+</nav>

src/templates/macros/icons.njk

@@ -88,3 +88,11 @@
     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
   </svg>
 {% endmacro %}
+
+{% macro previous(attr=null) %}
+  {{ _icon(attr, paths=["M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"]) }}
+{% endmacro %}
+
+{% macro next(attr=null) %}
+  {{ _icon(attr, paths=["M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"]) }}
+{% endmacro %}

src/templates/pages/customers/list.njk

@@ -16,5 +16,8 @@
     </div>
 
     {% table table, {caption: 'crm-customers-table-caption'|trans} %}
+
+    {% set paginationUrl = path('crm_customers_list') %}
+    {% include 'includes/pagination.njk' %}
 </div>
 {% endblock main %}

src/templates/pages/leave_requests/list.njk

@@ -16,5 +16,8 @@
     </div>
 
     {% table table %}
+
+    {% set paginationUrl = path('people_leave_requests_list') %}
+    {% include 'includes/pagination.njk' %}
 </div>
 {% endblock main %}

src/templates/pages/leaves/list.njk

@@ -30,6 +30,9 @@
     </div>
 
     {% table table %}
+
+    {% set paginationUrl = path('people_leaves_list') %}
+    {% include 'includes/pagination.njk' %}
     </div>
 
 </div>

src/templates/pages/projects/list.njk

@@ -14,5 +14,8 @@
     </div>
 
     {% table table %}
+
+    {% set paginationUrl = path('crm_projects_list') %}
+    {% include 'includes/pagination.njk' %}
 </div>
 {% endblock main %}

src/templates/pages/tasks/list.njk

@@ -14,5 +14,8 @@
     </div>
 
     {% table table %}
+
+    {% set paginationUrl = path('crm_tasks_list') %}
+    {% include 'includes/pagination.njk' %}
 </div>
 {% endblock main %}

src/translations/fr-FR.ftl

@@ -28,6 +28,11 @@ header-profile = Mon compte
 header-dropdown = Voir plus d'actions
 header-logout = Se déconnecter
 
+pagination = Pagination
+pagination-previous = Page précédente
+pagination-page = Page {$page}
+pagination-next = Page suivante
+
 login-title = Connexion
 login-email = Adresse email
 login-password = Mot de passe