Skip to content

GitLab

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

finished redux antipattern fix. Replaced template rendering sync technique(WIP).

parent f26dfde1
Hide whitespace changes
Inline Side-by-side
source/actions/regionschools.actions.ts
View file @ b2b5fef3
......@@ -13,7 +13,6 @@ export class RegionSchoolsActions {
getRegionSchools = (classActive,courseActive, reload) => {
const { regions } = this._ngRedux.getState();
if (reload === true || (reload === false && regions.size === 0)) {
console.log("test1", classActive,courseActive, reload);
return this._hds.getRegionsWithSchools(classActive,courseActive).then(regions => {
return this._ngRedux.dispatch({
type: REGIONSCHOOLS_RECEIVED,
......
source/components/student-application-form/region.schools.select.ts
View file @ b2b5fef3
......@@ -46,7 +46,7 @@ import {AppSettings} from '../../app.settings';
<div class="col-md-2 col-md-offset-1">
<input #cb type="checkbox" formControlName="{{ epal$.globalIndex }}"
(change)="saveSelected(cb.checked,i,j)"
[hidden] = "numSelected === 3 && cb.checked === false"
>
</div>
<div class="col-md-8 col-md-offset-1 isclickable">
......
source/components/student-application-form/sector.courses.select.ts
View file @ b2b5fef3
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 { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { IRegions } from '../../store/regionschools/regionschools.types';
import { SECTOR_COURSES_INITIAL_STATE } from '../../store/sectorcourses/sectorcourses.initial-state';
import { NgRedux, select } from 'ng2-redux';
import { IAppState } from '../../store/store';
import {RemoveSpaces} from '../../pipes/removespaces';
......@@ -21,7 +20,7 @@ import {AppSettings} from '../../app.settings';
@Component({
selector: 'sectorcourses-fields-select',
template: `
<div class = "loading" *ngIf="(showLoader$ | async) && (showLoader2$ | async)">
<div class = "loading" *ngIf="(sectors$ | async).size === 0">
</div>
<form [formGroup]="formGroup">
<div formArrayName="formArray">
......@@ -47,9 +46,9 @@ import {AppSettings} from '../../app.settings';
</ul>
</div>
<div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async) || !(showLoader2$ | async)">
<div class="row" style="margin-top: 20px;" *ngIf="(sectors$ | async).size > 0">
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
<button type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
<i class="fa fa-backward"></i>
</button>
</div>
......@@ -62,11 +61,9 @@ import {AppSettings} from '../../app.settings';
</form>
`
})
@Injectable() export default class SectorCoursesSelect implements OnInit {
private sectors$: Observable<ISectors>;
private regions$: Observable<IRegions>;
private showLoader$: Observable<boolean>;
private showLoader2$: Observable<boolean>;
@Injectable() export default class SectorCoursesSelect implements OnInit, OnDestroy {
private sectors$: BehaviorSubject<ISectors>;
private sectorsSub: Subscription;
private formGroup: FormGroup;
private rss = new FormArray([]);
private sectorActive = <number>-1;
......@@ -74,35 +71,33 @@ import {AppSettings} from '../../app.settings';
private sectorsList: Array<boolean> = new Array();
constructor(private fb: FormBuilder,
private _rsa: SectorCoursesActions,
private _rsr: RegionSchoolsActions,
private _sca: SectorCoursesActions,
private _ngRedux: NgRedux<IAppState>,
private router: Router
) {
this.sectors$ = new BehaviorSubject(SECTOR_COURSES_INITIAL_STATE);
this.formGroup = this.fb.group({
formArray: this.rss
});
};
ngOnInit() {
//re-initialize schools-redux-state
this.getAllSchools();
this._rsa.getSectorCourses(true);
this._sca.getSectorCourses(false);
let ids = 0;
this.sectors$ = this._ngRedux.select(state => {
this.sectorsSub = this._ngRedux.select(state => {
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;
if (sector.sector_selected === true)
this.sectorActive = ids-1;
sector.courses.reduce((prevCourse, course) =>{
this.rss.push( new FormControl(course.selected, []));
//this.retrieveCheck();
if (course.selected === true) {
//In case we want to preserve last checked option when we revisit the form
//this.idx = course.globalIndex;
this.idx = course.globalIndex;
}
return course;
}, {});
......@@ -110,9 +105,12 @@ import {AppSettings} from '../../app.settings';
}, {});
ids = 0;
return state.sectors;
});
this.showLoader$ = this.sectors$.map(sectors => sectors.size === 0);
}).subscribe(this.sectors$);
}
ngOnDestroy() {
if (this.sectorsSub) this.sectorsSub.unsubscribe();
}
setActiveSector(ind) {
......@@ -122,7 +120,7 @@ import {AppSettings} from '../../app.settings';
}
saveSelected() {
this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList);
this._sca.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList);
}
navigateToSchools() {
......@@ -142,26 +140,6 @@ import {AppSettings} from '../../app.settings';
this.sectorsList[this.sectorActive] = true;
this.saveSelected();
}
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;
state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevEpal, epal) =>{
this.rss.push( new FormControl(epal.selected, []));
return epal;
}, {});
return region;
}, {});
return state.regions;
});
this.showLoader2$ = this.regions$.map(regions => regions.size === 0);
}
}
}
source/components/student-application-form/sector.fields.select.ts
View file @ b2b5fef3
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 { SectorFieldsActions } from '../../actions/sectorfields.actions';
import { NgRedux, select } from 'ng2-redux';
import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
import { IAppState } from '../../store/store';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { IRegions } from '../../store/regionschools/regionschools.types';
import { SECTOR_FIELDS_INITIAL_STATE } from '../../store/sectorfields/sectorfields.initial-state';
import {
FormBuilder,
......@@ -20,11 +19,7 @@ import {AppSettings} from '../../app.settings';
@Component({
selector: 'sector-fields-select',
template: `
<!-- <div class="row equal">
<div class="col-md-12"> -->
<div class = "loading" *ngIf="(showLoader$ | async) && (showLoader2$ | async)">
<div class = "loading" *ngIf="(sectorFields$ | async).size === 0">
</div>
<form [formGroup]="formGroup">
<div formArrayName="formArray">
......@@ -36,83 +31,63 @@ import {AppSettings} from '../../app.settings';
</div>
</ul>
<!--CHECK BOXES USING BOTSTRAP
<div *ngFor="let sectorField$ of sectorFields$ | async; let i=index">
<div class="[ form-group ]">
<input type="checkbox" name="{{i}}" id="{{i}}" autocomplete="off" />
<div class="[ btn-group ]">
<label for="{{i}}" class="[ btn btn-primary ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="{{i}}" class="[ btn btn-default active ]">
{{sectorField$.name}}
</label>
</div>
</div>
</div>
-->
</div>
<div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async) || !(showLoader2$ | async)">
<div class="row" style="margin-top: 20px;" *ngIf="(sectorFields$ | async).size > 0">
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
<button 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 [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToSchools()" [disabled]="sectorActive === -1" >
<button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToSchools()" [disabled]="sectorActive === -1" >
<i class="fa fa-forward"></i>
</button>
</div>
</div>
</form>
<!-- </div>
</div> -->
`
})
@Injectable() export default class SectorFieldsSelect implements OnInit {
private sectorFields$: Observable<ISectorFields>;
private regions$: Observable<IRegions>;
private showLoader$: Observable<boolean>;
private showLoader2$: Observable<boolean>;
private sectorFields$: BehaviorSubject<ISectorFields>;
private sectorFieldsSub: Subscription;
public formGroup: FormGroup;
public cfs = new FormArray([]);
private sectorActive = <number>-1;
constructor(private fb: FormBuilder,
private _cfa: SectorFieldsActions,
private _rsr: RegionSchoolsActions,
private _ngRedux: NgRedux<IAppState>,
private router: Router) {
this.sectorFields$ = new BehaviorSubject(SECTOR_FIELDS_INITIAL_STATE);
this.formGroup = this.fb.group({
formArray: this.cfs
});
};
ngOnInit() {
//re-initialize schools-redux-state
this.getAllSchools();
this._cfa.getSectorFields(true);
this.sectorFields$ = this._ngRedux.select(state => {
this._cfa.getSectorFields(false);
this.sectorFieldsSub = this._ngRedux.select(state => {
state.sectorFields.reduce(({}, sectorField) =>{
this.cfs.push(new FormControl(sectorField.selected, []));
//in case we want to retrieve last check when we return to the form
/*
if (sectorField.selected === true) {
this.sectorActive = sectorField.id - 1;
}
*/
return sectorField;
}, {});
return state.sectorFields;
});
this.showLoader$ = this.sectorFields$.map(sectorFields => sectorFields.size === 0);
}).subscribe(this.sectorFields$);
}
ngOnDestroy() {
if (this.sectorFieldsSub) this.sectorFieldsSub.unsubscribe();
}
navigateToSchools() {
......@@ -136,23 +111,4 @@ import {AppSettings} from '../../app.settings';
this.saveSelected();
}
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;
state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevEpal, epal) =>{
this.cfs.push( new FormControl(epal.selected, []));
return epal;
}, {});
return region;
}, {});
return state.regions;
});
this.showLoader2$ = this.regions$.map(regions => regions.size === 0);
}
}
source/services/helper-data-service.ts
View file @ b2b5fef3
......@@ -27,13 +27,11 @@ export class HelperDataService {
if (state.loginInfo.size > 0) {
state.loginInfo.reduce(({}, loginInfoToken) => {
this.authToken = loginInfoToken.auth_token;
console.log('hey authtoken:' + this.authToken );
return loginInfoToken;
}, {});
}
return state.loginInfo;
});
console.log('hey hey authtoken:' + this.authToken);
};
......@@ -44,7 +42,6 @@ export class HelperDataService {
getCourseFields() {
this.loginInfo$.forEach(loginInfoToken => {
console.log(loginInfoToken.get(0));
this.authToken = loginInfoToken.get(0).auth_token;
});
let headers = new Headers({
......@@ -77,7 +74,6 @@ export class HelperDataService {
getSectorFields() {
this.loginInfo$.forEach(loginInfoToken => {
console.log(loginInfoToken.get(0));
this.authToken = loginInfoToken.get(0).auth_token;
});
let headers = new Headers({
......@@ -109,7 +105,6 @@ export class HelperDataService {
getRegionsWithSchools(classActive,courseActive) {
this.loginInfo$.forEach(loginInfoToken => {
console.log(loginInfoToken.get(0));
this.authToken = loginInfoToken.get(0).auth_token;
});
let headers = new Headers({
......@@ -136,11 +131,6 @@ export class HelperDataService {
else if (classActive === 3)
getConnectionString = `${AppSettings.API_ENDPOINT}/coursesperschool/list?course_id=${courseActive}`;
//getConnectionString = `${AppSettings.API_ENDPOINT}/coursesperschool/list?${courseActive}`;
// console.log(getConnectionString,class);
//this.http.get(`${AppSettings.API_ENDPOINT}/regions/list`)
//this.http.get(`${AppSettings.API_ENDPOINT}/`.concat(`coursesperschool/list?course_id=${courseActive}`))
this.http.get(getConnectionString, options)
.map(response => response.json())
.subscribe(data => {
......@@ -156,7 +146,6 @@ export class HelperDataService {
getSectorsWithCourses() {
this.loginInfo$.forEach(loginInfoToken => {
console.log(loginInfoToken.get(0));
this.authToken = loginInfoToken.get(0).auth_token;
});
let headers = new Headers({
......@@ -176,7 +165,6 @@ export class HelperDataService {
this.http.get(`${AppSettings.API_ENDPOINT}/coursesectorfields/list`, options)
.map(response => response.json())
.subscribe(data => {
// console.log(data);
resolve(this.transformSectorCoursesSchema(data));
}, // put the data returned from the server in our variable
error => {
......@@ -248,7 +236,6 @@ export class HelperDataService {
signOut() {
this.loginInfo$.forEach(loginInfoToken => {
console.log(loginInfoToken.get(0));
this.authToken = loginInfoToken.get(0).auth_token;
});
let headers = new Headers({
......@@ -272,7 +259,6 @@ export class HelperDataService {
.map(response => response)
.subscribe(data => {
resolve(data);
console.log(data);
}, // put the data returned from the server in our variable
error => {
console.log("Error Logout"); // in case of failure show this message
......
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