New regions-schools-select form. Restructured and saved in store. Selections...

New regions-schools-select form. Restructured and saved in store. Selections also saved in store and retrieved

source/actions/index.ts

 import { CourseFieldsActions } from './coursefields.actions';
+import { RegionSchoolsActions } from './regionschools.actions';
 import { StudentDataFieldsActions } from './studentdatafields.actions';
-const ACTION_PROVIDERS = [ CourseFieldsActions, StudentDataFieldsActions  ];
+const ACTION_PROVIDERS = [ CourseFieldsActions, RegionSchoolsActions, StudentDataFieldsActions  ];
 
 export {
   CourseFieldsActions,
+  RegionSchoolsActions,
   StudentDataFieldsActions,
   ACTION_PROVIDERS,
 };

source/actions/regionschools.actions.ts

+import { REGIONSCHOOLS_RECEIVED, REGIONSCHOOLS_SELECTED_SAVE } from '../constants';
+import { Injectable } from '@angular/core';
+import { NgRedux } from 'ng2-redux';
+import { IAppState } from '../store';
+import { HelperDataService } from '../services/helper-data-service';
+
+@Injectable()
+export class RegionSchoolsActions {
+  constructor(
+    private _ngRedux: NgRedux<IAppState>,
+    private _hds: HelperDataService) {}
+
+  getRegionSchools = () => {
+    const { regions } = this._ngRedux.getState();
+    if (regions.size === 0) {
+        return this._hds.getRegionsWithSchools().then(regions => {
+            return this._ngRedux.dispatch({
+                type: REGIONSCHOOLS_RECEIVED,
+                payload: {
+                    regions
+                }
+            });
+        });
+    }
+  };
+
+  saveRegionSchoolsSelected = (regionSchoolsSelected) => {
+      return this._ngRedux.dispatch({
+        type: REGIONSCHOOLS_SELECTED_SAVE,
+        payload: {
+          regionSchoolsSelected
+        }
+      });
+  };
+
+}

source/app.settings.ts

 export class AppSettings {
    public static get API_ENDPOINT(): string {
-       return 'http://localhost/dist';
-//       return 'http://eepal.dev/drupal';
+//       return 'http://localhost/drupal/dist';
+       return 'http://eepal.dev/drupal';
 //       return 'http://eduslim2.minedu.gov.gr/drupal';
    }
 }

source/components/student-application-form/course.fields.select.ts

@@ -73,6 +73,6 @@ import {AppSettings} from '../../app.settings';
 
     saveSelected() {
         this._cfa.saveCourseFieldsSelected(this.formGroup.value.formArray);
-        this.router.navigate(['/student-application-form-main']);
+        this.router.navigate(['/region-schools-select']);
     }
 }

