Skip to content

GitLab

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

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

parent f26dfde1
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 126 deletions
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