From a82c52c491009fbf61be67c53b1c851c7f1c3d23 Mon Sep 17 00:00:00 2001 From: z3n Date: Tue, 9 Jun 2026 09:41:10 +0000 Subject: [PATCH] feat(browse): fusion Parcourir + Catalogue en une seule page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Barre de recherche intégrée dans BrowseComponent - Mode navigation (tuiles) si recherche vide, mode liste (cartes) si texte - Debounce 400ms + pagination pour les résultats de recherche - Suppression de l'entrée "Catalogue" du menu de navigation - Redirection /catalog → /browse (vieux liens toujours fonctionnels) Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude Co-Authored-By: Happy --- front-public/src/app/app.component.ts | 10 - front-public/src/app/app.routes.ts | 4 +- .../src/app/pages/browse/browse.component.ts | 217 +++++++++++++----- 3 files changed, 159 insertions(+), 72 deletions(-) diff --git a/front-public/src/app/app.component.ts b/front-public/src/app/app.component.ts index 3f28bbd..22399e2 100644 --- a/front-public/src/app/app.component.ts +++ b/front-public/src/app/app.component.ts @@ -40,16 +40,6 @@ import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'; Parcourir -
  • - - Catalogue - -
    • diff --git a/front-public/src/app/app.routes.ts b/front-public/src/app/app.routes.ts index 6ebe992..5bdfc7c 100644 --- a/front-public/src/app/app.routes.ts +++ b/front-public/src/app/app.routes.ts @@ -18,8 +18,8 @@ export const routes: Routes = [ }, { path: 'catalog', - loadComponent: () => - import('./pages/catalog/catalog.component').then((m) => m.CatalogComponent), + redirectTo: 'browse', + pathMatch: 'full', }, { path: 'catalog/:id', diff --git a/front-public/src/app/pages/browse/browse.component.ts b/front-public/src/app/pages/browse/browse.component.ts index 4094a97..374d207 100644 --- a/front-public/src/app/pages/browse/browse.component.ts +++ b/front-public/src/app/pages/browse/browse.component.ts @@ -12,7 +12,8 @@ import { CommonModule } from '@angular/common'; import { RouterLink } from '@angular/router'; import { ActivatedRoute } from '@angular/router'; import { CategoryService } from '../../core/category.service'; -import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/shared'; +import { ApiService } from '../../core/api.service'; +import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem } from '@datacat/shared'; @Component({ selector: 'app-browse', @@ -52,6 +53,14 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s + +
    + + +
    + @if (loading()) {

    Chargement...

    @@ -64,76 +73,119 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s
    } - @if (!loading() && browseData()) { - - @if (browseData()!.subcategories.length > 0) { -

    Catégories

    -
    - @for (cat of browseData()!.subcategories; track cat.id) { -
    -
    -
    -
    -

    - {{ cat.name }} -

    - @if (cat.description) { -

    {{ cat.description }}

    - } -

    - {{ cat.subcategoryCount }} sous-catégorie(s) · {{ cat.apiCount }} API(s) -

    -
    - - @if (cat.apiCount === 0 && cat.subcategoryCount === 0) { - + @if (!isSearchMode()) { + @if (!loading() && browseData()) { + + @if (browseData()!.subcategories.length > 0) { +

    Catégories

    +
    + @for (cat of browseData()!.subcategories; track cat.id) { +
    +
    +
    +
    +

    + {{ cat.name }} +

    + @if (cat.description) { +

    {{ cat.description }}

    } +

    + {{ cat.subcategoryCount }} sous-catégorie(s) · {{ cat.apiCount }} API(s) +

    +
    + + @if (cat.apiCount === 0 && cat.subcategoryCount === 0) { + + } +
    -
    - } + } +
    + } + + + @if (browseData()!.apis.length > 0) { +

    APIs

    +
    + @for (api of browseData()!.apis; track api.id) { +
    +
    +
    +
    +

    + {{ api.title }} +

    + @if (api.description) { +

    {{ api.description }}

    + } +

    + {{ api.type }} +   + {{ api.status }} +

    +
    +
    +
    +
    + } +
    + } + + @if (browseData()!.subcategories.length === 0 && browseData()!.apis.length === 0) { +
    +

    Aucun contenu dans cette catégorie.

    +
    + } + } + } @else { + + @if (searchLoading()) { +
    +

    Chargement...

    } - - - @if (browseData()!.apis.length > 0) { -

    APIs

    -
    - @for (api of browseData()!.apis; track api.id) { -
    -
    -
    -
    -

    - {{ api.title }} -

    - @if (api.description) { -

    {{ api.description }}

    - } -

    - {{ api.type }} -   - {{ api.status }} -

    + @if (!searchLoading() && searchResults().length === 0) { +

    Aucune API trouvée pour « {{ searchQuery() }} »

    + } +
    + @for (api of searchResults(); track api.id) { +
    +
    +
    +
    +

    + {{ api.title }} +

    + @if (api.description) { +

    {{ api.description }}

    + } +
    + {{ api.type }} + {{ api.status }}
    - } -
    - } - - @if (browseData()!.subcategories.length === 0 && browseData()!.apis.length === 0) { -
    -

    Aucun contenu dans cette catégorie.

    +
    + } +
    + @if (searchTotalPages() > 1) { +
    + + Page {{ searchPage() }} / {{ searchTotalPages() }} +
    } } @@ -192,6 +244,7 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s export class BrowseComponent implements OnInit { private route = inject(ActivatedRoute); private categoryService = inject(CategoryService); + private apiService = inject(ApiService); private destroyRef = inject(DestroyRef); browseData = signal(null); @@ -199,6 +252,19 @@ export class BrowseComponent implements OnInit { error = signal(null); categoryId = signal(null); + /* Signaux recherche */ + searchQuery = signal(''); + searchResults = signal([]); + searchTotal = signal(0); + searchPage = signal(1); + searchLoading = signal(false); + readonly searchLimit = 12; + + isSearchMode = computed(() => this.searchQuery().trim().length > 0); + searchTotalPages = computed(() => Math.ceil(this.searchTotal() / this.searchLimit)); + + private searchDebounce: ReturnType | null = null; + /* Signaux pour la modale */ showFormModal = signal(false); formMode = signal<'create' | 'edit'>('create'); @@ -302,6 +368,37 @@ export class BrowseComponent implements OnInit { }); } + onSearchChange(value: string) { + this.searchQuery.set(value); + this.searchPage.set(1); + if (this.searchDebounce) clearTimeout(this.searchDebounce); + if (value.trim()) { + this.searchDebounce = setTimeout(() => this.loadSearch(), 400); + } + } + + loadSearch() { + this.searchLoading.set(true); + this.apiService.list({ + search: this.searchQuery(), + page: this.searchPage(), + limit: this.searchLimit, + }).subscribe({ + next: (res) => { + this.searchResults.set(res.items); + this.searchTotal.set(res.total); + this.searchLoading.set(false); + }, + error: () => this.searchLoading.set(false), + }); + } + + setSearchPage(p: number) { + if (p < 1 || p > this.searchTotalPages()) return; + this.searchPage.set(p); + this.loadSearch(); + } + typeBadgeClass(type: string): string { return type === 'ASYNCAPI' ? 'fr-badge fr-badge--sm fr-badge--purple-glycine'