Issue #SB-00000 fix: Merge release-4.10.2into release-4.10.3

src/app/client/angular.json

@@ -101,47 +101,47 @@
               "node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js",
               "node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js",
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/transition.min.js",
                 "bundleName": "semanticDropdown"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/dropdown.min.js",
                 "bundleName": "semanticDropdown"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/transition.min.js",
                 "bundleName": "semanticModal"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/dimmer.min.js",
                 "bundleName": "semanticModal"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/modal.min.js",
                 "bundleName": "semanticModal"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/transition.min.js",
                 "bundleName": "semanticTreePicker"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/dimmer.min.js",
                 "bundleName": "semanticTreePicker"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui/modal.min.js",
                 "bundleName": "semanticTreePicker"
               },
               {
-                "inject": true,
+                "inject": false,
                 "input": "src/assets/libs/semantic-ui-tree-picker/semantic-ui-tree-picker.js",
                 "bundleName": "semanticTreePicker"
               }

src/app/client/package.json

@@ -115,7 +115,7 @@
     "lodash-es": "^4.17.15",
     "marked": "1.1.1",
     "md5": "2.2.1",
-    "moment": "2.24.0",
+    "moment": "2.29.1",
     "moment-duration-format": "2.3.2",
     "ng-recaptcha": "^5.0.0",
     "ng-svg-editor": "0.0.24",
@@ -163,6 +163,6 @@
     "typescript": "~4.0.8"
   },
   "resolutions": {
-    "moment": "2.24.0"
+    "moment": "2.29.1"
   }
 }

src/app/client/src/app/app.component.ts

