created application form - stage3 , saved form-data to redux store, populated...

created application form - stage3 , saved form-data to redux store, populated form from redux store, deleted test code
parent 9c09bab6
import { CourseFieldsActions } from './coursefields.actions';
const ACTION_PROVIDERS = [ CourseFieldsActions ];
import { StudentDataFieldsActions } from './studentdatafields.actions';
const ACTION_PROVIDERS = [ CourseFieldsActions, StudentDataFieldsActions ];
export {
CourseFieldsActions,
StudentDataFieldsActions,
ACTION_PROVIDERS,
};
import { STUDENTDATAFIELDS_SAVE, STUDENTDATAFIELDS_RECEIVED } from '../constants';
import { Injectable } from '@angular/core';
import { NgRedux } from 'ng2-redux';
import { IAppState } from '../store';
//import { HelperDataService } from '../services/helper-data-service';
import { UserDataService } from '../services/user-data-service';
@Injectable()
export class StudentDataFieldsActions {
constructor(
private _ngRedux: NgRedux<IAppState>,
private _hds: UserDataService) {}
getStudentDataFields = () => {
const { studentdataFields } = this._ngRedux.getState();
//console.log(studentdataFields);
if (studentdataFields.size === 0) {
return this._hds.getStudentDataFields().then(studentdataFields => {
return this._ngRedux.dispatch({
type: STUDENTDATAFIELDS_RECEIVED,
payload: {
studentdataFields
}
});
});
}
};
/*
getStudentDataFields = () => {
return this._hds.getStudentDataFields().then(studentdataFields => {
return this._ngRedux.dispatch({
type: STUDENTDATAFIELDS_RECEIVED,
payload: {
studentdataFields
}
});
});
};
*/
saveStudentDataFields = (studentdataFieldsFirstname, studentdataFieldsSurname, studentdataFieldsGuardianFirstname,
studentdataFieldsGuardianSurname, studentdataFieldsStudentAmka,
studentdataFieldsRegionAddress, studentdataFieldsRegionTK, studentdataFieldsRegionArea,
studentdataFieldsCertificateType, studentdataFieldsRelationToStudent,) => {
return this._ngRedux.dispatch({
type: STUDENTDATAFIELDS_SAVE,
payload: {
studentdataFieldsFirstname,
studentdataFieldsSurname,
studentdataFieldsGuardianFirstname,
studentdataFieldsGuardianSurname,
studentdataFieldsStudentAmka,
studentdataFieldsRegionAddress,
studentdataFieldsRegionTK,
studentdataFieldsRegionArea,
studentdataFieldsCertificateType,
studentdataFieldsRelationToStudent,
}
});
};
}
export class AppSettings {
public static get API_ENDPOINT(): string {
// return 'http://localhost/dist';
return 'http://eepal.dev/drupal';
return 'http://localhost/drupal-8.2.5';
// return 'http://eduslim2.minedu.gov.gr/drupal';
}
}
......@@ -27,6 +27,7 @@ import { APP_ROUTER_PROVIDERS, APP_DECLARATIONS } from './app.routes';
/* Here we import services */
import {HelperDataService} from './services/helper-data-service';
import {UserDataService} from './services/user-data-service';
import { ACTION_PROVIDERS } from './actions';
import Home from './components/home';
......@@ -63,6 +64,7 @@ class MyLocalization extends NgLocalization {
ACTION_PROVIDERS,
// Service1, again services here
HelperDataService,
UserDataService,
]
})
class AppModule {}
......
......@@ -49,12 +49,15 @@ export default class Form3 {
onSubmit(studentform: any) {
let headers = new Headers({
"Authorization": "Basic cmVzdHVzZXI6czNjckV0MFAwdWwwJA==", // encoded user:pass
//"Authorization": "Basic cmVzdHVzZXI6czNjckV0MFAwdWwwJA==", // encoded user:pass
"Authorization": "Basic bmthdHNhb3Vub3M6emVtcmFpbWU=",
"Accept": "*/*",
"Access-Control-Allow-Credentials": "true",
"Content-Type": "application/json",
// "Content-Type": "text/plain", // try to skip preflight
"X-CSRF-Token": "hVtACDJjFRSyE4bgGJENHbXY0B9yNhF71Fw-cYHSDNY"
//"X-CSRF-Token": "hVtACDJjFRSyE4bgGJENHbXY0B9yNhF71Fw-cYHSDNY"
//"X-CSRF-Token": "fj1QtF_Z_p6kE19EdCnN08zoSjVfcT4Up-ciW6I0IG8"
"X-CSRF-Token": "LU92FaWYfImfZxfldkF5eVnssdHoV7Aa9fg8K1bWYUc"
});
let options = new RequestOptions({ headers: headers, withCredentials: true });
console.log(this.student);
......
......@@ -57,8 +57,10 @@ import {AppSettings} from '../../app.settings';
this._cfa.getCourseFields();
this.courseFields$ = this._ngRedux.select(state => {
//console.log("test2");
state.courseFields.reduce(({}, courseField) =>{
this.cfs.push(new FormControl(courseField.selected, []));
//console.log(courseField.selected);
return courseField;
}, {});
return state.courseFields;
......
export const COURSEFIELDS_RECEIVED = 'COURSEFIELDS_RECEIVED';
export const COURSEFIELDS_SELECTED_SAVE = 'COURSEFIELDS_SELECTED_SAVE';
export const STUDENTDATAFIELDS_RECEIVED = 'STUDENTDATAFIELDS_RECEIVED';
export const STUDENTDATAFIELDS_SAVE = 'STUDENTDATAFIELDS_SAVE';
.ng-valid[required], .ng-valid.required {
/*border-left: 3px solid #42A948;*/ /* green */
}
.ng-invalid:not(form) {
border-left: 3px solid #a94442; /* red */
}
#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
}
......@@ -5,6 +5,8 @@ import {
import {CamelCasePipe} from '../pipes/camelcase';
import Form3 from '../components/form-controls/form3';
//import ApplicantInfoFormComponent from '../components/form-controls/applicantinfo-form.component';
import StudentDataFieldsSelect from '../components/student-application-form/studentData-fields-select';
import StudentsList from '../components/students/students-list';
import Home from '../components/home';
import CourseFieldsSelect from '../components/student-application-form/course-fields-select';
......@@ -12,6 +14,8 @@ import CourseFieldsSelect from '../components/student-application-form/course-fi
export const MainRoutes: Routes = [
{ path: '', component: Home },
{ path: 'form3', component: Form3 },
// { path: 'applicant-data-form', component: ApplicantInfoFormComponent },
{ path: 'applicant-data-form', component: StudentDataFieldsSelect },
{ path: 'students-list', component: StudentsList },
{ path: 'course-fields-select', component: CourseFieldsSelect }
];
......@@ -19,7 +23,9 @@ export const MainRoutes: Routes = [
export const MainDeclarations = [
CamelCasePipe,
Form3,
//ApplicantInfoFormComponent,
StudentsList,
Home,
CourseFieldsSelect
CourseFieldsSelect,
StudentDataFieldsSelect
];
......@@ -28,6 +28,9 @@ import {
<li [ngClass]="{active: path=='form3'}">
<a [routerLink]="['/form3']">Αίτηση</a>
</li>
<li [ngClass]="{active: path=='applicant-data-form'}">
<a [routerLink]="['/applicant-data-form']">Αίτηση μαθητή / Καταχώρηση προσωπικών στοιχείων</a>
</li>
<li [ngClass]="{active: path=='students-list'}">
<a [routerLink]="['/students-list']">Μαθητές</a>
</li>
......
......@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>Angular 2 με Drupal backend RESTful server</title>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
<link rel="stylesheet" href="../source//containers/forms.css">
</head>
<body>
<h3 class="text-center">Angular 2 με Drupal backend RESTful server</h3>
......
import {Http, Headers} from '@angular/http';
import {Injectable} from '@angular/core';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';
import { IStudentDataField } from '../store/studentdatafields/studentdatafields.types';
import {AppSettings} from '../app.settings';
const HEADER = { headers: new Headers({ 'Content-Type': 'application/json' }) };
@Injectable()
export class UserDataService {
constructor(private http: Http) {
};
getStudentDataFields() {
return new Promise((resolve, reject) => {
this.http.get(`${AppSettings.API_ENDPOINT}/studentList`)
.map(response => <IStudentDataField[]>response.json())
.subscribe(data => {
resolve(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("Student Data Fields Received"));//run this code in all cases); */
});
};
}
/*
import {Http, Headers} from '@angular/http';
import {Injectable} from '@angular/core';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';
//import { ICourseField } from '../store/coursefields/coursefields.types';
import { IStudentDataField } from '../store/studentdatafields/studentdatafields.types';
import {AppSettings} from '../app.settings';
const HEADER = { headers: new Headers({ 'Content-Type': 'application/json' }) };
@Injectable()
//export class HelperDataService {
export class UserDataService {
constructor(private http: Http) {
};
getStudentDataFields() {
return new Promise((resolve, reject) => {
//this.http.get(`${AppSettings.API_ENDPOINT}/coursefields/list`)
this.http.get(`${AppSettings.API_ENDPOINT}/studentList`)
.map(response => <IStudentDataField[]>response.json())
.subscribe(data => {
console.log(data);
resolve(data);
},
error => {
console.log("Error HTTP GET Service"); // in case of failure show this message
reject("Error HTTP GET Service");
},
() => console.log("Student Fields Received"));
});
};
}
*/
......@@ -2,12 +2,15 @@
import * as createLogger from 'redux-logger';
import { IAppState, rootReducer, deimmutify } from './store';
import { ICourseField, ICourseFields } from './coursefields/coursefields.types';
import { IStudentDataField, IStudentDataFields } from './studentdatafields/studentdatafields.types';
export {
IAppState,
rootReducer,
ICourseField,
ICourseFields,
IStudentDataField,
IStudentDataFields,
};
export const middleware = [
......
import { combineReducers } from 'redux';
import * as courseFields from './coursefields';
import * as studentdataFields from './studentdatafields';
/*
* This is where we 'assemble' the full store out of its modules.
......@@ -7,15 +8,18 @@ import * as courseFields from './coursefields';
export interface IAppState {
courseFields?: courseFields.ICourseFields;
studentdataFields?: studentdataFields.IStudentDataFields;
};
export const rootReducer = combineReducers<IAppState>({
courseFields: courseFields.courseFieldsReducer,
studentdataFields: studentdataFields.studentdataFieldsReducer,
});
export function deimmutify(state: IAppState): Object {
return {
courseFields: courseFields.deimmutifyCourseFields(state.courseFields),
studentdataFields: studentdataFields.deimmutifyStudentDataFields(state.studentdataFields),
};
}
......
import { IStudentDataField, IStudentDataFields } from './studentdatafields.types';
import { studentdataFieldsReducer } from './studentdatafields.reducer';
import { deimmutifyStudentDataFields } from './studentdatafields.transformers';
export {
IStudentDataField,
IStudentDataFields,
studentdataFieldsReducer,
deimmutifyStudentDataFields,
};
import { List } from 'immutable';
import { IStudentDataField } from './studentdatafields.types';
// export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
export const INITIAL_STATE = List<IStudentDataField>();
import { IStudentDataFields, IStudentDataField } from './studentdatafields.types';
import { INITIAL_STATE } from './studentdatafields.initial-state';
import { Seq } from 'immutable';
import {
STUDENTDATAFIELDS_RECEIVED,
STUDENTDATAFIELDS_SAVE
} from '../../constants';
export function studentdataFieldsReducer(state: IStudentDataFields = INITIAL_STATE, action): IStudentDataFields {
switch (action.type) {
case STUDENTDATAFIELDS_RECEIVED:
let newStudentDataFields = Array<IStudentDataField>();
let i=0;
action.payload.studentdataFields.forEach(studentdataField => {
newStudentDataFields.push(<IStudentDataField>{studentFirstname: studentdataField.studentFirstname, studentSurname: studentdataField.studentSurname,
guardianFirstname: studentdataField.guardianFirstname, guardianSurname: studentdataField.guardianSurname,
studentAmka: studentdataField.studentAmka,
regionAddress: studentdataField.regionAddress, regionTK: studentdataField.regionTK, regionArea: studentdataField.regionArea,
certificateType: studentdataField.certificateType, relationToStudent: studentdataField.relationToStudent});
i++;
});
return Seq(newStudentDataFields).map(n => n).toList();
case STUDENTDATAFIELDS_SAVE:
let selectedStudentDataFields = Array<IStudentDataField>();
let ind=0;
//let testvar = "nikos";
state.forEach(studentdataField => {
selectedStudentDataFields.push(<IStudentDataField>{studentFirstname: action.payload.studentdataFieldsFirstname, studentSurname: action.payload.studentdataFieldsSurname,
guardianFirstname: action.payload.studentdataFieldsGuardianFirstname, guardianSurname: action.payload.studentdataFieldsGuardianSurname,
studentAmka: studentdataField.studentAmka, regionAddress: action.payload.studentdataFieldsRegionAddress,
regionTK: action.payload.studentdataFieldsRegionTK, regionArea: action.payload.studentdataFieldsRegionArea,
certificateType: action.payload.studentdataFieldsCertificateType, relationToStudent: action.payload.studentdataFieldsRelationToStudent});
ind++;
//console.log(action.payload.studentdataFieldsFirstname);
});
return Seq(selectedStudentDataFields).map(n => n).toList();
default: return state;
}
};
import { IStudentDataFields, IStudentDataField } from './studentdatafields.types';
export function deimmutifyStudentDataFields(state: IStudentDataFields): IStudentDataField[] {
let fetchedStudentDataFields = new Array();
state.forEach(studentdataField => {
fetchedStudentDataFields.push(<IStudentDataField>{studentSurname: studentdataField.studentFirstname,
studentFirstname: studentdataField.studentSurname, guardianSurname: studentdataField.guardianFirstname,
guardianFirstname: studentdataField.guardianSurname,
studentAmka: studentdataField.studentAmka, regionAddress: studentdataField.regionAddress,
regionTK: studentdataField.regionTK,regionArea: studentdataField.regionArea,
certificateType: studentdataField.certificateType, relationToStudent: studentdataField.relationToStudent
});
});
return fetchedStudentDataFields;
};
/* export function reimmutifyCourseFields(plain): ICourseFields {
return List<ICourseField>(plain ? plain.map(CourseFieldRecord) : []);
} */
import { List } from 'immutable';
export interface IStudentDataField {
studentFirstname: string;
studentSurname: string;
guardianFirstname: string;
guardianSurname: string;
//guardianADT: string;
studentAmka: string;
regionAddress: string;
regionTK: string;
regionArea: string;
certificateType: string;
relationToStudent: string;
}
export type IStudentDataFields = List<IStudentDataField>;
/* export const CourseFieldRecord = Record({
id: 0,
name: '---',
selected: 0
}); */
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