Merge pull request #100 from KB-iGOT/cbrelease-4.8.16.2

Cbrelease 4.8.16.2

library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html

@@ -10,7 +10,7 @@
                         </ng-container>
                         <ng-container *ngIf="!skeletonLoader">
                             <div class="text-sm font-semibold cursor-pointer truncate-3">{{ content?.name }}</div>
-                            <div class="text-xs font-light">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?
+                            <div class="text-xs font-light" *ngIf="content?.completedOn">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?
                                 (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>
                         </ng-container>
                     </div>

project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html

@@ -173,11 +173,11 @@
                 <div class="flex flex-col gap-1" *ngIf="scrolled">
                 <div class="text-xl leading-6 text-white font-bold text-scrol-custom">{{ handleCapitalize(extContentReadData?.name) }}
                 </div>
-                <div class="text-sm source-text font-semibold break-words" #contentSource [ngClass]="{'sourceEllipsis': sourceEllipsis}" title="{{content?.source}}">
+                <!-- <div class="text-sm source-text font-semibold break-words" #contentSource [ngClass]="{'sourceEllipsis': sourceEllipsis}" title="{{content?.source}}">
                     {{ 'cardcontentv2.by' | translate }} 
                     <span *ngIf="extContentReadData?.contentPartner?.contentPartnerName">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>
                     <span *ngIf="!extContentReadData?.contentPartner?.contentPartnerName">{{ 'common.karmayogiBharat' | translate }}</span>
-                </div>
+                </div> -->
                 </div>
             </div>
             </div>

project/ws/app/src/lib/routes/profile-v2/components/transfer-request/transfer-request.component.html

@@ -4,22 +4,35 @@
     <form class="flex flex-col gap-4" [formGroup]="transferRequestForm">
         <div class="flex flex-col">
             <div class="text-sm font-bold required">{{ 'profileInfo.organization' | translate }}</div>
-            <mat-form-field class="profile-form-field">
-                <mat-select formControlName="organization">
+            <mat-form-field class="profile-form-field mat-drop-down-select">
+                <!-- <mat-select formControlName="organization">
                     <span class="search-box-span">
                         <input (keyup)="searchOrg($event.target.value)" class="dept-seach-input" placeholder="Search organization">
                     </span>
                     
                     <mat-option value="" disabled>{{ 'profileInfo.chooseOrganization' | translate }}</mat-option>
                     <mat-option *ngFor="let dept of departmentData" value="{{ dept }}">{{ dept }}</mat-option>
-                </mat-select>
-            </mat-form-field>
+                </mat-select> -->
+                <div class="flex flex-row auto-complete-row">
+                    <input type="text" class="input-text" matInput formControlName="organization"
+                        [matAutocomplete]="departmentAuto">
+                    <mat-icon>arrow_drop_down</mat-icon>
+                </div>
+                <mat-autocomplete class="mat-autocomplete" #departmentAuto="matAutocomplete">
+                    <mat-option *ngFor="let dept of deptFilterData" value="{{ dept }}">{{ dept }}</mat-option>    
+                </mat-autocomplete>
+                <mat-error *ngIf="transferRequestForm.controls['organization'].invalid && transferRequestForm.controls['organization'].touched"
+                class="mat-error">
+                    Please enter a valid organization.  
+                  </mat-error>
+            </mat-form-field>   
         </div>
+
 
         <ng-container *ngIf="otherDetails">
             <div class="flex flex-col">
                 <div class="text-sm font-bold required">{{ 'profileInfo.group' | translate }}</div>
-                <mat-form-field class="profile-form-field">
+                <mat-form-field class="profile-form-field mat-drop-down-select">
                     <mat-select formControlName="group">
                         <mat-option value="" disabled>{{ 'profileInfo.chooseAGroup' | translate }}</mat-option>
                         <mat-option *ngFor="let group of data?.groupData" value="{{group}}">{{ group }}</mat-option>
@@ -30,10 +43,22 @@
             <div class="flex flex-col">
                 <div class="text-sm font-bold required">{{ 'profileInfo.designation' | translate }}</div>
                 <mat-form-field class="profile-form-field">
-                    <mat-select formControlName="designation">
+                    <!-- <mat-select formControlName="designation">
                         <mat-option value="" disabled>{{ 'profileInfo.chooseADesignation' | translate }}</mat-option>
                         <mat-option *ngFor="let designation of data?.designationsMeta" value="{{ designation?.name }}">{{ designation?.name }}</mat-option>
-                    </mat-select>
+                    </mat-select> -->
+                    <div class="flex flex-row auto-complete-row">
+                        <input type="text" class="input-text" matInput formControlName="designation"
+                            [matAutocomplete]="designationAuto">
+                        <mat-icon>arrow_drop_down</mat-icon>
+                    </div>
+                    <mat-autocomplete class="mat-autocomplete" #designationAuto="matAutocomplete">
+                        <mat-option *ngFor="let designation of designationData" value="{{ designation?.name }}">{{ designation?.name }}</mat-option>
+                    </mat-autocomplete>
+                    <mat-error *ngIf="transferRequestForm.controls['designation'].invalid && transferRequestForm.controls['designation'].touched"
+                        class="mat-error">
+                        Please enter a valid designation.
+                      </mat-error>
                 </mat-form-field>
             </div>
         </ng-container>
@@ -45,7 +70,9 @@
 
         <div class="flex flex-row justify-between mt-2">
             <button class="outline-button" (click)="handleCloseModal()">{{ 'profileInfo.cancel' | translate }}</button>
-            <button class="save-button" [disabled]="transferRequestForm?.invalid || (transferRequestForm.get('organization')?.value === data.portalProfile.employmentDetails.departmentName)" [ngClass]="{'disable-button': transferRequestForm?.invalid || (transferRequestForm.get('organization')?.value === data.portalProfile.employmentDetails.departmentName)}" (click)="handleSubmitRequest()">{{ 'profileInfo.submitRequest' | translate }}</button>
+            <button class="save-button" [disabled]="transferRequestForm?.invalid || 
+            isInValidOrgSelection" [ngClass]="{'disable-button': transferRequestForm?.invalid ||
+            isInValidOrgSelection}" (click)="handleSubmitRequest()">{{ 'profileInfo.submitRequest' | translate }}</button>
         </div>
     </form>
 </div>

project/ws/app/src/lib/routes/profile-v2/components/transfer-request/transfer-request.component.scss

@@ -1,3 +1,4 @@
+$border-color: rgba($color: #000000, $alpha: 0.16);
 .info-div {
     background-color: #EBEBEB;
     border: 1px solid #00000014;
@@ -13,6 +14,27 @@
         color: #212121;
     }
 }
+.mat-select-panel-wrap {
+    margin-top: 100px;
+}
+.mat-select-panel {
+    margin-top: 100px!important;
+}
+.mat-select-trigger {
+    display: flex;
+    align-items: center;
+  }
+ .autocomplete-box{
+    padding: 1px 16px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: 4px;
+    width: calc(100% - 36px);
+    background-color: #fff;
+    margin-top: 8px;
+ }
+ .mat-autocomplete-panel {
+    width:  calc(100% - 36px)!important; 
+  }
 
 .profile-form-field {
     .mat-select {
@@ -32,14 +54,39 @@ required::after {
 }
 .search-box-span {
     padding: 4px 0px 0px 0px;
-    position: fixed;
+    position: absolute;
     top: 0;
     display: block;
     width: 100%;
     box-sizing: border-box;
     background-color: #fff;
     z-index: 9;
 }
+.mat-error {
+  margin-top: 8px;
+}
+.mat-select-panel.custom-select-panel {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mat-option.search-box-span {
+    pointer-events: none;
+    height: auto;
+  }
+  .auto-complete-row {
+    background-color: #FFF!important;
+    padding: 8px 16px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .mat-select-panel.custom-select-panel .mat-option-disabled {
+    background: transparent;
+    opacity: 1;
+    pointer-events: none;
+  }
 .dept-seach-input {
     width: 90%;
     margin: 8px auto;

project/ws/app/src/lib/routes/profile-v2/components/transfer-request/transfer-request.component.ts

@@ -4,11 +4,12 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'
 import { HttpErrorResponse } from '@angular/common/http'
 import { MatSnackBar } from '@angular/material'
 
-import { Subject } from 'rxjs'
-import { takeUntil } from 'rxjs/operators'
+// import { Observable, Subject } from 'rxjs'
+import { debounceTime, distinctUntilChanged, startWith, takeUntil } from 'rxjs/operators'
 
 import { UserProfileService } from '../../../user-profile/services/user-profile.service'
 import { ConfigurationsService } from '@sunbird-cb/utils-v2'
+import { Subject } from 'rxjs'
 
 @Component({
   selector: 'ws-transfer-request',
@@ -26,7 +27,11 @@ export class TransferRequestComponent implements OnInit, OnDestroy {
   })
   departmentData: any[] = []
   otherDetails = false
+  deptFilterData: any[] = []
+  // deptFilterData  : Observable<string[]>
+  designationData: any[] = []
   private destroySubject$ = new Subject()
+  isInValidOrgSelection = false
 
   constructor(
     public dialogRef: MatDialogRef<TransferRequestComponent>,
@@ -44,25 +49,75 @@ export class TransferRequestComponent implements OnInit, OnDestroy {
     }
 
     this.transferRequestForm.get('organization')!.valueChanges
-    .subscribe((value: string) => {
-      if (value !== this.data.portalProfile.employmentDetails.departmentName) {
-        this.otherDetails = true
-      } else {
-        this.otherDetails = false
-      }
-    })
+      .subscribe((value: string) => {
+        if (value !== this.data && this.data.portalProfile &&  this.data.portalProfile.employmentDetails
+           && this.data.portalProfile.employmentDetails.departmentName) {
+          this.otherDetails = true
+        } else {
+          this.otherDetails = false
+        }
+      })
+
+    if (this.transferRequestForm.get('organization')) {
+      this.transferRequestForm.get('organization')!.valueChanges
+        .pipe(
+          debounceTime(250),
+          distinctUntilChanged(),
+          startWith(''),
+        )
+        .subscribe(res => {
+          if (res) {
+            this.deptFilterData = this.departmentData &&
+             this.departmentData.filter(item => item.toLowerCase().includes(res && res.toLowerCase()))
+             const orgSearchVal = this.transferRequestForm.controls['organization']
+             if (this.deptFilterData && this.deptFilterData.length && this.deptFilterData.length > 0) {
+              orgSearchVal.setErrors(null)
+             } else {
+            orgSearchVal.setErrors({ invalidSelection: true })
+             }
+          } else {
+            this.deptFilterData = this.departmentData
+          }
+        })
+    }
+
+    if (this.transferRequestForm.get('designation')) {
+      this.transferRequestForm.get('designation')!.valueChanges
+        .pipe(
+          debounceTime(250),
+          distinctUntilChanged(),
+          startWith(''),
+        )
+        .subscribe(res => {
+          if (res) {
+            const designonData = this.data && this.data.designationsMeta
+            this.designationData = designonData.filter((val: any) =>
+              val && val.name.trim().toLowerCase().includes(res && res.toLowerCase())
+            )
+            const designationSearchVal = this.transferRequestForm.controls['designation']
+            if (this.designationData && this.designationData.length && this.designationData.length > 0) {
+              designationSearchVal.setErrors(null)
+             } else {
+            designationSearchVal.setErrors({ invalidSelection: true })
+             }
+          } else {
+            this.designationData = this.data && this.data.designationsMeta
+           }
+        })
+    }
   }
 
   ngOnInit() {
     this.getAllDeptData()
+
   }
 
   handleCloseModal(): void {
     this.dialogRef.close()
   }
 
   organizationSearch(value: string) {
-      const filterVal = value.toLowerCase()
+    const filterVal = value.toLowerCase()
     return this.departmentData.filter(option => option.toLowerCase().includes(filterVal))
   }
 
@@ -75,6 +130,7 @@ export class TransferRequestComponent implements OnInit, OnDestroy {
   }
 
   handleSubmitRequest(): void {
+    if (this.transferRequestForm.valid) {
     const data: any = {
       'name': this.transferRequestForm.value['organization'],
       'designation': this.transferRequestForm.value['designation'],
@@ -93,31 +149,32 @@ export class TransferRequestComponent implements OnInit, OnDestroy {
     }
     postData.request.profileDetails.professionalDetails.push(data)
     this.userProfileService.editProfileDetails(postData)
-    .pipe(takeUntil(this.destroySubject$))
-    .subscribe((_res: any) => {
-      this.matSnackBar.open('Your transfer request has been sent for approval')
-      // this.matSnackBar.open(this.handleTranslateTo('transferRequestSent'))
-      this.enableWithdraw.emit(true)
-      this.handleCloseModal()
-    },         (error: HttpErrorResponse) => {
-      if (!error.ok) {
-        this.matSnackBar.open(this.handleTranslateTo('transferRequestFailed'))
-      }
-    })
+      .pipe(takeUntil(this.destroySubject$))
+      .subscribe((_res: any) => {
+        this.matSnackBar.open('Your transfer request has been sent for approval')
+        // this.matSnackBar.open(this.handleTranslateTo('transferRequestSent'))
+        this.enableWithdraw.emit(true)
+        this.handleCloseModal()
+      },         (error: HttpErrorResponse) => {
+        if (!error.ok) {
+          this.matSnackBar.open(this.handleTranslateTo('transferRequestFailed'))
+        }
+      })
+    }
   }
 
   getAllDeptData(): void {
     this.userProfileService.getAllDepartments()
-    .pipe(takeUntil(this.destroySubject$))
-    .subscribe((res: any) => {
-      this.departmentData = res.sort((a: any, b: any) => {
-        return a.toLowerCase().localeCompare(b.toLowerCase())
+      .pipe(takeUntil(this.destroySubject$))
+      .subscribe((res: any) => {
+        this.departmentData = res.sort((a: any, b: any) => {
+          return a.toLowerCase().localeCompare(b.toLowerCase())
+        })
+      },         (error: HttpErrorResponse) => {
+        if (!error.ok) {
+          this.matSnackBar.open(this.handleTranslateTo('orgFetchDataFailed'))
+        }
       })
-    },         (error: HttpErrorResponse) => {
-      if (!error.ok) {
-        this.matSnackBar.open(this.handleTranslateTo('orgFetchDataFailed'))
-      }
-    })
   }
 
   handleTranslateTo(menuName: string): string {

src/app/component/in-sight-side-bar/in-sight-side-bar.component.html

@@ -9,11 +9,11 @@
 
 
 <section class="hidden md:block" style="position: relative;" [ngClass]="{'':!collapsed, 'margin-bottom-m': collapsed}">
-    <div class="collapsible margin-top-m" [@collapse]="collapsed" *ngIf="surveyForm && surveyForm.active">
+    <!-- <div class="collapsible margin-top-m" [@collapse]="collapsed" *ngIf="surveyForm && surveyForm.active">
         <ws-widget-survey-form-section [surveyFormData]="surveyForm.surveyFormData"></ws-widget-survey-form-section>
-    </div>
+    </div> -->
     <div class="assessment-box  collapsible" [@collapse]="collapsed"
-        [ngClass]="{'margin-bottom-remove margin-top-remove':collapsed,'margin-top-l':!collapsed}">
+        [ngClass]="{'margin-bottom-remove margin-top-remove':collapsed}">
         <ng-container [ngTemplateOutlet]="loadNewStrips"></ng-container>
         <ng-template #loadNewStrips>
             <ng-container *ngFor="let newStrip of assessmentStrip">

src/app/home/home/home.component.html

@@ -1,4 +1,3 @@
-<ws-survey-form></ws-survey-form>
 <div class="mat-body-2 karmapoints-panel" *ngIf="isKPPanelenabled">
     <p class="margin-remove"> {{'appKarmapointsPanel.earn' |translate}}
         <img src="/assets/icons/home/karma-badge.svg" alt="KarmaPoints">

src/styles/_ws-common.scss

@@ -190,6 +190,6 @@
     padding: 12px 16px;
     border: 1px solid rgba($color: #000000, $alpha: 0.14);
     border-radius: 4px;
-    width: calc(100% - 36px);
+    width: calc(100% - 33px);
   }
 }