Skip to content

GitLab

Commit f26dfde1 authored by Χάρης Παπαδόπουλος's avatar Χάρης Παπαδόπουλος
Browse files
Options

antipattern fix(WIP) - asyncpipe with behaviorsubject

parent eeaada73
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 165 deletions
source/actions/regionschools.actions.ts
View file @ f26dfde1
......@@ -49,11 +49,13 @@ export class RegionSchoolsActions {
};
*/
saveRegionSchoolsSelected = (regionSchoolsSelected) => {
saveRegionSchoolsSelected = (checked, i, j) => {
return this._ngRedux.dispatch({
type: REGIONSCHOOLS_SELECTED_SAVE,
payload: {
regionSchoolsSelected
checked: checked,
rIndex: i,
sIndex: j
}
});
};
......
source/components/student-application-form/application.preview.ts
View file @ f26dfde1
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { Injectable } from "@angular/core";
import { NgRedux, select } from 'ng2-redux';
import { IAppState } from '../../store/store';
......@@ -9,14 +9,18 @@ import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { StudentDataFieldsActions } from '../../actions/studentdatafields.actions';
import { EpalClassesActions } from '../../actions/epalclass.actions';
import { AmkaFillsActions } from '../../actions/amkafill.actions';
import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { IRegions } from '../../store/regionschools/regionschools.types';
import { IStudentDataFields } from '../../store/studentdatafields/studentdatafields.types';
import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
import { IAmkaFills } from '../../store/amkafill/amkafills.types';
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({
......@@ -35,7 +39,6 @@ import {AppSettings} from '../../app.settings';
</ul>
</div>
<div *ngFor="let sectorField$ of sectorFields$ | async">
<ul class="list-group left-side-view">
<li class="list-group-item active" *ngIf="sectorField$.selected === true" >
......@@ -119,12 +122,16 @@ import {AppSettings} from '../../app.settings';
})
@Injectable() export default class ApplicationPreview implements OnInit {
private sectors$: Observable<ISectors>;
private regions$: Observable<IRegions>;
private sectorFields$: Observable<ISectorFields>;
private studentDataFields$: Observable<IStudentDataFields>;
private selectedAmkaFills$: Observable<IAmkaFills>;
private epalclasses$: Observable<IEpalClasses>;
private sectors$: BehaviorSubject<ISectors>;
private regions$: BehaviorSubject<IRegions>;
private sectorFields$: BehaviorSubject<ISectorFields>;
private studentDataFields$: BehaviorSubject<IStudentDataFields>;
private epalclasses$: BehaviorSubject<IEpalClasses>;
private sectorsSub: Subscription;
private regionsSub: Subscription;
private sectorFieldsSub: Subscription;
private studentDataFieldsSub: Subscription;
private epalclassesSub: Subscription;
private courseActive = "-1";
private numSelectedSchools = <number>0;
private numSelectedOrder = <number>0;
......@@ -133,32 +140,34 @@ import {AppSettings} from '../../app.settings';
constructor(private _ngRedux: NgRedux<IAppState>,
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() {
this.courseActive = this.getCourseActive();
this.sectors$ = this._ngRedux.select(state => {
//let numsel = 0;
this.sectorsSub = this._ngRedux.select(state => {
state.sectors.reduce((prevSector, sector) => {
//if (sector.sector_selected)
console.log("hello" + sector.sector_selected);
sector.courses.reduce((prevCourse, course) => {
//if (course.selected === true) {
// numsel++;
//}
if (course.selected === true) {
this.courseActive = course.course_id;
}
return course;
}, {});
return sector;
}, {});
//this.numSelectedCourses = numsel;
return state.sectors;
});
}).subscribe(this.sectors$);
this.regions$ = this._ngRedux.select(state => {
this.regionsSub = this._ngRedux.select(state => {
let numsel = 0, numsel2 = 0;
state.regions.reduce((prevRegion, region) => {
region.epals.reduce((prevEpal, epal) => {
console.log("hello" + epal.selected);
if (epal.selected === true) {
numsel++;
}
......@@ -172,30 +181,30 @@ import {AppSettings} from '../../app.settings';
this.numSelectedSchools = numsel;
this.numSelectedOrder = numsel2;
return state.regions;
});
}).subscribe(this.regions$);
this.sectorFields$ = this._ngRedux.select(state => {
this.sectorFieldsSub = this._ngRedux.select(state => {
state.sectorFields.reduce(({}, sectorField) => {
return sectorField;
}, {});
return state.sectorFields;
});
}).subscribe(this.sectorFields$);
this.studentDataFields$ = this._ngRedux.select(state => {
this.studentDataFieldsSub = this._ngRedux.select(state => {
state.studentDataFields.reduce(({}, studentDataField) => {
return studentDataField;
}, {});
return state.studentDataFields;
});
}).subscribe(this.studentDataFields$);
this.selectedAmkaFills$ = this._ngRedux.select(state => {
/* this.selectedAmkaFills$ = this._ngRedux.select(state => {
state.amkafills.reduce(({}, selectedAmkaFill) => {
return selectedAmkaFill;
}, {});
return state.amkafills;
});
}); */
this.epalclasses$ = this._ngRedux.select(state => {
this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) => {
if (epalclass.name === "Α' Λυκείου")
this.classSelected = 1;
......@@ -206,42 +215,23 @@ import {AppSettings} from '../../app.settings';
return epalclass;
}, {});
return state.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']);
}
}).subscribe(this.epalclasses$);
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() {
this.router.navigate(['/sectorcourses-fields-select']);
ngOnDestroy() {
this.regionsSub.unsubscribe();
this.epalclassesSub.unsubscribe();
this.sectorsSub.unsubscribe();
this.sectorFieldsSub.unsubscribe();
this.studentDataFieldsSub.unsubscribe();
}
defineOrder() {
this.router.navigate(['/schools-order-select']);
showValues() {
console.log(this.epalclasses$);
console.log(this.studentDataFields$);
console.log(this.regions$);
console.log(this.sectors$);
}
}
source/components/student-application-form/region.schools.select.ts
View file @ f26dfde1
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { Injectable } from "@angular/core";
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { NgRedux, select } from 'ng2-redux';
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 { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { IAppState } from '../../store/store';
......@@ -24,7 +28,7 @@ import {AppSettings} from '../../app.settings';
@Component({
selector: 'region-schools-select',
template: `
<div class = "loading" *ngIf="showLoader$ | async">
<div class = "loading" *ngIf="(regions$ | async).size === 0">
</div>
<!-- <div class="row equal">
<div class="col-md-12"> -->
......@@ -41,8 +45,8 @@ import {AppSettings} from '../../app.settings';
<div class="row">
<div class="col-md-2 col-md-offset-1">
<input #cb type="checkbox" formControlName="{{ epal$.globalIndex }}"
(change)="saveSelected(cb,j)"
[hidden] = "numSelected === 3 && cb.checked === false"
(change)="saveSelected(cb.checked,i,j)"
>
</div>
<div class="col-md-8 col-md-offset-1 isclickable">
......@@ -55,41 +59,40 @@ import {AppSettings} from '../../app.settings';
</div>
</ul>
</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">
<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>
</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 type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0" >
<i class="fa fa-forward"></i>
</button>
</div>
</div>
</form>
<!-- </div>
</div> -->
`
})
@Injectable() export default class RegionSchoolsSelect implements OnInit {
private epalclasses$: Observable<IEpalClasses>;
private regions$: Observable<IRegions>;
private sectors$: Observable<ISectors>;
private showLoader$: Observable<boolean>;
@Injectable() export default class RegionSchoolsSelect implements OnInit, OnDestroy {
private epalclasses$: BehaviorSubject<IEpalClasses>;
private regions$: BehaviorSubject<IRegions>;
private sectors$: BehaviorSubject<ISectors>;
private sectorFields$: BehaviorSubject<ISectorFields>;
private epalclassesSub: Subscription;
private regionsSub: Subscription;
private sectorsSub: Subscription;
private sectorFieldsSub: Subscription;
private formGroup: FormGroup;
private rss = new FormArray([]);
private classActive = "-1";
private regionActive = <number>-1;
private courseActive = <number>-1;
private numSelected = <number>0;
private sectorFields$: Observable<ISectorFields>;
//private schoolArray: Array<boolean> = new Array();
constructor(private fb: FormBuilder,
private _rsa: RegionSchoolsActions,
private _rsb: SectorCoursesActions,
......@@ -97,6 +100,10 @@ import {AppSettings} from '../../app.settings';
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({
formArray: this.rss
......@@ -105,19 +112,34 @@ import {AppSettings} from '../../app.settings';
};
ngOnInit() {
console.log("hello");
this.epalclasses$ = this._ngRedux.select(state => {
console.log("size=" + state.epalclasses.size);
this.selectEpalClasses();
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) {
state.epalclasses.reduce(({}, epalclass) => {
this.selectAppropriateData(epalclass);
state.epalclasses.reduce(({}, epalclass, i) => {
this.setClassActive(epalclass.name);
this.getAppropriateSchools(epalclass.name);
return epalclass;
}, {});
}
return state.epalclasses;
});
console.log("hello2");
this.regions$ = this._ngRedux.select(state => {
}).subscribe(this.epalclasses$);
}
selectRegionSchools() {
this.regionsSub = this._ngRedux.select(state => {
let numsel = 0;
state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevEpal, epal) =>{
......@@ -131,18 +153,19 @@ import {AppSettings} from '../../app.settings';
}, {});
this.numSelected = numsel;
return state.regions;
});
this.showLoader$ = this.regions$.map(regions => regions.size === 0);
console.log("hello3");
}).subscribe(this.regions$);
}
selectAppropriateData(epalClass) {
setClassActive(className) {
this.classActive = className;
}
getAppropriateSchools(epalClass) {
if (epalClass === "Α' Λυκείου") {
this._rsa.getRegionSchools(1,"-1", false);
}
else if (epalClass === "Β' Λυκείου") {
this.sectorFields$ = this._ngRedux.select(state => {
this.sectorFieldsSub = this._ngRedux.select(state => {
state.sectorFields.reduce(({}, sectorField) =>{
if (sectorField.selected === true) {
this.courseActive = sectorField.id;
......@@ -151,10 +174,10 @@ import {AppSettings} from '../../app.settings';
return sectorField;
}, {});
return state.sectorFields;
});
}).subscribe(this.sectorFields$);
}
else if (epalClass === "Γ' Λυκείου") {
this.sectors$ = this._ngRedux.select(state => {
this.sectorsSub = this._ngRedux.select(state => {
state.sectors.reduce((prevSector, sector) =>{
if (sector.sector_selected === true) {
sector.courses.reduce((prevCourse, course) =>{
......@@ -168,7 +191,7 @@ import {AppSettings} from '../../app.settings';
return sector;
}, {});
return state.sectors;
});
}).subscribe(this.sectors$);
}
}
......@@ -191,45 +214,12 @@ import {AppSettings} from '../../app.settings';
this.regionActive = ind;
}
saveSelected(cb,j) {
this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray);
saveSelected(checked,i,j) {
this._rsa.saveRegionSchoolsSelected(checked, i, j);
}
navigateToApplication() {
//if (this.numSelected > 1)
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";
}
}
source/components/student-application-form/sector.courses.select.ts
View file @ f26dfde1
......@@ -146,6 +146,7 @@ import {AppSettings} from '../../app.settings';
getAllSchools() {
//store in Redux the whole schools
console.log("scs-1");
this._rsr.getRegionSchools(3,"-1", true);
this.regions$ = this._ngRedux.select(state => {
let numsel = 0;
......
source/components/student-application-form/sector.fields.select.ts
View file @ f26dfde1
......@@ -138,6 +138,7 @@ import {AppSettings} from '../../app.settings';
getAllSchools() {
//store in Redux the whole schools
console.log("sfs-1");
this._rsr.getRegionSchools(3,"-1", true);
this.regions$ = this._ngRedux.select(state => {
let numsel = 0;
......
source/store/epalclasses/epalclasses.initial-state.ts
View file @ f26dfde1
......@@ -2,6 +2,4 @@ import { List } from 'immutable';
import { IEpalClass} from './epalclasses.types';
export const INITIAL_STATE = List<IEpalClass>();
export const EPALCLASSES_INITIAL_STATE = List<IEpalClass>();
source/store/epalclasses/epalclasses.reducer.ts
View file @ f26dfde1
import { IEpalClasses, IEpalClass } from './epalclasses.types';
import { INITIAL_STATE } from './epalclasses.initial-state';
import { EPALCLASSES_INITIAL_STATE } from './epalclasses.initial-state';
import { Seq } from 'immutable';
import { EPALCLASSES_SAVE} from '../../constants';
export function epalclassesReducer(state: IEpalClasses = INITIAL_STATE, action): IEpalClasses {
export function epalclassesReducer(state: IEpalClasses = EPALCLASSES_INITIAL_STATE, action): IEpalClasses {
switch (action.type) {
......@@ -12,10 +12,10 @@ export function epalclassesReducer(state: IEpalClasses = INITIAL_STATE, action):
case EPALCLASSES_SAVE:
let selectedEpalClasses = Array<IEpalClass>();
selectedEpalClasses.push(<IEpalClass>{ name: action.payload.epalClasses.name});
return Seq(selectedEpalClasses).map(n => n).toList();
default: return state;
}
......
source/store/regionschools/regionschools.initial-state.ts
View file @ f26dfde1
......@@ -2,4 +2,4 @@ import { List } from 'immutable';
import { IRegion } from './regionschools.types';
// export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
export const INITIAL_STATE = List<IRegion>();
export const REGION_SCHOOLS_INITIAL_STATE = List<IRegion>();
source/store/regionschools/regionschools.reducer.ts
View file @ f26dfde1
import { IRegions, IRegion, IRegionSchool } from './regionschools.types';
import { INITIAL_STATE } from './regionschools.initial-state';
import { REGION_SCHOOLS_INITIAL_STATE } from './regionschools.initial-state';
import { Seq } from 'immutable';
import {
......@@ -9,7 +9,7 @@ import {
REGIONSCHOOLS_INIT
} from '../../constants';
export function regionSchoolsReducer(state: IRegions = INITIAL_STATE, action): IRegions {
export function regionSchoolsReducer(state: IRegions = REGION_SCHOOLS_INITIAL_STATE, action): IRegions {
switch (action.type) {
case REGIONSCHOOLS_RECEIVED:
let newRegions = Array<IRegion>();
......@@ -23,17 +23,17 @@ export function regionSchoolsReducer(state: IRegions = INITIAL_STATE, action): I
});
return Seq(newRegions).map(n => n).toList();
case REGIONSCHOOLS_SELECTED_SAVE:
let regionsWithSelections = Array<IRegion>();
let ind=0, j = 0;
let ind=0;
state.forEach(region => {
regionsWithSelections.push(<IRegion>{region_id: region.region_id, region_name: region.region_name, epals: Array<IRegionSchool>()});
region.epals.forEach(epal => {
regionsWithSelections[ind].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, globalIndex: epal.globalIndex, selected: action.payload.regionSchoolsSelected[j], order_id: 0});
j++;
})
if (ind === action.payload.rIndex) {
region.epals[action.payload.sIndex].selected = action.payload.checked;
return state.withMutations(function (list) {
list.set(ind++, region);
});
}
ind++;
});
return Seq(regionsWithSelections).map(n => n).toList();
return state;
case REGIONSCHOOLS_ORDER_SAVE:
let regionsWithOrders = Array<IRegion>();
......@@ -48,8 +48,8 @@ export function regionSchoolsReducer(state: IRegions = INITIAL_STATE, action): I
});
return Seq(regionsWithOrders).map(n => n).toList();
case REGIONSCHOOLS_INIT:
return INITIAL_STATE;
case REGIONSCHOOLS_INIT:
return REGION_SCHOOLS_INITIAL_STATE;
default: return state;
}
};
source/store/sectorcourses/sectorcourses.initial-state.ts
View file @ f26dfde1
......@@ -2,4 +2,4 @@ import { List } from 'immutable';
import { ISector } from './sectorcourses.types';
// export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
export const INITIAL_STATE = List<ISector>();
export const SECTOR_COURSES_INITIAL_STATE = List<ISector>();
source/store/sectorcourses/sectorcourses.reducer.ts
View file @ f26dfde1
import { ISectors, ISector, ISectorCourse } from './sectorcourses.types';
import { INITIAL_STATE } from './sectorcourses.initial-state';