antipattern fix(WIP) - asyncpipe with behaviorsubject

parent eeaada73
...@@ -49,11 +49,13 @@ export class RegionSchoolsActions { ...@@ -49,11 +49,13 @@ export class RegionSchoolsActions {
}; };
*/ */
saveRegionSchoolsSelected = (regionSchoolsSelected) => { saveRegionSchoolsSelected = (checked, i, j) => {
return this._ngRedux.dispatch({ return this._ngRedux.dispatch({
type: REGIONSCHOOLS_SELECTED_SAVE, type: REGIONSCHOOLS_SELECTED_SAVE,
payload: { payload: {
regionSchoolsSelected checked: checked,
rIndex: i,
sIndex: j
} }
}); });
}; };
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx'; import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { Injectable } from "@angular/core"; import { Injectable } from "@angular/core";
import { NgRedux, select } from 'ng2-redux'; import { NgRedux, select } from 'ng2-redux';
import { IAppState } from '../../store/store'; import { IAppState } from '../../store/store';
...@@ -9,14 +9,18 @@ import { SectorCoursesActions } from '../../actions/sectorcourses.actions'; ...@@ -9,14 +9,18 @@ import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { RegionSchoolsActions } from '../../actions/regionschools.actions'; import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { StudentDataFieldsActions } from '../../actions/studentdatafields.actions'; import { StudentDataFieldsActions } from '../../actions/studentdatafields.actions';
import { EpalClassesActions } from '../../actions/epalclass.actions'; import { EpalClassesActions } from '../../actions/epalclass.actions';
import { AmkaFillsActions } from '../../actions/amkafill.actions';
import { ISectorFields } from '../../store/sectorfields/sectorfields.types'; import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types'; import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { IRegions } from '../../store/regionschools/regionschools.types'; import { IRegions } from '../../store/regionschools/regionschools.types';
import { IStudentDataFields } from '../../store/studentdatafields/studentdatafields.types'; import { IStudentDataFields } from '../../store/studentdatafields/studentdatafields.types';
import { IEpalClasses } from '../../store/epalclasses/epalclasses.types'; import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
import { IAmkaFills } from '../../store/amkafill/amkafills.types';
import {AppSettings} from '../../app.settings'; import {AppSettings} from '../../app.settings';
import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
import { EPALCLASSES_INITIAL_STATE } from '../../store/epalclasses/epalclasses.initial-state';
import { SECTOR_COURSES_INITIAL_STATE } from '../../store/sectorcourses/sectorcourses.initial-state';
import { SECTOR_FIELDS_INITIAL_STATE } from '../../store/sectorfields/sectorfields.initial-state';
import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields/studentdatafields.initial-state';
@Component({ @Component({
...@@ -35,7 +39,6 @@ import {AppSettings} from '../../app.settings'; ...@@ -35,7 +39,6 @@ import {AppSettings} from '../../app.settings';
</ul> </ul>
</div> </div>
<div *ngFor="let sectorField$ of sectorFields$ | async"> <div *ngFor="let sectorField$ of sectorFields$ | async">
<ul class="list-group left-side-view"> <ul class="list-group left-side-view">
<li class="list-group-item active" *ngIf="sectorField$.selected === true" > <li class="list-group-item active" *ngIf="sectorField$.selected === true" >
...@@ -119,12 +122,16 @@ import {AppSettings} from '../../app.settings'; ...@@ -119,12 +122,16 @@ import {AppSettings} from '../../app.settings';
}) })
@Injectable() export default class ApplicationPreview implements OnInit { @Injectable() export default class ApplicationPreview implements OnInit {
private sectors$: Observable<ISectors>; private sectors$: BehaviorSubject<ISectors>;
private regions$: Observable<IRegions>; private regions$: BehaviorSubject<IRegions>;
private sectorFields$: Observable<ISectorFields>; private sectorFields$: BehaviorSubject<ISectorFields>;
private studentDataFields$: Observable<IStudentDataFields>; private studentDataFields$: BehaviorSubject<IStudentDataFields>;
private selectedAmkaFills$: Observable<IAmkaFills>; private epalclasses$: BehaviorSubject<IEpalClasses>;
private epalclasses$: Observable<IEpalClasses>; private sectorsSub: Subscription;
private regionsSub: Subscription;
private sectorFieldsSub: Subscription;
private studentDataFieldsSub: Subscription;
private epalclassesSub: Subscription;
private courseActive = "-1"; private courseActive = "-1";
private numSelectedSchools = <number>0; private numSelectedSchools = <number>0;
private numSelectedOrder = <number>0; private numSelectedOrder = <number>0;
...@@ -133,32 +140,34 @@ import {AppSettings} from '../../app.settings'; ...@@ -133,32 +140,34 @@ import {AppSettings} from '../../app.settings';
constructor(private _ngRedux: NgRedux<IAppState>, constructor(private _ngRedux: NgRedux<IAppState>,
private router: Router private router: Router
) { ) {
this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
this.epalclasses$ = new BehaviorSubject(EPALCLASSES_INITIAL_STATE);
this.sectors$ = new BehaviorSubject(SECTOR_COURSES_INITIAL_STATE);
this.sectorFields$ = new BehaviorSubject(SECTOR_FIELDS_INITIAL_STATE);
this.studentDataFields$ = new BehaviorSubject(STUDENT_DATA_FIELDS_INITIAL_STATE);
}; };
ngOnInit() { ngOnInit() {
this.courseActive = this.getCourseActive(); this.sectorsSub = this._ngRedux.select(state => {
this.sectors$ = this._ngRedux.select(state => {
//let numsel = 0;
state.sectors.reduce((prevSector, sector) => { state.sectors.reduce((prevSector, sector) => {
//if (sector.sector_selected)
console.log("hello" + sector.sector_selected);
sector.courses.reduce((prevCourse, course) => { sector.courses.reduce((prevCourse, course) => {
//if (course.selected === true) { if (course.selected === true) {
// numsel++; this.courseActive = course.course_id;
//} }
return course; return course;
}, {}); }, {});
return sector; return sector;
}, {}); }, {});
//this.numSelectedCourses = numsel; //this.numSelectedCourses = numsel;
return state.sectors; return state.sectors;
}); }).subscribe(this.sectors$);
this.regions$ = this._ngRedux.select(state => { this.regionsSub = this._ngRedux.select(state => {
let numsel = 0, numsel2 = 0; let numsel = 0, numsel2 = 0;
state.regions.reduce((prevRegion, region) => { state.regions.reduce((prevRegion, region) => {
region.epals.reduce((prevEpal, epal) => { region.epals.reduce((prevEpal, epal) => {
console.log("hello" + epal.selected);
if (epal.selected === true) { if (epal.selected === true) {
numsel++; numsel++;
} }
...@@ -172,30 +181,30 @@ import {AppSettings} from '../../app.settings'; ...@@ -172,30 +181,30 @@ import {AppSettings} from '../../app.settings';
this.numSelectedSchools = numsel; this.numSelectedSchools = numsel;
this.numSelectedOrder = numsel2; this.numSelectedOrder = numsel2;
return state.regions; return state.regions;
}); }).subscribe(this.regions$);
this.sectorFields$ = this._ngRedux.select(state => { this.sectorFieldsSub = this._ngRedux.select(state => {
state.sectorFields.reduce(({}, sectorField) => { state.sectorFields.reduce(({}, sectorField) => {
return sectorField; return sectorField;
}, {}); }, {});
return state.sectorFields; return state.sectorFields;
}); }).subscribe(this.sectorFields$);
this.studentDataFields$ = this._ngRedux.select(state => { this.studentDataFieldsSub = this._ngRedux.select(state => {
state.studentDataFields.reduce(({}, studentDataField) => { state.studentDataFields.reduce(({}, studentDataField) => {
return studentDataField; return studentDataField;
}, {}); }, {});
return state.studentDataFields; return state.studentDataFields;
}); }).subscribe(this.studentDataFields$);
this.selectedAmkaFills$ = this._ngRedux.select(state => { /* this.selectedAmkaFills$ = this._ngRedux.select(state => {
state.amkafills.reduce(({}, selectedAmkaFill) => { state.amkafills.reduce(({}, selectedAmkaFill) => {
return selectedAmkaFill; return selectedAmkaFill;
}, {}); }, {});
return state.amkafills; return state.amkafills;
}); }); */
this.epalclasses$ = this._ngRedux.select(state => { this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) => { state.epalclasses.reduce(({}, epalclass) => {
if (epalclass.name === "Α' Λυκείου") if (epalclass.name === "Α' Λυκείου")
this.classSelected = 1; this.classSelected = 1;
...@@ -206,42 +215,23 @@ import {AppSettings} from '../../app.settings'; ...@@ -206,42 +215,23 @@ import {AppSettings} from '../../app.settings';
return epalclass; return epalclass;
}, {}); }, {});
return state.epalclasses; return state.epalclasses;
}); }).subscribe(this.epalclasses$);
}
defineSector() {
this.router.navigate(['/sector-fields-select']);
}
defineSchools() {
this.router.navigate(['/region-schools-select']);
}
definePersonalData() {
this.router.navigate(['/student-application-form-main']);
}
defineClass() {
this.router.navigate(['/epal-class-select']);
}
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"];
} }
defineCourse() { ngOnDestroy() {
this.router.navigate(['/sectorcourses-fields-select']); this.regionsSub.unsubscribe();
this.epalclassesSub.unsubscribe();
this.sectorsSub.unsubscribe();
this.sectorFieldsSub.unsubscribe();
this.studentDataFieldsSub.unsubscribe();
} }
defineOrder() { showValues() {
this.router.navigate(['/schools-order-select']); console.log(this.epalclasses$);
console.log(this.studentDataFields$);
console.log(this.regions$);
console.log(this.sectors$);
} }
} }
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx'; import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { Injectable } from "@angular/core"; 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 { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
import { EPALCLASSES_INITIAL_STATE } from '../../store/epalclasses/epalclasses.initial-state';
import { SECTOR_COURSES_INITIAL_STATE } from '../../store/sectorcourses/sectorcourses.initial-state';
import { SECTOR_FIELDS_INITIAL_STATE } from '../../store/sectorfields/sectorfields.initial-state';
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';
...@@ -24,7 +28,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -24,7 +28,7 @@ import {AppSettings} from '../../app.settings';
@Component({ @Component({
selector: 'region-schools-select', selector: 'region-schools-select',
template: ` template: `
<div class = "loading" *ngIf="showLoader$ | async"> <div class = "loading" *ngIf="(regions$ | async).size === 0">
</div> </div>
<!-- <div class="row equal"> <!-- <div class="row equal">
<div class="col-md-12"> --> <div class="col-md-12"> -->
...@@ -41,8 +45,8 @@ import {AppSettings} from '../../app.settings'; ...@@ -41,8 +45,8 @@ import {AppSettings} from '../../app.settings';
<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="{{ epal$.globalIndex }}" <input #cb type="checkbox" formControlName="{{ epal$.globalIndex }}"
(change)="saveSelected(cb,j)" (change)="saveSelected(cb.checked,i,j)"
[hidden] = "numSelected === 3 && cb.checked === false"
> >
</div> </div>
<div class="col-md-8 col-md-offset-1 isclickable"> <div class="col-md-8 col-md-offset-1 isclickable">
...@@ -55,41 +59,40 @@ import {AppSettings} from '../../app.settings'; ...@@ -55,41 +59,40 @@ import {AppSettings} from '../../app.settings';
</div> </div>
</ul> </ul>
</div> </div>
<div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async)"> <div class="row" style="margin-top: 20px;" *ngIf="(regions$ | async).size > 0">
<div class="col-md-6"> <div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()" > <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-6"> <div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0" > <button 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>
</div> </div>
</div> </div>
</form> </form>
<!-- </div> <!-- </div>
</div> --> </div> -->
` `
}) })
@Injectable() export default class RegionSchoolsSelect implements OnInit { @Injectable() export default class RegionSchoolsSelect implements OnInit, OnDestroy {
private epalclasses$: Observable<IEpalClasses>; private epalclasses$: BehaviorSubject<IEpalClasses>;
private regions$: Observable<IRegions>; private regions$: BehaviorSubject<IRegions>;
private sectors$: Observable<ISectors>; private sectors$: BehaviorSubject<ISectors>;
private showLoader$: Observable<boolean>; private sectorFields$: BehaviorSubject<ISectorFields>;
private epalclassesSub: Subscription;
private regionsSub: Subscription;
private sectorsSub: Subscription;
private sectorFieldsSub: Subscription;
private formGroup: FormGroup; private formGroup: FormGroup;
private rss = new FormArray([]); private rss = new FormArray([]);
private classActive = "-1"; private classActive = "-1";
private regionActive = <number>-1; private regionActive = <number>-1;
private courseActive = <number>-1; private courseActive = <number>-1;
private numSelected = <number>0; private numSelected = <number>0;
private sectorFields$: Observable<ISectorFields>;
//private schoolArray: Array<boolean> = new Array(); //private schoolArray: Array<boolean> = new Array();
constructor(private fb: FormBuilder, constructor(private fb: FormBuilder,
private _rsa: RegionSchoolsActions, private _rsa: RegionSchoolsActions,
private _rsb: SectorCoursesActions, private _rsb: SectorCoursesActions,
...@@ -97,6 +100,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -97,6 +100,10 @@ import {AppSettings} from '../../app.settings';
private router: Router private router: Router
) { ) {
this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
this.epalclasses$ = new BehaviorSubject(EPALCLASSES_INITIAL_STATE);
this.sectors$ = new BehaviorSubject(SECTOR_COURSES_INITIAL_STATE);
this.sectorFields$ = new BehaviorSubject(SECTOR_FIELDS_INITIAL_STATE);
this.formGroup = this.fb.group({ this.formGroup = this.fb.group({
formArray: this.rss formArray: this.rss
...@@ -105,19 +112,34 @@ import {AppSettings} from '../../app.settings'; ...@@ -105,19 +112,34 @@ import {AppSettings} from '../../app.settings';
}; };
ngOnInit() { ngOnInit() {
console.log("hello"); this.selectEpalClasses();
this.epalclasses$ = this._ngRedux.select(state => {
console.log("size=" + state.epalclasses.size); this.selectRegionSchools();
}
ngOnDestroy() {
if (this.epalclassesSub) this.epalclassesSub.unsubscribe();
if (this.regionsSub) this.regionsSub.unsubscribe();
if (this.sectorsSub) this.sectorsSub.unsubscribe();
if (this.sectorFieldsSub) this.sectorFieldsSub.unsubscribe();
}
selectEpalClasses() {
this.epalclassesSub = this._ngRedux.select(state => {
if (state.epalclasses.size > 0) { if (state.epalclasses.size > 0) {
state.epalclasses.reduce(({}, epalclass) => { state.epalclasses.reduce(({}, epalclass, i) => {
this.selectAppropriateData(epalclass); this.setClassActive(epalclass.name);
this.getAppropriateSchools(epalclass.name);
return epalclass; return epalclass;
}, {}); }, {});
} }
return state.epalclasses; return state.epalclasses;
}); }).subscribe(this.epalclasses$);
console.log("hello2"); }
this.regions$ = this._ngRedux.select(state => {
selectRegionSchools() {
this.regionsSub = this._ngRedux.select(state => {
let numsel = 0; let numsel = 0;
state.regions.reduce((prevRegion, region) =>{ state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevEpal, epal) =>{ region.epals.reduce((prevEpal, epal) =>{
...@@ -131,18 +153,19 @@ import {AppSettings} from '../../app.settings'; ...@@ -131,18 +153,19 @@ import {AppSettings} from '../../app.settings';
}, {}); }, {});
this.numSelected = numsel; this.numSelected = numsel;
return state.regions; return state.regions;
}); }).subscribe(this.regions$);
this.showLoader$ = this.regions$.map(regions => regions.size === 0);
console.log("hello3");
} }
selectAppropriateData(epalClass) { setClassActive(className) {
this.classActive = className;
}
getAppropriateSchools(epalClass) {
if (epalClass === "Α' Λυκείου") { if (epalClass === "Α' Λυκείου") {
this._rsa.getRegionSchools(1,"-1", false); this._rsa.getRegionSchools(1,"-1", false);
} }
else if (epalClass === "Β' Λυκείου") { else if (epalClass === "Β' Λυκείου") {
this.sectorFields$ = this._ngRedux.select(state => { this.sectorFieldsSub = this._ngRedux.select(state => {
state.sectorFields.reduce(({}, sectorField) =>{ state.sectorFields.reduce(({}, sectorField) =>{
if (sectorField.selected === true) { if (sectorField.selected === true) {
this.courseActive = sectorField.id; this.courseActive = sectorField.id;
...@@ -151,10 +174,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -151,10 +174,10 @@ import {AppSettings} from '../../app.settings';
return sectorField; return sectorField;
}, {}); }, {});
return state.sectorFields; return state.sectorFields;
}); }).subscribe(this.sectorFields$);
} }
else if (epalClass === "Γ' Λυκείου") { else if (epalClass === "Γ' Λυκείου") {
this.sectors$ = this._ngRedux.select(state => { this.sectorsSub = this._ngRedux.select(state => {
state.sectors.reduce((prevSector, sector) =>{ state.sectors.reduce((prevSector, sector) =>{
if (sector.sector_selected === true) { if (sector.sector_selected === true) {
sector.courses.reduce((prevCourse, course) =>{ sector.courses.reduce((prevCourse, course) =>{
...@@ -168,7 +191,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -168,7 +191,7 @@ import {AppSettings} from '../../app.settings';
return sector; return sector;
}, {}); }, {});
return state.sectors; return state.sectors;
}); }).subscribe(this.sectors$);
} }
} }
...@@ -191,45 +214,12 @@ import {AppSettings} from '../../app.settings'; ...@@ -191,45 +214,12 @@ import {AppSettings} from '../../app.settings';
this.regionActive = ind; this.regionActive = ind;
} }
saveSelected(cb,j) { saveSelected(checked,i,j) {
this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray); this._rsa.saveRegionSchoolsSelected(checked, i, j);
} }
navigateToApplication() { navigateToApplication() {
//if (this.numSelected > 1)
this.router.navigate(['/schools-order-select']); this.router.navigate(['/schools-order-select']);
//else
// 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"];
return "-1";
}
getClassActive() {
const { epalclasses } = this._ngRedux.getState();
let l,m;
if (epalclasses.size !== 0 && epalclasses["_tail"]["array"][0]["name"].length !==0 )
return epalclasses["_tail"]["array"][0]["name"];
return "-1";
}
getSectorActive() {
const { sectorFields } = this._ngRedux.getState();
let l,m;
for ( l=0; l<sectorFields.size; l++) {
if (sectorFields["_tail"]["array"][l]["selected"] === true) {
return sectorFields["_tail"]["array"][l]["id"];
}
}
return "-1";
} }
} }
...@@ -146,6 +146,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -146,6 +146,7 @@ import {AppSettings} from '../../app.settings';
getAllSchools() { getAllSchools() {
//store in Redux the whole schools //store in Redux the whole schools
console.log("scs-1");
this._rsr.getRegionSchools(3,"-1", true); this._rsr.getRegionSchools(3,"-1", true);
this.regions$ = this._ngRedux.select(state => { this.regions$ = this._ngRedux.select(state => {
let numsel = 0; let numsel = 0;
......
...@@ -138,6 +138,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -138,6 +138,7 @@ import {AppSettings} from '../../app.settings';
getAllSchools() { getAllSchools() {
//store in Redux the whole schools //store in Redux the whole schools
console.log("sfs-1");
this._rsr.getRegionSchools(3,"-1", true); this._rsr.getRegionSchools(3,"-1", true);
this.regions$ = this._ngRedux.select(state => { this.regions$ = this._ngRedux.select(state => {
let numsel = 0; let numsel = 0;
......
...@@ -2,6 +2,4 @@ import { List } from 'immutable'; ...@@ -2,6 +2,4 @@ import { List } from 'immutable';
import { IEpalClass} from './epalclasses.types'; import { IEpalClass} from './epalclasses.types';
export const INITIAL_STATE = List<IEpalClass>();