fix(frontend): fix head of columns

.kontinuous/env/preprod/templates/backend.sealed-secret.yaml

@@ -16,7 +16,7 @@ spec:
     DOMIFA_MAIL_SMTP_TIPIMAIL_USER: >-
       AgBwRj3Ov5/EEjSftwT8Do2OckqU7bgsEuKAJjd0kyQcFM9Z7bm/XZWtFS7AOOvcdFtOI52pP4bdTNys3lct8izsqh9zKtyBeIKzqw9v+9YKbsa7TXCdL301WkFF0lMO50Y3cxCvHS8k4dNeXnCoh5ramAf/xvCQt3L+6z2aQpQNanfhjKb5ogbXKj1cvvi91VRuzruGlOPs2EZsvwDAFAYwr5VNSBVIxwL8tmmuGtBKAEff+dDjBUuBoE64VVJ66Cg7yGF/S7xmZ2mQGVBfJ22uOYckE6Bd/u1vgn/PjinCI0E8ckxvkol1VpdGRcuWndutwB3g9Ed0CnoQykaufKg6L2seKBfH+ES0DxQunnd3WHev1EAUSRv90u1QnXH53TAqonmTM+blxPfWjzDwxZG2sHSWql/M5E9FtCP0Fz09JJeDzDnIpSQaPfv09nlF27gNDufVxGv6zG7MpKjG5lGz3F2z1L4dXbH2VECbjScfcIPlopq+Nr9JISTOwSDkRBo/kUEFYSFsxkAX+fpg34GWoyOVrY20WyNz7inJvzR29WxNV13HafeuJYoATpbYX/h176pjscWf6zDhDZyzrMu2SxEa/eQb3h4gQt31IQEvEpN/8UIh0FDD0WBi9cF5lF6eckie2UfXyUV2C1ShWYs2OXWho4wYXxTdctyuD9kllE9kCVsdUO19CeZ5iNfz4hStG4Y0249pGILEg3GIAsWX6mE7+lZvU9AusBYTcJNMxA==
     DOMIFA_MAIL_SMTP_TIPIMAIL_PASSWORD: >-
