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

<app-menu></app-menu>
<div id="main">
<div class="card shadow">
	<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-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 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, pseudonyme ou adresse email" placement="bottom">
			  </div>
			</div>
			<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 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 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>
	</div>
	<div class="card-body">
		<table class="table table-sm">
			<thead class="thead-dark">
				<tr>
					<th class="fs-6 label-nobr"><small>Nom</small></th>
					<th class="fs-6 label-nobr"><small>Pseudonyme</small></th>
					<th class="fs-6 label-nobr"><small>Status</small></th>
					<th class="fs-6 label-nobr"><small>Arrivé</small></th>
					<th class="fs-6 label-nobr"><small>Journées</small></th>
					<th class="fs-6 label-nobr"><small>Adresse email</small></th>
				</tr>
			</thead>
			<tbody>
				@for (participant of participants; track participant.numeroParticipant) {
				<tr>
					<td class="label-nobr text-truncate" style="max-width:200px;"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.nom }}&nbsp;{{ participant.prenom }}</a>&nbsp;&nbsp;</td>
					<td class="label-nobr text-truncate" style="max-width:200px;"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.pseudonyme }}</a>@if (participant.groupe) { / {{ participant.groupe }} }&nbsp;&nbsp;</td>
					<td>
					  @if (participant.statut === PS[0].key) { <i class="fa-solid fa-circle-xmark text-danger" title="{{ PS[0].value }}"></i> }
					  @else if (participant.statut === PS[1].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[1].value }}"></i> }
					  @else if (participant.statut === PS[2].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[2].value }}"></i> }
					  @else if (participant.statut === PS[3].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[3].value }}"></i> }
					  @else if (participant.statut === PS[4].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[4].value }}"></i> }
					  @else if (participant.statut === PS[5].key) { <i class="fa-solid fa-circle-check text-primary" title="{{ PS[5].value }}"></i> }
					  @else if (participant.statut === PS[6].key) { <i class="fa-solid fa-circle-check text-primary" title="{{ PS[6].value }}"></i> }
					</td>
					<td>
					  @if (participant.arrived) { <i class="fa-solid fa-circle-check text-success"></i> }
					  @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;
					</td>
					<td>{{ getNombreJours(participant.hereDay1, participant.hereDay2, participant.hereDay3) }} @if(participant.sleepingOnSite) { + <i class="fa-solid fa-bed"></i> }</td>
					<td class="label-nobr">{{ participant.email }}&nbsp;&nbsp;</td>
				</tr>
				}
			</tbody>
		</table>
	</div>
</div>
</div>