Merge pull request #212 from BinaryStudioAcademy/improvemnt/20-leadbo…

…ard-search-field added searching by userName on leadboard
BinaryStudioAcademy · Sep 29, 2023 · 973ae45 · 973ae45
2 parents cba26fb + 2fdb74e
commit 973ae45
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 0 deletions.
diff --git a/backend/LeetWars.Core/LeetWars.Core.BLL/Services/UserService.cs b/backend/LeetWars.Core/LeetWars.Core.BLL/Services/UserService.cs
@@ -198,6 +198,11 @@ public async Task<List<UserDto>> GetLeaderBoardAsync(LeaderBoardPageSettingsDto
     {
         var query = _context.Users.OrderByDescending(u => u.TotalScore).AsQueryable();
 
+        if(page.UserName is not null)
+        {
+            query = query.Where(u => u.UserName.ToLower().Contains(page.UserName.ToLower()));
+        }
+
         if (page.HasFriends)
         {
             var currentUser = await GetUserInfoWithFriends(u => u.Uid == _userGetter.CurrentUserId);

diff --git a/backend/LeetWars.Core/LeetWars.Core.Common/DTO/Filters/LeaderBoardPageSettingsDto.cs b/backend/LeetWars.Core/LeetWars.Core.Common/DTO/Filters/LeaderBoardPageSettingsDto.cs
@@ -3,5 +3,7 @@
     public class LeaderBoardPageSettingsDto : PageSettingsDto
     {
         public bool HasFriends { get; set; }
+
+        public string? UserName { get; set; }
     }
 }
diff --git a/frontend/src/app/modules/leader/leader-board/leader-board.component.html b/frontend/src/app/modules/leader/leader-board/leader-board.component.html
@@ -1,5 +1,11 @@
 <div class="wrapper">
     <div class="board-wrapper">
+        <div class="settings mb-3">
+        <div class="search-container">
+            <app-custom-input [Identifier]="'search'" [Width]="'100%'" [Height]="'100%'" [InputPlaceholder]="'User Name'"
+             (InputValueChange)="onSearchTextChange($event)"></app-custom-input>
+             <fa-icon [icon]="'search'" size="lg" class="search-filter-icon"></fa-icon>
+        </div>
         <div class="form-check form-switch">
             <input
                 class="form-check-input"
@@ -9,6 +15,7 @@
                 id="flexSwitchCheckChecked" />
             <label class="form-check-label" for="flexSwitchCheckChecked">My friends</label>
         </div>
+    </div>
         <div class="board">
             <div class="header d-flex">
                 <div class="position">Position</div>

diff --git a/frontend/src/app/modules/leader/leader-board/leader-board.component.sass b/frontend/src/app/modules/leader/leader-board/leader-board.component.sass
@@ -25,6 +25,32 @@
     @media (max-width: $small)
         padding: 15px
 
+.settings
+    display: flex
+    align-items: center
+
+.search-container
+    position: relative
+    width: 400px
+    padding-right: 5px
+
+.search-filter
+    font-family: Open Sans
+    font-weight: 600
+    border: $light-lavender-grey 2px solid
+    border-radius: 7px
+    height: 45px
+    padding: 13px 20px
+    text-align: left
+    background: inherit
+    color: $white
+    &-icon
+        position: absolute
+        top: 10px
+        right: 14px
+        color: $white
+        cursor: pointer
+
 .header
     gap: 16px
     border-bottom: 2px solid $green
@@ -136,6 +162,10 @@
 .in-battle
     color: $light-red
 
+.form-check
+    margin-left: auto
+
+
 .form-check-input
     cursor: pointer
 

diff --git a/frontend/src/app/modules/leader/leader-board/leader-board.component.ts b/frontend/src/app/modules/leader/leader-board/leader-board.component.ts
@@ -107,6 +107,11 @@ export class LeaderBoardComponent extends ScrollComponent implements OnInit {
         this.router.navigate(['/user/profile', id as number]);
     }
 
+    onSearchTextChange(value: string) {
+        this.page.userName = value.trim();
+        this.resetUsersData();
+    }
+
     startCodeFight(user: IUser) {
         if (this.isCurrentUserAbleToCodeFight()) {
             this.openModal(user);
@@ -159,6 +164,13 @@ export class LeaderBoardComponent extends ScrollComponent implements OnInit {
         this.getUsers();
     }
 
+    private resetUsersData() {
+        this.users = [];
+        this.page.pageNumber = 0;
+        this.isLastPage = false;
+        this.getUsers();
+    }
+
     private getFriendshipStatus(user: IUser): FriendshipStatus | undefined {
         return this.currentUser?.friendships?.find((f) => f.friendId === user.id)?.friendshipStatus;
     }

diff --git a/frontend/src/app/shared/models/leaderboard-page-settings.ts b/frontend/src/app/shared/models/leaderboard-page-settings.ts
@@ -2,4 +2,5 @@ import { IPageSettings } from './page-settings';
 
 export interface ILeaderBoardPageSettings extends IPageSettings {
     hasFriends: boolean;
+    userName?: string;
 }