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

source/actions/index.ts

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

source/actions/studentdatafields.actions.ts

+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,
+
+        }
+
+      });
+
+  };
+
+}

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-8.2.5';
 //       return 'http://eduslim2.minedu.gov.gr/drupal';
    }
 }

source/app.ts

@@ -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 {}

source/components/form-controls/form3.ts

@@ -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);

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

@@ -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;

source/constants.ts

 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';

source/containers/forms.css

+.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;
+}

source/containers/main.routes.ts

@@ -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
 ];

source/containers/main.ts

@@ -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>

source/index.html

@@ -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>

source/services/user-data-service.ts

+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"));
+        });
+    };
+}
+*/

source/store/index.ts

@@ -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 = [

source/store/store.ts

 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),
   };
 }
 

source/store/studentdatafields/index.ts

+import { IStudentDataField, IStudentDataFields } from './studentdatafields.types';
+import { studentdataFieldsReducer } from './studentdatafields.reducer';
+import { deimmutifyStudentDataFields } from './studentdatafields.transformers';
+
+export {
+  IStudentDataField,
+  IStudentDataFields,
+  studentdataFieldsReducer,
+  deimmutifyStudentDataFields,
+};

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

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

source/store/studentdatafields/studentdatafields.reducer.ts

+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;
+  }
+};

source/store/studentdatafields/studentdatafields.transformers.ts

+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) : []);
+} */

source/store/studentdatafields/studentdatafields.types.ts

+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
+}); */