moved user info from navbar to header. Added loading spinner on signing out,...

moved user info from navbar to header. Added loading spinner on signing out, saving profile. Other minor fixes, styling

source/components/header/header.component.html

+<div class = "loading" *ngIf="(showLoader$ | async) === true"></div>
 <div class="header-wrapper">
 <header id="navbar" role="banner" class="navbar navbar-default">
 
+    <div *ngIf="(loginInfo$ | async).size > 0">
+   <ul class="navbar-nav">
+       <div *ngIf="(loginInfo$ | async).cu_name !== ''">
+            <div class="row">
+                <div class="offset-md-8 col-md-4 pull-right">
+                    <span class="username">{{ cuName }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                    <span class="signout isclickable" (click)="signOut()" style="color:#CC3300;">Αποσύνδεση&nbsp;&nbsp;</span>
+                    <i class="fa fa-sign-out isclickable" (click)="signOut()"></i>
+                </div>
+            </div>
+        </div>
+   </ul>
+</div>
 </header>
 </div>

source/components/header/header.component.ts

-import {Component} from '@angular/core';
+import {Component, OnInit, OnDestroy} from '@angular/core';
+import {Router} from '@angular/router';
+import { Injectable } from "@angular/core";
+
+import { BehaviorSubject } from 'rxjs/Rx';
+import { NgRedux, select } from 'ng2-redux';
+import { IAppState } from '../../store/store';
+import { ILoginInfo, ILoginInfoToken } from '../../store/logininfo/logininfo.types';
+import { HelperDataService } from '../../services/helper-data-service';
+import { LoginInfoActions } from '../../actions/logininfo.actions';
+import { LOGININFO_INITIAL_STATE } from '../../store/logininfo/logininfo.initial-state';
+import { SCHOOL_ROLE, STUDENT_ROLE, PDE_ROLE, DIDE_ROLE, MINISTRY_ROLE } from '../../constants';
+import { EpalClassesActions } from '../../actions/epalclass.actions';
+import { SectorFieldsActions } from '../../actions/sectorfields.actions';
+import { RegionSchoolsActions } from '../../actions/regionschools.actions';
+import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
+import { CriteriaActions } from '../../actions/criteria.actions';
+import { StudentDataFieldsActions } from '../../actions/studentdatafields.actions';
 
 @Component({
   selector: 'reg-header',
   templateUrl: 'header.component.html'
 })
-export default class HeaderComponent { }
+export default class HeaderComponent implements OnInit, OnDestroy {
+    private authToken: string;
+    private authRole: string;
+    private cuName: string;
+    private loginInfo$: BehaviorSubject<ILoginInfo>;
+    public cuser :any;
+    private showLoader$: BehaviorSubject<boolean>;
+
+    constructor( private _ata: LoginInfoActions,
+                private _hds: HelperDataService,
+                private _csa: SectorCoursesActions,
+                private _sfa: SectorFieldsActions,
+                private _rsa: RegionSchoolsActions,
+                private _eca: EpalClassesActions,
+                private _sdfa: StudentDataFieldsActions,
+                private _cria: CriteriaActions,
+                private _ngRedux: NgRedux<IAppState>,
+                private router: Router
+                ) {
+
+                        this.authToken = '';
+                        this.authRole = '';
+                        this.cuName = '';
+                        this.loginInfo$ = new BehaviorSubject(LOGININFO_INITIAL_STATE);
+                        this.showLoader$ = new BehaviorSubject(false);
+
+        };
+
+    ngOnInit() {
+        this._ngRedux.select(state => {
+            if (state.loginInfo.size > 0) {
+                state.loginInfo.reduce(({}, loginInfoToken) => {
+                    this.authToken = loginInfoToken.auth_token;
+                    this.authRole = loginInfoToken.auth_role;
+                    this.cuName = loginInfoToken.cu_name;
+                    return loginInfoToken;
+                }, {})
+            }
+
+            return state.loginInfo;
+        }).subscribe(this.loginInfo$);
+
+    }
+
+    ngOnDestroy() {
+        this.loginInfo$.unsubscribe();
+
+    }
+
+    signOut() {
+        this.showLoader$.next(true);
+        this._hds.signOut().then(data => {
+            this._ata.initLoginInfo();
+            if (this.authRole === SCHOOL_ROLE) {
+                this.router.navigate(['/school']);
+            }
+            else if (this.authRole === PDE_ROLE) {
+                this.router.navigate(['/school']);
+            }
+            else if (this.authRole === DIDE_ROLE) {
+                this.router.navigate(['/school']);
+            }
+            else if (this.authRole === STUDENT_ROLE) {
+                this._eca.initEpalClasses();
+                this._sfa.initSectorFields();
+                this._rsa.initRegionSchools();
+                this._csa.initSectorCourses();
+                this._sdfa.initStudentDataFields();
+                this._cria.initCriteria();
+                this.router.navigate(['']);
+            }
+            else if (this.authRole === MINISTRY_ROLE) {
+                this.router.navigate(['/ministry']);
+            }
+            this.authToken = '';
+            this.authRole = '';
+            this.showLoader$.next(false);
+        }).catch(err => {
+            this.showLoader$.next(false);
+            console.log(err)
+        });
+    }
+
+}

source/components/main/breadcrubs.ts → source/components/main/breadcrumbs.ts

@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 
 
 @Component({
-    selector: 'breadcrubs',
+    selector: 'breadcrumbs',
     template: `
           <div [hidden]="currentUrl !== '/epal-class-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Επιλογή Τάξης </p></div>
     			<div [hidden]="currentUrl !== '/sector-fields-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Επιλογή Τoμέα</p></div>
@@ -21,7 +21,7 @@ import { Router } from '@angular/router';
   `
 })
 
-@Injectable() export default class Breadcrubs implements OnInit {
+@Injectable() export default class Breadcrumbs implements OnInit {
 public currentUrl: string;
 
 constructor(private _router:Router) {}

source/components/minister/minister-view.ts

@@ -26,7 +26,7 @@ import { API_ENDPOINT } from '../../app.settings';
     template: `
 
     <div class="row">
-         <breadcrubs></breadcrubs>
+         <breadcrumbs></breadcrumbs>
     </div>
 
     <div

source/components/navbar/navbar.component.html

@@ -10,17 +10,6 @@
   </a>
    <div class="collapse navbar-collapse flex-row-reverse" id="navbarNav">
       <div *ngIf="(loginInfo$ | async).size > 0">
-    <ul class="navbar-nav">
-        <div *ngIf="(loginInfo$ | async).cu_name !== ''">
-                  <b>Όνομα Χρήστη:</b> {{ cuName }}
-
-
-       &nbsp;&nbsp;
-                <button type="button" class="btn-primary btn-sm pull-right" (click)="signOut()">
-               <i class="fa fa-sign-out"></i>
-                </button>
-        </div>
-     </ul>
      <ul class="navbar-nav">
      <div class="row">
       <div *ngIf="(loginInfo$ | async).size > 0" class="nav-item" [ngClass]="{active: path=='submited-preview'}">

source/components/navbar/navbar.component.ts

@@ -6,16 +6,8 @@ import { BehaviorSubject } from 'rxjs/Rx';
 import { NgRedux, select } from 'ng2-redux';
 import { IAppState } from '../../store/store';
 import { ILoginInfo, ILoginInfoToken } from '../../store/logininfo/logininfo.types';
-import { HelperDataService } from '../../services/helper-data-service';
 import { LoginInfoActions } from '../../actions/logininfo.actions';
 import { LOGININFO_INITIAL_STATE } from '../../store/logininfo/logininfo.initial-state';
-import { SCHOOL_ROLE, STUDENT_ROLE, PDE_ROLE, DIDE_ROLE, MINISTRY_ROLE } from '../../constants';
-import { EpalClassesActions } from '../../actions/epalclass.actions';
-import { SectorFieldsActions } from '../../actions/sectorfields.actions';
-import { RegionSchoolsActions } from '../../actions/regionschools.actions';
-import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
-import { CriteriaActions } from '../../actions/criteria.actions';
-import { StudentDataFieldsActions } from '../../actions/studentdatafields.actions';
 
 @Component({
   selector: 'reg-navbar',
@@ -29,16 +21,7 @@ import { StudentDataFieldsActions } from '../../actions/studentdatafields.action
     private loginInfo$: BehaviorSubject<ILoginInfo>;
  	public cuser :any;
 
-    constructor( private _ata: LoginInfoActions,
-                private _hds: HelperDataService,
-                private _csa: SectorCoursesActions,
-                private _sfa: SectorFieldsActions,
-                private _rsa: RegionSchoolsActions,
-                private _eca: EpalClassesActions,
-                private _sdfa: StudentDataFieldsActions,
-                private _cria: CriteriaActions,
-                private _ngRedux: NgRedux<IAppState>,
-                private router: Router
+    constructor( private _ngRedux: NgRedux<IAppState>
                 ) {
 
                         this.authToken = '';
@@ -69,33 +52,4 @@ import { StudentDataFieldsActions } from '../../actions/studentdatafields.action
 
     }
 
-    signOut() {
-        this._hds.signOut().then(data => {
-            this._ata.initLoginInfo();
-            if (this.authRole === SCHOOL_ROLE) {
-                this.router.navigate(['/school']);
-            }
-            else if (this.authRole === PDE_ROLE) {
-                this.router.navigate(['/school']);
-            }
-            else if (this.authRole === DIDE_ROLE) {
-                this.router.navigate(['/school']);
-            }
-            else if (this.authRole === STUDENT_ROLE) {
-                this._eca.initEpalClasses();
-                this._sfa.initSectorFields();
-                this._rsa.initRegionSchools();
-                this._csa.initSectorCourses();
-                this._sdfa.initStudentDataFields();
-                this._cria.initCriteria();
-                this.router.navigate(['']);
-            }
-            else if (this.authRole === MINISTRY_ROLE) {
-                this.router.navigate(['/ministry']);
-            }
-            this.authToken = '';
-            this.authRole = '';
-        });
-    }
-
 }

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

 <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
 </div>
 <div class = "loading" *ngIf="(criteria$ | async).size === 0"></div>
   <h4> Προσωπικά Στοιχεία Μαθητή </h4>

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

@@ -26,7 +26,7 @@ import {AppSettings} from '../../app.settings';
     selector: 'application-submit',
     template: `
         <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
         </div>
         <div class = "loading" *ngIf="(studentDataFields$ | async).size === 0 || (criteria$ | async).size === 0 || (regions$ | async).size === 0 || (epalclasses$ | async).size === 0 || (loginInfo$ | async).size === 0"></div>
         <application-preview-select></application-preview-select>

source/components/student-application-form/course.fields.select.ts

@@ -19,7 +19,7 @@ import {AppSettings} from '../../app.settings';
     selector: 'course-fields-select',
     template: `
     <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
     </div>
      <form [formGroup]="formGroup">
         <div formArrayName="formArray">

source/components/student-application-form/epal.class.select.ts

@@ -21,7 +21,7 @@ import {AppSettings} from '../../app.settings';
     selector: 'epal-class-select',
     template: `
     <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
     </div>
     <h4> Επιλογή Τάξης </h4>
     <form [formGroup]="formGroup">

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

@@ -148,10 +148,15 @@ import {AppSettings} from '../../app.settings';
     }
 
     saveProfileAndContinue() {
+        this.showLoader.next(true);
         this.hds.saveProfile(this.formGroup.value)
             .then(res => {
+                this.showLoader.next(false);
                 this.router.navigate(['/epal-class-select']);})
-            .catch(err => {console.log(err)});
+            .catch(err => {
+                this.showLoader.next(false);
+                console.log(err)
+            });
     }
 
     enableUserEmail() {

source/components/student-application-form/region.schools.select.ts

@@ -29,7 +29,7 @@ import {AppSettings} from '../../app.settings';
     selector: 'region-schools-select',
     template: `
     <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
     </div>
 
     <div class = "loading" *ngIf="(regions$ | async).size === 0">
@@ -39,7 +39,7 @@ import {AppSettings} from '../../app.settings';
       <h4> Επιλογή Σχολείου</h4>
        <form [formGroup]="formGroup">
         <div formArrayName="formArray">
-        <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε <strong>τρία </strong> ΕΠΑΛ στα οποία θα ήθελε να φοιτήσει ο μαθητής. Επιλέξτε πρώτα την Περιφερειακή Διεύθυνση που ανήκει το κάθε σχολείο της επιλογής σας, επιλέξτε τα σχολεία και στη συνέχεια επιλέξτε <i>Συνέχεια</i>. 
+        <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε <strong>τρία </strong> ΕΠΑΛ στα οποία θα ήθελε να φοιτήσει ο μαθητής. Επιλέξτε πρώτα την Περιφερειακή Διεύθυνση που ανήκει το κάθε σχολείο της επιλογής σας, επιλέξτε τα σχολεία και στη συνέχεια επιλέξτε <i>Συνέχεια</i>.
         Μπορείτε να επιλέξετε σχολεία που ανήκουν σε περισσότερες απο μια Περιφερειακές Διευθύνσεις. <strong> Προσοχή!</strong> Σε ειδικές περιπτώσεις σχολείων μπορείτε να επιλέξετε και λιγότερα απο τρία σχολεία</p>
             <ul class="list-group main-view">
             <div *ngFor="let region$ of regions$ | async; let i=index; let isOdd=odd; let isEven=even"  >

source/components/student-application-form/schools-order-select.ts

@@ -13,7 +13,7 @@ import {AppSettings} from '../../app.settings';
     selector: 'schools-order-select',
     template: `
     <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
     </div>
     <div class = "loading" *ngIf="(selectedSchools$ | async).length === 0 || (regions$ | async).size === 0">
     </div>

source/components/student-application-form/sector.courses.select.ts

@@ -23,7 +23,7 @@ import {AppSettings} from '../../app.settings';
     selector: 'sectorcourses-fields-select',
     template: `
     <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
     </div>
     <div class = "loading" *ngIf="(sectors$ | async).size === 0">
    </div>

source/components/student-application-form/sector.fields.select.ts

@@ -14,7 +14,7 @@ import {
     FormBuilder,
     FormGroup,
     FormControl,
-    FormArray 
+    FormArray
 } from '@angular/forms';
 import {AppSettings} from '../../app.settings';
 
@@ -22,7 +22,7 @@ import {AppSettings} from '../../app.settings';
     selector: 'sector-fields-select',
     template: `
     <div class="row">
-             <breadcrubs></breadcrubs>
+             <breadcrumbs></breadcrumbs>
     </div>
     <h4> Επιλογή Τομέα </h4>
      <div class = "loading" *ngIf="(sectorFields$ | async).size === 0">

source/components/student-application-form/submited.aplication.preview.ts

@@ -14,22 +14,22 @@ import {Router, ActivatedRoute, Params} from '@angular/router';
 import { BehaviorSubject, Subscription } from 'rxjs/Rx';
 
 
-@Component({ 
+@Component({
     selector: 'submited-preview',
     template: `
-         <div class="row"> 
-             <breadcrubs></breadcrubs>
+         <div class="row">
+             <breadcrumbs></breadcrumbs>
         </div>
             Έχει υποβληθεί αίτηση για εγγραφή στην Επαγγελματική Εκπαίδευση των παρακάτω ατόμων:
-           
+
               <ul class="list-group main-view">
                <div *ngFor="let UserData$  of SubmitedApplic$ | async; let i=index; let isOdd=odd; let isEven=even"  >
-                 <li class="list-group-item isclickable" [class.oddout]="isOdd" 
+                 <li class="list-group-item isclickable" [class.oddout]="isOdd"
                  [class.evenout]="isEven" (click)="setActiveUser(UserData$.id)" [class.selectedout]="userActive === UserData$.id" >
                   <h5> {{UserData$.name}}&nbsp;{{UserData$.studentsurname}} </h5>
                    </li>
                   <div id = "target">
-               
+
 
 
             <div *ngFor="let StudentDetails$  of SubmitedDetails$ | async" [hidden]="UserData$.id !== userActive" >
@@ -43,17 +43,17 @@ import { BehaviorSubject, Subscription } from 'rxjs/Rx';
                  <p><b>Επιλογές ΕΠΑΛ</b> </p>
                  <br>
              </div>
-                
+
                 <div *ngFor="let epalChoices$  of EpalChosen$ | async" [hidden]="UserData$.id !== userActive">
                      Σχολείο: {{epalChoices$.epal_id}}
                      Σειρά Προτίμισης:{{epalChoices$.choice_no}}
                 </div>
 
             </div>
-            
 
 
-            
+
+
                 </div>
               </ul>
               <br>
@@ -99,7 +99,7 @@ import { BehaviorSubject, Subscription } from 'rxjs/Rx';
         this.SubmitedApplic$.unsubscribe();
 
     }
- 
+
     ngOnInit() {
 
 
@@ -113,19 +113,19 @@ import { BehaviorSubject, Subscription } from 'rxjs/Rx';
         console.log(this.SubmitedApplic$);
 
 
-    
+
 
 
 
     }
 
-   
 
 
-  setActiveUser(ind,i) 
+
+  setActiveUser(ind,i)
   {
     ind = +ind;
-    
+
       console.log(this.userActive,"RA",ind);
       if (ind === this.userActive){
         ind = -1;
@@ -152,7 +152,7 @@ import { BehaviorSubject, Subscription } from 'rxjs/Rx';
 
  createPdf()
     {
-        
+
        html2canvas(document.getElementById("target")).then(function(canvas)
         {
             var img = canvas.toDataURL();

source/containers/globalstyles.css

@@ -291,3 +291,9 @@ overflow-x: scroll;
 .btn.sharp {
   border-radius:0;
 }
+.username {
+    font-size: 0.8em;
+}
+.signout {
+    font-size: 0.8em;
+}

source/containers/main.routes.ts

@@ -32,13 +32,13 @@ import InformStudents from '../components/minister/minister-informstudents';
 import SchoolAuthGuard from '../guards/school.auth.guard';
 import StudentAuthGuard from '../guards/student.auth.guard';
 import RegionEduAuthGuard from '../guards/regionedu.auth.guard';
-import Breadcrubs from '../components/main/breadcrubs';
+import Breadcrumbs from '../components/main/breadcrumbs';
 
 export const MainRoutes: Routes = [
   { path: '', component: Home },
   { path: 'school', component: SchoolHome },
   { path: 'ministry', component: MinistryHome },
-  { path: 'breadcrubs', component: Breadcrubs },
+  { path: 'breadcrumbs', component: Breadcrumbs },
   { path: 'parent-form', component: ParentForm, canActivate: [StudentAuthGuard] },
   { path: 'student-application-form-main', component: StudentApplicationMain, canActivate: [StudentAuthGuard] },
 //  { path: 'students-list', component: StudentsList },
@@ -89,5 +89,5 @@ export const MainDeclarations = [
   ReportGeneral,
   InformStudents,
   PerfectureView,
-  Breadcrubs
+  Breadcrumbs
 ];