Fixed modal - popup problem(not showing)

parent 843dead1
......@@ -41,8 +41,6 @@ import HeaderComponent from './components/header/header.component';
import NavbarComponent from './components/navbar/navbar.component';
import MainComponent from './components/main/main.component';
import FooterComponent from './components/footer/footer.component';
import { ModalModule } from 'ng2-bootstrap/modal';
import { AlertModule } from 'ng2-bootstrap/alert';
import {enableProdMode} from '@angular/core';
......@@ -64,8 +62,6 @@ class MyLocalization extends NgLocalization {
HttpModule,
Ng2SmartTableModule,
NgReduxModule,
ModalModule.forRoot(),
AlertModule.forRoot(),
CookieModule.forRoot()
],
declarations: [
......
......@@ -9,10 +9,8 @@ import { IAppState } from '../../store/store';
import { Router, ActivatedRoute, Params} from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { ILoginInfo } from '../../store/logininfo/logininfo.types';
import { ModalDirective } from 'ng2-bootstrap/modal';
import { LOGININFO_INITIAL_STATE } from '../../store/logininfo/logininfo.initial-state';
import {
FormBuilder,
FormGroup,
......@@ -88,8 +86,6 @@ import { API_ENDPOINT } from '../../app.settings';
public formGroup: FormGroup;
loginInfo$: BehaviorSubject<ILoginInfo>;
loginInfoSub: Subscription;
@ViewChild('autoShownModal') public autoShownModal: ModalDirective;
@ViewChild('bootstrapModal') public bootstrapModal:ModalDirective;
public isModalShown: BehaviorSubject<boolean>;
public isModalShownMy: boolean;
private apiEndPoint = API_ENDPOINT;
......@@ -133,11 +129,11 @@ import { API_ENDPOINT } from '../../app.settings';
*/
showModal(){
this.bootstrapModal.show();
// this.bootstrapModal.show();
}
closeModal(){
this.bootstrapModal.hide();
// this.bootstrapModal.hide();
}
......
<div class = "loading" *ngIf="(epalUserData$ | async) === {}"></div>
<div *ngIf="(isModalShown | async)" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div id="emaiSentNotice" (onHidden)="onHidden()" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Auto shown modal</h4>
<h4 class="modal-title pull-left">Αποστολή Κωδικού Επαλήθευσης</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Hello!</p>
<p>-------------------------</p>
<p>-------------------------</p>
<p>Έγινε αποστολή κωδικού επαλήθευσης στη διεύθυνση που δηλώσατε</p>
<p><strong>Ελέγξτε το email σας!</strong> Αντιγράψτε τον κωδικό που σας στείλαμε εδώ και επιλέξτε "Αποστολή Κωδικού Επαλήθευσης"</p>
</div>
</div>
</div>
</div>
<form [formGroup]="formGroup">
<div class="form-group">
......@@ -53,9 +54,9 @@
<div class="form-group" *ngIf="(verificationCodeSent | async) && !(verificationCodeVerified | async)">
<alert type="success">
<div class="alert alert-success">
<strong>Ελέγξτε το email σας!</strong> Αντιγράψτε τον κωδικό που σας στείλαμε εδώ και επιλέξτε "Αποστολή Κωδικού Επαλήθευσης"
</alert>
</div>
<label for="verificationCode">Κωδικός επαλήθευσης</label><input class="form-control" type="text" formControlName="verificationCode">
</div>
<div class="row" *ngIf="(verificationCodeSent | async) && !(verificationCodeVerified | async)">
......@@ -65,9 +66,9 @@
</button>
</div>
</div>
<alert type="success" *ngIf="(verificationCodeSent | async) && (verificationCodeVerified | async)">
<div class="alert alert-success" *ngIf="(verificationCodeSent | async) && (verificationCodeVerified | async)">
<strong>Επιτυχία!</strong> Το email σας επαληθεύθηκε και είναι αυτό με το οποίο θα επικοινωνούμε μαζί σας στο εξής
</alert>
</div>
<div class="form-group" *ngIf="!(userEmailEnabled | async) && (verificationCodeVerified | async)">
......
......@@ -3,7 +3,6 @@ import { Router } from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { VALID_EMAIL_PATTERN, VALID_NAMES_PATTERN } from '../../constants';
import { HelperDataService } from '../../services/helper-data-service';
import { ModalDirective } from 'ng2-bootstrap/modal';
import {
FormBuilder,
......@@ -30,7 +29,6 @@ import {AppSettings} from '../../app.settings';
private verificationCodeVerified: BehaviorSubject<boolean>;
private userEmailEnabled: BehaviorSubject<boolean>;
@ViewChild('userEmail') userEmail: ElementRef;
@ViewChild('autoShownModal') public autoShownModal: ModalDirective;
public isModalShown: BehaviorSubject<boolean>;
constructor(private fb: FormBuilder,
......@@ -55,11 +53,11 @@ import {AppSettings} from '../../app.settings';
public showModal():void {
console.log("about to show modal");
this.isModalShown.next(true);
(<any>$('#emaiSentNotice')).modal('show');
}
public hideModal():void {
this.autoShownModal.hide();
(<any>$('#emaiSentNotice')).modal('hide');
}
public onHidden():void {
......@@ -67,8 +65,11 @@ import {AppSettings} from '../../app.settings';
}
ngOnInit() {
(<any>$('#emaiSentNotice')).appendTo("body");
this.epalUserDataSub = this.hds.getEpalUserData().subscribe(
x => {
this.epalUserData$.next(x);
this.formGroup.get('userEmail').setValue(x.userEmail);
this.formGroup.get('userName').setValue(x.userName);
......@@ -102,6 +103,7 @@ import {AppSettings} from '../../app.settings';
}
ngOnDestroy() {
(<any>$('#emaiSentNotice')).remove();
if (this.epalUserDataSub) this.epalUserDataSub.unsubscribe();
if (this.userEmailSub) this.epalUserDataSub.unsubscribe();
}
......@@ -112,7 +114,8 @@ import {AppSettings} from '../../app.settings';
this.verificationCodeSent.next(true);
this.verificationCodeVerified.next(false);
this.disableUserEmail();
//this.showModal();
this.showModal();
// (<any>$('#emaiSentNotice')).modal('show');
})
.catch(err => {console.log(err)});
}
......@@ -122,7 +125,7 @@ import {AppSettings} from '../../app.settings';
.then(res => {
this.verificationCodeVerified.next((<any>res).verificationCodeVerified);
this.formGroup.value.userEmail=(<any>res).userEmail;
//this.showModal();
this.showModal();
})
.catch(err => {console.log(err)});
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment