lmnp-organizer/frontend/src/app/components/lease-clause-editor/lease-clause-editor.html

<section class="clause-editor" aria-labelledby="clause-editor-heading">
	<div class="section-heading">
		<span>04</span>
		<div>
			<h2 id="clause-editor-heading">Clauses particulières</h2>
			<p>Sélectionnez une clause proposée ou rédigez une clause personnalisée.</p>
		</div>
	</div>

	@if (loading()) {
		<div class="local-loading" role="status">
			<mat-spinner diameter="24" aria-hidden="true" /> Chargement des clauses…
		</div>
	} @else if (loadError()) {
		<div class="alert-error local-error" role="alert">
			<span>{{ loadError() }}</span>
			<button mat-button type="button" (click)="retry()">Réessayer</button>
		</div>
	} @else {
		<div class="catalog-clauses">
			@for (definition of definitions(); track definition.id) {
				<article class="catalog-clause">
					<mat-checkbox
						[checked]="isSelected(definition.id)"
						(change)="toggleCatalog(definition.id, $event.checked)"
						[attr.data-clause-invalid]="catalogError(definition.id) ? 'true' : null"
					>
						{{ definition.label }}
					</mat-checkbox>
					<p>{{ definition.description }}</p>
					@if (catalogError(definition.id)) {
						<p class="alert-error" data-clause-invalid="true" tabindex="-1">
							{{ catalogError(definition.id) }}
						</p>
					}

					@if (isSelected(definition.id) && definition.parameters.length) {
						<div class="parameter-grid">
							@for (parameter of definition.parameters; track parameter.name) {
								<mat-form-field
									appearance="outline"
									[attr.data-clause-invalid]="
										parameterErrorFor(definition.id, parameter) ? 'true' : null
									"
								>
									<mat-label>{{ parameter.label }}</mat-label>
									@switch (parameter.type) {
										@case ('CHOICE') {
											<mat-select
												[required]="parameter.required"
												[value]="
													parameterValue(definition.id, parameter.name)
												"
												(selectionChange)="
													setParameter(
														definition.id,
														parameter.name,
														$event.value
													)
												"
											>
												@for (
													choice of parameter.choices;
													track choice.value
												) {
													<mat-option [value]="choice.value">{{
														choice.label
													}}</mat-option>
												}
											</mat-select>
										}
										@case ('NUMBER') {
											<input
												matInput
												type="number"
												[required]="parameter.required"
												[value]="
													parameterValue(definition.id, parameter.name)
												"
												(input)="
													setParameterFromEvent(
														definition.id,
														parameter.name,
														$event
													)
												"
											/>
										}
										@case ('DATE') {
											<input
												matInput
												type="date"
												[required]="parameter.required"
												[value]="
													parameterValue(definition.id, parameter.name)
												"
												(input)="
													setParameterFromEvent(
														definition.id,
														parameter.name,
														$event
													)
												"
											/>
										}
										@case ('TIME') {
											<input
												matInput
												type="time"
												[required]="parameter.required"
												[value]="
													parameterValue(definition.id, parameter.name)
												"
												(input)="
													setParameterFromEvent(
														definition.id,
														parameter.name,
														$event
													)
												"
											/>
										}
										@default {
											<input
												matInput
												type="text"
												[required]="parameter.required"
												[value]="
													parameterValue(definition.id, parameter.name)
												"
												(input)="
													setParameterFromEvent(
														definition.id,
														parameter.name,
														$event
													)
												"
											/>
										}
									}
									@if (parameterErrorFor(definition.id, parameter)) {
										<mat-error>{{
											parameterErrorFor(definition.id, parameter)
										}}</mat-error>
									}
								</mat-form-field>
							}
						</div>
					}
				</article>
			} @empty {
				<p class="empty-catalog">Aucune clause proposée pour ce type de bail.</p>
			}
		</div>
	}

	@for (item of unavailableCatalogClauses(); track item.index) {
		@if (!loading()) {
			<div class="unavailable-clause alert-error">
				<span>La clause « {{ item.clause.catalogId }} » n'est plus disponible.</span>
				<button mat-button type="button" (click)="removeClause(item.index)">Retirer</button>
			</div>
		}
	}

	<div class="custom-clauses">
		@for (item of customClauses(); track item.index) {
			<div class="custom-clause">
				<mat-form-field
					appearance="outline"
					[attr.data-clause-invalid]="customClauseError(item.index, item.clause) ? 'true' : null"
				>
					<mat-label>Clause personnalisée {{ $index + 1 }}</mat-label>
					<textarea
						matInput
						rows="3"
						required
						[value]="item.clause.customText"
						(input)="updateCustomClauseFromEvent(item.index, $event)"
					></textarea>
					@if (customClauseError(item.index, item.clause)) {
						<mat-error>{{ customClauseError(item.index, item.clause) }}</mat-error>
					}
				</mat-form-field>
				<button mat-button type="button" (click)="removeClause(item.index)">Retirer</button>
			</div>
		}
		<button mat-stroked-button type="button" (click)="addCustomClause()">
			Ajouter une clause personnalisée
		</button>
	</div>

	@if (showValidationError() && validationMessage()) {
		<div class="alert-error validation-error" role="alert">{{ validationMessage() }}</div>
	}
</section>