source/components/student-application-form/region.schools.select.ts

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } 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 { IAppState } from '../../store/store';
+
+import {
+    FormBuilder,
+    FormGroup,
+    FormControl,
+    FormArray
+} from '@angular/forms';
+import {AppSettings} from '../../app.settings';
+
+@Component({
+    selector: 'course-fields-select',
+    template: `
+     <form [formGroup]="formGroup">
+        <div formArrayName="formArray">
+            <ul class="list-group">
+            <div *ngFor="let region$ of regions$ | async; let i=index">
+                <li class="list-group-item" (click)="setActiveRegion(i)" [style.background-color]="toggleBackgroundColor(i)">
+                    <h5>{{region$.region_name}}</h5>
+                </li>
+
+                <div *ngFor="let epal$ of region$.epals; let j=index;" [hidden]="i !== regionActive">
+                    <li class="list-group-item" >
+                        <div class="row">
+                            <div class="col-md-2">
+                                <input type="checkbox" formControlName="{{ epal$.globalIndex }}">
+                            </div>
+                            <div class="col-md-10">
+                                {{epal$.epal_name}}
+                            </div>
+                        </div>
+                    </li>
+                </div>
+            </div>
+            </ul>
+        </div>
+        <div class="row">
+        <div class="col-md-2 col-md-offset-5">
+            <button type="button" class="btn-primary btn-lg pull-center" (click)="saveSelected()">
+            Συνέχεια<span class="glyphicon glyphicon-menu-right"></span>
+            </button>
+        </div>
+        </div>
+    </form>
+<!--    <pre>{{formGroup.value | json}}</pre> -->
+  `
+})
+@Injectable() export default class RegionSchoolsSelect implements OnInit {
+    private regions$: Observable<IRegions>;
+    private formGroup: FormGroup;
+    private rss = new FormArray([]);
+    private regionActive = <number>-1;
+
+    constructor(private fb: FormBuilder,
+                private _rsa: RegionSchoolsActions,
+                private _ngRedux: NgRedux<IAppState>,
+                private router: Router
+            ) {
+        this.formGroup = this.fb.group({
+            formArray: this.rss
+        });
+    };
+
+    ngOnInit() {
+
+        this._rsa.getRegionSchools();
+
+        this.regions$ = this._ngRedux.select(state => {
+            state.regions.reduce((prevRegion, region) =>{
+                region.epals.reduce((prevEpal, epal) =>{
+                    this.rss.push( new FormControl(epal.selected, []));
+                    return epal;
+                }, {});
+                return region;
+            }, {});
+            return state.regions;
+        });
+
+    }
+
+    setActiveRegion(ind) {
+        this.regionActive = ind;
+    }
+
+    toggleBackgroundColor(ind) {
+        return ((this.regionActive === ind) ? "cyan" : "#eeeeee");
+    }
+
+    saveSelected() {
+        this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray);
+        this.router.navigate(['/student-application-form-main']);
+    }
+}

source/constants.ts

 export const COURSEFIELDS_RECEIVED = 'COURSEFIELDS_RECEIVED';
 export const COURSEFIELDS_SELECTED_SAVE = 'COURSEFIELDS_SELECTED_SAVE';
 
+export const REGIONSCHOOLS_RECEIVED = 'REGIONSCHOOLS_RECEIVED';
+export const REGIONSCHOOLS_SELECTED_SAVE = 'REGIONSCHOOLS_SELECTED_SAVE';
+
 export const STUDENTDATAFIELDS_RECEIVED = 'STUDENTDATAFIELDS_RECEIVED';
 export const STUDENTDATAFIELDS_SAVE = 'STUDENTDATAFIELDS_SAVE';
 

source/containers/main.routes.ts