-      AgAm/c7nOXUnuTNr2UZp1GDwF1eXMgFKrFe1VWPJYHLQ8NctuAT19B55Qw0VHwYmOVD8wW4OHo+SK9pZPNw4TNjV7zanOLndda+BXdeL+2I5fBKsBYIctZfGXEsOuZxUaCbB+PBJktAHqtElBLXjntRk2t8uVGWNycUfMw27wSxKoNKv0pPLUjOw2wg0LE33ikV7gfhxYgd5FxoBKTAS+e4geyNB/gfOaVfhC1cH4nE4fPEbgFsLEbk0CzQ28jin+/BIJgNdFTomYlSrE4fDhD/Cyi1okFx2poLqvOif3Mdzp9tzAVAxtOmqzNfAf/PoOcmaFZI+GhDPm3XSB/gNXwDyixHonqcPN7HWsBO+Gm4Eahg6aeStt2sow39ITXJ+GMSthuyBf6MfpBxvxIxdFnhatW3aEoC3D8f9FddcTlcG4bXps+DLnqb6kRYjJWm+Tdz22rEJc34AST8d2Mb39Cb2gnZRv3X7micmfxH/8Xg90qcruhbPNXdD9X/85w1hPaqKk81cNuLzh9x9EzYu/H+BCOZpf9Cvt66uMlswQiunUh8uCF0jODCNLDg+TXfjNGEN832gdwG7jmdJTif8+Gbf+6J8SaMK686xdDRjBo7Vm0r9iaDQmKEscqIVB9KCddHn6c3kQ/295dU1nyIAwetSFAQeGCPcS9f6hvxNw3/XQhDp6Dw2gSDk3RiMpVmoaoSNuIZYFFhU+gX+U4ofeXyB38DPP8H5epTEc9GMiCXtHA==
+      AgAjtLvqTuyz5ztz2lZSg5WrhfQekv80/1Go1kn8v44bzGRbkClQCrGchBK4/SlFJ46VG8oMyBDGYR4i3YQX4GM9qxFrIjUtKxmxs38M3amkiBLwvpzdSRN2rvRPTUuHXbxmGgjAaTTtfobiWcZTE4PFS9jcDNrBDAOaO7OVhFVNDSFsIQo7Y1KYn0dMy9NCYtV5YUyCueiGXA3jShzERswVGO50ypR9Vy5c2ZYtM87uzzQwxnzDGeM9y2JXuHigWHCBu48Zh9rB0EnYjkxElZwmQiG6dOYn3cWIS0W2jg9qJdTkbFnOpL+lJoUUCs/31tC2jxm3134Fknh+oghQHAXdjhJc5B8kNGKE9NNou3HtelotVXgkExoK/izKqqM8qN4lKY9C5qo1+7Y/j5IFb45xpv7A+dxuCGaGrbnv8E6cF/bDIPekb+2tUeg5pydLd84EzZg5gDrwZLgDD5uQ/I5mtVpDbxtILG7/9ZFuk/MD+05Ovq9jin/QdfG1cUibsPip2Z+dahdF3tkK2x/qN9aVVjskRm8uJp6kmAPDHT22J9ef4BScBN2zwFFzgMR4SKV4x5nV47ir3pt4NMrKnIOhrIq8GgfmIdgzjnHA7Xxr5L31Ab1R4ClY4eTRhenIa4V78YMAw96UhCGNtNpU3cpjnXaJi+d0An7f1VcnoGAMJcasqu+TIFJimkhaeVYPs11FGLjlmWVvwKhWAFcozPRkUrQnrAxRGPQ4zdsrBxYLww==
     DOMIFA_ERROR_REPORT_EMAILS: >-
       AgDGA3da8Ua+HCrJ48PpgF0GDSPtoNB42ninGpwCKlANgje0DsW4qjaQ2RHltt9ZFcPF07j/oLkXPGm1JwMlAodH38dDc39HjG8M1SIUQuG2+rS7AqlVqUtCYz/POhor+WOf+ZPI2Cy5ucREEGmZwHvjWm30KsckWYVTS4o9WOKaX11Xd0uqnvr4ADSbtKJp+wGiirwZPRMPFhYBrJIFYs1BwdQmxG3Ha++licqw9d3iPWgOeGJUCE1yQ9Jvfnvqa3hiGADEfM85UEv8yc3/VQAULXNo/hdjhu4evazmGsqLes+ondQIi0wKMIfPOFbruihYAIt7lAzxcSrrKC9yDr16b1Uv8wHpTu7dxrf6hMUePacJf9cihrAJEZuYe/YduLKE9YFPsC7tRfv/IJhGmRYZDGEDX+vDlgN+w4jMFJbarhOK+op3PXym1yzApzWng+UI8OEoCUjUWgqVKbQRy3uQivonCG1q6ytfNXcJviaTNwrZu8E65C/Xy5BmntNCe1JdFJv1QB8kolGPBovYQf1wdFLmZJ/z5dAs/qdnOhySp/Rp35shcEmor/3poCP2OqaNjjuiuOxJWOhaXY84YVnx5xhDB74qg/PU9n1xjACNqdsuJoWFVF0GSMwBJn3BLBfV/8OayS53vcUb1cQ/y/p0C03NEQMf/gHgVEu4KdWxBYfW6VhTrAN5myiXhu3j0CCAI4PhF31ADd5TRdJJ5wOWrZgXq2bJbU3MPy8ND2hoVHXTJZCRCNAgE+S4obwKfZ8Fl0AI7qclSKfYfA==
     DOMIFA_TIPIMAIL_FROM_EMAIL: >-

packages/backend/src/usagers/controllers/usagers.controller.ts

