demovote-frontend/src/app/categorie-update/categorie-update.component.html

<form id="formVariable" #formRef="ngForm" class="needs-validation">
<div class="card shadow">
	<div class="card-header">Fiche d'une catégorie</div>
	<div class="card-header shadow-sm">
		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
	</div>
	<div class="card-body">

		<div class="form-group row">
			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
			<div class="col-sm-10">
				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" [(ngModel)]="categorie.dateCreation" name="dateCreation" disabled>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
			<div class="col-sm-10">
				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" [(ngModel)]="categorie.dateModification" name="dateModification" disabled>
			</div>
		</div>

  	<div class="form-group row">
 	  	<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Libellé&nbsp;<sup><span class="text-danger">*</span></sup></label>
			<div class="col-sm-10">
				<input type="text" class="form-control form-control-sm field-separate" id="libelle" [(ngModel)]="categorie.libelle" name="libelle" #libelleRef="ngModel" required [class.is-invalid]="libelleRef.invalid && libelleRef.touched">
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
			<div class="col-sm-10">
				<input type="number" min="0" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre">
			</div>
		</div>

		<div class="form-group row">
			<div class="col-sm-2"></div>
			<div class="col-sm-10">
				<div class="form-check form-switch">
					<input class="form-check-input field-separate" type="checkbox" id="available" name="available" [(ngModel)]="categorie.available"> 
					<label class="form-check-label" for="available">Disponible</label>
				</div>
			</div>
		</div>

		<div class="form-group row">
			<div class="col-sm-2"></div>
			<div class="col-sm-10">
				<div class="form-check form-switch">
					<input class="form-check-input field-separate" type="checkbox" id="uploadable" name="uploadable" [(ngModel)]="categorie.uploadable"> 
					<label class="form-check-label" for="uploadable">Téléversable</label>
				</div>
			</div>
		</div>

		<div class="form-group row">
			<div class="col-sm-2"></div>
			<div class="col-sm-10">
				<div class="form-check form-switch">
					<input class="form-check-input field-separate" type="checkbox" id="pollable" name="pollable" [(ngModel)]="categorie.pollable"> 
					<label class="form-check-label" for="pollable">Vote ouvert</label>
				</div>
			</div>
		</div>

		<div class="form-group row">
			<div class="col-sm-2"></div>
			<div class="col-sm-10">
				<div class="form-check form-switch">
					<input class="form-check-input field-separate" type="checkbox" id="computed" name="computed" [(ngModel)]="categorie.computed"> 
					<label class="form-check-label" for="computed">Vote calculé</label>
				</div>
			</div>
		</div>

		<div class="form-group row">
			<div class="col-sm-2"></div>
			<div class="col-sm-10">
				<div class="form-check form-switch">
					<input class="form-check-input field-separate" type="checkbox" id="displayable" name="displayable" [(ngModel)]="categorie.displayable"> 
					<label class="form-check-label" for="displayable">Vote publié</label>
				</div>
			</div>
		</div>

	</div>
	<div class="card-footer">
			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
	</div>
</div>
</form>

<div class="modal fade" id="modalModifier" tabindex="-1" aria-labelledby="modalModifierTitre" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modalModifierTitre">Modification</h5>
			</div>
			<div class="modal-body">Actualiser cet enregistrement ?</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
				<button type="button" class="btn btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modalEffacer" tabindex="-1" aria-labelledby="modalEffacerTitre" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title text-danger" id="modalEffacerTitre">Suppression</h5>
			</div>
			<div class="modal-body">Effacer cet enregistrement ?</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
			</div>
		</div>
	</div>
</div>