UI enhancements, application procedure fixed, spinner fixed etc

parent 92124969
dist/* dist/*
source/app.settings.ts
node_modules/* node_modules/*
!drupal/ !drupal/
drupal/* drupal/*
......
.main-wrapper { .main-wrapper {
background: #FFF none repeat-y 0 0; background: #FFF none repeat-y 0 0;
min-height: calc(100vh - 220px); min-height: calc(100vh - 220px);
#content { #content {
zoom: 1; zoom: 1;
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
} }
.left-choices { .left-choices {
h4{ h4{
font-weight: bold; font-weight: bold;
font-size: 1rem; font-size: 1rem;
...@@ -51,9 +51,9 @@ ...@@ -51,9 +51,9 @@
border: none!important; border: none!important;
width: 200px; width: 200px;
padding:5px 10px; padding:5px 10px;
} }
} }
...@@ -75,13 +75,13 @@ ...@@ -75,13 +75,13 @@
li.list-group-item{ li.list-group-item{
color: black; color: black;
background-color: white; // background-color: white;
border: none!important; border: none!important;
padding: 0.3rem 0.3rem!important; padding: 0.3rem 0.3rem!important;
h5{ h5{
font-size: 1rem; font-size: 1rem;
} }
} }
...@@ -92,11 +92,11 @@ ...@@ -92,11 +92,11 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.main-wrapper { .main-wrapper {
#content { #content {
padding: 0 10px 10px; padding: 0 10px 10px;
box-shadow: 0 0 20px #888888; box-shadow: 0 0 20px #888888;
} }
} }
} }
\ No newline at end of file
export const API_ENDPOINT = '';
export class AppSettings {
public static get API_ENDPOINT(): string {
return '';
}
}
...@@ -169,13 +169,13 @@ ...@@ -169,13 +169,13 @@
</form> </form>
<div class="row"> <div class="row" style="margin-top: 20px;">
<div class="col-md-2 col-md-offset-4"> <div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-center" (click)="saveSelected()"> <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()">
<i class="fa fa-backward"></i> <i class="fa fa-backward"></i>
</button> </button>
</div> </div>
<div class="col-md-8"> <div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-right" (click)="submitSelected()" [disabled]="studentDataGroup.invalid"> <button type="button" class="btn-primary btn-lg pull-right" (click)="submitSelected()" [disabled]="studentDataGroup.invalid">
<i class="fa fa-forward"></i> <i class="fa fa-forward"></i>
</button> </button>
......
...@@ -92,6 +92,23 @@ import { ...@@ -92,6 +92,23 @@ import {
} }
navigateBack() {
/* this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) =>{
if (epalclass.name === "Α' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Β' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Γ' Λυκείου")
this.router.navigate(['/region-schools-select']);
return epalclass;
}, {});
return state.epalclasses;
}); */
this.router.navigate(['/schools-order-select']);
}
submitSelected() { submitSelected() {
this._sdfa.saveStudentDataFields([this.studentDataGroup.value]); this._sdfa.saveStudentDataFields([this.studentDataGroup.value]);
......
...@@ -8,7 +8,6 @@ import { IRegions } from '../../store/regionschools/regionschools.types'; ...@@ -8,7 +8,6 @@ import { IRegions } from '../../store/regionschools/regionschools.types';
import { SectorCoursesActions } from '../../actions/sectorcourses.actions'; import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types'; import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { IAppState } from '../../store/store'; import { IAppState } from '../../store/store';
import { LoaderService } from '../../services/Spinner.service';
import {RemoveSpaces} from '../../pipes/removespaces'; import {RemoveSpaces} from '../../pipes/removespaces';
...@@ -23,19 +22,19 @@ import {AppSettings} from '../../app.settings'; ...@@ -23,19 +22,19 @@ import {AppSettings} from '../../app.settings';
@Component({ @Component({
selector: 'course-fields-select', selector: 'course-fields-select',
template: ` template: `
<div class = "loading" *ngIf="objLoaderStatus"> <div class = "loading" *ngIf="showLoader$ | async">
</div> </div>
<div class="row equal"> <!-- <div class="row equal">
<div class="col-md-12"> <div class="col-md-12"> -->
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<div formArrayName="formArray"> <div formArrayName="formArray">
<ul class="list-group"> <ul class="list-group main-view">
<div *ngFor="let region$ of regions$ | async; let i=index"> <div *ngFor="let region$ of regions$ | async; let i=index; let isOdd=odd; let isEven=even" >
<li class="list-group-item" (click)="setActiveRegion(i)" [style.background-color]="toggleBackgroundColor(i)"> <li class="list-group-item isclickable" (click)="setActiveRegion(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="regionActive === i">
<h5>{{region$.region_name}}</h5> <h5>{{region$.region_name}}</h5>
</li> </li>
<div *ngFor="let epal$ of region$.epals; let j=index;" [hidden]="i !== regionActive"> <div *ngFor="let epal$ of region$.epals; let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== regionActive">
<div class="row"> <div class="row">
<div class="col-md-2 col-md-offset-1"> <div class="col-md-2 col-md-offset-1">
...@@ -44,7 +43,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -44,7 +43,7 @@ import {AppSettings} from '../../app.settings';
[hidden] = "numSelected === 3 && cb.checked === false" [hidden] = "numSelected === 3 && cb.checked === false"
> >
</div> </div>
<div class="col-md-8 col-md-offset-1"> <div class="col-md-8 col-md-offset-1 isclickable">
{{epal$.epal_name | removeSpaces}} {{epal$.epal_name | removeSpaces}}
</div> </div>
</div> </div>
...@@ -54,8 +53,13 @@ import {AppSettings} from '../../app.settings'; ...@@ -54,8 +53,13 @@ import {AppSettings} from '../../app.settings';
</div> </div>
</ul> </ul>
</div> </div>
<div class="row"> <div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async)">
<div class="col-md-12 col-md-offset-5"> <div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()" >
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0" > <button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0" >
<i class="fa fa-forward"></i> <i class="fa fa-forward"></i>
</button> </button>
...@@ -63,14 +67,15 @@ import {AppSettings} from '../../app.settings'; ...@@ -63,14 +67,15 @@ import {AppSettings} from '../../app.settings';
</div> </div>
</form> </form>
</div> <!-- </div>
</div> </div> -->
` `
}) })
@Injectable() export default class RegionSchoolsSelect implements OnInit { @Injectable() export default class RegionSchoolsSelect implements OnInit {
private regions$: Observable<IRegions>; private regions$: Observable<IRegions>;
private sectors$: Observable<ISectors>; private sectors$: Observable<ISectors>;
private showLoader$: Observable<boolean>;
private formGroup: FormGroup; private formGroup: FormGroup;
private rss = new FormArray([]); private rss = new FormArray([]);
private classActive = "-1"; private classActive = "-1";
...@@ -78,7 +83,6 @@ import {AppSettings} from '../../app.settings'; ...@@ -78,7 +83,6 @@ import {AppSettings} from '../../app.settings';
private courseActive = -1; private courseActive = -1;
private numSelected = <number>0; private numSelected = <number>0;
objLoaderStatus: boolean;
//private schoolArray: Array<boolean> = new Array(); //private schoolArray: Array<boolean> = new Array();
...@@ -86,8 +90,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -86,8 +90,7 @@ import {AppSettings} from '../../app.settings';
private _rsa: RegionSchoolsActions, private _rsa: RegionSchoolsActions,
private _rsb: SectorCoursesActions, private _rsb: SectorCoursesActions,
private _ngRedux: NgRedux<IAppState>, private _ngRedux: NgRedux<IAppState>,
private router: Router, private router: Router
private loaderService: LoaderService
) { ) {
this.formGroup = this.fb.group({ this.formGroup = this.fb.group({
...@@ -95,21 +98,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -95,21 +98,10 @@ import {AppSettings} from '../../app.settings';
}); });
this.objLoaderStatus=false;
console.log (this.objLoaderStatus);
}; };
ngOnInit() { ngOnInit() {
this.loaderService.loaderStatus.subscribe((val: boolean) => {
this.objLoaderStatus = val;
});
this.loaderService.displayLoader(true); // enable spinner
// this.objLoaderStatus = true;
console.log (this.objLoaderStatus,"AAAAAAAAAAAAA");
this.classActive = this.classActive = this.getClassActive(); this.classActive = this.classActive = this.getClassActive();
let class_id = -1; let class_id = -1;
...@@ -127,7 +119,6 @@ import {AppSettings} from '../../app.settings'; ...@@ -127,7 +119,6 @@ import {AppSettings} from '../../app.settings';
} }
this._rsa.getRegionSchools(class_id,this.courseActive, false); this._rsa.getRegionSchools(class_id,this.courseActive, false);
console.log(this.courseActive,"aaaaaaaaaaaaaa");
this.regions$ = this._ngRedux.select(state => { this.regions$ = this._ngRedux.select(state => {
let numsel = 0; let numsel = 0;
state.regions.reduce((prevRegion, region) =>{ state.regions.reduce((prevRegion, region) =>{
...@@ -143,10 +134,20 @@ import {AppSettings} from '../../app.settings'; ...@@ -143,10 +134,20 @@ import {AppSettings} from '../../app.settings';
this.numSelected = numsel; this.numSelected = numsel;
return state.regions; return state.regions;
}); });
//this.objLoaderStatus = false; this.showLoader$ = this.regions$.map(regions => regions.size === 0);
this.loaderService.displayLoader(false); // enable spinner }
console.log (this.objLoaderStatus,"BBBBBBBBBBBBB");
navigateBack() {
// this.router.navigate(['/epal-class-select']);
if (this.classActive === "Α' Λυκείου") {
this.router.navigate(['/epal-class-select']);
}
else if (this.classActive === "Β' Λυκείου") {
this.router.navigate(['/sector-fields-select']);
}
else if (this.classActive === "Γ' Λυκείου") {
this.router.navigate(['/sectorcourses-fields-select']);
}
} }
setActiveRegion(ind) { setActiveRegion(ind) {
...@@ -155,17 +156,8 @@ import {AppSettings} from '../../app.settings'; ...@@ -155,17 +156,8 @@ import {AppSettings} from '../../app.settings';
this.regionActive = ind; this.regionActive = ind;
} }
toggleBackgroundColor(ind) {
return ((this.regionActive === ind) ? "#fd9665" : "white");
}
saveSelected(cb,j) { saveSelected(cb,j) {
this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray); this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray);
//σε κάθε νέο check, αρχικοποίησε τη σειρά προτιμήσεων (σειρά προτίμησης:0)
/* let schoolArrayOrders: Array<number> = new Array();
for (let i=0; i < this.formGroup.value.formArray.length; i++)
schoolArrayOrders.push(0);
this._rsa.saveRegionSchoolsOrder(schoolArrayOrders); */
} }
navigateToApplication() { navigateToApplication() {
......
...@@ -23,10 +23,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -23,10 +23,10 @@ import {AppSettings} from '../../app.settings';
Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα κουμπάκια δίπλα στα ονόματα των σχολείων. Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα κουμπάκια δίπλα στα ονόματα των σχολείων.
Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p> Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>
<div class="row equal"> <!-- <div class="row equal">
<div class="col-md-12"> <div class="col-md-12"> -->
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<div *ngFor="let schoolField$ of schoolNames; let i=index"> <div *ngFor="let schoolField$ of schoolNames; let i=index; let isOdd=odd; let isEven=even" [class.odd]="isOdd" [class.even]="isEven">
<button type="button" class="btn btn-info btn-sm pull-right" style="width:120px;margin-bottom:4px;white-space: normal;word-wrap:break-word;" <button type="button" class="btn btn-info btn-sm pull-right" style="width:120px;margin-bottom:4px;white-space: normal;word-wrap:break-word;"
(click)="changeOrder(i,'up')" *ngIf = "i !== 0">Ανέβασέ με</button> (click)="changeOrder(i,'up')" *ngIf = "i !== 0">Ανέβασέ με</button>
<!-- <!--
...@@ -40,13 +40,22 @@ import {AppSettings} from '../../app.settings'; ...@@ -40,13 +40,22 @@ import {AppSettings} from '../../app.settings';
Προτίμηση {{i+1}}: {{schoolField$}} Προτίμηση {{i+1}}: {{schoolField$}}
</li> </li>
</div> </div>
<div class="col-md-12"> <div class="row" style="margin-top: 20px;">
<button type="button" class="btn btn-primary btn-lg pull-right" (click)="navigateToStudentForm()" ><i class="fa fa-forward"></i></button> <div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack();" >
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToStudentForm()" [disabled] = "numSelected === 0" >
<i class="fa fa-forward"></i>
</button>
</div>
</div> </div>
</form> </form>
</div> <!-- </div>
</div> </div> -->
` `
}) })
...@@ -119,4 +128,21 @@ import {AppSettings} from '../../app.settings'; ...@@ -119,4 +128,21 @@ import {AppSettings} from '../../app.settings';
this.router.navigate(['/student-application-form-main']); this.router.navigate(['/student-application-form-main']);
} }
navigateBack() {
/* this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) =>{
if (epalclass.name === "Α' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Β' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Γ' Λυκείου")
this.router.navigate(['/region-schools-select']);
return epalclass;
}, {});
return state.epalclasses;
}); */
this.router.navigate(['/region-schools-select']);
}
} }
...@@ -21,24 +21,24 @@ import {AppSettings} from '../../app.settings'; ...@@ -21,24 +21,24 @@ import {AppSettings} from '../../app.settings';
@Component({ @Component({
selector: 'sectorcourses-fields-select', selector: 'sectorcourses-fields-select',
template: ` template: `
<div class="row equal"> <div class = "loading" *ngIf="(showLoader$ | async) && (showLoader2$ | async)">
<div class="col-md-12"> </div>
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<div formArrayName="formArray"> <div formArrayName="formArray">
<ul class="list-group"> <ul class="list-group">
<div *ngFor="let sector$ of sectors$ | async; let i=index"> <div *ngFor="let sector$ of sectors$ | async; let i=index; let isOdd=odd; let isEven=even">
<li class="list-group-item" (click)="setActiveSector(i)" [style.background-color]="toggleBackgroundColor(i)"> <li class="list-group-item isclickable" (click)="setActiveSector(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="sectorActive === i">
<h5>{{sector$.sector_name}}</h5> <h5>{{sector$.sector_name}}</h5>
</li> </li>
<div *ngFor="let course$ of sector$.courses; let j=index;" [hidden]="i !== sectorActive"> <div *ngFor="let course$ of sector$.courses; let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== sectorActive">
<div class="row"> <div class="row">
<div class="col-md-2 col-md-offset-1"> <div class="col-md-2 col-md-offset-1">
<input #cb type="checkbox" formControlName="{{ course$.globalIndex }}" <input #cb type="checkbox" formControlName="{{ course$.globalIndex }}"
(change)="updateCheckedOptions(course$.globalIndex, cb)" (change)="updateCheckedOptions(course$.globalIndex, cb)"
[checked] = " course$.globalIndex === idx " [checked] = " course$.globalIndex === idx "
> >
</div> </div>
<div class="col-md-8 col-md-offset-1"> <div class="col-md-8 col-md-offset-1 isclickable">
{{course$.course_name | removeSpaces}} {{course$.course_name | removeSpaces}}
</div> </div>
</div> </div>
...@@ -47,22 +47,26 @@ import {AppSettings} from '../../app.settings'; ...@@ -47,22 +47,26 @@ import {AppSettings} from '../../app.settings';
</ul> </ul>
</div> </div>
<div class="row"> <div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async) || !(showLoader2$ | async)">
<div class="col-md-12 col-md-offset-5"> <div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToSchools()" [disabled]="idx === -1" > <button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToSchools()" [disabled]="idx === -1">
<i class="fa fa-forward"></i> <i class="fa fa-forward"></i>
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</div>
</div>
` `
}) })
@Injectable() export default class SectorCoursesSelect implements OnInit { @Injectable() export default class SectorCoursesSelect implements OnInit {
private sectors$: Observable<ISectors>; private sectors$: Observable<ISectors>;
private regions$: Observable<IRegions>; private regions$: Observable<IRegions>;
private showLoader$: Observable<boolean>;
private showLoader2$: Observable<boolean>;
private formGroup: FormGroup; private formGroup: FormGroup;
private rss = new FormArray([]); private rss = new FormArray([]);
private sectorActive = <number>-1; private sectorActive = <number>-1;
...@@ -107,6 +111,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -107,6 +111,7 @@ import {AppSettings} from '../../app.settings';
ids = 0; ids = 0;
return state.sectors; return state.sectors;
}); });
this.showLoader$ = this.sectors$.map(sectors => sectors.size === 0);
} }
...@@ -116,10 +121,6 @@ import {AppSettings} from '../../app.settings'; ...@@ -116,10 +121,6 @@ import {AppSettings} from '../../app.settings';
this.sectorActive = ind; this.sectorActive = ind;
} }
toggleBackgroundColor(ind) {
return ((this.sectorActive === ind) ? "#fd9665" : "white");
}
saveSelected() { saveSelected() {
this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList); this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList);
} }
...@@ -157,6 +158,7 @@ getAllSchools() { ...@@ -157,6 +158,7 @@ getAllSchools() {
}, {}); }, {});
return state.regions; return state.regions;
}); });
this.showLoader2$ = this.regions$.map(regions => regions.size === 0);
} }
......
...@@ -21,17 +21,20 @@ import {AppSettings} from '../../app.settings'; ...@@ -21,17 +21,20 @@ import {AppSettings} from '../../app.settings';
selector: 'sector-fields-select', selector: 'sector-fields-select',
template: ` template: `
<div class="row equal"> <!-- <div class="row equal">
<div class="col-md-12"> <div class="col-md-12"> -->
<div class = "loading" *ngIf="(showLoader$ | async) && (showLoader2$ | async)">
</div>
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<div formArrayName="formArray"> <div formArrayName="formArray">
<ul class="list-group main-view">
<div *ngFor="let sectorField$ of sectorFields$ | async; let i=index"> <div *ngFor="let sectorField$ of sectorFields$ | async; let i=index; let isOdd=odd; let isEven=even">
<li class="list-group-item" (click)="setActiveSectorAndSave(i)" [style.background-color]="toggleBackgroundColor(i)"> <li class="list-group-item isclickable" (click)="setActiveSectorAndSave(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="sectorActive === i">
<h5>{{sectorField$.name}}</h5> <h5>{{sectorField$.name}}</h5>
</li> </li>
</div> </div>
</ul>