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()"
[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>

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 {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)

View File

@@ -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>

View File

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