169. Search user list - My Implementation (#22)

This commit is contained in:
Art
2021-09-21 16:46:16 +03:00
parent 8c60c2b1e9
commit 7beb017f98
2 changed files with 28 additions and 3 deletions

View File

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

View File

@ -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();
}