From 8d98a01c22e9ab1885f9fbdc0c55cf8e73180c55 Mon Sep 17 00:00:00 2001
From: Enzo <enzonorguet@icloud.com>
Date: Thu, 11 Dec 2025 17:14:23 +0100
Subject: [PATCH] update searchbar on supplier and stock

---
 src/app/components/search/search.html         |  6 +++---
 src/app/components/search/search.ts           | 14 ++++++--------
 .../components/stock-table/stock-table.html   |  4 ++--
 src/app/components/stock-table/stock-table.ts | 18 +++++++++++++++++-
 .../supplier-table/supplier-table.html        |  6 +++---
 .../supplier-table/supplier-table.ts          | 19 ++++++++++++++++++-
 src/app/components/user-table/user-table.ts   |  3 +++
 src/app/pages/stock/stock.html                |  3 ++-
 src/app/pages/stock/stock.ts                  |  3 +++
 src/app/pages/supplier/supplier.html          |  3 +--
 src/app/pages/supplier/supplier.ts            |  4 ++++
 11 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/app/components/search/search.html b/src/app/components/search/search.html
index 592bbb8..22e4ccb 100644
--- a/src/app/components/search/search.html
+++ b/src/app/components/search/search.html
@@ -1,9 +1,9 @@
-<form nz-form nzLayout="horizontal" [formGroup]="searchForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="searchForm">
     <nz-form-item nz-flex>
         <nz-form-control nzSpan="12">
             <div class="group">
-                <nz-icon nzType="search" nzTheme="outline" class="mr-2 text-xl"></nz-icon>
-                <input class="input" placeholder="Rechercher" formControlName="searchValue"/>
+                <nz-icon nzType="search" nzTheme="outline" class="mr-2 text-xl" (click)="OnSearch()"></nz-icon>
+                <input class="input" placeholder="Rechercher" formControlName="searchValue" (input)="OnSearch()"/>
             </div>
         </nz-form-control>
     </nz-form-item>
diff --git a/src/app/components/search/search.ts b/src/app/components/search/search.ts
index 138e854..fb6cf6d 100644
--- a/src/app/components/search/search.ts
+++ b/src/app/components/search/search.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, output } from '@angular/core';
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzColDirective} from "ng-zorro-antd/grid";
 import {NzFlexDirective} from "ng-zorro-antd/flex";
@@ -24,14 +24,12 @@ export class Search {
         searchValue: new FormControl<string>(null)
     })
 
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.searchForm.invalid) return;
+    searchEvent = output<string>();
 
-        // Pour obtenir la valeur du formulaire
-        console.log(this.searchForm.getRawValue())
+    OnSearch(): void {
+        const raw = this.searchForm.controls['searchValue'].value ?? '';
+        const value = String(raw).trim();
+        this.searchEvent.emit(value);
 
-        // Pour vider le formulaire
-        this.searchForm.reset()
     }
 }
diff --git a/src/app/components/stock-table/stock-table.html b/src/app/components/stock-table/stock-table.html
index b2f26e2..b96cbf4 100644
--- a/src/app/components/stock-table/stock-table.html
+++ b/src/app/components/stock-table/stock-table.html
@@ -1,5 +1,5 @@
 <nz-table
