fix: updates user search UX AN-23431

kaltura · Dec 24, 2024 · f93458c · f93458c
1 parent ffb018a
commit f93458c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.html b/src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.html
@@ -17,11 +17,20 @@
                  [placeholder]="'app.entryEp.session.search' | translate"
                  (keyup.enter)="_onSearch()"
                  [(ngModel)]="_peopleSearch">
-          <div class="closeIcon" [class.disable]="_peopleSearch.length < 3" *ngIf="_peopleSearch.length > 0" (click)="_peopleSearch = ''; _onSearch()">
+          <div class="closeIcon" [class.disable]="_peopleSearch.length < 3" *ngIf="_peopleSearch.length > 0" (click)="_peopleSearch = ''; _loadReport()">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M13.364 11.9497L17.6066 16.1924C17.9971 16.5829 17.9971 17.2161 17.6066 17.6066C17.2161 17.9971 16.5829 17.9971 16.1924 17.6066L11.9497 13.364L7.70711 17.6066C7.31658 17.9971 6.68342 17.9971 6.29289 17.6066C5.90237 17.2161 5.90237 16.5829 6.29289 16.1924L10.5355 11.9497L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L11.9497 10.5355L16.1924 6.29289C16.5829 5.90237 17.2161 5.90237 17.6066 6.29289C17.9971 6.68342 17.9971 7.31658 17.6066 7.70711L13.364 11.9497Z" fill="#878787" class="close"/>
             </svg>
           </div>
+          <svg *ngIf="_peopleSearch.length < 3" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H28C29.933 0.5 31.5 2.067 31.5 4V28C31.5 29.933 29.933 31.5 28 31.5H4C2.067 31.5 0.5 29.933 0.5 28V4Z" stroke="#BDBDBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 8C11.134 8 8 11.134 8 15C8 18.866 11.134 22 15 22C16.5759 22 18.0302 21.4792 19.2001 20.6004C19.2281 20.6376 19.259 20.6733 19.2929 20.7071L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L20.7071 19.2929C20.6733 19.259 20.6376 19.2281 20.6004 19.2001C21.4792 18.0302 22 16.5759 22 15C22 11.134 18.866 8 15 8ZM10 15C10 12.2386 12.2386 10 15 10C17.7614 10 20 12.2386 20 15C20 17.7614 17.7614 20 15 20C12.2386 20 10 17.7614 10 15Z" fill="#BDBDBD"/>
+          </svg>
+          <svg *ngIf="_peopleSearch.length > 2" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="searchIcon" (click)="_onSearch()">
+            <path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="#006EFA"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 8C11.134 8 8 11.134 8 15C8 18.866 11.134 22 15 22C16.5759 22 18.0302 21.4792 19.2001 20.6004C19.2281 20.6376 19.259 20.6733 19.2929 20.7071L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L20.7071 19.2929C20.6733 19.259 20.6376 19.2281 20.6004 19.2001C21.4792 18.0302 22 16.5759 22 15C22 11.134 18.866 8 15 8ZM10 15C10 12.2386 12.2386 10 15 10C17.7614 10 20 12.2386 20 15C20 17.7614 17.7614 20 15 20C12.2386 20 10 17.7614 10 15Z" fill="white"/>
+          </svg>
+
         </div>
 
         <p-table dataKey="name"

diff --git a/src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.scss b/src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.scss
@@ -63,9 +63,12 @@
     font-weight: 700;
     color: $kGrayscale1;
   }
+  .searchIcon {
+    cursor: pointer;
+  }
   .closeIcon {
     position: absolute;
-    right: 28px;
+    right: 68px;
     top: 20px;
     cursor: pointer;
     &.disable {
@@ -81,9 +84,10 @@
   }
   .kSearchInput {
     margin-left: auto;
+    margin-right: 8px;
     background: $kMagnifyingGlassBkg;
     width: 200px;
-    padding: 6px 32px 6px 32px;
+    padding: 6px 32px 7px 32px;
     border-radius: 4px;
     border: 1px solid $kGrayscale3;
     color: $kGrayscale1;

diff --git a/src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.ts b/src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.ts
@@ -94,7 +94,7 @@ export class EpViewerEngagementComponent implements OnInit, OnDestroy {
     this._loadReport();
   }
 
-  private _loadReport(sections = this._dataConfig, userIds = ''): void {
+  public _loadReport(sections = this._dataConfig, userIds = ''): void {
     this._isBusy = true;
     this._blockerMessage = null;
 
@@ -219,7 +219,7 @@ export class EpViewerEngagementComponent implements OnInit, OnDestroy {
   }
 
   public _onSearch(): void {
-    if (this._peopleSearch.length) {
+    if (this._peopleSearch.length > 2) {
       this._isBusy = true;
       this._kalturaClient.request(new UserListAction({
         pager: new KalturaFilterPager({pageSize: 500, pageIndex: 0}),
@@ -248,8 +248,6 @@ export class EpViewerEngagementComponent implements OnInit, OnDestroy {
             };
             this._blockerMessage = this._errorsManager.getErrorMessage(error, actions);
           });
-    } else {
-      this._loadReport();
     }
   }