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

<div class="card shadow">
	<div class="card-header">Table des variables</div>
	<div class="card-header shadow-sm">
		<div class="row">
			<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;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-8">
        <select class="form-select form-select-sm field-separate" (change)="filtrageParType($event)">
					<option selected> </option>
          @for (type of types; track type) {
					<option [value]="type.type">{{ type.type }}</option>
				  }
				</select>
			</div>
		</div>
	</div>
	<div class="card-body">
		<table class="table table-sm">
			<thead class="thead-dark">
				<tr>
					<th class="fs-6 label-nobr"><small>Type</small></th>
					<th class="fs-6 label-nobr"><small>Code</small></th>
					<th class="fs-6 label-nobr"><small>Valeur</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>