Template rendering sync problem fixed(completed)

source/components/student-application-form/application.form.main.html

-<div class = "loading" *ngIf="showLoader$ | async"></div>
+<div class = "loading" *ngIf="(criteria$ | async).size === 0"></div>
 
-<div class="row equal">
- <div class="col-md-12">
   <form novalidate  [formGroup]="studentDataGroup" #form>
     <form [formGroup]="applicantDataGroup">
       <table>
@@ -18,8 +16,6 @@
       </table>
     </form>
 
-    <div *ngFor="let studentDataField$ of studentDataFields$ | async; "> </div>
-
     <div class="form-group">
         <label for="name">Όνομα μαθητή</label><input class="form-control" type="text" formControlName="name">
     </div>
@@ -173,7 +169,7 @@
 
     </form>
 
-    <div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async)">
+    <div class="row" style="margin-top: 20px;" *ngIf="(criteria$ | async).size > 0">
         <div class="col-md-6">
             <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()">
                 <i class="fa fa-backward"></i>
@@ -188,4 +184,3 @@
     </div>
 
   </form>
-</div>

source/components/student-application-form/application.form.main.ts

-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Subscription } from 'rxjs/Rx';
 import { Injectable } from "@angular/core";
 import { Router } from '@angular/router';
 import { NgRedux, select } from 'ng2-redux';
@@ -9,6 +9,8 @@ import { CriteriaActions } from '../../actions/criteria.actions';
 import { ICriter } from '../../store/criteria/criteria.types';
 import { IAppState } from '../../store/store';
 import { VALID_NAMES_PATTERN, VALID_ADDRESS_PATTERN, VALID_ADDRESSTK_PATTERN, VALID_DIGITS_PATTERN } from '../../constants';
