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

<app-menu></app-menu>
<div id="main">
<div class="card shadow">
	<div class="card-header"><span i18n>Table des variables</span></div>
	<div class="card-header shadow-sm">
		<div class="row justify-content-between">
			<div class="form-group col-sm-4 label-nobr">
				<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;<span i18n>Actualiser</span></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;<span i18n>Créer</span></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><span i18n>Filtrer par type</span></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>
	<div class="card-body">
		<table class="table table-sm">
			<thead class="thead-dark">
				<tr>
					<th class="fs-6 label-nobr"><small><span i18n>Type</span></small></th>
					<th class="fs-6 label-nobr"><small><span i18n>Code</span></small></th>
					<th class="fs-6 label-nobr"><small><span i18n>Valeur</span></small></th>
				</tr>
			</thead>
			<tbody>
				@for (variable of variables; track variable.numeroVariable) {
				<tr>
					<td class="label-nobr"><small>{{ variable.type }}&nbsp;&nbsp;</small></td>
					<td class="label-nobr"><a (click)="formVariable(variable.numeroVariable)" class="link-primary pointeur-souris text-decoration-none">{{ variable.code }}</a>&nbsp;&nbsp;</td>
					<td class="text-truncate" style="max-width:400px;">{{ variable.valeur }}&nbsp;&nbsp;</td>
				</tr>
				}
			</tbody>
		</table>
	</div>
</div>
</div>