@@ -206,14 +206,19 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.setTagManager();
     this.userService.userData$.subscribe((user: IUserData) => {
-        if (user.err) {
-          return throwError(user.err);
-        }
-        // If User is logged in and dob is missing, initiate consent workflow
-        if (!_.get(user, 'userProfile.dob') && this.userService.loggedIn) {
-          this.router.navigate(['/signup'], { queryParams: { loginMode: 'gmail' } });
-        }
-      });
+      if (user.err) {
+        return throwError(user.err);
+      }
+      // If User is logged in and dob is missing, initiate consent workflow
+      // Skip for managed users
+      // Skip for SSO users
+      if (!_.get(user, 'userProfile.dob') &&
+        (this.userService.loggedIn && !_.get(user, 'userProfile.managedBy')) &&
+        (_.isArray(user, 'userProfile.externalIds') && _.get(user, 'userProfile.externalIds').length === 0)
+      ) {
+        this.router.navigate(['/signup'], { queryParams: { loginMode: 'gmail' } });
+      }
+    });
   }
 
   setTagManager() {

src/app/client/src/app/modules/learn/components/batch/create-batch/create-batch.component.html

@@ -139,25 +139,46 @@
           </div>
           <div class="sb-field-group mb-8">
             <label>{{resourceService?.frmelmnts?.lbl?.batchmentors}}</label>
-            <div class="createbatchdropdown ui fluid multiple search selection dropdown" id="mentors"
-              ng-class="batch.isUserSearch === 1 ? 'loading' : undefined">
-              <input id="mentorSelList" aria-label="mentor list">
-              <i class="dropdown icon"></i>
-              <div class="default text">{{resourceService?.frmelmnts?.intxt?.t0005}}</div>
-              <div class="menu">
-                <div class="item" [attr.data-value]="mentor.id" *ngFor="let mentor of mentorList">
+            <mat-form-field appearance="fill" class="sb-mat__dropdown w-100 mb-16">
+              <mat-select formControlName="mentors" role="listbox" multiple aria-label="mentor list"
+                class="selection" (selectionChange)="selectedMultiValues($event, 'mentors')">
+                <mat-select-trigger>
+                  <span>{{selectedMentorList ? selectedMentorList[0] : ''}} </span>
+                  <span *ngIf="selectedMentorList?.length >= 2" class="example-additional-selection">
+                    (+{{selectedMentorList.length - 1}} {{selectedMentorList?.length === 2 ? 'other' : 'others'}})
+                  </span>
+                </mat-select-trigger>
+                <mat-option class="mat-dropdown__options" role="option" *ngFor="let mentor of mentorList" [value]="mentor.id"
+                attr.aria-label="{{mentor.name}}">
                   <img class="ui mini avatar image"
-                    src="{{mentor.avatar || 'assets/images/user_logo.png' | cdnprefixurl}}" alt="avatar image">
+                      src="{{mentor.avatar || 'assets/images/user_logo.png' | cdnprefixurl}}" alt="avatar image">
                   {{mentor.name}}{{mentor.otherDetail}}
-                </div>
-              </div>
-            </div>
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
           </div>
 
           <div class="sb-field-group " *ngIf="createBatchForm.value.enrollmentType !== 'open'">
             <label>{{resourceService?.frmelmnts?.lbl?.bacthmembers}}</label>
-            <div class="createbatchdropdown ui fluid multiple search selection dropdown" id="participants"
-              ng-class="batch.isUserSearch === 1 ? 'loading' : undefined">
+            <mat-form-field appearance="fill" class="sb-mat__dropdown w-100 mb-16">
+              <mat-select formControlName="users" role="listbox" multiple aria-label="participant list"
+                class="selection" (selectionChange)="selectedMultiValues($event, 'participant')">
+                <mat-select-trigger>
+                  <span>{{selectedParticipantList ? selectedParticipantList[0] : ''}} </span>
+                  <span *ngIf="selectedParticipantList?.length >= 2" class="example-additional-selection">
+                    (+{{selectedParticipantList.length - 1}} {{selectedParticipantList?.length === 2 ? 'other' : 'others'}})
+                  </span>
+                </mat-select-trigger>
+                <mat-option class="mat-dropdown__options" role="option" *ngFor="let participant of participantList" [value]="participant.id"
+                attr.aria-label="{{participant.name}}">
+                  <img class="ui mini avatar image"
+                      src="{{mentor.avatar || 'assets/images/user_logo.png' | cdnprefixurl}}" alt="avatar image">
+                  {{participant.name}}{{participant.otherDetail}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <div class="createbatchdropdown ui fluid multiple search selection dropdown" id="participants">
               <input id="userSelList">
               <i class="dropdown icon"></i>
               <div class="default text">{{resourceService?.frmelmnts?.intxt?.t0006}}</div>

src/app/client/src/app/modules/learn/components/batch/create-batch/create-batch.component.ts

@@ -100,6 +100,8 @@ export class CreateBatchComponent implements OnInit, OnDestroy, AfterViewInit {
   private discussionCsService: any;
   createForumRequest: any;
   showDiscussionForum: string;
+  selectedMentorList: Array<any> = []
+  selectedParticipantList: Array<any> = []
 
   /**
 	 * Constructor to create injected service(s) object
@@ -154,10 +156,9 @@ export class CreateBatchComponent implements OnInit, OnDestroy, AfterViewInit {
         if (data.courseDetails.createdBy === this.userService.userid) {
           this.courseCreator = true;
         }
-        const userList = this.sortUsers(data.userDetails);
-        this.participantList = userList.participantList;
-        this.mentorList = userList.mentorList;
-        this.initDropDown();
+        // const userList = this.sortUsers(data.userDetails);
+        // this.participantList = userList.participantList;
+        // this.mentorList = userList.mentorList;
       }, (err) => {
         if (err.error && err.error?.params?.errmsg) {
           this.toasterService.error(err.error.params.errmsg);
@@ -166,16 +167,44 @@ export class CreateBatchComponent implements OnInit, OnDestroy, AfterViewInit {
         }
         this.redirect();
       });
+    this.courseBatchService.getUserList({ filters: { 'status': '1' } })
+      .subscribe((res) => {
+        const list = this.sortUsers(res);
+        this.mentorList = list?.mentorList;
+        this.participantList = list?.participantList;
+      }, (err) => {
+        if (err?.error && err?.error?.params?.errmsg) {
+          this.toasterService.error(err.error.params.errmsg);
+        } else {
+          this.toasterService.error(this.resourceService.messages.fmsg.m0056);
+        }
+      });
+  }
+
+  selectedMultiValues(event, field) {
+    const selectedValue = event.value;
+    this.selectedMentorList = []
+    this.selectedParticipantList = []
+    if(selectedValue.length) {
+      selectedValue.forEach(userID => {
+        const user = this.mentorList.find(item => item.id === userID)
+        if (field === 'mentors') {
+          this.selectedMentorList.push(`${user.name}${user.otherDetail}`)
+        } else {
+          this.selectedParticipantList.push(`${user.name}${user.otherDetail}`)
+        }
+      });
+    }
   }
 
   private fetchBatchDetails() {
     const requestBody = {
       filters: {'status': '1'},
     };
     return combineLatest(
-      this.courseBatchService.getUserList(requestBody),
+      // this.courseBatchService.getUserList(requestBody),
       this.courseConsumptionService.getCourseHierarchy(this.courseId),
-      (userDetails, courseDetails) => ({ userDetails, courseDetails })
+      (courseDetails) => ({ courseDetails })
     );
   }
   /**
@@ -229,12 +258,8 @@ export class CreateBatchComponent implements OnInit, OnDestroy, AfterViewInit {
 
   public createBatch() {
     this.disableSubmitBtn = true;
-    let participants = [];
-    let mentors = [];
-    mentors = $('#mentors').dropdown('get value') ? $('#mentors').dropdown('get value').split(',') : [];
-    if (this.createBatchForm.value.enrollmentType !== 'open') {
-      participants = $('#participants').dropdown('get value') ? $('#participants').dropdown('get value').split(',') : [];
-    }
+    let participants =  this.createBatchForm.value.users || [];
+    let mentors = this.createBatchForm.value.mentors || [];
     const startDate = dayjs(this.createBatchForm.value.startDate).format('YYYY-MM-DD');
     const endDate = this.createBatchForm.value.endDate && dayjs(this.createBatchForm.value.endDate).format('YYYY-MM-DD');
     const requestBody = {
@@ -318,63 +343,7 @@ export class CreateBatchComponent implements OnInit, OnDestroy, AfterViewInit {
       return ' (' + userData.maskedPhone + ')';
     }
   }
-  private initDropDown() {
-    this.lazzyLoadScriptService.loadScript('semanticDropdown.js').subscribe(() => {
-      $('#participants').dropdown({
-        forceSelection: false,
-        fullTextSearch: true,
-        onAdd: () => {
-        }
-      });
-      $('#mentors').dropdown({
-        fullTextSearch: true,
-        forceSelection: false,
-        onAdd: () => {
-        }
-      });
-      $('#participants input.search').on('keyup', (e) => {
-        this.getUserListWithQuery($('#participants input.search').val(), 'participant');
-      });
-      $('#mentors input.search').on('keyup', (e) => {
-        this.getUserListWithQuery($('#mentors input.search').val(), 'mentor');
-      });
-    });
-  }
-  private getUserListWithQuery(query, type) {
-    if (this.userSearchTime) {
-      clearTimeout(this.userSearchTime);
-    }
-    this.userSearchTime = setTimeout(() => {
-      this.getUserList(query, type);
-    }, 1000);
-  }
-  /**
-  *  api call to get user list
-  */
-  private getUserList(query: string = '', type) {
-    this.selectedParticipants = $('#participants').dropdown('get value') ? $('#participants').dropdown('get value').split(',') : [];
-    this.selectedMentors = $('#mentors').dropdown('get value') ? $('#mentors').dropdown('get value').split(',') : [];
-    const requestBody = {
-      filters: {'status': '1'},
-      query: query
-    };
-    this.courseBatchService.getUserList(requestBody).pipe(takeUntil(this.unsubscribe))
-      .subscribe((res) => {
-        const list = this.sortUsers(res);
-        if (type === 'participant') {
-          this.participantList = list.participantList;
-        } else {
-          this.mentorList = list.mentorList;
-        }
-      },
-        (err) => {
-          if (err.error && err.error.params.errmsg) {
-            this.toasterService.error(err.error.params.errmsg);
-          } else {
-            this.toasterService.error(this.resourceService.messages.fmsg.m0056);
-          }
-        });
-  }
+
   ngAfterViewInit () {
     setTimeout(() => {
       this.telemetryImpression = {