File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
projectContent
|
Type : any
|
|
|
Methods
|
closePopover
|
closePopover(data?)
|
|
|
|
|
|
Async
ionViewWillEnter
|
ionViewWillEnter()
|
|
|
|
|
|
onProfilePageClick
|
onProfilePageClick()
|
|
|
|
|
|
onSubmitClick
|
onSubmitClick()
|
|
|
|
|
|
buttonLabel
|
Type : string
|
Default value : "START_LEARNING"
|
|
|
|
doNotShowAgain
|
Default value : false
|
|
|
import {Component, Inject, Input} from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { AppGlobalService, CommonUtilService, PageId } from '@app/services';
import { PreferenceKey, ProfileConstants } from '@app/app/app.constant';
import {
CachedItemRequestSourceFrom, ProfileService,
ServerProfileDetailsRequest,
SharedPreferences
} from '@project-sunbird/sunbird-sdk';
import { NavigationService } from '@app/services/navigation-handler.service';
@Component({
selector: 'app-profile-name-confirmation-popover',
templateUrl: './sb-profile-name-confirmation-popup.component.html',
styleUrls: ['./sb-profile-name-confirmation-popup.component.scss'],
})
export class ProfileNameConfirmationPopoverComponent {
@Input() content;
@Input() projectContent;
appName;
profile;
doNotShowAgain = false;
buttonLabel ="START_LEARNING";
constructor(
@Inject('PROFILE_SERVICE') private profileService: ProfileService,
@Inject('SHARED_PREFERENCES') private preferences: SharedPreferences,
private popoverCtrl: PopoverController,
private navService: NavigationService,
private appGlobalService: AppGlobalService,
private commonUtilService: CommonUtilService
) { }
async ionViewWillEnter() {
this.buttonLabel = this.projectContent ? "FRMELEMNTS_LBL_START_IMPROVEMENT" : "START_LEARNING";
this.commonUtilService.getAppName().then((res) => { this.appName = res; });
const userId = await this.appGlobalService.getActiveProfileUid();
const serverProfileDetailsRequest: ServerProfileDetailsRequest = {
userId,
requiredFields: ProfileConstants.REQUIRED_FIELDS,
from: CachedItemRequestSourceFrom.SERVER
};
this.profileService.getServerProfilesDetails(serverProfileDetailsRequest).toPromise()
.then((profileData) => {
this.profile = profileData;
})
.catch(err => {
console.error('ProfileNameConfirmationPopoverComponent', err);
});
}
onSubmitClick() {
const key = PreferenceKey.DO_NOT_SHOW_PROFILE_NAME_CONFIRMATION_POPUP + '-' + this.profile.userId;
this.preferences.putBoolean(key, this.doNotShowAgain).toPromise().then();
this.closePopover({ buttonClicked: true });
}
closePopover(data?) {
this.popoverCtrl.dismiss(data);
}
onProfilePageClick() {
let payload = this.projectContent ? {code:'name',children:[]} : ''
this.navService.navigateToEditPersonalDetails(this.profile, PageId.PROFILE_NAME_CONFIRMATION_POPUP,payload);
this.closePopover({ editProfileClicked: true });
}
}
<ion-header class="sb-popover-header">
<ion-toolbar class="sb-popover-toolbar">
<ion-title class="sb-popover-title text-left pl-16" attr.aria-label="{{'FRMELEMNTS_LBL_PROFCONF' | translate}}, heading"> {{'FRMELEMNTS_LBL_PROFCONF' | translate}}
<ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sb-popover-container ion-no-padding">
<div class="sb-popover-items">
<div class="icon-container">
<img src="assets/imgs/profile_name_confirmation.png" alt="Certificate of completion">
</div>
<div class="sb-popover-content-details">
<div>{{'FRMELEMNTS_LBL_PROFTITLE' | translate}}:</div>
<div class="pnc-profile-name mt-8" [ngClass]="{'word-wrap-name' : projectContent}">
<span>{{ profile?.firstName | titlecase }} {{ profile?.lastName | titlecase }}</span>
<span (click)="onProfilePageClick()">
<img src="assets/imgs/edit-icon.svg" alt="edit-name" />
</span>
</div>
<div class="pnc-padding-32" *ngIf="content"> {{'FRMELEMNTS_MSG_NAMEONCERT' | categoryKeyTranslate: content }} </div>
<div class="pnc-padding-32" *ngIf="projectContent"> {{'FRMELEMNTS_MSG_CERTIFICATION_NAME_DISPLAY' | translate }} </div>
<div class="pnc-padding-32"> {{'FRMELEMNTS_MSG_EDITCERTNAME' | translate: {'%appName': appName} }} </div>
<div>
<ion-checkbox class="pnc-checkbox" [style.color]="projectContent ? 'primary' : 'secondary'" checked="false" [(ngModel)]="doNotShowAgain">
</ion-checkbox>
<p class="pnc-checkbox-desc"> {{'FRMELEMNTS_CKBX_CERTMSG' | translate}} </p>
</div>
<ion-footer>
<div class="sb-popover-footer">
<button class="sb-popover-action-btn popover-color" [ngClass]="{'custom-btn-txt-transform-none' : buttonLabel == 'FRMELEMNTS_LBL_START_IMPROVEMENT'}" (click)="onSubmitClick()">
{{buttonLabel | translate}}
</button>
</div>
</ion-footer>
@import "src/assets/styles/_variables.scss";
ion-content {
background-color: map-get($colors, white );
}
.pnc-padding-32 {
padding: 16px 32px;
}
.pnc-profile-name {
font-weight: bold;
font-size: 1.25rem;
}
.pnc-checkbox {
display: inline-block;
}
.pnc-checkbox-desc {
display: inline-block;
margin-left: 8px;
margin-bottom: 0px;
vertical-align: super;
}
ion-footer {
border-top: 1px solid map-get($colors, medium_gray );
.sb-popover-footer {
padding: 16px;
}
}
.word-wrap-name{
word-break: break-all;
overflow-x: auto;
max-height: 8rem;
scroll-behavior: auto;
}
Legend
Html element with directive