feat(browse): recherche unifiée dossiers + APIs + fix icônes DSFR
- Recherche simultanée dans les dossiers (filtrage client-side) et les APIs (backend) via forkJoin — affiche dossiers en tuiles puis APIs en cartes, avec labels "Dossiers"/"APIs" si les deux ont des résultats - Loader instantané dès la frappe (avant le debounce 400ms) - Fix angular.json : ajout du mapping dist/icons/ → assets/dsfr/icons/ pour servir les SVG référencés par le CSS DSFR (tous les icônes étaient cassés car le chemin relatif ../../icons/ donnait 404) Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
@@ -14,6 +14,7 @@ import { ActivatedRoute } from '@angular/router';
|
||||
import { CategoryService } from '../../core/category.service';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem } from '@datacat/shared';
|
||||
import { forkJoin } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-browse',
|
||||
@@ -26,7 +27,7 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem
|
||||
<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>
|
||||
<a class="fr-breadcrumb__link" routerLink="/">Accueil</a>
|
||||
</li>
|
||||
@for (crumb of ancestors(); track crumb.id) {
|
||||
<li>
|
||||
@@ -55,7 +56,7 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem
|
||||
|
||||
<!-- Barre de recherche -->
|
||||
<div class="fr-search-bar fr-mb-3w">
|
||||
<label class="fr-label" for="search-api">Rechercher une API</label>
|
||||
<label class="fr-label" for="search-api">Rechercher</label>
|
||||
<input id="search-api" class="fr-input" type="search" placeholder="Titre, description..."
|
||||
[value]="searchQuery()"
|
||||
(input)="onSearchChange($any($event.target).value)" />
|
||||
@@ -77,7 +78,6 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem
|
||||
@if (!loading() && browseData()) {
|
||||
<!-- Sous-catégories -->
|
||||
@if (browseData()!.subcategories.length > 0) {
|
||||
<h2 class="fr-h4 fr-mb-3w">Catégories</h2>
|
||||
<div class="fr-grid-row fr-grid-row--gutters fr-mb-4w">
|
||||
@for (cat of browseData()!.subcategories; track cat.id) {
|
||||
<div class="fr-col-12 fr-col-md-4">
|
||||
@@ -115,7 +115,6 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem
|
||||
|
||||
<!-- APIs -->
|
||||
@if (browseData()!.apis.length > 0) {
|
||||
<h2 class="fr-h4 fr-mb-3w">APIs</h2>
|
||||
<div class="fr-grid-row fr-grid-row--gutters">
|
||||
@for (api of browseData()!.apis; track api.id) {
|
||||
<div class="fr-col-12 fr-col-md-4">
|
||||
@@ -154,39 +153,74 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem
|
||||
<p class="fr-callout__text">Chargement...</p>
|
||||
</div>
|
||||
}
|
||||
@if (!searchLoading() && searchResults().length === 0) {
|
||||
<p class="fr-text--lead">Aucune API trouvée pour « {{ searchQuery() }} »</p>
|
||||
}
|
||||
<div class="fr-grid-row fr-grid-row--gutters">
|
||||
@for (api of searchResults(); track api.id) {
|
||||
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
|
||||
<div class="fr-card fr-card--sm fr-enlarge-link">
|
||||
<div class="fr-card__body">
|
||||
<div class="fr-card__content">
|
||||
<h3 class="fr-card__title">
|
||||
<a [routerLink]="['/catalog', api.id]">{{ api.title }}</a>
|
||||
</h3>
|
||||
@if (api.description) {
|
||||
<p class="fr-card__desc">{{ api.description }}</p>
|
||||
}
|
||||
<div class="fr-badges-group fr-mt-1w">
|
||||
<span [class]="typeBadgeClass(api.type)">{{ api.type }}</span>
|
||||
<span [class]="statusBadgeClass(api.status)">{{ api.status }}</span>
|
||||
@if (!searchLoading()) {
|
||||
<!-- Dossiers -->
|
||||
@if (searchCategoryResults().length > 0) {
|
||||
@if (searchResults().length > 0) {
|
||||
<p class="fr-text--sm fr-text--bold fr-mb-2w">Dossiers</p>
|
||||
}
|
||||
<div class="fr-grid-row fr-grid-row--gutters fr-mb-4w">
|
||||
@for (cat of searchCategoryResults(); track cat.id) {
|
||||
<div class="fr-col-12 fr-col-md-4">
|
||||
<div class="fr-tile fr-enlarge-link fr-tile--sm">
|
||||
<div class="fr-tile__body">
|
||||
<div class="fr-tile__content">
|
||||
<h3 class="fr-tile__title">
|
||||
<a [routerLink]="['/browse', cat.id]">{{ cat.name }}</a>
|
||||
</h3>
|
||||
@if (cat.description) {
|
||||
<p class="fr-tile__desc">{{ cat.description }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@if (searchTotalPages() > 1) {
|
||||
<div class="fr-grid-row fr-grid-row--center fr-mt-4w">
|
||||
<button class="fr-btn fr-btn--secondary fr-btn--sm" [disabled]="searchPage() === 1"
|
||||
(click)="setSearchPage(searchPage() - 1)">Précédent</button>
|
||||
<span class="fr-mx-2w">Page {{ searchPage() }} / {{ searchTotalPages() }}</span>
|
||||
<button class="fr-btn fr-btn--secondary fr-btn--sm" [disabled]="searchPage() === searchTotalPages()"
|
||||
(click)="setSearchPage(searchPage() + 1)">Suivant</button>
|
||||
</div>
|
||||
|
||||
<!-- APIs -->
|
||||
@if (searchResults().length > 0) {
|
||||
@if (searchCategoryResults().length > 0) {
|
||||
<p class="fr-text--sm fr-text--bold fr-mb-2w">APIs</p>
|
||||
}
|
||||
<div class="fr-grid-row fr-grid-row--gutters">
|
||||
@for (api of searchResults(); track api.id) {
|
||||
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
|
||||
<div class="fr-card fr-card--sm fr-enlarge-link">
|
||||
<div class="fr-card__body">
|
||||
<div class="fr-card__content">
|
||||
<h3 class="fr-card__title">
|
||||
<a [routerLink]="['/catalog', api.id]">{{ api.title }}</a>
|
||||
</h3>
|
||||
@if (api.description) {
|
||||
<p class="fr-card__desc">{{ api.description }}</p>
|
||||
}
|
||||
<div class="fr-badges-group fr-mt-1w">
|
||||
<span [class]="typeBadgeClass(api.type)">{{ api.type }}</span>
|
||||
<span [class]="statusBadgeClass(api.status)">{{ api.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@if (searchTotalPages() > 1) {
|
||||
<div class="fr-grid-row fr-grid-row--center fr-mt-4w">
|
||||
<button class="fr-btn fr-btn--secondary fr-btn--sm" [disabled]="searchPage() === 1"
|
||||
(click)="setSearchPage(searchPage() - 1)">Précédent</button>
|
||||
<span class="fr-mx-2w">Page {{ searchPage() }} / {{ searchTotalPages() }}</span>
|
||||
<button class="fr-btn fr-btn--secondary fr-btn--sm" [disabled]="searchPage() === searchTotalPages()"
|
||||
(click)="setSearchPage(searchPage() + 1)">Suivant</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Aucun résultat -->
|
||||
@if (searchCategoryResults().length === 0 && searchResults().length === 0) {
|
||||
<p class="fr-text--lead">Aucun résultat pour « {{ searchQuery() }} »</p>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,6 +289,7 @@ export class BrowseComponent implements OnInit {
|
||||
/* Signaux recherche */
|
||||
searchQuery = signal('');
|
||||
searchResults = signal<ApiEntryListItem[]>([]);
|
||||
searchCategoryResults = signal<Category[]>([]);
|
||||
searchTotal = signal(0);
|
||||
searchPage = signal(1);
|
||||
searchLoading = signal(false);
|
||||
@@ -373,20 +408,32 @@ export class BrowseComponent implements OnInit {
|
||||
this.searchPage.set(1);
|
||||
if (this.searchDebounce) clearTimeout(this.searchDebounce);
|
||||
if (value.trim()) {
|
||||
this.searchLoading.set(true);
|
||||
this.searchDebounce = setTimeout(() => this.loadSearch(), 400);
|
||||
} else {
|
||||
this.searchLoading.set(false);
|
||||
this.searchCategoryResults.set([]);
|
||||
}
|
||||
}
|
||||
|
||||
loadSearch() {
|
||||
this.searchLoading.set(true);
|
||||
this.apiService.list({
|
||||
search: this.searchQuery(),
|
||||
page: this.searchPage(),
|
||||
limit: this.searchLimit,
|
||||
const q = this.searchQuery().trim().toLowerCase();
|
||||
|
||||
forkJoin({
|
||||
apis: this.apiService.list({ search: this.searchQuery(), page: this.searchPage(), limit: this.searchLimit }),
|
||||
categories: this.categoryService.list(),
|
||||
}).subscribe({
|
||||
next: (res) => {
|
||||
this.searchResults.set(res.items);
|
||||
this.searchTotal.set(res.total);
|
||||
next: ({ apis, categories }) => {
|
||||
this.searchResults.set(apis.items);
|
||||
this.searchTotal.set(apis.total);
|
||||
this.searchCategoryResults.set(
|
||||
categories.items.filter(
|
||||
(c) =>
|
||||
c.name.toLowerCase().includes(q) ||
|
||||
(c.description ?? '').toLowerCase().includes(q),
|
||||
),
|
||||
);
|
||||
this.searchLoading.set(false);
|
||||
},
|
||||
error: () => this.searchLoading.set(false),
|
||||
|
||||
Reference in New Issue
Block a user