update searchbar on supplier and stock

This commit is contained in:
Enzo
2025-12-11 17:50:00 +01:00
parent dfaea894e4
commit 6c33b3eaf6
4 changed files with 24 additions and 4 deletions

View File

@@ -1,4 +1,4 @@
<nz-table [nzData]="users()" <nz-table [nzData]="filteredUsers()"
[nzLoading]="usersLoading()" [nzLoading]="usersLoading()"
[nzFrontPagination]="false" [nzFrontPagination]="false"
class="mr-7"> class="mr-7">
@@ -11,7 +11,7 @@
</tr> </tr>
</thead> </thead>
<tbody class="text-center"> <tbody class="text-center">
@for (user of users(); track user.id) { @for (user of filteredUsers(); track user.id) {
<tr> <tr>
<td>{{user.name}}</td> <td>{{user.name}}</td>
<td>{{user.email}}</td> <td>{{user.email}}</td>

View File

@@ -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 {ModalNav} from "../modal-nav/modal-nav";
import {NzIconDirective} from "ng-zorro-antd/icon"; import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table"; import {NzTableComponent} from "ng-zorro-antd/table";
@@ -32,6 +32,22 @@ export class UserTable implements OnInit {
await this.fetchUsers(); 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() { async fetchUsers() {
this.usersLoading.set(true) this.usersLoading.set(true)

View File

@@ -9,7 +9,8 @@
</app-modal-button> </app-modal-button>
<div class="ml-95 w-150"> <div class="ml-95 w-150">
<app-search></app-search> <app-search (searchEvent)="onUserSearch($event)"></app-search>
</div> </div>
</div> </div>

View File

@@ -32,6 +32,9 @@ export class User {
await this.usersTable().fetchUsers() await this.usersTable().fetchUsers()
} }
onUserSearch(query: string) {
this.usersTable().applySearch(query);
}
onModalCancel() { onModalCancel() {
this.modal().isVisible = false; this.modal().isVisible = false;
} }