update searchbar on supplier and stock
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user