-    [nzData]="products()"
+    [nzData]="filteredProducts()"
     [nzFrontPagination]="false"
     [nzLoading]="productsLoading()"
     (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
@@ -27,7 +27,7 @@
     </thead>
 
     <tbody class="text-center">
-        @for (product of products(); track product.id) {
+        @for (product of filteredProducts(); track product.id) {
             <tr>
                 <td nzWidth="40px">
                     <label
diff --git a/src/app/components/stock-table/stock-table.ts b/src/app/components/stock-table/stock-table.ts
index d774470..bf92965 100644
--- a/src/app/components/stock-table/stock-table.ts
+++ b/src/app/components/stock-table/stock-table.ts
@@ -1,4 +1,4 @@
-import {Component, inject, OnInit, output, signal, viewChild} from '@angular/core';
+import {Component, computed, inject, OnInit, output, signal, viewChild} from '@angular/core';
 import {NzTableComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
 import {ModalNav} from "../modal-nav/modal-nav";
 import {NzIconDirective} from "ng-zorro-antd/icon";
@@ -45,6 +45,22 @@ export class StockTable implements OnInit {
     selectionChange = output<boolean>()
     currentPageData: GetProductDto[] = [];
 
+    private searchQuery = signal<string>('');
+
+    filteredProducts = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+
+        if (!q) return this.products();
+
+        return this.products().filter(s => {
+            const name = (s.name ?? '').toLowerCase();
+            return name.includes(q);
+        });
+    });
+
+    applySearch(query: string) {
+        this.searchQuery.set(query);
+    }
     get hasSelection(): boolean {
         return this.setOfCheckedId.size > 0;
     }
diff --git a/src/app/components/supplier-table/supplier-table.html b/src/app/components/supplier-table/supplier-table.html
index 8c6c89b..526060e 100644
--- a/src/app/components/supplier-table/supplier-table.html
+++ b/src/app/components/supplier-table/supplier-table.html
@@ -1,4 +1,4 @@
-<nz-table [nzData]="suppliers()"
+<nz-table [nzData]="filteredSuppliers()"
           [nzLoading]="suppliersLoading()"
           [nzFrontPagination]="false">
     <thead>
@@ -15,7 +15,7 @@
     </tr>
     </thead>
     <tbody style="text-align: center">
-        @for (supplier of suppliers(); track supplier.id) {
+        @for (supplier of filteredSuppliers(); track supplier.id) {
             <tr>
                 <td>{{ supplier.name }}</td>
                 <td>{{ supplier.phone }}</td>
@@ -26,7 +26,7 @@
                 <td>{{ supplier.deliveryDelay }} jours</td>
                 <td>
                     <app-modal-button type="link" [name]="'Voir les produits'" size="45%">
-                        <nz-table [nzData]="suppliers()" [nzFrontPagination]="false">
+                        <nz-table [nzData]="filteredSuppliers()" [nzFrontPagination]="false">
                             <thead>
                             <tr class="text-center">
                                 <th>Produit</th>
diff --git a/src/app/components/supplier-table/supplier-table.ts b/src/app/components/supplier-table/supplier-table.ts
index 8db396e..fbf55ca 100644
--- a/src/app/components/supplier-table/supplier-table.ts
+++ b/src/app/components/supplier-table/supplier-table.ts
@@ -1,4 +1,4 @@
-import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {Component, computed, inject, OnInit, signal, viewChild} from '@angular/core';
 import {ModalNav} from "../modal-nav/modal-nav";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {NzIconDirective} from "ng-zorro-antd/icon";
@@ -42,6 +42,23 @@ export class SupplierTable implements OnInit {
         await this.fetchSuppliers();
     }
 
+    private searchQuery = signal<string>('');
+
+    filteredSuppliers = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+
+        if (!q) return this.suppliers();
+
+        return this.suppliers().filter(s => {
+            const name = (s.name ?? '').toLowerCase();
+            return name.includes(q);
+        });
+    });
+
+    applySearch(query: string) {
+        this.searchQuery.set(query);
+    }
+
     async fetchSuppliers() {
         this.suppliersLoading.set(true);
         try {
diff --git a/src/app/components/user-table/user-table.ts b/src/app/components/user-table/user-table.ts
index 82b0c8c..4c24792 100644
--- a/src/app/components/user-table/user-table.ts
+++ b/src/app/components/user-table/user-table.ts
@@ -105,4 +105,7 @@ export class UserTable implements OnInit {
     onModalCancel(modal: ModalNav) {
         modal.isVisible = false;
     }
+    filterUser(input: string, option: any) {
+        return option.nzLabel.toLowerCase().includes(input.toLowerCase());
+    }
 }
diff --git a/src/app/pages/stock/stock.html b/src/app/pages/stock/stock.html
index 11d2f0b..da6cbda 100644
--- a/src/app/pages/stock/stock.html
+++ b/src/app/pages/stock/stock.html
@@ -10,7 +10,8 @@
     }
 
     <div class="ml-95 w-150">
-        <app-search class="w-full"></app-search>
+        <app-search (searchEvent)="onProductSearch($event)"></app-search>
+
     </div>
 </div>
 
diff --git a/src/app/pages/stock/stock.ts b/src/app/pages/stock/stock.ts
index 5fbebf5..fb14314 100644
--- a/src/app/pages/stock/stock.ts
+++ b/src/app/pages/stock/stock.ts
@@ -29,6 +29,9 @@ export class Stock {
     private productsService = inject(ProductsService);
     private notificationService = inject(NzNotificationService)
 
+    onProductSearch(query: string) {
+        this.productTable().applySearch(query);
+    }
     // async onModalOk() {
     //     await this.addSupplier()
     //     this.createSupplier().supplierForm.reset();
diff --git a/src/app/pages/supplier/supplier.html b/src/app/pages/supplier/supplier.html
index bcfdf42..08475ce 100644
--- a/src/app/pages/supplier/supplier.html
+++ b/src/app/pages/supplier/supplier.html
@@ -8,9 +8,8 @@
 
         <app-supplier-form #supplierForm></app-supplier-form>
     </app-modal-button>
-
     <div class="ml-95 w-150">
-        <app-search></app-search>
+        <app-search (searchEvent)="onSupplierSearch($event)"></app-search>
     </div>
 </div>
 
diff --git a/src/app/pages/supplier/supplier.ts b/src/app/pages/supplier/supplier.ts
index 5cbe79d..858ddd8 100644
--- a/src/app/pages/supplier/supplier.ts
+++ b/src/app/pages/supplier/supplier.ts
@@ -36,6 +36,10 @@ export class Supplier {
         this.modal().isVisible = false;
     }
 
+    onSupplierSearch(query: string) {
+        this.supplierTable().applySearch(query);
+    }
+
     async addSupplier() {
         if (this.createSupplier().supplierForm.invalid)
         {