feat: finalize lease documents and IRL revisions

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

@@ -0,0 +1,131 @@
+<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)"
+          >
+            {{ definition.label }}
+          </mat-checkbox>
+          <p>{{ definition.description }}</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">
+                  <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)"
+                      />
+                    }
+                  }
+                </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">
+          <mat-label>Clause personnalisée {{ $index + 1 }}</mat-label>
+          <textarea
+            matInput
+            rows="3"
+            required
+            [value]="item.clause.customText"
+            (input)="updateCustomClauseFromEvent(item.index, $event)"
+          ></textarea>
+        </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>