front: composant <app-breadcrumb> mutualisé (dédup markup DSFR)

Extrait le fil d'Ariane DSFR dupliqué dans browse/api-detail/upload vers un
composant présentationnel piloté par une liste d'items. Chaque page construit
ses items (computed pour browse/api-detail, statique pour upload).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
z3n
2026-06-28 21:17:18 +00:00
parent 15e05cc46c
commit f64efda8a3
4 changed files with 71 additions and 48 deletions

View File

@@ -13,23 +13,17 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
import { Router, RouterLink, ActivatedRoute } from '@angular/router';
import { ApiService } from '../../core/api.service';
import { CategoryService } from '../../core/category.service';
import { BreadcrumbComponent, BreadcrumbItem } from '../../shared/breadcrumb/breadcrumb.component';
import { ApiEntry, ApiEntryListItem, Category, API_CONVENTION_LABELS, ApiConvention } from '@datacat/shared';
@Component({
selector: 'app-upload',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink],
imports: [CommonModule, ReactiveFormsModule, RouterLink, BreadcrumbComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="fr-container fr-mt-4w fr-mb-4w">
<!-- Fil d'Ariane -->
<nav class="fr-breadcrumb fr-mb-3w" aria-label="vous êtes ici">
<ol class="fr-breadcrumb__list">
<li><a class="fr-breadcrumb__link" routerLink="/browse">Parcourir</a></li>
<li><a class="fr-breadcrumb__link" routerLink="/catalog">Catalogue</a></li>
<li><a class="fr-breadcrumb__link" aria-current="page">Importer une API</a></li>
</ol>
</nav>
<app-breadcrumb [items]="breadcrumbItems" />
<h1 class="fr-h2 fr-mb-4w">Importer une API</h1>
@@ -511,6 +505,12 @@ export class UploadComponent implements OnInit {
private destroyRef = inject(DestroyRef);
step = signal(1);
readonly breadcrumbItems: BreadcrumbItem[] = [
{ label: 'Parcourir', link: '/browse' },
{ label: 'Catalogue', link: '/catalog' },
{ label: 'Importer une API' },
];
private readonly maxFileSize = 5 * 1024 * 1024; // 5 Mo
selectedFiles = signal<File[]>([]);
detectedType = signal<'ASYNCAPI' | 'OPENAPI' | null>(null);