169. Search user list - My Implementation (#22)
This commit is contained in:
@ -37,7 +37,8 @@
|
||||
<div class="mb-3 float-end">
|
||||
<div class="btn-group mr-2">
|
||||
<form class="form-inline my-2 my-lg-0 justify-content-center">
|
||||
<input name="searchFileName" class="form-control mr-sm-2" type="search" placeholder="Search users...">
|
||||
<input name="searchFileName" #searchTerm class="form-control mr-sm-2" type="search" placeholder="Search users..."
|
||||
(keyup)="searchUsers(searchTerm.value)">
|
||||
</form>
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addUserModal">
|
||||
<i class="fa fa-plus"></i>New User
|
||||
@ -186,7 +187,7 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<form #newUserForm="ngForm" (ngSubmit)="onAddNewUser(newUserForm)" >
|
||||
<form #newUserForm="ngForm" (ngSubmit)="onAddNewUser(newUserForm)">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" name="firstName" required ngModel class="form-control">
|
||||
@ -247,7 +248,9 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="new-user-close">Close</button>
|
||||
<button type="button" class="btn btn-primary" (click)="saveNewUser()" [disabled]="newUserForm.invalid">Save changes</button>
|
||||
<button type="button" class="btn btn-primary" (click)="saveNewUser()" [disabled]="newUserForm.invalid">Save
|
||||
changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -103,6 +103,28 @@ export class UserComponent implements OnInit, OnDestroy {
|
||||
this.clickButton('new-user-save');
|
||||
}
|
||||
|
||||
public searchUsers(searchTerm: string): void {
|
||||
|
||||
if (!searchTerm) {
|
||||
this.users = this.userService.getUsersFromLocalStorage();
|
||||
return;
|
||||
}
|
||||
|
||||
const matchUsers: User[] = [];
|
||||
searchTerm = searchTerm.toLowerCase();
|
||||
for (const user of this.userService.getUsersFromLocalStorage()) {
|
||||
if (user.username.toLowerCase().includes(searchTerm)
|
||||
|| user.userId.toLowerCase().includes(searchTerm)
|
||||
|| user.firstName.toLowerCase().includes(searchTerm)
|
||||
|| user.lastName.toLowerCase().includes(searchTerm)
|
||||
|| user.email.toLowerCase().includes(searchTerm)) {
|
||||
matchUsers.push(user);
|
||||
}
|
||||
}
|
||||
this.users = matchUsers;
|
||||
|
||||
}
|
||||
|
||||
private clickButton(buttonId: string): void {
|
||||
document.getElementById(buttonId)?.click();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user