dev en cours

src/app/composants/participant-list/participant-list.component.html

@@ -4,30 +4,45 @@
 	<div class="card-header">Table des participants</div>
 	<div class="card-header shadow-sm">
 		<div class="row justify-content-between">
-			<div class="form-group col-sm-4 label-nobr">
+			<div class="form-group col-sm-2 label-nobr">
 				<button type="button" (click)="goToRefreshListParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
 				<button type="button" (click)="goToNewParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
-			<div class="form-group col-sm-2">
+			<div class="form-group col-sm-2 label-nobr">
+				<div class="input-group input-group-sn">
+					<button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled>Tri</button>
+ 				  <select class="form-select form-select-sm field-separate" id="select_tri" [(ngModel)]="listeTri" (change)="trier($event)" placement="bottom">
+						<option value="0">par nom</option>
+					  <option value="1">inscription</option>
+				  </select>
+			  </div>
+			</div>
+			<div class="form-group col-sm-2 label-nobr">
 				<div class="input-group input-group-sn">
 					<button type="button" (click)="filtrageParNom()" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-filter"></i>&nbsp;Filtrer</button>
-					<input type="text" (keydown.enter)="filtrageParNom()" class="form-control form-control-sm field-separate" id="input_nom" [(ngModel)]="nomFiltre" tooltip="Filtrer par nom, prenom ou pseudonyme" placement="bottom">
+					<input type="text" (keydown.enter)="filtrageParNom()" class="form-control form-control-sm field-separate" id="input_nom" [(ngModel)]="nomFiltre" tooltip="Filtrer par nom, prenom, pseudonyme ou adresse email" placement="bottom">
 			  </div>
 			</div>
-			<div class="form-group col-sm-2">
-				<select class="form-select form-select-sm field-separate" id="select_statut" [(ngModel)]="statutFiltre" (change)="filtrageParStatut($event)" tooltip="Filtrer selon le status" placement="bottom">
-					<option value="0">Tout statut</option>
-					<option value="1">Non réglé(s)</option>
-				</select>
+			<div class="form-group col-sm-2 label-nobr">
+				<div class="input-group input-group-sn">
+					<button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled>Réglement</button>
+				  <select class="form-select form-select-sm field-separate" id="select_statut" [(ngModel)]="statutFiltre" (change)="filtrageParStatut($event)">
+						<option value="0"></option>
+						<option value="1">En attente</option>
+				  </select>
+			  </div>
 			</div>
-			<div class="form-group col-sm-2">
-				<select class="form-select form-select-sm field-separate" id="select_arrive" [(ngModel)]="arriveFiltre" (change)="filtrageParArrive($event)" tooltip="Filtrer selon l'arrivage" placement="bottom">
-					<option value="0">Tous</option>
-					<option value="1">Non arrivé(s)</option>
-					<option value="2">Arrivé(s)</option>
-				</select>
+			<div class="form-group col-sm-2 label-nobr">
+				<div class="input-group input-group-sn">
+					<button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled>Arrivé(s)</button>
+				  <select class="form-select form-select-sm field-separate" id="select_arrive" [(ngModel)]="arriveFiltre" (change)="filtrageParArrive($event)">
+					  <option value="0"></option>
+					  <option value="1">Non</option>
+						<option value="2">Oui</option>
+				  </select>
+			  </div>
 			</div>
-			<div class="form-group col-sm-2">
+			<div class="form-group col-sm-2 label-nobr">
 				<button type="button" (click)="filtrageReset()" class="btn bg-gradient btn-secondary btn-sm field-separate"><i class="fa-solid fa-filter-circle-xmark"></i>&nbsp;Retirer les filtres</button>
 			</div>
    	</div>

src/app/composants/participant-list/participant-list.component.ts

@@ -11,6 +11,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 export class ParticipantListComponent implements OnInit, AfterViewInit
 {
 
+  listeTri: number = 0;
   nomFiltre: string = "";
   statutFiltre: number = 0;
   arriveFiltre: number = 0;
@@ -25,7 +26,7 @@ export class ParticipantListComponent implements OnInit, AfterViewInit
 
   ngAfterViewInit() { }
 
-  private retreiveDatas() { this.participantService.getListParticipant(this.nomFiltre, this.statutFiltre, this.arriveFiltre).subscribe(data => { this.participants = data; }); }
+  private retreiveDatas() { this.participantService.getListParticipant(this.nomFiltre, this.statutFiltre, this.arriveFiltre, this.listeTri).subscribe(data => { this.participants = data; }); }
 
   getNombreJours(j1: boolean, j2: boolean, j3: boolean)
   {
@@ -40,6 +41,7 @@ export class ParticipantListComponent implements OnInit, AfterViewInit
 
   goToFiltrage() { this.retreiveDatas(); }
 
+  trier(event: any) { this.listeTri = event.target.value; this.retreiveDatas(); }
   filtrageParNom() { this.retreiveDatas(); }
   filtrageParStatut(event: any) { this.statutFiltre = event.target.value; this.retreiveDatas(); }
   filtrageParArrive(event: any) { this.arriveFiltre = event.target.value; this.retreiveDatas(); }

src/app/composants/variable-list/variable-list.component.html

@@ -8,13 +8,16 @@
 				<button type="button" (click)="goToRefreshListVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
 				<button type="button" (click)="goToNewVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
-  		<div class="form-group col-sm-2">
-				<select class="form-select form-select-sm field-separate" id="select_type" [(ngModel)]="typeFiltre" (change)="filtrageParType($event)">
-					<option> </option>
-          @for (type of types; track type) {
-					<option [value]="type.type">{{ type.type }}</option>
-				  }
-				</select>
+  		<div class="form-group col-sm-2 label-nobr">
+				<div class="input-group input-group-sn">
+					<button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled>Filtrer par type</button>
+  				<select class="form-select form-select-sm field-separate" id="select_type" [(ngModel)]="typeFiltre" (change)="filtrageParType($event)">
+	  				<option> </option>
+            @for (type of types; track type) {
+			  		<option [value]="type.type">{{ type.type }}</option>
+				    }
+				  </select>
+			  </div>
 			</div>
 		</div>
 	</div>

src/app/services/participant.service.ts

@@ -13,13 +13,14 @@ export class ParticipantService
 
   constructor(private httpClient: HttpClient) { }
 
-  getListParticipant(filtreNom: string, filtreStatut: number, filtreArrive: number): Observable<ParticipantList[]>
+  getListParticipant(filtreNom: string, filtreStatut: number, filtreArrive: number, tri: number): Observable<ParticipantList[]>
   {
     let params = new HttpParams();
 
     params = params.append('nom', filtreNom);
     params = params.append('statut', filtreStatut);
     params = params.append('arrive', filtreArrive);
+    params = params.append('tri', tri);
 
     return this.httpClient.get<Participant[]>(`${this.baseURL}/list`, { params: params });
   }