src/app/components/popups/year-of-birth-popup/year-of-birth-popup.component.ts
OnInit
| selector | app-year-of-birth-popup |
| styleUrls | ./year-of-birth-popup.component.scss |
| templateUrl | ./year-of-birth-popup.component.html |
Properties |
Methods |
constructor(profileService: ProfileService, popOverCtrl: PopoverController, appGlobalService: AppGlobalService, commonUtilService: CommonUtilService)
|
|||||||||||||||
|
Parameters :
|
| initiateYearSelecter |
initiateYearSelecter()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Async submit |
submit()
|
|
Returns :
any
|
| birthYearOptions |
Type : Array<number>
|
Default value : []
|
| selectedYearOfBirth |
Type : number
|
import { Component, Inject, OnInit } from '@angular/core';
import { AppGlobalService, CommonUtilService } from '@app/services';
import { PopoverController } from '@ionic/angular';
import { ProfileService } from 'sunbird-sdk';
@Component({
selector: 'app-year-of-birth-popup',
templateUrl: './year-of-birth-popup.component.html',
styleUrls: ['./year-of-birth-popup.component.scss'],
})
export class YearOfBirthPopupComponent implements OnInit {
selectedYearOfBirth: number;
birthYearOptions: Array<number> = [];
constructor(
@Inject('PROFILE_SERVICE') private profileService: ProfileService,
private popOverCtrl: PopoverController,
private appGlobalService: AppGlobalService,
private commonUtilService: CommonUtilService
) { }
ngOnInit(): void {
this.initiateYearSelecter();
}
async submit() {
const loader = await this.commonUtilService.getLoader();
await loader.present();
const req = {
userId: this.appGlobalService.getCurrentUser().uid,
dob: this.selectedYearOfBirth.toString()
};
this.profileService.updateServerProfile(req).toPromise()
.then(async () => {
await loader.dismiss();
this.popOverCtrl.dismiss();
}).catch(async () => {
if (loader) {
await loader.dismiss();
}
this.popOverCtrl.dismiss();
});
}
initiateYearSelecter() {
const endYear = new Date().getFullYear();
for (let year = endYear; year > 1921; year--) {
this.birthYearOptions.push(year);
}
}
}
<ion-header class="sb-popover-header">
<ion-toolbar class="sb-popover-toolbar">
<ion-title class="sb-popover-title" style="text-align: center;">{{'YOB_TITLE' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<div>
<div class="yob-info">
<div><label>{{'SELECT_YOB' | translate}}<span class="sb-color-red">*</span></label></div>
<div style="border: 1px solid;
width: 50%;
border-radius: 18px; margin-left: 24%; height: 2.5rem;">
<ion-select placeholder="Year" interface="popover" style="padding: 6px 20px;"
[(ngModel)]="selectedYearOfBirth" mode="ios">
<ion-select-option *ngFor="let year of birthYearOptions"
value="{{year}}">
{{year}}</ion-select-option>
</ion-select>
</div>
</div>
<div style="text-align: center; margin-top: 10%;">
<button type="submit" class="submit-btn" [disabled]="!selectedYearOfBirth" (click)="submit()"
[ngClass]="!selectedYearOfBirth ? 'submit-disibled' : null">{{'BTN_SUBMIT' | translate}}</button>
</div>
</div>
./year-of-birth-popup.component.scss
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
.submit-btn{
color: white;
background-color: $blue;
font-size: 1rem;
padding: 8px 0;
border: 2px solid $blue;
width: 45%;
}
.yob-info {
text-align: center;
font-size: 1.25rem;
}
.sb-color-red {
color: #952833 !important;
}
.submit-disibled{
opacity: 0.5 !important;
cursor: default;
}