updated Application.Preview component to show live data entry, extented...

updated Application.Preview component to show live data entry, extented Region.School component to populate only schools that offer the selected course, updated Region.School component to allow until three choices
parent 0472ed33
...@@ -10,10 +10,10 @@ export class RegionSchoolsActions { ...@@ -10,10 +10,10 @@ export class RegionSchoolsActions {
private _ngRedux: NgRedux<IAppState>, private _ngRedux: NgRedux<IAppState>,
private _hds: HelperDataService) {} private _hds: HelperDataService) {}
getRegionSchools = () => { getRegionSchools = (courseActive, reload) => {
const { regions } = this._ngRedux.getState(); const { regions } = this._ngRedux.getState();
if (regions.size === 0) { if (reload === true || (reload === false && regions.size === 0)) {
return this._hds.getRegionsWithSchools().then(regions => { return this._hds.getRegionsWithSchools(courseActive).then(regions => {
return this._ngRedux.dispatch({ return this._ngRedux.dispatch({
type: REGIONSCHOOLS_RECEIVED, type: REGIONSCHOOLS_RECEIVED,
payload: { payload: {
...@@ -24,6 +24,22 @@ export class RegionSchoolsActions { ...@@ -24,6 +24,22 @@ export class RegionSchoolsActions {
} }
}; };
/*
getRegionSchools_Reload = (courseActive) => {
const { regions } = this._ngRedux.getState();
//if (regions.size === 0) {
return this._hds.getRegionsWithSchools(courseActive).then(regions => {
return this._ngRedux.dispatch({
type: REGIONSCHOOLS_RECEIVED,
payload: {
regions
}
});
});
//}
};
*/
saveRegionSchoolsSelected = (regionSchoolsSelected) => { saveRegionSchoolsSelected = (regionSchoolsSelected) => {
return this._ngRedux.dispatch({ return this._ngRedux.dispatch({
type: REGIONSCHOOLS_SELECTED_SAVE, type: REGIONSCHOOLS_SELECTED_SAVE,
......
...@@ -10,9 +10,10 @@ export class SectorCoursesActions { ...@@ -10,9 +10,10 @@ export class SectorCoursesActions {
private _ngRedux: NgRedux<IAppState>, private _ngRedux: NgRedux<IAppState>,
private _hds: HelperDataService) {} private _hds: HelperDataService) {}
getSectorCourses = () => { getSectorCourses = (reload) => {
const { sectors } = this._ngRedux.getState(); const { sectors } = this._ngRedux.getState();
if (sectors.size === 0) { //if (sectors.size === 0) {
if (reload === true || (reload === false && sectors.size === 0)) {
return this._hds.getSectorsWithCourses().then(sectors => { return this._hds.getSectorsWithCourses().then(sectors => {
return this._ngRedux.dispatch({ return this._ngRedux.dispatch({
type: SECTORCOURSES_RECEIVED, type: SECTORCOURSES_RECEIVED,
...@@ -24,11 +25,28 @@ export class SectorCoursesActions { ...@@ -24,11 +25,28 @@ export class SectorCoursesActions {
} }
}; };
saveSectorCoursesSelected = (sectorCoursesSelected) => { /*
getSectorCourses_Reload = () => {
const { sectors } = this._ngRedux.getState();
//if (sectors.size === 0) {
return this._hds.getSectorsWithCourses().then(sectors => {
return this._ngRedux.dispatch({
type: SECTORCOURSES_RECEIVED,
payload: {
sectors
}
});
});
//}
};
*/
saveSectorCoursesSelected = (sectorCoursesSelected,sectorSelected) => {
return this._ngRedux.dispatch({ return this._ngRedux.dispatch({
type: SECTORCOURSES_SELECTED_SAVE, type: SECTORCOURSES_SELECTED_SAVE,
payload: { payload: {
sectorCoursesSelected sectorCoursesSelected,
sectorSelected
} }
}); });
}; };
......
export class AppSettings { export class AppSettings {
public static get API_ENDPOINT(): string { public static get API_ENDPOINT(): string {
return 'http://localhost/dist'; // return 'http://localhost/dist';
// return 'http://localhost/drupal-8.2.5'; return 'http://localhost/drupal-8.2.5';
// return 'http://eepal.dev/drupal'; // return 'http://eepal.dev/drupal';
// return 'http://eduslim2.minedu.gov.gr/drupal'; // return 'http://eduslim2.minedu.gov.gr/drupal';
} }
......
...@@ -36,7 +36,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -36,7 +36,7 @@ import {AppSettings} from '../../app.settings';
<div class="row"> <div class="row">
<div class="btn-group inline pull-center"> <div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center" (click)="defineCourse()"> <button type="button" class="btn-primary btn-md pull-center" [disabled] = true>
Η ειδικότητά μου<span class="glyphicon glyphicon-menu-right"></span> Η ειδικότητά μου<span class="glyphicon glyphicon-menu-right"></span>
</button> </button>
</div> </div>
...@@ -51,9 +51,17 @@ import {AppSettings} from '../../app.settings'; ...@@ -51,9 +51,17 @@ import {AppSettings} from '../../app.settings';
</div> </div>
</ul> </ul>
<div class="row">
<div class="btn-group inline pull-right">
<button class="btn-primary btn-md pull-center my-btn" type="button" (click)="defineCourse()" [hidden] = "numSelectedSchools === 0" >
Επαναφορά<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<div class="row"> <div class="row">
<div class="btn-group inline pull-center"> <div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center" (click)="defineSchools()"> <button type="button" id = "butsch" class="btn-primary btn-md pull-center" (click)="defineSchools()" [disabled] = "numSelectedSchools === 0 ">
Τα σχολεία μου<span class="glyphicon glyphicon-menu-right"></span> Τα σχολεία μου<span class="glyphicon glyphicon-menu-right"></span>
</button> </button>
</div> </div>
...@@ -96,6 +104,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -96,6 +104,10 @@ import {AppSettings} from '../../app.settings';
private regions$: Observable<IRegions>; private regions$: Observable<IRegions>;
private sectorFields$: Observable<ISectorFields>; private sectorFields$: Observable<ISectorFields>;
private studentDataFields$: Observable<IStudentDataFields>; private studentDataFields$: Observable<IStudentDataFields>;
private courseActive = "-1";
private numSelectedSchools = <number>0;
private numSelectedCourses = <number>0;
constructor(private _rsa: SectorCoursesActions, constructor(private _rsa: SectorCoursesActions,
private _rsb: RegionSchoolsActions, private _rsb: RegionSchoolsActions,
...@@ -107,27 +119,45 @@ import {AppSettings} from '../../app.settings'; ...@@ -107,27 +119,45 @@ import {AppSettings} from '../../app.settings';
}; };
ngOnInit() { ngOnInit() {
this._rsa.getSectorCourses(); this.courseActive = this.getCourseActive();
this._rsa.getSectorCourses(false);
this.sectors$ = this._ngRedux.select(state => { this.sectors$ = this._ngRedux.select(state => {
let numsel = 0;
state.sectors.reduce((prevSector, sector) =>{ state.sectors.reduce((prevSector, sector) =>{
sector.courses.reduce((prevCourse, course) =>{ sector.courses.reduce((prevCourse, course) =>{
if (course.selected === true) {
numsel++;
//this.numSelectedCourses
}
return course; return course;
}, {}); }, {});
return sector; return sector;
}, {}); }, {});
this.numSelectedCourses = numsel;
return state.sectors; return state.sectors;
}); });
this._rsb.getRegionSchools(); //WORKED STRANGELY BEFORE..
/*
this.courseActive = this.getCourseActive();
this._rsb.getRegionSchools(this.courseActive);
*/
this._rsb.getRegionSchools(this.courseActive, false);
this.regions$ = this._ngRedux.select(state => { this.regions$ = this._ngRedux.select(state => {
state.regions.reduce((prevRegion, region) =>{ let numsel = 0;
region.epals.reduce((prevSchool, school) =>{ state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevSchool, school) =>{
if (school.selected === true)
numsel++;
return school; return school;
}, {}); }, {});
return region; return region;
}, {}); }, {});
return state.regions; this.numSelectedSchools = numsel;
}); return state.regions;
});
this._rsc.getSectorFields(); this._rsc.getSectorFields();
this.sectorFields$ = this._ngRedux.select(state => { this.sectorFields$ = this._ngRedux.select(state => {
...@@ -149,9 +179,41 @@ import {AppSettings} from '../../app.settings'; ...@@ -149,9 +179,41 @@ import {AppSettings} from '../../app.settings';
defineSector() { defineSector() {
this.router.navigate(['/sector-fields-select']); this.router.navigate(['/sector-fields-select']);
} }
defineCourse() { defineCourse() {
this.router.navigate(['/sectorcourses-fields-select']); //this._rsb.getRegionSchools_Reload("-1");
this._rsb.getRegionSchools("-1", true);
this.regions$ = this._ngRedux.select(state => {
let numsel = 0;
state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevSchool, school) =>{
if (school.selected === true)
numsel++;
return school;
}, {});
return region;
}, {});
this.numSelectedSchools = numsel;
return state.regions;
});
//this._rsa.getSectorCourses_Reload();
this._rsa.getSectorCourses(true);
this.sectors$ = this._ngRedux.select(state => {
state.sectors.reduce((prevSector, sector) =>{
sector.courses.reduce((prevCourse, course) =>{
return course;
}, {});
return sector;
}, {});
return state.sectors;
});
this.router.navigate(['/sectorcourses-fields-select']);
} }
defineSchools() { defineSchools() {
this.router.navigate(['/region-schools-select']); this.router.navigate(['/region-schools-select']);
} }
...@@ -159,4 +221,18 @@ import {AppSettings} from '../../app.settings'; ...@@ -159,4 +221,18 @@ import {AppSettings} from '../../app.settings';
this.router.navigate(['/student-application-form-main']); this.router.navigate(['/student-application-form-main']);
} }
getCourseActive() {
const { sectors } = this._ngRedux.getState();
let l,m;
for ( l=0; l<sectors.size; l++)
if (sectors["_tail"]["array"][l]["sector_selected"] === true)
for ( m=0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
}
} }
...@@ -5,8 +5,13 @@ import { Injectable } from "@angular/core"; ...@@ -5,8 +5,13 @@ import { Injectable } from "@angular/core";
import { RegionSchoolsActions } from '../../actions/regionschools.actions'; import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { NgRedux, select } from 'ng2-redux'; import { NgRedux, select } from 'ng2-redux';
import { IRegions } from '../../store/regionschools/regionschools.types'; import { IRegions } from '../../store/regionschools/regionschools.types';
import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { IAppState } from '../../store/store'; import { IAppState } from '../../store/store';
import { import {
FormBuilder, FormBuilder,
FormGroup, FormGroup,
...@@ -32,7 +37,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -32,7 +37,10 @@ import {AppSettings} from '../../app.settings';
<li class="list-group-item" > <li class="list-group-item" >
<div class="row"> <div class="row">
<div class="col-md-2"> <div class="col-md-2">
<input type="checkbox" formControlName="{{ epal$.globalIndex }}"> <input #cb type="checkbox" formControlName="{{ epal$.globalIndex }}"
(change)="saveSelected()"
[hidden] = "numSelected === 3 && cb.checked === false"
>
</div> </div>
<div class="col-md-10"> <div class="col-md-10">
{{epal$.epal_name}} {{epal$.epal_name}}
...@@ -45,7 +53,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -45,7 +53,7 @@ import {AppSettings} from '../../app.settings';
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-2 col-md-offset-5"> <div class="col-md-2 col-md-offset-5">
<button type="button" class="btn-primary btn-lg pull-center" (click)="saveSelected()"> <button type="button" class="btn-primary btn-lg pull-center" (click)="navigateToApplication()" [disabled] = "numSelected === 0" >
Συνέχεια<span class="glyphicon glyphicon-menu-right"></span> Συνέχεια<span class="glyphicon glyphicon-menu-right"></span>
</button> </button>
</div> </div>
...@@ -53,20 +61,26 @@ import {AppSettings} from '../../app.settings'; ...@@ -53,20 +61,26 @@ import {AppSettings} from '../../app.settings';
</form> </form>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<application-preview-select></application-preview-select> <application-preview-select></application-preview-select>
</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 formGroup: FormGroup; private formGroup: FormGroup;
private rss = new FormArray([]); private rss = new FormArray([]);
private regionActive = <number>-1; private regionActive = <number>-1;
private numSelected = <number>0;
private courseActive = "-1";
constructor(private fb: FormBuilder, constructor(private fb: FormBuilder,
private _rsa: RegionSchoolsActions, private _rsa: RegionSchoolsActions,
private _rsb: SectorCoursesActions,
private _ngRedux: NgRedux<IAppState>, private _ngRedux: NgRedux<IAppState>,
private router: Router private router: Router
) { ) {
...@@ -76,24 +90,31 @@ import {AppSettings} from '../../app.settings'; ...@@ -76,24 +90,31 @@ import {AppSettings} from '../../app.settings';
}; };
ngOnInit() { ngOnInit() {
this.courseActive = this.getCourseActive();
this._rsa.getRegionSchools(); this._rsa.getRegionSchools(this.courseActive, false);
this.regions$ = this._ngRedux.select(state => { this.regions$ = this._ngRedux.select(state => {
let numsel = 0;
state.regions.reduce((prevRegion, region) =>{ state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevEpal, epal) =>{ region.epals.reduce((prevEpal, epal) =>{
this.rss.push( new FormControl(epal.selected, [])); this.rss.push( new FormControl(epal.selected, []));
if (epal.selected === true)
numsel++;
return epal; return epal;
}, {}); }, {});
return region; return region;
}, {}); }, {});
this.numSelected = numsel;
return state.regions; return state.regions;
}); });
} }
setActiveRegion(ind) { setActiveRegion(ind) {
this.regionActive = ind; if (ind === this.regionActive)
ind = -1;
this.regionActive = ind;
} }
toggleBackgroundColor(ind) { toggleBackgroundColor(ind) {
...@@ -102,6 +123,32 @@ import {AppSettings} from '../../app.settings'; ...@@ -102,6 +123,32 @@ import {AppSettings} from '../../app.settings';
saveSelected() { saveSelected() {
this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray); this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray);
this.router.navigate(['/student-application-form-main']); //this.router.navigate(['/student-application-form-main']);
}
navigateToApplication() {
this.router.navigate(['/student-application-form-main']);
}
//not used
updateCheckedOptions(globalIndex, cb){
/*
if (cb.checked)
this.numselected--;
else
this.numselected++;
*/
this.saveSelected();
} }
getCourseActive() {
const { sectors } = this._ngRedux.getState();
let l,m;
for ( l=0; l<sectors.size; l++)
if (sectors["_tail"]["array"][l]["sector_selected"] === true)
for ( m=0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
}
} }
...@@ -34,7 +34,8 @@ import {AppSettings} from '../../app.settings'; ...@@ -34,7 +34,8 @@ import {AppSettings} from '../../app.settings';
<div class="col-md-2"> <div class="col-md-2">
<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-10"> <div class="col-md-10">
{{course$.course_name}} {{course$.course_name}}
...@@ -48,7 +49,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -48,7 +49,7 @@ import {AppSettings} from '../../app.settings';
<div class="row"> <div class="row">
<div class="col-md-2 col-md-offset-5"> <div class="col-md-2 col-md-offset-5">
<button type="button" class="btn-primary btn-lg pull-center" (click)="saveSelected()" [disabled]="idx === -1" > <button type="button" class="btn-primary btn-lg pull-center" (click)="navigateToSchools()" [disabled]="idx === -1" >
Συνέχεια<span class="glyphicon glyphicon-menu-right"></span> Συνέχεια<span class="glyphicon glyphicon-menu-right"></span>
</button> </button>
</div> </div>
...@@ -68,6 +69,8 @@ import {AppSettings} from '../../app.settings'; ...@@ -68,6 +69,8 @@ import {AppSettings} from '../../app.settings';
private rss = new FormArray([]); private rss = new FormArray([]);
private sectorActive = <number>-1; private sectorActive = <number>-1;
private idx = <number>-1; private idx = <number>-1;
private sectorsList: Array<boolean> = new Array();
//private sectorsList = new Array([]);
constructor(private fb: FormBuilder, constructor(private fb: FormBuilder,
private _rsa: SectorCoursesActions, private _rsa: SectorCoursesActions,
...@@ -80,24 +83,38 @@ import {AppSettings} from '../../app.settings'; ...@@ -80,24 +83,38 @@ import {AppSettings} from '../../app.settings';
}; };
ngOnInit() { ngOnInit() {
this._rsa.getSectorCourses(); this._rsa.getSectorCourses(false);
let ids = 0;
this.sectors$ = this._ngRedux.select(state => { this.sectors$ = this._ngRedux.select(state => {
state.sectors.reduce((prevSector, sector) =>{ state.sectors.reduce((prevSector, sector) =>{
this.sectorsList[ids] = sector.sector_selected;
ids++;
//In case we want to preserve last checked option when we revisit the form
//if (sector.sector_selected === true)
//this.sectorActive = ids-1;
sector.courses.reduce((prevCourse, course) =>{ sector.courses.reduce((prevCourse, course) =>{
this.rss.push( new FormControl(course.selected, [])); this.rss.push( new FormControl(course.selected, []));
this.retrieveCheck(); //this.retrieveCheck();
if (course.selected === true) {
//In case we want to preserve last checked option when we revisit the form
//this.idx = course.globalIndex;
}
return course; return course;
}, {}); }, {});
return sector; return sector;
}, {}); }, {});
ids = 0;
return state.sectors; return state.sectors;
}); });
} }
setActiveSector(ind) { setActiveSector(ind) {
this.sectorActive = ind; if (ind === this.sectorActive)
ind = -1;
this.sectorActive = ind;
} }
toggleBackgroundColor(ind) { toggleBackgroundColor(ind) {
...@@ -105,28 +122,29 @@ import {AppSettings} from '../../app.settings'; ...@@ -105,28 +122,29 @@ import {AppSettings} from '../../app.settings';
} }
saveSelected() { saveSelected() {
this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray); this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList);
}
navigateToSchools() {
this.router.navigate(['/region-schools-select']); this.router.navigate(['/region-schools-select']);
} }
updateCheckedOptions(globalIndex, cb){ updateCheckedOptions(globalIndex, cb){
/*
if (this.oneselected)
this.oneselected = 0;
else
this.oneselected = 1;
console.log(this.oneselected);