File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
showProfileUpdatePopup
|
Type : any
|
|
|
Outputs
|
close
|
Type : EventEmitter
|
|
|
Methods
|
allowToEdit
|
allowToEdit(inputType)
|
|
|
Parameters :
| Name |
Optional |
| inputType |
No
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
onClickCheckbox
|
onClickCheckbox(tncChecked)
|
|
|
Parameters :
| Name |
Optional |
| tncChecked |
No
|
|
|
updateProfileName
|
updateProfileName()
|
|
|
This method used to submit profile Update
|
|
certificateNameChecked
|
Default value : false
|
|
|
|
disableContinueBtn
|
Default value : false
|
|
|
|
fNameInputEl
|
Type : ElementRef
|
Decorators :
@ViewChild('crtFirstName')
|
|
|
|
isLastNameEditable
|
Default value : false
|
|
|
|
isNameEditable
|
Default value : false
|
|
|
|
lNameInputEl
|
Type : ElementRef
|
Decorators :
@ViewChild('crtLastName')
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
import { Component, Input, Output, OnInit, ViewChild, EventEmitter, ElementRef, OnDestroy } from '@angular/core';
import { ToasterService, ResourceService} from '@sunbird/shared';
import { UserService, LearnerService } from '@sunbird/core';
import * as _ from 'lodash-es';
import { ProfileService } from '@sunbird/profile';
import { IInteractEventObject } from '@sunbird/telemetry';
@Component({
selector: 'app-certificate-name-update-popup',
templateUrl: './certificate-name-update-popup.component.html',
styleUrls: ['./certificate-name-update-popup.component.scss']
})
export class CertificateNameUpdatePopupComponent implements OnInit, OnDestroy {
@Input() showProfileUpdatePopup;
@Input() profileInfo;
@ViewChild('modal') modal;
@Output() close = new EventEmitter();
@ViewChild('crtFirstName') fNameInputEl: ElementRef;
@ViewChild('crtLastName') lNameInputEl: ElementRef;
disableContinueBtn = false;
isNameEditable = false;
isLastNameEditable = false;
certificateNameChecked = false;
instance: string;
public learner: LearnerService;
courseInteractObject: IInteractEventObject;
constructor( public userService: UserService,
public resourceService: ResourceService,
private toasterService: ToasterService,
public learnerService: LearnerService,
private profileService: ProfileService) { }
ngOnInit() {
this.instance = _.upperCase(this.resourceService.instance);
}
onClickCheckbox(tncChecked) {
this.disableContinueBtn = !tncChecked;
this.isNameEditable = false;
this.isLastNameEditable = false;
}
closePopup() {
this.modal.deny();
this.close.emit();
}
allowToEdit(inputType) {
if (inputType === 'firstName') {
this.isNameEditable = true;
setTimeout(() => {
this.fNameInputEl.nativeElement.focus();
}, 100);
} else if (inputType === 'lastName') {
this.isLastNameEditable = true;
setTimeout(() => {
this.lNameInputEl.nativeElement.focus();
}, 100);
}
}
/**
* This method used to submit profile Update
*/
updateProfileName() {
const data = {
firstName: _.trim(this.profileInfo.firstName),
lastName: _.trim(this.profileInfo.lastName)
};
this.disableContinueBtn = true;
localStorage.setItem('isCertificateNameUpdated_' + this.profileInfo.id, 'true');
this.profileService.updateProfile(data).subscribe(res => {
this.closePopup();
}, err => {
this.disableContinueBtn = false;
this.toasterService.error(this.resourceService.messages.fmsg.m0085);
});
}
ngOnDestroy() {
if (_.get(this.modal, 'deny')) {
this.modal.deny();
}
}
}
<app-modal-wrapper [config]="{disableClose: true, size: 'normal', panelClass: 'material-modal'}" (dismiss)="closePopup()" #modal>
<ng-template sbModalContent>
<div class="sb-mat__modal">
<!--Header-->
<div mat-dialog-title class="mb-0">
<div class="title">{{resourceService?.frmelmnts?.lbl?.profileNameConfirmations}}</div>
<button aria-label="close dialog" mat-dialog-close class="close-btn"></button>
</div>
<!--/Header-->
<!--Content-->
<div class="sb-mat__modal__content">
<div class="d-flex flex-jc-center">
<img src="./assets/images/profile-certificate.svg" alt="">
</div>
<div class="profile-section-content">
<div class="profile-info d-flex flex-dc">
<span
class="text-center d-flex flex-ai-center flex-jc-center mb-8">{{resourceService?.frmelmnts?.lbl?.firstName}}:
<span *ngIf="!isNameEditable" class="font-weight-bold ml-8">{{profileInfo.firstName }} <img
src="./assets/images/edit-icon.svg" alt="edit-icon" class="cursor-pointer ml-8" tabindex="0"
(click)="allowToEdit('firstName')" appTelemetryInteract
[telemetryInteractObject]="courseInteractObject"
[telemetryInteractEdata]="{id:'certificatefNameChangeEdit' , type: 'click' , pageid:'course-consumption'}"></span>
<span *ngIf="isNameEditable" class="pt-8"><input class="sb-form-control ml-8"
[(ngModel)]="profileInfo.firstName" (blur)="isNameEditable = false" #crtFirstName /></span>
</span>
<span
class="text-center d-flex flex-ai-center flex-jc-center">{{resourceService?.frmelmnts?.lbl?.lastName}}:
<span *ngIf="!isLastNameEditable" class="font-weight-bold ml-8">{{profileInfo.lastName }} <img
src="./assets/images/edit-icon.svg" alt="edit-icon" class="cursor-pointer ml-8" tabindex="0"
(click)="allowToEdit('lastName')" appTelemetryInteract
[telemetryInteractObject]="courseInteractObject"
[telemetryInteractEdata]="{id:'certificatelNameChangeEdit' , type: 'click' , pageid:'course-consumption'}"></span>
<span *ngIf="isLastNameEditable" class="pt-8"><input class="sb-form-control ml-8"
[(ngModel)]="profileInfo.lastName" (blur)="isLastNameEditable = false" #crtLastName /></span>
</span>
</div>
<div class="profile-info-para mt-8 text-center">
<p class="mb-8">
{{resourceService?.frmelmnts?.lbl?.nameUpdateConfirmation | interpolate:'{instance}': instance}}
</p>
<p class="mb-0 fnormal font-weight-normal">
<input class="mr-8 cursor-pointer" type="checkbox" [(ngModel)]="certificateNameChecked" value="true"
tabindex="0" (click)="onClickCheckbox(certificateNameChecked)" appTelemetryInteract
[telemetryInteractObject]="courseInteractObject"
[telemetryInteractEdata]="{id:'certificateNameUpdateConfirmation' , type: 'click' , pageid:'course-consumption'}">
{{resourceService?.frmelmnts?.lbl?.certificateNameUpdate}}
</p>
</div>
</div>
</div>
<!--/Content-->
<!--Actions-->
<div class="sb-mat__modal__actions text-center">
<button appTelemetryInteract [telemetryInteractObject]="courseInteractObject" tabindex="0"
[telemetryInteractEdata]="{id:'viewCertificateNameChangedPopupSubmit' , type: 'click' , pageid:'course-consumption'}"
[ngClass]="certificateNameChecked ? '' : 'sb-btn-disabled'" [disabled]="!disableContinueBtn" tabindex="0"
(click)="updateProfileName()" class="sb-btn sb-btn-normal sb-btn-primary" type="button">
{{resourceService.frmelmnts.lbl.continue}} </button>
</div>
<!-- pass "sb-btn-disabled" class for button disabled -->
<!--/Actions-->
</div>
</ng-template>
</app-modal-wrapper>
Legend
Html element with directive