Add month/year filters to payroll elements page

src/Infrastructure/HumanResource/PayrollElements/Controller/GetPayrollElementsController.ts

@@ -1,11 +1,19 @@
-import { Controller, Inject, Get, UseGuards, Render } from '@nestjs/common';
+import {
+  Controller,
+  Inject,
+  Get,
+  UseGuards,
+  Render,
+  Query
+} from '@nestjs/common';
 import { IQueryBus } from 'src/Application/IQueryBus';
 import { GetUsersElementsQuery } from 'src/Application/HumanResource/Payslip/Query/GetUsersElementsQuery';
 import { UserElementsView } from 'src/Application/HumanResource/Payslip/View/UserElementsView';
 import { IsAuthenticatedGuard } from '../../User/Security/IsAuthenticatedGuard';
 import { WithName } from 'src/Infrastructure/Common/ExtendedRouting/WithName';
 import { TableCsvFactory } from 'src/Infrastructure/Tables/TableCsvFactory';
 import { PayrollElementsTableFactory } from '../Table/PayrollElementsTableFactory';
+import { GetPayrollElementsControllerDTO } from '../DTO/GetPayrollElementsControllerDTO';
 
 @Controller('app/people/payroll_elements')
 @UseGuards(IsAuthenticatedGuard)
@@ -20,14 +28,25 @@ export class GetPayrollElementsController {
   @Get()
   @WithName('people_payroll_elements')
   @Render('pages/payroll_elements/index.njk')
-  public async get() {
+  public async get(@Query() dto: GetPayrollElementsControllerDTO) {
+    const date =
+      dto.month !== undefined && dto.year !== undefined
+        ? new Date(dto.year, dto.month, 15)
+        : new Date();
+
     const elements: UserElementsView[] = await this.queryBus.execute(
-      new GetUsersElementsQuery(new Date())
+      new GetUsersElementsQuery(date)
     );
 
     const table = this.tableFactory.create(elements);
     const csv = this.tableCsvFactory.toCsv(table);
 
-    return { table, csv, date: new Date() };
+    return {
+      table,
+      csv,
+      date,
+      year: date.getUTCFullYear(),
+      month: date.getUTCMonth()
+    };
   }
 }

src/Infrastructure/HumanResource/PayrollElements/DTO/GetPayrollElementsControllerDTO.ts

@@ -0,0 +1,11 @@
+import { IsNumber, IsOptional } from 'class-validator';
+
+export class GetPayrollElementsControllerDTO {
+  @IsNumber()
+  @IsOptional()
+  public month: number;
+
+  @IsNumber()
+  @IsOptional()
+  public year: number;
+}

src/assets/customElements/autoForm.js

@@ -0,0 +1,11 @@
+import { onParsed } from '../lib/customElements';
+
+export default class extends HTMLFormElement {
+  connectedCallback() {
+    onParsed(() => {
+      for (const formControl of this) {
+        formControl.addEventListener('change', () => this.requestSubmit());
+      }
+    });
+  }
+}

src/assets/customElements/index.js

@@ -1,3 +1,4 @@
+import autoForm from './autoForm';
 import blobLink from './blobLink';
 import clipboardButton from './clipboardButton';
 import eventForm from './eventForm';
@@ -6,6 +7,7 @@ import navigationProgress from './navigationProgress';
 import navMenuButton from './navMenuButton';
 import themeToggler from './themeToggler';
 
+customElements.define('pc-auto-form', autoForm, { extends: 'form' });
 customElements.define('pc-blob-link', blobLink, { extends: 'a' });
 customElements.define('pc-clipboard-button', clipboardButton, {
   extends: 'button'

src/assets/styles/components/input-group.css

@@ -6,7 +6,7 @@
 .pc-input-group > input {
   appearance: none;
   display: block;
-  width: 100%;
+  width: var(--input-width, 100%);
   background-color: var(--background-default);
   border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);

src/templates/pages/payroll_elements/_filters_form.njk

@@ -0,0 +1,23 @@
+{% macro filters_form() %}
+    <form
+        is="pc-auto-form"
+        method="GET"
+        action="{{ path('people_payroll_elements') }}"
+        class="pc-cluster pc-gap"
+        style="--cluster-align: flex-end"
+    >
+        <div class="pc-select-group pc-m" style="--m: 0">
+            <label class="pc-label" for="month">{{ 'payroll-elements-filters-month-title'|trans }}</label>
+            <select name="month" id="month">
+                {% for monthValue in range(12) %}
+                    <option value="{{ monthValue }}" {% if monthValue == month %}selected{% endif %}>{{ monthValue|longMonth|capitalize }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="pc-input-group pc-m" style="--m: 0">
+            <label class="pc-label" for="year">{{ 'payroll-elements-filters-year-title'|trans }}</label>
+            <input type="number" id="year" name="year" pattern="\d+" value="{{ year }}" style="--input-width: 12ch">
+        </div>
+    </form>
+{% endmacro %}

src/templates/pages/payroll_elements/index.njk

@@ -1,6 +1,7 @@
 {% extends 'layouts/app.njk' %}
 {% import 'macros/links.njk' as links %}
 {% from 'macros/breadcrumb.njk' import breadcrumb %}
+{% from './_filters_form.njk' import filters_form with context %}
 
 {% set title = 'payroll-elements-title'|trans %}
 
@@ -13,15 +14,17 @@
             {{ title }}
         </h1>
 
-        <div class="pc-cluster pc-gap" style="--cluster-align: center">
-            <a is="pc-blob-link" data-blob-content="{{ csv }}" data-blob-mime-type="application/csv" download="{{ 'payroll-elements-filename'|trans({ date: date|htmlYearMonth }) }}" class="pc-btn">
-                {{ 'payroll-elements-download'|trans }}
-            </a>
+        <a href="https://wiki.fairness.coop/fr/guides/gestion/Salaires-et-fiches-de-paie" class="pc-link-btn" rel="noreferrer" target="_blank">
+            {{ 'payroll-elements-wiki'|trans }}
+        </a>
+    </div>
+
+    <div class="pc-cluster pc-gap" style="--cluster-justify: space-between; --cluster-align: center">
+        {{ filters_form() }}
 
-            <a href="https://wiki.fairness.coop/fr/guides/gestion/Salaires-et-fiches-de-paie" class="pc-link-btn" rel="noreferrer" target="_blank">
-                {{ 'payroll-elements-wiki'|trans }}
-            </a>
-        </div>
+        <a is="pc-blob-link" data-blob-content="{{ csv }}" data-blob-mime-type="application/csv" download="{{ 'payroll-elements-filename'|trans({ date: date|htmlYearMonth }) }}" class="pc-btn">
+            {{ 'payroll-elements-download'|trans }}
+        </a>
     </div>
 
     {% table table %}

src/translations/fr-FR.ftl

@@ -169,6 +169,8 @@ payroll-elements-specialLeaves = Congés exceptionnels
 payroll-elements-download = Télécharger
 payroll-elements-filename = Fairness - Éléments de paie - {$date}.csv
 payroll-elements-wiki = Voir le Wiki
+payroll-elements-filters-month-title = Mois
+payroll-elements-filters-year-title = Année
 
 meal-tickets-title = Tickets resto
 meal-tickets-user = Coopérateur·ice - Salarié·e