demovote-frontend/src/app/composants/production-create/production-create.component.html

<app-menu></app-menu>
<div id="main">
<form #formRef="ngForm" (ngSubmit)="addProduction()" class="needs-validation">
	<div class="card shadow center">
		<div class="card-header"><span i18n>Fiche d'une production</span></div>
		<div class="card-header shadow-sm">
			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
		</div>
		<div class="card-body">

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Type</span></label>
				<div class="col-sm-8">
					<div class="form-group field-separate">
						<select class="form-select form-select-sm" id="type" name="type" [(ngModel)]="production.type">
							@for (type of types; track type.key) { <option [value]="type.key">{{ type.value }}</option> }
						</select>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Titre</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="titre" name="titre" [(ngModel)]="production.titre" #titreRef="ngModel" required [class.is-invalid]="titreRef.invalid && titreRef.touched">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Auteur(s)</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="auteurs" name="auteurs" [(ngModel)]="production.auteurs" #auteursRef="ngModel" required [class.is-invalid]="auteursRef.invalid && auteursRef.touched">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Groupe(s)</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="groupes" name="groupes" [(ngModel)]="production.groupes">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Plateforme</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="plateforme" name="plateforme" [(ngModel)]="production.plateforme">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Commentaire</span></label>
				<div class="col-sm-8">
					<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="production.commentaire"></textarea>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Informations privées</span></label>
				<div class="col-sm-8">
					<textarea class="form-control form-control-sm field-separate" id="informationsPrivees" name="informationsPrivees" [(ngModel)]="production.informationsPrivees"></textarea>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Gestionnaire</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
				<div class="col-sm-8">
					<div class="form-group">
						<select class="form-select form-select-sm field-separate" id="numeroParticipant" name="numeroParticipant" [(ngModel)]="production.numeroParticipant" required>
				    @for (participant of participants; track participant.numeroParticipant) {
							<option [ngValue]="participant.numeroParticipant">{{ participant.pseudonyme }} = {{ participant.nom }}&nbsp;{{ participant.prenom }}</option>
				    }
						</select>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Archive</span></label>
				<div class="col-sm-8">
					<input type="file" class="form-control form-control-sm field-separate" id="archive" name="archive" accept="application/zip" (change)="onArchiveSelected($event)">
					<div class="form-text field-separate"><span i18n>La taille de l'archive est limitée à 1 Go.</span></div>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Vignette</span></label>
				<div class="col-sm-8">
					<input type="file" class="form-control form-control-sm field-separate" id="vignette" name="vignette" accept="image/png, image/gif, image/jpeg" (change)="onVignetteSelected($event)">
				</div>
			</div>

		</div>
		<div class="card-footer hstack">
			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" #boutonUploader type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
			<div #messageUpload class="form-text" style="padding-left:7px;"></div>
			<div #messageErreur class="form-text ms-auto text-danger" style="padding-right:7px;"></div>
		</div>
	</div>
</form>
</div>