feat: add user search in session dashboard AN-23419 (#553)

* feat: add user search in session dashboard AN-23419

* microcopy

src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.html

@@ -11,6 +11,19 @@
 <!--                          [dateFilter]="_exportDateFilter"></app-export-csv>-->
 <!--        </div>-->
 
+        <div class="kTableHeader">
+          <span class="kTableTitle">{{'app.entryEp.session.people' | translate}}</span>
+          <input type="text" pInputText class="kSearchInput"
+                 [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()">
+            <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>
+        </div>
+
         <p-table dataKey="name"
                  aria-label="Engagement Per User Table"
                  dataKey="user_id"
@@ -32,7 +45,7 @@
               </th>
             </tr>
 
-            <tr *ngIf="_tabsData?.length" class="kSummaryRow">
+            <tr *ngIf="_tableData?.length" class="kSummaryRow">
               <td [ngStyle]="{'width':'40px'}">
               <th [ngStyle]="{'width': '30%'}">
                 <span>{{'app.playlist.summary' | translate}}</span>

src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.scss

@@ -53,7 +53,44 @@
     color: $kGrayscale3;
   }
 }
-
+.kTableHeader {
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  position: relative;
+  .kTableTitle {
+    font-size: 20px;
+    font-weight: 700;
+    color: $kGrayscale1;
+  }
+  .closeIcon {
+    position: absolute;
+    right: 28px;
+    top: 20px;
+    cursor: pointer;
+    &.disable {
+      opacity: 0.3;
+      cursor: default;
+      pointer-events: none;
+    }
+    &:hover {
+      .close {
+        fill: $kGrayscale1;
+      }
+    }
+  }
+  .kSearchInput {
+    margin-left: auto;
+    background: $kMagnifyingGlassBkg;
+    width: 200px;
+    padding: 6px 32px 6px 32px;
+    border-radius: 4px;
+    border: 1px solid $kGrayscale3;
+    color: $kGrayscale1;
+    font-size: 15px;
+    font-weight: 400;
+  }
+}
 :host ::ng-deep .kRowExpansion {
   padding: 0 !important;
   text-align: center;

src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.ts

@@ -1,6 +1,6 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import { Tab } from 'shared/components/report-tabs/report-tabs.component';
-import { KalturaEndUserReportInputFilter, KalturaFilterPager, KalturaReportInterval, KalturaReportTable, KalturaReportTotal, KalturaReportType } from 'kaltura-ngx-client';
+import {KalturaClient, KalturaEndUserReportInputFilter, KalturaFilterPager, KalturaReportInterval, KalturaReportTable, KalturaReportTotal, KalturaReportType, KalturaUserFilter, UserListAction} from 'kaltura-ngx-client';
 import { AreaBlockerMessage } from '@kaltura-ng/kaltura-ui';
 import {AppAnalytics, AuthService, ButtonType, ErrorsManagerService, NavigationDrillDownService, ReportConfig, ReportService} from 'shared/services';
 import { switchMap } from 'rxjs/operators';
@@ -19,6 +19,7 @@ import { DateFilterUtils } from "shared/components/date-filter/date-filter-utils
 import { ExportItem } from "shared/components/export-csv/export-config-base.service";
 import { ExportConfig } from "./export.config";
 import { analyticsConfig } from "configuration/analytics-config";
+import {cancelOnDestroy} from "@kaltura-ng/kaltura-common";
 
 @Component({
   selector: 'app-ep-viewer-engagement',
@@ -31,7 +32,7 @@ import { analyticsConfig } from "configuration/analytics-config";
     ExportConfig
   ]
 })
-export class EpViewerEngagementComponent implements OnInit {
+export class EpViewerEngagementComponent implements OnInit, OnDestroy {
   @Input() entryIdIn = '';
   @Input() startDate: Date;
   @Input() actualStartDate: Date; // session actual start date
@@ -61,9 +62,12 @@ export class EpViewerEngagementComponent implements OnInit {
     searchInAdminTags: false
   });
 
+  public _peopleSearch = '';
+
   constructor(private _frameEventManager: FrameEventManagerService,
               private _reportService: ReportService,
               private _analytics: AppAnalytics,
+              private _kalturaClient: KalturaClient,
               private _errorsManager: ErrorsManagerService,
               _dataConfigService: ViewerEngagementConfig,
               private _authService: AuthService,
@@ -83,11 +87,11 @@ export class EpViewerEngagementComponent implements OnInit {
       endDay: null,
       startDay: null,
       compare: null
-    }
+    };
     this._loadReport();
   }
 
-  private _loadReport(sections = this._dataConfig): void {
+  private _loadReport(sections = this._dataConfig, userIds = ''): void {
     this._isBusy = true;
     this._blockerMessage = null;
 
@@ -96,11 +100,17 @@ export class EpViewerEngagementComponent implements OnInit {
     this._filter.fromDate = Math.floor(this.startDate.getTime() / 1000);
     this._filter.toDate = Math.floor(this.endDate.getTime() / 1000);
     this._filter.interval = KalturaReportInterval.days;
+    if (userIds.length > 0) {
+      this._filter.userIds = userIds;
+    } else {
+      delete this._filter.userIds;
+    }
+
     const reportConfig: ReportConfig = { reportType: this._reportType, filter: this._filter, pager: this._pager, order: this._order };
 
     this._reportService.getReport(reportConfig, sections)
       .pipe(switchMap(report => {
-        return ObservableOf({ report, compare: null })
+        return ObservableOf({ report, compare: null });
       }))
       .subscribe(({ report, compare }) => {
           this._tableData = [];
@@ -204,4 +214,41 @@ export class EpViewerEngagementComponent implements OnInit {
       this._analytics.trackButtonClickEvent(ButtonType.Expand, 'Events_session_expand_user');
     }
   }
+
+  public _onSearch(): void {
+    if (this._peopleSearch.length) {
+      this._isBusy = true;
+      this._kalturaClient.request(new UserListAction({
+        pager: new KalturaFilterPager({pageSize: 500, pageIndex: 0}),
+        filter: new KalturaUserFilter({
+          firstNameOrLastNameStartsWith: this._peopleSearch
+        })
+      }))
+        .pipe(cancelOnDestroy(this))
+        .subscribe(response => {
+            if (response?.objects?.length) {
+              const userIds = response.objects.map(user => user.id).join(analyticsConfig.valueSeparator);
+              this._loadReport({ table: this._dataConfig[ReportDataSection.table] }, userIds);
+            } else {
+              this._loadReport({ table: this._dataConfig[ReportDataSection.table] }, this._peopleSearch + Math.random()); // make sure no users will be found
+            }
+          },
+          error => {
+            this._isBusy = false;
+            const actions = {
+              'close': () => {
+                this._blockerMessage = null;
+              },
+              'retry': () => {
+                this._onSearch();
+              },
+            };
+            this._blockerMessage = this._errorsManager.getErrorMessage(error, actions);
+          });
+    } else {
+      this._loadReport();
+    }
+  }
+
+  ngOnDestroy(): void {}
 }

src/assets/i18n/en.json

@@ -586,6 +586,8 @@
         "count_reaction_clicked": "Reactions",
         "count_raise_hand_clicked": "Raised hands",
         "combined_live_engaged_users_play_time_ratio": "Live engagement rate",
+        "people": "Attendees",
+        "search": "Search attendees",
         "heatMap": {
           "engaged": "Engaged",
           "notEngaged": "Not Engaged",