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
parent 74198129
<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>
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)
});
}
}
......@@ -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) {}
......
......@@ -26,7 +26,7 @@ import { API_ENDPOINT } from '../../app.settings';
template: `
<div class="row">
<breadcrubs></breadcrubs>
<breadcrumbs></breadcrumbs>
</div>
<div
......
......@@ -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'}">
......
......@@ -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 = '';
});
}
}
<div class="row">
<breadcrubs></breadcrubs>
<breadcrumbs></breadcrumbs>
</div>
<div class = "loading" *ngIf="(criteria$ | async).size === 0"></div>
<h4> Προσωπικά Στοιχεία Μαθητή </h4>
......
......@@ -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>
......
......@@ -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">
......
......@@ -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">
......
......@@ -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() {
......
......@@ -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" >
......
......@@ -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>
......
......@@ -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>
......
......@@ -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">
......
......@@ -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();
......
......@@ -291,3 +291,9 @@ overflow-x: scroll;
.btn.sharp {
border-radius:0;
}
.username {
font-size: 0.8em;
}
.signout {
font-size: 0.8em;
}
......@@ -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
];
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