From c3c4213e6d05661bc85d9d5de86d188f952c1fb3 Mon Sep 17 00:00:00 2001 From: Haris Papadopoulos Date: Wed, 25 Jan 2017 22:04:18 +0200 Subject: [PATCH] New regions-schools-select form. Restructured and saved in store. Selections also saved in store and retrieved --- source/actions/index.ts | 4 +- source/actions/regionschools.actions.ts | 36 +++++++ source/app.settings.ts | 4 +- .../course.fields.select.ts | 2 +- .../region.schools.select.ts | 100 ++++++++++++++++++ source/constants.ts | 3 + source/containers/main.routes.ts | 8 +- source/containers/main.ts | 3 + source/services/helper-data-service.ts | 42 +++++++- .../store/coursefields/coursefields.types.ts | 6 -- source/store/index.ts | 13 +-- source/store/regionschools/index.ts | 11 ++ .../regionschools.initial-state.ts | 5 + .../regionschools/regionschools.reducer.ts | 37 +++++++ .../regionschools.transformers.ts | 14 +++ .../regionschools/regionschools.types.ts | 16 +++ source/store/store.ts | 11 +- 17 files changed, 283 insertions(+), 32 deletions(-) create mode 100644 source/actions/regionschools.actions.ts create mode 100644 source/components/student-application-form/region.schools.select.ts create mode 100644 source/store/regionschools/index.ts create mode 100644 source/store/regionschools/regionschools.initial-state.ts create mode 100644 source/store/regionschools/regionschools.reducer.ts create mode 100644 source/store/regionschools/regionschools.transformers.ts create mode 100644 source/store/regionschools/regionschools.types.ts diff --git a/source/actions/index.ts b/source/actions/index.ts index 436a9a7..f3160ad 100644 --- a/source/actions/index.ts +++ b/source/actions/index.ts @@ -1,9 +1,11 @@ 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, }; diff --git a/source/actions/regionschools.actions.ts b/source/actions/regionschools.actions.ts new file mode 100644 index 0000000..e3e1e92 --- /dev/null +++ b/source/actions/regionschools.actions.ts @@ -0,0 +1,36 @@ +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, + 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 + } + }); + }; + +} diff --git a/source/app.settings.ts b/source/app.settings.ts index 126ba1b..71470d2 100644 --- a/source/app.settings.ts +++ b/source/app.settings.ts @@ -1,7 +1,7 @@ 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'; } } diff --git a/source/components/student-application-form/course.fields.select.ts b/source/components/student-application-form/course.fields.select.ts index 4bdba2c..7faad90 100644 --- a/source/components/student-application-form/course.fields.select.ts +++ b/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']); } } diff --git a/source/components/student-application-form/region.schools.select.ts b/source/components/student-application-form/region.schools.select.ts new file mode 100644 index 0000000..3096235 --- /dev/null +++ b/source/components/student-application-form/region.schools.select.ts @@ -0,0 +1,100 @@ +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: ` +
+
+
    +
    +
  • +
    {{region$.region_name}}
    +
    • + +
    +
  • +
    +
    + +
    +
    + {{epal$.epal_name}} +
    +
    +
    • +
    +
    +
+
+
+
+ +
+
+
+ + ` +}) +@Injectable() export default class RegionSchoolsSelect implements OnInit { + private regions$: Observable; + private formGroup: FormGroup; + private rss = new FormArray([]); + private regionActive = -1; + + constructor(private fb: FormBuilder, + private _rsa: RegionSchoolsActions, + private _ngRedux: NgRedux, + 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']); + } +} diff --git a/source/constants.ts b/source/constants.ts index 33f3806..26211b2 100644 --- a/source/constants.ts +++ b/source/constants.ts @@ -1,6 +1,9 @@ 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'; diff --git a/source/containers/main.routes.ts b/source/containers/main.routes.ts index e1724c0..444fae9 100644 --- a/source/containers/main.routes.ts +++ b/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 ]; diff --git a/source/containers/main.ts b/source/containers/main.ts index 1849042..1237792 100644 --- a/source/containers/main.ts +++ b/source/containers/main.ts @@ -25,6 +25,9 @@ import {
  • Επιλογή Ειδικότητας
    • +
  • + Επιλογή Σχολείου +
  • Αίτηση μαθητή / Καταχώρηση προσωπικών στοιχείων
    • diff --git a/source/services/helper-data-service.ts b/source/services/helper-data-service.ts index dd7ae7c..03b1bc4 100644 --- a/source/services/helper-data-service.ts +++ b/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 => 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(); + let trackRegionId: string; + let trackIndex: number; + + trackRegionId = ""; + trackIndex = -1; + + let j=0; + regionSchools.forEach(regionSchool => { + if (trackRegionId !== regionSchool.region_id) { + trackIndex++; + rsa.push({'region_id': regionSchool.region_id, 'region_name': regionSchool.region_name, 'epals': Array()}); + trackRegionId = regionSchool.region_id; + } + rsa[trackIndex].epals.push({'epal_id': regionSchool.epal_id, 'epal_name': regionSchool.epal_name, 'globalIndex': j, 'selected': false}); + j++; + }); + return rsa; + } + } diff --git a/source/store/coursefields/coursefields.types.ts b/source/store/coursefields/coursefields.types.ts index f7d45df..8df808b 100644 --- a/source/store/coursefields/coursefields.types.ts +++ b/source/store/coursefields/coursefields.types.ts @@ -7,9 +7,3 @@ export interface ICourseField { } export type ICourseFields = List; - -/* export const CourseFieldRecord = Record({ - id: 0, - name: '---', - selected: 0 -}); */ diff --git a/source/store/index.ts b/source/store/index.ts index 344e8dc..53ce298 100644 --- a/source/store/index.ts +++ b/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)), - }) -]; */ diff --git a/source/store/regionschools/index.ts b/source/store/regionschools/index.ts new file mode 100644 index 0000000..22ee8ba --- /dev/null +++ b/source/store/regionschools/index.ts @@ -0,0 +1,11 @@ +import { IRegions, IRegion, IRegionSchool } from './regionschools.types'; +import { regionSchoolsReducer } from './regionschools.reducer'; +import { deimmutifyRegionSchools } from './regionschools.transformers'; + +export { + IRegion, + IRegions, + IRegionSchool, + regionSchoolsReducer, + deimmutifyRegionSchools, +}; diff --git a/source/store/regionschools/regionschools.initial-state.ts b/source/store/regionschools/regionschools.initial-state.ts new file mode 100644 index 0000000..96dbe84 --- /dev/null +++ b/source/store/regionschools/regionschools.initial-state.ts @@ -0,0 +1,5 @@ +import { List } from 'immutable'; +import { IRegion } from './regionschools.types'; + +// export const INITIAL_STATE = List([new CourseFieldRecord({})]); +export const INITIAL_STATE = List(); diff --git a/source/store/regionschools/regionschools.reducer.ts b/source/store/regionschools/regionschools.reducer.ts new file mode 100644 index 0000000..e5579cf --- /dev/null +++ b/source/store/regionschools/regionschools.reducer.ts @@ -0,0 +1,37 @@ +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(); + let i=0; + action.payload.regions.forEach(region => { + newRegions.push({region_id: region.region_id, region_name: region.region_name, epals: Array() }); + region.epals.forEach(epal => { + newRegions[i].epals.push({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(); + let ind=0, j = 0; + state.forEach(region => { + regionsWithSelections.push({region_id: region.region_id, region_name: region.region_name, epals: Array()}); + region.epals.forEach(epal => { + regionsWithSelections[ind].epals.push({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; + } +}; diff --git a/source/store/regionschools/regionschools.transformers.ts b/source/store/regionschools/regionschools.transformers.ts new file mode 100644 index 0000000..0ca4792 --- /dev/null +++ b/source/store/regionschools/regionschools.transformers.ts @@ -0,0 +1,14 @@ +import { IRegions, IRegion, IRegionSchool } from './regionschools.types'; + +export function deimmutifyRegionSchools(state: IRegions): IRegion[] { + let fetchedRegions = new Array(); + let i = 0; + state.forEach(region => { + fetchedRegions.push({region_id: region.region_id, region_name: region.region_name, epals: Array()}); + region.epals.forEach(epal => { + fetchedRegions[i].epals.push({epal_id: epal.epal_id, epal_name: epal.epal_name, globalIndex: epal.globalIndex, selected: epal.selected}) + }); + i++; + }); + return fetchedRegions; +}; diff --git a/source/store/regionschools/regionschools.types.ts b/source/store/regionschools/regionschools.types.ts new file mode 100644 index 0000000..7ab06cb --- /dev/null +++ b/source/store/regionschools/regionschools.types.ts @@ -0,0 +1,16 @@ +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; diff --git a/source/store/store.ts b/source/store/store.ts index b0dd96a..3902f39 100644 --- a/source/store/store.ts +++ b/source/store/store.ts @@ -1,5 +1,6 @@ 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({ 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), - } : {}; -} */ -- 2.22.0