@@ -5,27 +5,27 @@ import {
 
 import {CamelCasePipe} from '../pipes/camelcase';
 import Form3 from '../components/form-controls/form3';
-//import ApplicantInfoFormComponent from '../components/form-controls/applicantinfo-form.component';
 import StudentApplicationMain from '../components/student-application-form/application.form.main';
 import StudentsList from '../components/students/students-list';
 import Home from '../components/home';
 import CourseFieldsSelect from '../components/student-application-form/course.fields.select';
+import RegionSchoolsSelect from '../components/student-application-form/region.schools.select';
 
 export const MainRoutes: Routes = [
   { path: '', component: Home },
   { path: 'form3', component: Form3 },
-//  { path: 'applicant-data-form', component: ApplicantInfoFormComponent },
   { path: 'student-application-form-main', component: StudentApplicationMain },
   { path: 'students-list', component: StudentsList },
-  { path: 'course-fields-select', component: CourseFieldsSelect }
+  { path: 'course-fields-select', component: CourseFieldsSelect },
+  { path: 'region-schools-select', component: RegionSchoolsSelect }
 ];
 
 export const MainDeclarations = [
   CamelCasePipe,
   Form3,
-  //ApplicantInfoFormComponent,
   StudentsList,
   Home,
   CourseFieldsSelect,
+  RegionSchoolsSelect,
   StudentApplicationMain
 ];

source/containers/main.ts

@@ -25,6 +25,9 @@ import {
       <li [ngClass]="{active: path=='course-fields-select'}">
         <a [routerLink]="['/course-fields-select']">Επιλογή Ειδικότητας</a>
       </li>
+      <li [ngClass]="{active: path=='region-schools-select'}">
+        <a [routerLink]="['/region-schools-select']">Επιλογή Σχολείου</a>
+      </li>
       <li [ngClass]="{active: path=='student-application-form-main'}">
         <a [routerLink]="['/student-application-form-main']">Αίτηση μαθητή / Καταχώρηση προσωπικών στοιχείων</a>
       </li>

source/services/helper-data-service.ts

@@ -3,7 +3,8 @@ import {Injectable} from '@angular/core';
 import {Observable} from "rxjs/Observable";
 import 'rxjs/add/operator/map';
 import { ICourseField } from '../store/coursefields/coursefields.types';
-import {AppSettings} from '../app.settings';
+import { IRegion, IRegions, IRegionSchool } from '../store/regionschools/regionschools.types';
+import { AppSettings } from '../app.settings';
 
 const HEADER = { headers: new Headers({ 'Content-Type': 'application/json' }) };
 
@@ -12,7 +13,6 @@ export class HelperDataService {
     constructor(private http: Http) {
     };
     getCourseFields() {
-
         return new Promise((resolve, reject) => {
             this.http.get(`${AppSettings.API_ENDPOINT}/coursefields/list`)
             .map(response => <ICourseField[]>response.json())
@@ -26,4 +26,42 @@ export class HelperDataService {
             () => console.log("Course Fields Received"));//run this code in all cases); */
         });
     };
+
+    getRegionsWithSchools() {
+        return new Promise((resolve, reject) => {
+            this.http.get(`${AppSettings.API_ENDPOINT}/regions/list`)
+            .map(response => response.json())
+            .subscribe(data => {
+//                console.log(data);
+                resolve(this.transformRegionSchoolsSchema(data));
+            }, // put the data returned from the server in our variable
+            error => {
+                console.log("Error HTTP GET Service"); // in case of failure show this message
+                reject("Error HTTP GET Service");
+            },
+            () => console.log("region schools service"));//run this code in all cases); */
+        });
+    };
+
+    transformRegionSchoolsSchema(regionSchools: any) {
+        let rsa = Array<IRegion>();
+        let trackRegionId: string;
+        let trackIndex: number;
+
+        trackRegionId = "";
+        trackIndex = -1;
+
+        let j=0;
+        regionSchools.forEach(regionSchool => {
+            if (trackRegionId !== regionSchool.region_id) {
+                trackIndex++;
+                rsa.push(<IRegion>{'region_id': regionSchool.region_id, 'region_name': regionSchool.region_name, 'epals': Array<IRegionSchool>()});
+                trackRegionId = regionSchool.region_id;
+            }
+            rsa[trackIndex].epals.push(<IRegionSchool>{'epal_id': regionSchool.epal_id, 'epal_name': regionSchool.epal_name, 'globalIndex': j, 'selected': false});
+            j++;
+        });
+        return rsa;
+    }
+
 }

source/store/coursefields/coursefields.types.ts

@@ -7,9 +7,3 @@ export interface ICourseField {
 }
 
 export type ICourseFields = List<ICourseField>;
-
-/* export const CourseFieldRecord = Record({
-  id: 0,
-  name: '---',
-  selected: 0
-}); */

source/store/index.ts

@@ -2,6 +2,7 @@
 import * as createLogger from 'redux-logger';
 import { IAppState, rootReducer, deimmutify } from './store';
 import { ICourseField, ICourseFields } from './coursefields/coursefields.types';
+import { IRegions, IRegion, IRegionSchool } from './regionschools/regionschools.types';
 import { IStudentDataField, IStudentDataFields } from './studentdatafields/studentdatafields.types';
 
 export {
@@ -9,6 +10,9 @@ export {
   rootReducer,
   ICourseField,
   ICourseFields,
+  IRegions,
+  IRegion,
+  IRegionSchool,
   IStudentDataField,
   IStudentDataFields,
 };
@@ -20,12 +24,3 @@ export const middleware = [
     stateTransformer: deimmutify
   })
 ];
-
-/* export const enhancers = [
-  persistState(
-    '', {
-      key: 'e-epal',
-      serialize: s => JSON.stringify(deimmutify(s)),
-      deserialize: s => reimmutify(JSON.parse(s)),
-  })
-]; */

source/store/regionschools/index.ts

+import { IRegions, IRegion, IRegionSchool } from './regionschools.types';
+import { regionSchoolsReducer } from './regionschools.reducer';
+import { deimmutifyRegionSchools } from './regionschools.transformers';
+
+export {
+  IRegion,
+  IRegions,
+  IRegionSchool,
+  regionSchoolsReducer,
+  deimmutifyRegionSchools,
+};

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

+import { List } from 'immutable';
+import { IRegion } from './regionschools.types';
+
+// export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
+export const INITIAL_STATE = List<IRegion>();

source/store/regionschools/regionschools.reducer.ts

+import { IRegions, IRegion, IRegionSchool } from './regionschools.types';
+import { INITIAL_STATE } from './regionschools.initial-state';
+import { Seq } from 'immutable';
+
+import {
+  REGIONSCHOOLS_RECEIVED,
+  REGIONSCHOOLS_SELECTED_SAVE
+} from '../../constants';
+
+export function regionSchoolsReducer(state: IRegions = INITIAL_STATE, action): IRegions {
+  switch (action.type) {
+    case REGIONSCHOOLS_RECEIVED:
+        let newRegions = Array<IRegion>();
+        let i=0;
+        action.payload.regions.forEach(region => {
+            newRegions.push(<IRegion>{region_id: region.region_id, region_name: region.region_name, epals: Array<IRegionSchool>() });
+            region.epals.forEach(epal => {
+                newRegions[i].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, globalIndex: epal.globalIndex, selected: epal.selected });
+            })
+            i++;
+        });
+        return Seq(newRegions).map(n => n).toList();
+    case REGIONSCHOOLS_SELECTED_SAVE:
+        let regionsWithSelections = Array<IRegion>();
+        let ind=0, j = 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]});
+                j++;
+            })
+            ind++;
+        });
+        return Seq(regionsWithSelections).map(n => n).toList();
+    default: return state;
+  }
+};

