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
parent 26a64e68
import { CourseFieldsActions } from './coursefields.actions'; import { CourseFieldsActions } from './coursefields.actions';
import { RegionSchoolsActions } from './regionschools.actions';
import { StudentDataFieldsActions } from './studentdatafields.actions'; import { StudentDataFieldsActions } from './studentdatafields.actions';
const ACTION_PROVIDERS = [ CourseFieldsActions, StudentDataFieldsActions ]; const ACTION_PROVIDERS = [ CourseFieldsActions, RegionSchoolsActions, StudentDataFieldsActions ];
export { export {
CourseFieldsActions, CourseFieldsActions,
RegionSchoolsActions,
StudentDataFieldsActions, StudentDataFieldsActions,
ACTION_PROVIDERS, ACTION_PROVIDERS,
}; };
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
}
});
};
}
export class AppSettings { export class AppSettings {
public static get API_ENDPOINT(): string { public static get API_ENDPOINT(): string {
return 'http://localhost/dist'; // return 'http://localhost/drupal/dist';
// return 'http://eepal.dev/drupal'; return 'http://eepal.dev/drupal';
// return 'http://eduslim2.minedu.gov.gr/drupal'; // return 'http://eduslim2.minedu.gov.gr/drupal';
} }
} }
...@@ -73,6 +73,6 @@ import {AppSettings} from '../../app.settings'; ...@@ -73,6 +73,6 @@ import {AppSettings} from '../../app.settings';
saveSelected() { saveSelected() {
this._cfa.saveCourseFieldsSelected(this.formGroup.value.formArray); this._cfa.saveCourseFieldsSelected(this.formGroup.value.formArray);
this.router.navigate(['/student-application-form-main']); this.router.navigate(['/region-schools-select']);
} }
} }
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']);
}
}
export const COURSEFIELDS_RECEIVED = 'COURSEFIELDS_RECEIVED'; export const COURSEFIELDS_RECEIVED = 'COURSEFIELDS_RECEIVED';
export const COURSEFIELDS_SELECTED_SAVE = 'COURSEFIELDS_SELECTED_SAVE'; 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_RECEIVED = 'STUDENTDATAFIELDS_RECEIVED';
export const STUDENTDATAFIELDS_SAVE = 'STUDENTDATAFIELDS_SAVE'; export const STUDENTDATAFIELDS_SAVE = 'STUDENTDATAFIELDS_SAVE';
......
...@@ -5,27 +5,27 @@ import { ...@@ -5,27 +5,27 @@ import {
import {CamelCasePipe} from '../pipes/camelcase'; import {CamelCasePipe} from '../pipes/camelcase';
import Form3 from '../components/form-controls/form3'; 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 StudentApplicationMain from '../components/student-application-form/application.form.main';
import StudentsList from '../components/students/students-list'; import StudentsList from '../components/students/students-list';
import Home from '../components/home'; import Home from '../components/home';
import CourseFieldsSelect from '../components/student-application-form/course.fields.select'; import CourseFieldsSelect from '../components/student-application-form/course.fields.select';
import RegionSchoolsSelect from '../components/student-application-form/region.schools.select';
export const MainRoutes: Routes = [ export const MainRoutes: Routes = [
{ path: '', component: Home }, { path: '', component: Home },
{ path: 'form3', component: Form3 }, { path: 'form3', component: Form3 },
// { path: 'applicant-data-form', component: ApplicantInfoFormComponent },
{ path: 'student-application-form-main', component: StudentApplicationMain }, { path: 'student-application-form-main', component: StudentApplicationMain },
{ path: 'students-list', component: StudentsList }, { 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 = [ export const MainDeclarations = [
CamelCasePipe, CamelCasePipe,
Form3, Form3,
//ApplicantInfoFormComponent,
StudentsList, StudentsList,
Home, Home,
CourseFieldsSelect, CourseFieldsSelect,
RegionSchoolsSelect,
StudentApplicationMain StudentApplicationMain
]; ];
...@@ -25,6 +25,9 @@ import { ...@@ -25,6 +25,9 @@ import {
<li [ngClass]="{active: path=='course-fields-select'}"> <li [ngClass]="{active: path=='course-fields-select'}">
<a [routerLink]="['/course-fields-select']">Επιλογή Ειδικότητας</a> <a [routerLink]="['/course-fields-select']">Επιλογή Ειδικότητας</a>
</li> </li>
<li [ngClass]="{active: path=='region-schools-select'}">
<a [routerLink]="['/region-schools-select']">Επιλογή Σχολείου</a>
</li>
<li [ngClass]="{active: path=='student-application-form-main'}"> <li [ngClass]="{active: path=='student-application-form-main'}">
<a [routerLink]="['/student-application-form-main']">Αίτηση μαθητή / Καταχώρηση προσωπικών στοιχείων</a> <a [routerLink]="['/student-application-form-main']">Αίτηση μαθητή / Καταχώρηση προσωπικών στοιχείων</a>
</li> </li>
......
...@@ -3,7 +3,8 @@ import {Injectable} from '@angular/core'; ...@@ -3,7 +3,8 @@ import {Injectable} from '@angular/core';
import {Observable} from "rxjs/Observable"; import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import { ICourseField } from '../store/coursefields/coursefields.types'; 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' }) }; const HEADER = { headers: new Headers({ 'Content-Type': 'application/json' }) };
...@@ -12,7 +13,6 @@ export class HelperDataService { ...@@ -12,7 +13,6 @@ export class HelperDataService {
constructor(private http: Http) { constructor(private http: Http) {
}; };
getCourseFields() { getCourseFields() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.http.get(`${AppSettings.API_ENDPOINT}/coursefields/list`) this.http.get(`${AppSettings.API_ENDPOINT}/coursefields/list`)
.map(response => <ICourseField[]>response.json()) .map(response => <ICourseField[]>response.json())
...@@ -26,4 +26,42 @@ export class HelperDataService { ...@@ -26,4 +26,42 @@ export class HelperDataService {
() => console.log("Course Fields Received"));//run this code in all cases); */ () => 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;
}
} }
...@@ -7,9 +7,3 @@ export interface ICourseField { ...@@ -7,9 +7,3 @@ export interface ICourseField {
} }
export type ICourseFields = List<ICourseField>; export type ICourseFields = List<ICourseField>;
/* export const CourseFieldRecord = Record({
id: 0,
name: '---',
selected: 0
}); */
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import * as createLogger from 'redux-logger'; import * as createLogger from 'redux-logger';
import { IAppState, rootReducer, deimmutify } from './store'; import { IAppState, rootReducer, deimmutify } from './store';
import { ICourseField, ICourseFields } from './coursefields/coursefields.types'; import { ICourseField, ICourseFields } from './coursefields/coursefields.types';
import { IRegions, IRegion, IRegionSchool } from './regionschools/regionschools.types';
import { IStudentDataField, IStudentDataFields } from './studentdatafields/studentdatafields.types'; import { IStudentDataField, IStudentDataFields } from './studentdatafields/studentdatafields.types';
export { export {
...@@ -9,6 +10,9 @@ export { ...@@ -9,6 +10,9 @@ export {
rootReducer, rootReducer,
ICourseField, ICourseField,
ICourseFields, ICourseFields,
IRegions,
IRegion,
IRegionSchool,
IStudentDataField, IStudentDataField,
IStudentDataFields, IStudentDataFields,
}; };
...@@ -20,12 +24,3 @@ export const middleware = [ ...@@ -20,12 +24,3 @@ export const middleware = [
stateTransformer: deimmutify stateTransformer: deimmutify
}) })
]; ];
/* export const enhancers = [
persistState(
'', {
key: 'e-epal',
serialize: s => JSON.stringify(deimmutify(s)),
deserialize: s => reimmutify(JSON.parse(s)),
})
]; */
import { IRegions, IRegion, IRegionSchool } from './regionschools.types';
import { regionSchoolsReducer } from './regionschools.reducer';
import { deimmutifyRegionSchools } from './regionschools.transformers';
export {
IRegion,
IRegions,
IRegionSchool,
regionSchoolsReducer,
deimmutifyRegionSchools,
};
import { List } from 'immutable';
import { IRegion } from './regionschools.types';
// export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
export const INITIAL_STATE = List<IRegion>();
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;
}
};
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;
};
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>;
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import * as courseFields from './coursefields'; import * as courseFields from './coursefields';
import * as regions from './regionschools';
import * as studentDataFields from './studentdatafields'; import * as studentDataFields from './studentdatafields';
/* /*
...@@ -8,24 +9,20 @@ import * as studentDataFields from './studentdatafields'; ...@@ -8,24 +9,20 @@ import * as studentDataFields from './studentdatafields';
export interface IAppState { export interface IAppState {
courseFields?: courseFields.ICourseFields; courseFields?: courseFields.ICourseFields;
regions?: regions.IRegions;
studentDataFields?: studentDataFields.IStudentDataFields; studentDataFields?: studentDataFields.IStudentDataFields;
}; };
export const rootReducer = combineReducers<IAppState>({ export const rootReducer = combineReducers<IAppState>({
courseFields: courseFields.courseFieldsReducer, courseFields: courseFields.courseFieldsReducer,
regions: regions.regionSchoolsReducer,
studentDataFields: studentDataFields.studentDataFieldsReducer, studentDataFields: studentDataFields.studentDataFieldsReducer,
}); });
export function deimmutify(state: IAppState): Object { export function deimmutify(state: IAppState): Object {
return { return {
courseFields: courseFields.deimmutifyCourseFields(state.courseFields), courseFields: courseFields.deimmutifyCourseFields(state.courseFields),
regions: regions.deimmutifyRegionSchools(state.regions),
studentdataFields: studentDataFields.deimmutifyStudentDataFields(state.studentDataFields), studentdataFields: studentDataFields.deimmutifyStudentDataFields(state.studentDataFields),
}; };
} }
/* export function reimmutify(plain): IAppState {
return plain ? {
courseFields: courseFields.reimmutifyCourseFields(plain.courseFields),
courseFieldsSelected: courseFieldsSelected.reimmutifyCourseFieldsSelected(plain.courseFieldsSelected),
} : {};
} */
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