LoreMind/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.html

@if (fields.length) {
  <div class="dff">
    @for (f of fields; track trackByName($index, f)) {
      <div class="dff-field">
        <label>{{ f.name }}</label>
        @switch (f.type) {
          @case ('TEXT') {
            <textarea
              rows="4"
              [ngModel]="values[f.name] || ''"
              (ngModelChange)="onTextChange(f, $event)"
              [name]="'val-' + f.name"
              [placeholder]="'dynamicFieldsForm.textPlaceholder' | translate:{ name: f.name }">
            </textarea>
          }
          @case ('NUMBER') {
            <input
              type="number"
              [ngModel]="values[f.name] || ''"
              (ngModelChange)="onTextChange(f, $event)"
              [name]="'val-' + f.name"
              placeholder="0"
              />
          }
          @case ('IMAGE') {
            <app-image-gallery
              [editable]="true"
              [layout]="f.layout || 'GALLERY'"
              [imageIds]="imagesFor(f)"
              (imageIdsChange)="onImageIdsChange(f, $event)">
            </app-image-gallery>
          }
          <!-- KEY_VALUE_LIST : grille d'inputs avec labels figes du template -->
          @case ('KEY_VALUE_LIST') {
            <div class="dff-kv-grid">
              @for (lbl of f.labels; track trackByLabel($index, lbl)) {
                <div class="dff-kv-cell">
                  <span class="dff-kv-label">{{ lbl }}</span>
                  <input
                    type="text"
                    [ngModel]="kvValue(f, lbl)"
                    (ngModelChange)="onKvChange(f, lbl, $event)"
                    [name]="'kv-' + f.name + '-' + lbl"
                    placeholder="—"
                    />
                </div>
              }
              @if (!f.labels?.length) {
                <div class="dff-kv-empty">
                  {{ 'dynamicFieldsForm.noLabels' | translate }}
                </div>
              }
            </div>
          }
        }
      </div>
    }
  </div>
} @else {
  <div class="dff-empty">
    {{ 'dynamicFieldsForm.noFields' | translate }}
  </div>
}