source/store/regionschools/regionschools.transformers.ts

+import { IRegions, IRegion, IRegionSchool } from './regionschools.types';
+
+export function deimmutifyRegionSchools(state: IRegions): IRegion[] {
+    let fetchedRegions =  new Array<IRegion>();
+    let i = 0;
+    state.forEach(region => {
+        fetchedRegions.push(<IRegion>{region_id: region.region_id, region_name: region.region_name, epals: Array<IRegionSchool>()});
+        region.epals.forEach(epal => {
+            fetchedRegions[i].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, globalIndex: epal.globalIndex, selected: epal.selected})
+        });
+        i++;
+    });
+    return fetchedRegions;
+};

source/store/regionschools/regionschools.types.ts

+import { List } from 'immutable';
+
+export interface IRegion {
+    region_id: string;
+    region_name: string;
+    epals: IRegionSchool[];
+}
+
+export interface IRegionSchool {
+    epal_id: string;
+    epal_name: string;
+    globalIndex: number;
+    selected: boolean;
+}
+
+export type IRegions = List<IRegion>;

source/store/store.ts

 import { combineReducers } from 'redux';
 import * as courseFields from './coursefields';
+import * as regions from './regionschools';
 import * as studentDataFields from './studentdatafields';
 
 /*
@@ -8,24 +9,20 @@ import * as studentDataFields from './studentdatafields';
 
 export interface IAppState {
     courseFields?: courseFields.ICourseFields;
+    regions?: regions.IRegions;
     studentDataFields?: studentDataFields.IStudentDataFields;
 };
 
 export const rootReducer = combineReducers<IAppState>({
    courseFields: courseFields.courseFieldsReducer,
+   regions: regions.regionSchoolsReducer,
    studentDataFields: studentDataFields.studentDataFieldsReducer,
 });
 
 export function deimmutify(state: IAppState): Object {
   return {
     courseFields: courseFields.deimmutifyCourseFields(state.courseFields),
+    regions: regions.deimmutifyRegionSchools(state.regions),
     studentdataFields: studentDataFields.deimmutifyStudentDataFields(state.studentDataFields),
   };
 }
-
-/* export function reimmutify(plain): IAppState {
-  return plain ? {
-    courseFields: courseFields.reimmutifyCourseFields(plain.courseFields),
-    courseFieldsSelected: courseFieldsSelected.reimmutifyCourseFieldsSelected(plain.courseFieldsSelected),
-  } : {};
-} */