File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(profileService: ProfileService, navParams: NavParams, platform: Platform, commonUtilService: CommonUtilService, fb: FormBuilder, popOverCtrl: PopoverController, keyboard: Keyboard, menuCtrl: MenuController)
|
|
|
Parameters :
| Name |
Type |
Optional |
| profileService |
ProfileService
|
No
|
| navParams |
NavParams
|
No
|
| platform |
Platform
|
No
|
| commonUtilService |
CommonUtilService
|
No
|
| fb |
FormBuilder
|
No
|
| popOverCtrl |
PopoverController
|
No
|
| keyboard |
Keyboard
|
No
|
| menuCtrl |
MenuController
|
No
|
|
Methods
|
Async
generateOTP
|
generateOTP()
|
|
|
|
|
|
initEditForm
|
initEditForm()
|
|
|
|
|
|
ionViewWillEnter
|
ionViewWillEnter()
|
|
|
|
|
|
ionViewWillLeave
|
ionViewWillLeave()
|
|
|
|
|
|
Async
validate
|
validate()
|
|
|
|
|
|
isRequired
|
Default value : false
|
|
|
|
personEditForm
|
Type : FormGroup
|
|
|
|
Public
platform
|
Type : Platform
|
|
|
|
unregisterBackButton
|
Type : any
|
|
|
import { Component, Inject, Input } from '@angular/core';
import { Platform, NavParams, PopoverController, MenuController } from '@ionic/angular';
import { GenerateOtpRequest, IsProfileAlreadyInUseRequest, ProfileService } from 'sunbird-sdk';
import { ProfileConstants } from '@app/app/app.constant';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CommonUtilService } from '../../../../services/common-util.service';
import { Keyboard } from '@ionic-native/keyboard/ngx';
@Component({
selector: 'app-edit-contact-details-popup',
templateUrl: './edit-contact-details-popup.component.html',
styleUrls: ['./edit-contact-details-popup.component.scss'],
})
export class EditContactDetailsPopupComponent {
// Data passed in by componentProps
@Input() userId: string;
@Input() title: string;
@Input() description: string;
@Input() type: string;
err: boolean;
personEditForm: FormGroup;
isRequired = false;
updateErr: boolean;
blockedAccount: boolean;
unregisterBackButton: any;
loader: any;
constructor(
@Inject('PROFILE_SERVICE') private profileService: ProfileService,
private navParams: NavParams,
public platform: Platform,
private commonUtilService: CommonUtilService,
private fb: FormBuilder,
private popOverCtrl: PopoverController,
private keyboard: Keyboard,
private menuCtrl: MenuController
) {
this.userId = this.navParams.get('userId');
this.title = this.navParams.get('title');
this.description = this.navParams.get('description');
this.type = this.navParams.get('type');
this.initEditForm();
}
ionViewWillEnter() {
this.menuCtrl.enable(false);
this.unregisterBackButton = this.platform.backButton.subscribeWithPriority(11, () => {
this.popOverCtrl.dismiss();
});
}
initEditForm() {
if (this.type === ProfileConstants.CONTACT_TYPE_EMAIL) {
this.personEditForm = this.fb.group({
email: ['', Validators.compose([Validators.required, Validators.pattern('^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[a-z]{2,}$')])],
});
} else {
this.personEditForm = this.fb.group({
phone: ['', Validators.compose([Validators.required, Validators.pattern('^[6-9]\\d{9}$')])],
});
}
}
async validate() {
if (this.commonUtilService.networkInfo.isNetworkAvailable) {
const formVal = this.personEditForm.value;
this.loader = await this.commonUtilService.getLoader();
await this.loader.present();
let req: IsProfileAlreadyInUseRequest;
if (this.type === ProfileConstants.CONTACT_TYPE_PHONE) {
req = {
key: formVal.phone,
type: ProfileConstants.CONTACT_TYPE_PHONE
};
} else {
req = {
key: formVal.email,
type: ProfileConstants.CONTACT_TYPE_EMAIL
};
}
this.profileService.isProfileAlreadyInUse(req).subscribe(async (success: any) => {
await this.loader.dismiss();
this.loader = undefined;
if (success && success.response) {
if (success.response.id === this.userId) {
this.updateErr = true;
} else {
this.err = true;
}
}
}, async (error) => {
if (error.response && error.response.body.params.err === 'UOS_USRRED0013') {
this.generateOTP();
} else if (error.response && error.response.body.params.err === 'USER_NOT_FOUND') {
this.blockedAccount = true;
if (this.loader) {
await this.loader.dismiss();
this.loader = undefined;
}
} else {
if (this.loader) {
await this.loader.dismiss();
this.loader = undefined;
}
}
});
} else {
this.commonUtilService.showToast('INTERNET_CONNECTIVITY_NEEDED');
}
}
refreshErr() {
if (this.err || this.updateErr || this.blockedAccount) {
this.err = false;
this.updateErr = false;
this.blockedAccount = false;
}
}
async generateOTP() {
let req: GenerateOtpRequest;
if (this.type === ProfileConstants.CONTACT_TYPE_PHONE) {
req = {
key: this.personEditForm.value.phone,
type: ProfileConstants.CONTACT_TYPE_PHONE
};
} else {
req = {
key: this.personEditForm.value.email,
type: ProfileConstants.CONTACT_TYPE_EMAIL
};
}
this.profileService.generateOTP(req).toPromise()
.then(async () => {
if (this.loader) {
await this.loader.dismiss();
this.loader = undefined;
}
if (this.type === ProfileConstants.CONTACT_TYPE_PHONE) {
this.popOverCtrl.dismiss({ isEdited: true, value: this.personEditForm.value.phone });
} else {
this.popOverCtrl.dismiss({ isEdited: true, value: this.personEditForm.value.email });
}
})
.catch(async (err) => {
if (this.loader) {
await this.loader.dismiss();
this.loader = undefined;
}
this.popOverCtrl.dismiss({ isEdited: false });
if (err.hasOwnProperty(err) === 'UOS_OTPCRT0059') {
this.commonUtilService.showToast('You have exceeded the maximum limit for OTP, Please try after some time');
}
});
}
async cancel() {
await this.popOverCtrl.dismiss({ isEdited: false });
}
ionViewWillLeave() {
this.menuCtrl.enable(true);
if (this.unregisterBackButton) {
this.unregisterBackButton.unsubscribe();
}
}
}
<ion-content class="P0">
<div class="ecd-header ion-text-center">
<h6 class="M0">{{title | titlecase}}</h6>
</div>
<ion-grid class="P0">
<form [formGroup]="personEditForm">
<ion-row class="P16">
<ion-col size="12" class="text-center ion-no-padding">
<p class="font-weight-bold f14">{{description}}</p>
</ion-col>
<section *ngIf="type==='phone'" class="W100 text-center MT3V">
<ion-col size="12" class="text-center ion-no-padding" *ngIf="err">
<p class="error">{{'ERROR_PHONE_EXISTS' | translate}}</p>
</ion-col>
<ion-col size="12" class="text-center ion-no-padding"
*ngIf="!personEditForm.controls.phone.valid && personEditForm.controls.phone.dirty">
<p class="error">{{'ERROR_PHONE_INVALID' | translate}}</p>
</ion-col>
<ion-col size="12" class="text-center ion-no-padding" *ngIf="updateErr">
<p class="error">{{'ERROR_SAME_PHONE_UPDATED' | translate}}</p>
</ion-col>
<ion-col size="12" class="text-center ion-no-padding" *ngIf="blockedAccount">
<p class="error">{{'ERROR_USER_ACCOUNT_BLOCKED' | translate}}</p>
</ion-col>
<ion-col size="12" class="ion-no-padding">
<div class="W100 merged-input-container MT10" style="text-align:start">
<ion-input type="tel" placeholder="+91 -" class="form-control decorator " value="+91 -" disabled>
</ion-input>
<ion-input type="tel" placeholder="{{'ENTER_PHONE_POPUP_TITLE' | translate }}" maxlength="10"
minlength="10" required class="form-control custom" (input)="refreshErr()" formControlName="phone">
</ion-input>
</div>
</ion-col>
</section>
<section *ngIf="type==='email'" class="W100 MT3V">
<ion-col size="12" class="text-center ion-no-padding">
<p class="error" *ngIf="(personEditForm.controls.email.dirty && personEditForm.controls.email?.invalid) ">
{{'ERROR_EMAIL_INVALID' | translate}}</p>
</ion-col>
<ion-col size="12" class="text-center ion-no-padding" *ngIf="err">
<p class="error">{{'ERROR_EMAIL_EXISTS' | translate}}</p>
</ion-col>
<ion-col size="12" class="text-center ion-no-padding" *ngIf="updateErr">
<p class="error">{{'ERROR_SAME_EMAIL_UPDATED' | translate}}</p>
</ion-col>
<ion-col size="12" class="text-center ion-no-padding" *ngIf="blockedAccount">
<p class="error">{{'ERROR_USER_ACCOUNT_BLOCKED' | translate}}</p>
</ion-col>
<ion-col size="12" class="ion-no-padding">
<div class="W100 merged-input-container MT10">
<ion-input type="text" placeholder="{{'EMAIL_PLACEHOLDER' | translate}}" class="form-control custom"
formControlName="email" (input)="refreshErr()"></ion-input>
</div>
</ion-col>
</section>
</ion-row>
<ion-row class="custom-shadow">
<ion-col class="ion-padding">
<ion-button expand="block" fill="outline" (click)="cancel()">{{ 'CANCEL' | translate }} </ion-button>
</ion-col>
<ion-col class="ion-padding">
<ion-button expand="block" type="submit" (click)="validate()" [disabled]="!personEditForm.valid">
{{ 'BTN_SUBMIT' | translate }}
</ion-button>
</ion-col>
</ion-row>
</form>
</ion-grid>
</ion-content>
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/variables";
@import "src/assets/styles/_variables.scss";
:host {
.close-button.button-outline-md {
border-color: transparent;
color: map-get($colors, grayish_blue);
background-color: transparent;
box-shadow: none;
opacity: 1;
margin-top: 3px !important;
height: 1.4em;
}
.close-button.button-outline-md .button-inner {
@include padding(null, 14px, null, null);
}
.close-button.button-outline-md [icon-only] ion-icon {
font-size: 1.4rem;
}
.padding-left-5 {
@include padding(null, null, null, 5% !important);
}
.margin-top-5 {
margin-top: 15px !important;
}
.popover-content {
margin: 0;
width: 100vw !important;
height: auto !important;
box-shadow: unset;
position: fixed;
left: 0 !important;
@include ltr() {
left: 0 !important;
}
@include rtl() {
right: 0 !important;
}
top: unset !important;
bottom: 0;
transform-origin: bottom -100% !important;
transform: translateY(0) !important;
overflow-y: hidden;
}
ion-backdrop {
background-color: map-get($colors, dark) !important;
opacity: 0.4 !important;
}
.P16 {
padding: 16px !important;
}
.merged-input-container {
border: 1px solid $form-input-border-active-color;
display: flex;
flex: 1 1 auto;
border-radius: 4px;
.decorator {
display: inline-block;
max-width: 3.125rem;
}
.custom {
display: inline-block;
}
}
.MT3V {
margin-top: 3vh;
}
.custom-shadow {
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.2);
margin-top: 35% !important;
}
.ecd-header {
background-color: #{$blue};
color: map-get($colors, white);
padding: 16px 0;
}
ion-button{
--background: #{$blue} !important;
color: map-get($colors, white);
--background-hover: #{$blue} !important;
--background-activated: #{$blue} !important;
}
ion-button[fill="outline"]{
--background: map-get($colors, white) !important;
color: #{$blue};
--border-color: #{$blue};
}
}
Legend
Html element with directive