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

---
 src/app/components/user-table/user-table.html |  4 ++--
 src/app/components/user-table/user-table.ts   | 18 +++++++++++++++++-
 src/app/pages/user/user.html                  |  3 ++-
 src/app/pages/user/user.ts                    |  3 +++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/app/components/user-table/user-table.html b/src/app/components/user-table/user-table.html
index 074759b..8caf57f 100644
--- a/src/app/components/user-table/user-table.html
+++ b/src/app/components/user-table/user-table.html
@@ -1,4 +1,4 @@
-<nz-table [nzData]="users()"
+<nz-table [nzData]="filteredUsers()"
           [nzLoading]="usersLoading()"
           [nzFrontPagination]="false"
           class="mr-7">
@@ -11,7 +11,7 @@
     </tr>
     </thead>
     <tbody class="text-center">
-        @for (user of users(); track user.id) {
+        @for (user of filteredUsers(); track user.id) {
             <tr>
                 <td>{{user.name}}</td>
                 <td>{{user.email}}</td>
diff --git a/src/app/components/user-table/user-table.ts b/src/app/components/user-table/user-table.ts
index 4c24792..ae6be34 100644
--- a/src/app/components/user-table/user-table.ts
+++ b/src/app/components/user-table/user-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 {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzTableComponent} from "ng-zorro-antd/table";
@@ -32,6 +32,22 @@ export class UserTable implements OnInit {
         await this.fetchUsers();
     }
 
+    private searchQuery = signal<string>('');
+
+    filteredUsers = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+
+        if (!q) return this.users();
+
+        return this.users().filter(s => {
+            const name = (s.name ?? '').toLowerCase();
+            return name.includes(q);
+        });
+    });
+
+    applySearch(query: string) {
+        this.searchQuery.set(query);
+    }
     async fetchUsers() {
         this.usersLoading.set(true)
 
diff --git a/src/app/pages/user/user.html b/src/app/pages/user/user.html
index 7fadb44..6d2586f 100644
--- a/src/app/pages/user/user.html
+++ b/src/app/pages/user/user.html
@@ -9,7 +9,8 @@
     </app-modal-button>
 
     <div class="ml-95 w-150">
-        <app-search></app-search>
+        <app-search (searchEvent)="onUserSearch($event)"></app-search>
+
     </div>
 </div>
 
diff --git a/src/app/pages/user/user.ts b/src/app/pages/user/user.ts
index 9e09149..5ef6f3b 100644
--- a/src/app/pages/user/user.ts
+++ b/src/app/pages/user/user.ts
@@ -32,6 +32,9 @@ export class User {
         await this.usersTable().fetchUsers()
     }
 
+    onUserSearch(query: string) {
+        this.usersTable().applySearch(query);
+    }
     onModalCancel() {
         this.modal().isVisible = false;
     }