Merge branch 'front_end_review' into 'develop'

Fixed modal - popup problem(not showing)

See merge request !75

package.json

@@ -63,10 +63,8 @@
     "immutable": "^3.8.1",
     "jquery": "^3.1.1",
     "jspdf": "^1.3.3",
-    "ng2-bootstrap": "^1.6.3",
     "ng2-redux": "^5.1.0",
     "ng2-smart-table": "^0.4.0-5",
-    "ngx-bootstrap": "^1.6.6",
     "ngx-cookie": "^1.0.0",
     "ngx-uploader": "^2.2.5",
     "raw-loader": "^0.5.1",

source/app.ts

@@ -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: [

source/components/minister/minister-view.ts

@@ -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();
     }
 
 

source/components/student-application-form/parent.form.html

 <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)">

source/components/student-application-form/parent.form.ts

@@ -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)});
     }