Fixed modal - popup problem(not showing)

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