@@ -156,30 +156,36 @@ export class UsagersController {
     @Body() search: SearchUsagerDto,
     @CurrentUser() user: UserStructureAuthenticated
   ) {
-    console.log({ x: normalizeString(search.searchString) });
     const query = usagerRepository
       .createQueryBuilder("usager")
       .select(joinSelectFields(USAGER_LIGHT_ATTRIBUTES))
       .where(`"structureId" = :structureId and statut = 'RADIE'`, {
         structureId: user.structureId,
       });
 
-    if (search.searchString && search.searchStringField === "DEFAULT") {
+    const searchString = normalizeString(search?.searchString).trim();
+
+    if (searchString && search.searchStringField === "DEFAULT") {
       query.andWhere("nom_prenom_surnom_ref ILIKE :str", {
-        str: `%${normalizeString(search.searchString)}%`,
+        str: `%${searchString}%`,
       });
-    }
+    } else if (searchString && search.searchStringField === "DATE_NAISSANCE") {
+      const parsedDate = parse(
+        searchString.replace(/\D/g, ""),
+        "ddMMyyyy",
+        new Date()
+      );
 
-    if (search.searchString && search.searchStringField === "DATE_NAISSANCE") {
-      const parsedDate = parse(search.searchString, "dd MM yyyy", new Date());
       if (!isValid(parsedDate)) {
+        console.log({ searchString });
+
         throw new BadRequestException(
           'Format de date invalide. Utilisez le format "dd MM yyyy"'
         );
       }
 
       query.andWhere(`DATE("dateNaissance") = DATE(:date)`, {
-        date: new Date(search.searchString),
+        date: parsedDate,
       });
     }
 
@@ -220,11 +226,7 @@ export class UsagersController {
       }
     }
 
-    if (
-      !search?.searchString &&
-      !search?.echeance &&
-      !search?.lastInteractionDate
-    ) {
+    if (!searchString && !search?.echeance && !search?.lastInteractionDate) {
       query.take(100);
     }
 

packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.html

@@ -298,6 +298,7 @@ <h1 class="col-md-2 col-6 title text-start order-1 order-md-1">
         [usagers]="usagers"
         [selectAllCheckboxes]="selectAllCheckboxes"
         [filters]="filters"
+        [filters$]="filters$"
         (updateFilters)="updateFilters($event)"
         (goToPrint)="goToPrint()"
       ></app-manage-manage-usagers-table>

packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-table/manage-usagers-table.component.ts

@@ -1,10 +1,12 @@
-import { Subscription } from "rxjs";
+import { Subject, Subscription, takeUntil } from "rxjs";
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
   OnDestroy,
+  OnInit,
   Output,
   TemplateRef,
   ViewChild,
@@ -36,12 +38,14 @@ import {
   styleUrls: ["./manage-usagers-table.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ManageUsagersTableComponent implements OnDestroy {
+export class ManageUsagersTableComponent implements OnInit, OnDestroy {
   @Input({ required: true })
   public usagers!: UsagerFormModel[];
+  private destroy$ = new Subject<void>();
 
   @Input({ required: true })
   public filters!: UsagersFilterCriteria;
+  @Input({ required: true }) filters$!: Subject<UsagersFilterCriteria>;
 
   @Input({ required: true })
   public selectAllCheckboxes = false;
@@ -64,6 +68,9 @@ export class ManageUsagersTableComponent implements OnDestroy {
 
   public me!: UserStructure | null;
   private subscription = new Subscription();
+  public showCheckboxes = false;
+  public currentFilters!: UsagersFilterCriteria;
+
   public loading = false;
   public readonly ETAPES_DEMANDE_URL = ETAPES_DEMANDE_URL;
 
@@ -79,13 +86,42 @@ export class ManageUsagersTableComponent implements OnDestroy {
   constructor(
     private readonly modalService: NgbModal,
     private readonly router: Router,
-    private readonly authService: AuthService
+    private readonly authService: AuthService,
+    private readonly cd: ChangeDetectorRef
   ) {
     this.me = this.authService.currentUserValue;
     this.usagers = [];
     this.selectedRefs.clear();
   }
 
+  ngOnInit() {
+    this.filters$.pipe(takeUntil(this.destroy$)).subscribe((filters) => {
+      this.currentFilters = filters;
+      this.computeCheckboxVisibility();
+      this.cd.markForCheck();
+    });
+  }
+
+  private computeCheckboxVisibility() {
+    if (this.me.role === "admin" || this.me.role === "responsable") {
+      this.showCheckboxes = true;
+      return;
+    }
+
+    if (this.me.role === "facteur") {
+      this.showCheckboxes = false;
+      return;
+    }
+
+    if (this.me.role === "simple") {
+      this.showCheckboxes = this.currentFilters.statut === "VALIDE";
+      return;
+    }
+
+    this.showCheckboxes = false;
+
+    this.cd.markForCheck();
+  }
   public toggleSelection(id: number) {
     if (!this.selectedRefs.size) {
       this.selectAllCheckboxes = false;

packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-table/manage-usagers-table.html

@@ -68,11 +68,7 @@
     peuvent disposent de boutons pour trier les colonnes
   </caption>
   <thead>
-    <th
-      scope="col"
-      role="columnheader"
-      *ngIf='!(me?.role === "facteur" ||  (me?.role === "simple" && filters.statut === "VALIDE"))'
-    >
+    <th scope="col" role="columnheader" *ngIf="showCheckboxes">
       <span class="visually-hidden"
         >Colonne de sélection des dossiers les supprimer ou les radier</span
       >
@@ -96,6 +92,7 @@
     <th scope="col" role="columnheader">
       <button
         type="button"
+        [ngClass]="filters.sortKey === 'ID' ? 'fw-bold text-primary' : ''"
         [attr.aria-sort]="filters.sortKey ==='ID' ? ARIA_SORT[filters.sortValue] : 'none'"
         (click)="updateFilters.emit({  element: 'sortKey',  value: 'ID'})"
       >
@@ -112,6 +109,7 @@
     <th scope="col">
       <button
         type="button"
+        [ngClass]="filters.sortKey === 'NOM' ? 'fw-bold text-primary' : ''"
         [attr.aria-sort]="filters.sortKey ==='NOM' ? ARIA_SORT[filters.sortValue] : 'none'"
         (click)="updateFilters.emit({ element: 'sortKey',  value: 'NOM' })"
       >
@@ -147,7 +145,6 @@
       >
         <span class="visually-hidden">Trier par</span>
         <span>PASSAGE</span>
-
         <app-table-head-sort-icon
           [sortKey]="filters.sortKey"
           [sortValue]="filters.sortValue"
@@ -170,14 +167,18 @@
         (click)="updateFilters.emit({element: 'sortKey', value: 'ECHEANCE'})"
       >
         <span class="visually-hidden">Trier par</span>
-        <ng-container
-          *ngIf="filters.statut !== 'REFUS' && filters.statut !== 'RADIE'"
-          >ÉCHÉANCE</ng-container
-        >
-        <ng-container *ngIf="filters.statut === 'REFUS'"
-          >REFUSÉ LE</ng-container
-        >
-        <ng-container *ngIf="filters.statut === 'RADIE'">RADIÉ LE</ng-container>
+        <span>
+          <ng-container
+            *ngIf="filters.statut !== 'REFUS' && filters.statut !== 'RADIE'"
+            >ÉCHÉANCE</ng-container
+          >
+          <ng-container *ngIf="filters.statut === 'REFUS'"
+            >REFUSÉ LE</ng-container
+          >
+          <ng-container *ngIf="filters.statut === 'RADIE'"
+            >RADIÉ LE</ng-container
+          >
+        </span>
         <app-table-head-sort-icon
           [sortKey]="filters.sortKey"
           [sortValue]="filters.sortValue"
@@ -193,10 +194,7 @@
   </thead>
   <tbody>
     <tr *ngFor="let usager of usagers; let i = index; trackBy: refTrackBy">
-      <td
-        class="text-start p-0 m-0"
-        *ngIf='!(  me?.role === "facteur" ||  (me?.role === "simple" && filters.statut !== "VALIDE"))'
-      >
+      <td class="text-start p-0 m-0" *ngIf="showCheckboxes">
         <label
           for="select-{{ usager.ref }}"
           (change)="toggleSelection(usager.ref)"

packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-table/manage-usagers-table.scss

@@ -14,19 +14,26 @@
     padding: 0 0.2rem;
     height: 62px;
     font-size: 0.95rem;
-  }
 
-  tbody td span {
-    vertical-align: middle;
-  }
-
-  tbody td a {
-    width: 100%;
-    height: 100%;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    color: black;
+    label {
+      height: 100%;
+      width: 100%;
+      padding: 1.3rem 0.5rem;
+      margin: 0;
+      text-align: center;
+      background-color: transparent;
+    }
+    span {
+      vertical-align: middle;
+    }
+    a {
+      width: 100%;
+      height: 100%;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      color: black;
+    }
   }
 
   tbody td a:hover,
@@ -57,6 +64,7 @@
   tbody td:first-child {
     border-radius: 2px 0 0 2px;
     padding: 0 0.5rem;
+    text-align: center;
   }
 
   tbody td:last-child {
@@ -80,31 +88,35 @@
     box-shadow: 2px 1px 4px rgba(179, 179, 179, 0.5);
   }
 
-  thead th .btn {
-    padding: 0.25rem 0.5rem;
-  }
-
-  thead th button:not(.btn) {
-    font-size: 0.95rem;
-    padding: 0;
-    color: #3150c0;
-    text-transform: uppercase;
-    border: none;
-    font-weight: 600;
-    vertical-align: middle;
-    background-color: transparent !important;
-  }
-
   thead th {
     font-style: normal;
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: 1rem;
     color: #3150c0;
-    padding: 0.2rem;
+    padding: 0.7rem 0;
     text-transform: uppercase;
     border: none;
     transition: all 0.2s ease;
-    vertical-align: middle;
+    vertical-align: bottom;
+    label {
+      padding: 0;
+      text-align: center;
+      width: 100%;
+      vertical-align: bottom;
+      margin: 0;
+      background-color: transparent;
+    }
+    button {
+      padding: 0;
+      color: #3150c0;
+      text-transform: uppercase;
+      border: none;
+      background-color: transparent !important;
+
+      * {
+        vertical-align: bottom;
+      }
+    }
   }
 
   .table-name img {
@@ -152,15 +164,6 @@
   font-weight: bold;
 }
 
-label {
-  height: 100%;
-  width: 100%;
-  padding: 1.3rem 0.5rem;
-  margin: 0;
-  text-align: center;
-  background-color: transparent;
-}
-
 .is-sticky {
   position: fixed;
   top: 0;