+import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields/studentdatafields.initial-state';
+import { CRITERIA_INITIAL_STATE } from '../../store/criteria/criteria.initial-state';
 
 import {
     FormBuilder,
@@ -25,9 +27,11 @@ import {
 
 @Injectable() export default class StudentApplicationMain implements OnInit {
 
-    private studentDataFields$: Observable<IStudentDataFields>;
-    private criteria$: Observable<ICriter>;
-    private showLoader$: Observable<boolean>;
+    private studentDataFields$: BehaviorSubject<IStudentDataFields>;
+    private criteria$: BehaviorSubject<ICriter>;
+
+    private studentDataFieldsSub: Subscription;
+    private criteriaSub: Subscription;
 
     public studentDataGroup: FormGroup;
     public applicantDataGroup: FormGroup;
@@ -41,6 +45,9 @@ import {
                 private _sdfb: CriteriaActions,
                 private _ngRedux: NgRedux<IAppState>,
                 private router: Router) {
+
+        this.studentDataFields$ = new BehaviorSubject(STUDENT_DATA_FIELDS_INITIAL_STATE);
+        this.criteria$ = new BehaviorSubject(CRITERIA_INITIAL_STATE);
         this.studentDataGroup = this.fb.group({
             epaluser_id: [,[]],
             name: ['ΝΙΚΟΣ', [Validators.pattern(VALID_NAMES_PATTERN),Validators.required]],
@@ -70,7 +77,7 @@ import {
 
     ngOnInit() {
 
-        this.studentDataFields$ = this._ngRedux.select(state => {
+        this.studentDataFieldsSub = this._ngRedux.select(state => {
             if (state.studentDataFields.size > 0) {
                 state.studentDataFields.reduce(({}, studentDataField) => {
                     this.studentDataGroup.setValue(studentDataField);
@@ -78,10 +85,10 @@ import {
                 }, {});
             }
             return state.studentDataFields;
-        });
+        }).subscribe(this.studentDataFields$);
 
         this._sdfb.getCriteria(true);
-        this.criteria$ = this._ngRedux.select(state => {
+        this.criteriaSub = this._ngRedux.select(state => {
             if (state.criter.size > 0) {
                 state.criter.reduce(({}, criteria) => {
                     //this.studentCriteriaGroup.setValue(criteria);
@@ -93,9 +100,13 @@ import {
                 }, {});
             }
             return state.criter;
-        });
-        this.showLoader$ = this.criteria$.map(criter => criter.size === 0);
+        }).subscribe(this.criteria$);
+
+    }
 
+    ngOnDestroy() {
+        if (this.studentDataFieldsSub) this.studentDataFieldsSub.unsubscribe();
+        if (this.criteriaSub) this.criteriaSub.unsubscribe();
     }
 
     navigateBack() {
@@ -139,9 +150,5 @@ import {
       else
       // Null means valid, believe it or not
         return null;
-
-
-}
-
-
+    }
 }

source/components/student-application-form/application.submit.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { Http, Response, RequestOptions, Headers } from '@angular/http';
-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';
@@ -12,37 +12,22 @@ import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
 import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
 import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
 import { ILoginInfo } from '../../store/logininfo/logininfo.types';
-
+import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields/studentdatafields.initial-state';
+import { CRITERIA_INITIAL_STATE } from '../../store/criteria/criteria.initial-state';
+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 { LOGININFO_INITIAL_STATE } from '../../store/logininfo/logininfo.initial-state';
 import { Student, StudentEpalChosen, StudentCourseChosen, StudentSectorChosen, StudentCriteriaChosen } from '../students/student';
 import {AppSettings} from '../../app.settings';
 
 @Component({
     selector: 'application-submit',
     template: `
-      <application-preview-select></application-preview-select>
-
-      <div class = "loading" *ngIf="showLoaderLogin$ | async"></div>
-      <div class = "loading" *ngIf="showLoaderClasses$ | async"></div>
-      <div class = "loading" *ngIf="showLoaderStudent$ | async"></div>
-      <div class = "loading" *ngIf="showLoaderSchools$ | async"></div>
-      <div class = "loading" *ngIf="showLoaderCriteria$ | async"></div>
-      <div class = "loading" *ngIf="showLoaderCourses$ | async"></div>
-      <div class = "loading" *ngIf="showLoaderSectors$ | async"></div>
-
-      <!--
-      <div *ngFor="let loginInfoToken$ of loginInfo$ | async;"> </div>
-      <div *ngFor="let epalclass$ of epalclasses$ | async;"> </div>
-      <div *ngFor="let studentDataField$ of studentDataFields$ | async; "> </div>
-      <div *ngFor="let region$ of regions$ | async;">
-        <div *ngFor="let epal$ of region$.epals "> </div> </div>
-      <div *ngFor="let sector$ of sectors$ | async;">
-        <div *ngFor="let course$ of sector$.courses;"> </div> </div>
-      <div *ngFor="let sectorField$ of sectorFields$ | async;"></div>
-      <div *ngFor="let criter$ of criteria$ | async;"> </div>
-      -->
-
-      <button type="button" class="btn-primary btn-lg pull-center" (click)="submitNow()">Υποβολή</button>
-      
+        <div class = "loading" *ngIf="(studentDataFields$ | async).size === 0 || (criteria$ | async).size === 0 || (regions$ | async).size === 0 || (epalclasses$ | async).size === 0 || (loginInfo$ | async).size === 0"></div>
+        <application-preview-select></application-preview-select>
+        <button type="button button-lg pull-right" *ngIf="(studentDataFields$ | async).size > 0 && (criteria$ | async).size > 0 && (regions$ | async).size > 0 && (epalclasses$ | async).size > 0 && (loginInfo$ | async).size > 0" class="btn-primary btn-lg pull-center" (click)="submitNow()">Υποβολή</button>
   `
 })
 
@@ -56,31 +41,38 @@ import {AppSettings} from '../../app.settings';
     private courseSelected;
     private sectorSelected;
     private classSelected;
-
-    private showLoaderLogin$: Observable<boolean>;
-    private showLoaderClasses$: Observable<boolean>;
-    private showLoaderStudent$: Observable<boolean>;
-    private showLoaderSchools$: Observable<boolean>;
-    private showLoaderCriteria$: Observable<boolean>;
-    private showLoaderCourses$: Observable<boolean>;
-    private showLoaderSectors$: Observable<boolean>;
-
-    private studentDataFields$: Observable<IStudentDataFields>;
-    private regions$: Observable<IRegions>;
-    private criteria$: Observable<ICriter>;
-    private sectors$: Observable<ISectors>;
-    private sectorFields$: Observable<ISectorFields>;
-    private epalclasses$: Observable<IEpalClasses>;
-    private loginInfo$: Observable<ILoginInfo>;
+    private studentDataFields$: BehaviorSubject<IStudentDataFields>;
+    private regions$: BehaviorSubject<IRegions>;
+    private criteria$: BehaviorSubject<ICriter>;
+    private sectors$: BehaviorSubject<ISectors>;
+    private sectorFields$: BehaviorSubject<ISectorFields>;
+    private epalclasses$: BehaviorSubject<IEpalClasses>;
+    private loginInfo$: BehaviorSubject<ILoginInfo>;
+    private studentDataFieldsSub: Subscription;
+    private regionsSub: Subscription;
+    private criteriaSub: Subscription;
+    private sectorsSub: Subscription;
+    private sectorFieldsSub: Subscription;
+    private epalclassesSub: Subscription;
+    private loginInfoSub: Subscription;
 
     constructor(private _ngRedux: NgRedux<IAppState>,
                 private router: Router,
                 private http: Http
             ) {
+
+                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);
+                this.criteria$ = new BehaviorSubject(CRITERIA_INITIAL_STATE);
+                this.loginInfo$ = new BehaviorSubject(LOGININFO_INITIAL_STATE);
+
     };
 
     ngOnInit() {
-      this.loginInfo$ = this._ngRedux.select(state => {
+      this.loginInfoSub = this._ngRedux.select(state => {
           if (state.loginInfo.size > 0) {
               state.loginInfo.reduce(({}, loginInfoToken) => {
                   this.authToken = loginInfoToken.auth_token;
@@ -88,10 +80,9 @@ import {AppSettings} from '../../app.settings';
               }, {});
           }
           return state.loginInfo;
-      });
-      this.showLoaderLogin$ = this.loginInfo$.map(loginInfo => loginInfo.size === 0);
+      }).subscribe(this.loginInfo$);
 
-      this.epalclasses$ = this._ngRedux.select(state => {
+      this.epalclassesSub = this._ngRedux.select(state => {
         if (state.epalclasses.size > 0) {
             state.epalclasses.reduce(({}, epalclass) => {
                 this.classSelected = epalclass.name;
@@ -99,10 +90,9 @@ import {AppSettings} from '../../app.settings';
             }, {});
         }
         return state.epalclasses;
-      });
-      this.showLoaderClasses$ = this.epalclasses$.map(epalclasses => epalclasses.size === 0);
+      }).subscribe(this.epalclasses$);
 
-      this.studentDataFields$ = this._ngRedux.select(state => {
+      this.studentDataFieldsSub = this._ngRedux.select(state => {
           if (state.studentDataFields.size > 0) {
               state.studentDataFields.reduce(({}, studentDataField) => {
                   this.student = studentDataField;
@@ -110,10 +100,9 @@ import {AppSettings} from '../../app.settings';
               }, {});
           }
           return state.studentDataFields;
-      });
-      this.showLoaderStudent$ = this.studentDataFields$.map(studentDataFields => studentDataFields.size === 0);
+      }).subscribe(this.studentDataFields$);
 
-      this.regions$ = this._ngRedux.select(state => {
+      this.regionsSub = this._ngRedux.select(state => {
           state.regions.reduce((prevRegion, region) =>{
               region.epals.reduce((prevEpal, epal) =>{
                   if (epal.selected === true) {
@@ -125,10 +114,9 @@ import {AppSettings} from '../../app.settings';
               return region;
           }, {});
           return state.regions;
-      });
-      this.showLoaderSchools$ = this.regions$.map(regions => regions.size === 0);
+      }).subscribe(this.regions$);
 
-      this.criteria$ = this._ngRedux.select(state => {
+      this.criteriaSub = this._ngRedux.select(state => {
           if (state.criter.size > 0) {
               state.criter.reduce(({}, criteria) => {
                 //code to be replaced in next version
@@ -139,44 +127,10 @@ import {AppSettings} from '../../app.settings';
               }, {});
           }
           return state.criter;
-      });
-      this.showLoaderCriteria$ = this.criteria$.map(criter => criter.size === 0);
+      }).subscribe(this.criteria$);
 
-      /*
-      this.criteria$ = this._ngRedux.select(state => {
-          if (state.criter.size > 0) {
-              state.criter.reduce(({}, criteria) => {
-                //code to be replaced in next version
-                  if (criteria.orphanmono === true)
-                    this.studentCriteria.push(6);
-                  else if (criteria.orphantwice === true)
-                    this.studentCriteria.push(1);
-                  if (criteria.threechildren === true)
-                    this.studentCriteria.push(11);
-                  else if (criteria.manychildren === true)
-                    this.studentCriteria.push(2);
-                  if (criteria.twins === true)
-                    this.studentCriteria.push(3);
-                  if (criteria.disability === true)
-                    this.studentCriteria.push(5);
-                  if (criteria.studies === true)
-                    this.studentCriteria.push(4);
-                  if (criteria.income === '<= 3000 Ευρώ')
-                    this.studentCriteria.push(7);
-                  else if (criteria.income === '<= 6000 Ευρώ')
-                    this.studentCriteria.push(8);
-                  else if (criteria.income === '<= 9000 Ευρώ')
-                    this.studentCriteria.push(9);
 
-                  return criteria;
-              }, {});
-          }
-          return state.criter;
-      });
-      this.showLoaderCriteria$ = this.criteria$.map(criter => criter.size === 0);
-      */
-
-      this.sectors$ = this._ngRedux.select(state => {
+      this.sectorsSub = this._ngRedux.select(state => {
           state.sectors.reduce((prevSector, sector) =>{
               sector.courses.reduce((prevCourse, course) =>{
                   if (course.selected === true) {
@@ -187,10 +141,9 @@ import {AppSettings} from '../../app.settings';
               return sector;
           }, {});
           return state.sectors;
-      });
-      this.showLoaderCourses$ = this.sectors$.map(sectors => sectors.size === 0 && this.classSelected === "Γ' Λυκείου");
+      }).subscribe(this.sectors$);
 
-      this.sectorFields$ = this._ngRedux.select(state => {
+      this.sectorFieldsSub = this._ngRedux.select(state => {
           state.sectorFields.reduce(({}, sectorField) =>{
             if (sectorField.selected === true) {
               this.sectorSelected = sectorField.id
@@ -198,13 +151,20 @@ import {AppSettings} from '../../app.settings';
             return sectorField;
           }, {});
           return state.sectorFields;
-      });
-
-      this.showLoaderSectors$ = this.sectorFields$.map(sectorFields => sectorFields.size === 0 && this.classSelected === "Β' Λυκείου");
-
+      }).subscribe(this.sectorFields$);
 
     };
 
+    ngOnDestroy() {
+        if (this.studentDataFieldsSub) this.studentDataFieldsSub.unsubscribe();
+        if (this.criteriaSub) this.criteriaSub.unsubscribe();
+        if (this.regionsSub) this.regionsSub.unsubscribe();
+        if (this.sectorsSub) this.sectorsSub.unsubscribe();
+        if (this.sectorFieldsSub) this.sectorFieldsSub.unsubscribe();
+        if (this.epalclassesSub) this.epalclassesSub.unsubscribe();
+        if (this.loginInfoSub) this.loginInfoSub.unsubscribe();
+    }
+
     submitNow() {
           //αποστολή στοιχείων μαθητή στο entity: epal_student
           let aitisiObj: Array<Student | StudentEpalChosen[] | StudentCriteriaChosen[] | StudentCourseChosen | StudentSectorChosen > = [];

source/store/criteria/criteria.initial-state.ts

@@ -2,4 +2,4 @@ import { List } from 'immutable';
 import { ICriteria } from './criteria.types';
 
 
-export const INITIAL_STATE = List<ICriteria>();
+export const CRITERIA_INITIAL_STATE = List<ICriteria>();

source/store/criteria/criteria.reducer.ts

 import { ICriteria, ICriter } from './criteria.types';
-import { INITIAL_STATE } from './criteria.initial-state';
+import { CRITERIA_INITIAL_STATE } from './criteria.initial-state';
 import { Seq } from 'immutable';
 
 import {
@@ -7,7 +7,7 @@ import {
   CRITERIA_SAVE
 } from '../../constants';
 
-export function criteriaReducer(state: ICriter = INITIAL_STATE, action): ICriter {
+export function criteriaReducer(state: ICriter = CRITERIA_INITIAL_STATE, action): ICriter {
   switch (action.type) {
     case CRITERIA_RECEIVED:
         let newCriter = Array<ICriteria>();

source/store/criteria/criteria.types.ts

 import { List } from 'immutable';
 
 export interface ICriteria {
-  /*
-  orphanmono: boolean;
-  orphantwice: boolean;
-  threechildren: boolean;
-  manychildren: boolean;
-  twins: boolean;
-  disability: boolean;
-  studies: boolean;
-  income: string;
-  */
-
   id: string;
   name: string;
   mutual_disabled_id: string,

source/store/logininfo/logininfo.initial-state.ts

@@ -2,4 +2,4 @@ import { List } from 'immutable';
 import { ILoginInfoToken } from './logininfo.types';
 
 // export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
-export const INITIAL_STATE = List<ILoginInfoToken>();
+export const LOGININFO_INITIAL_STATE = List<ILoginInfoToken>();

source/store/logininfo/logininfo.reducer.ts

 import { ILoginInfo, ILoginInfoToken } from './logininfo.types';
-import { INITIAL_STATE } from './logininfo.initial-state';
+import { LOGININFO_INITIAL_STATE } from './logininfo.initial-state';
 import { Seq } from 'immutable';
 
 import {
@@ -7,7 +7,7 @@ import {
   LOGININFO_INIT
 } from '../../constants';
 
-export function loginInfoReducer(state: ILoginInfo = INITIAL_STATE, action): ILoginInfo {
+export function loginInfoReducer(state: ILoginInfo = LOGININFO_INITIAL_STATE, action): ILoginInfo {
   switch (action.type) {
     case LOGININFO_SAVE:
 		let loginInfoTokens = Array<ILoginInfoToken>();
@@ -19,7 +19,7 @@ export function loginInfoReducer(state: ILoginInfo = INITIAL_STATE, action): ILo
         return Seq(loginInfoTokens).map(n => n).toList();
 
     case LOGININFO_INIT:
-        return INITIAL_STATE;
+        return LOGININFO_INITIAL_STATE;
     default:
         return state;
   }