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/TEST_studentData-fields-select.ts

+import {Component, OnInit} from '@angular/core';
+import { Http, Response, RequestOptions, Headers } from '@angular/http';
+import { Observable } from 'rxjs/Rx';
+import {Injectable} from "@angular/core";
+import {CourseFieldsActions} from '../../actions/coursefields.actions';
+import {StudentDataFieldsActions} from '../../actions/studentdatafields.actions';
+
+import { DevToolsExtension, NgRedux, select } from 'ng2-redux';
+import { ICourseField, ICourseFields } from '../../store/coursefields/coursefields.types';
+import { IStudentDataField, IStudentDataFields } from '../../store/studentdatafields/studentdatafields.types';
+import { IAppState } from '../../store/store';
+
+import {
+    FormBuilder,
+    FormGroup,
+    FormControl,
+    FormArray,
+    FormsModule,
+    Validators,
+} from '@angular/forms';
+import {AppSettings} from '../../app.settings';
+
+@Component({
+  //moduleId: module.id,
+  selector: 'studentdata-fields-select',
+
+  //templateUrl: './eepal-front/source/components/form-controls/applicantinfo-form.component.html'
+
+  template: `
+  <form [formGroup]="studentDataGroup">
+
+
+  <div formArrayName="formArray">
+      <div *ngFor="let studentdataField$ of studentdataFields$ | async; let i=index">
+      <div class="row">
+      <div class="col-md-1">
+          <input type="checkbox" formControlName="{{i}}">
+      </div>
+<!--
+      <div class="col-md-11 pull-left">
+          {{studentdataField$.studentFirstname}}
+      </div>
+-->
+      </div>
+      </div>
+  </div>
+
+
+
+
+
+
+
+     <label>Όνομα μαθητή</label><input type="text" formControlName="studentFirstname"  required >
+     <small [hidden]="(studentDataGroup.controls.studentFirstname.pristine || !studentDataGroup.controls.studentFirstname.hasError('isnumeric')) ">
+         Το όνομα δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.studentFirstname.pristine || !studentDataGroup.controls.studentFirstname.hasError('isempty')) ">
+         Δώστε το όνομα του μαθητή..<br/>
+     </small>
+
+     <label>Επώνυμο μαθητή</label><input type="text" formControlName="studentSurname"  required>
+     <small [hidden]="(studentDataGroup.controls.studentSurname.pristine || !studentDataGroup.controls.studentSurname.hasError('isnumeric')) ">
+         Το επώνυμο δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.studentSurname.pristine || !studentDataGroup.controls.studentSurname.hasError('isempty')) ">
+         Δώστε το επώνυμο του μαθητή..<br/>
+     </small>
+
+     <label>Όνομα κηδεμόνα</label><input type="text" formControlName="guardianFirstname"  required>
+     <small [hidden]="(studentDataGroup.controls.guardianFirstname.pristine || !studentDataGroup.controls.guardianFirstname.hasError('isnumeric')) ">
+         Το όνομα δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.guardianFirstname.pristine || !studentDataGroup.controls.guardianFirstname.hasError('isempty')) ">
+         Δώστε το όνομα του κηδεμόνα..<br/>
+     </small>
+
+     <label>Επώνυμο κηδεμόνα</label><input type="text" formControlName="guardianSurname"  required>
+     <small [hidden]="(studentDataGroup.controls.guardianSurname.pristine || !studentDataGroup.controls.guardianSurname.hasError('isnumeric')) ">
+         Το επώνυμο δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.guardianSurname.pristine || !studentDataGroup.controls.guardianSurname.hasError('isempty')) ">
+         Δώστε το επώνυμο του κηδεμόνα..<br/>
+     </small>
+
+     <table><tr>
+     <td>
+     <div   class="form-group">
+        <label>Διεύθυνση κατοικίας</label><input type="text" formControlName="regionAddress" >
+     </div>
+     </td>
+     <td>
+     <div   class="form-group">
+        <label>TK </label><input type="text" formControlName="regionTK" >
+     </div>
+     </td>
+     <td>
+     <div   class="form-group">
+        <label>Πόλη/Περιοχή</label><input type="text" formControlName="regionArea" >
+     </div>
+     </td>
+     </tr></table>
+
+     <label for="certificateType">Τύπος απολυτηρίου</label><br/>
+     <select formControlName="certificateType"  required>
+       <option value="Παρακαλώ επιλέξτε..">Παρακαλώ επιλέξτε..</option>
+       <option value="Απολυτήριο Γυμνασίου">Απολυτήριο Γυμνασίου</option>
+       <option value="Απολυτήριο Λυκείου">Απολυτήριο Λυκείου</option>
+     </select>
+     <small [hidden]="(studentDataGroup.controls.certificateType.pristine || !studentDataGroup.controls.certificateType.hasError('isempty')) ">
+         Δώστε τον τύπο απολυτηρίου..<br/>
+     </small>
+     <br/><br/>
+
+
+     <label for="relationToStudent">Η αίτηση γίνεται από:</label><br/>
+     <select formControlName="relationToStudent" >
+       <option value="Παρακαλώ επιλέξτε..">Παρακαλώ επιλέξτε..</option>
+       <option value="Γονέας/Κηδεμόνας">Γονέας/Κηδεμόνας</option>
+       <option value="Μαθητής">Μαθητής</option>
+    </select>
+    <br/>
+
+
+
+
+     <div class="row">
+     <div class="col-md-2 col-md-offset-5">
+         <button class="btn-primary btn-lg pull-center" (click)="saveSelected()">Συνέχεια</button>
+     </div>
+     </div>
+ </form>
+
+  `
+
+
+})
+
+
+
+
+ @Injectable() export default class StudentDataFieldsSelect implements OnInit {
+
+   private studentdataFields$: Observable<IStudentDataFields>;
+   //relationsToStudentChoices = ['Παρακαλώ επιλέξτε..','Γονέας/Κηδεμόνας',  'Μαθητής'];
+
+   public studentDataGroup: FormGroup;
+
+   public cfs = new FormArray([]);
+
+   constructor(private http: Http, private fb: FormBuilder, private _cfa: StudentDataFieldsActions, private _ngRedux: NgRedux<IAppState>) {
+
+/*
+     this.studentDataGroup = this.fb.group({
+       studentFirstname: {},
+       studentSurname: {},
+       guardianFirstname: {},
+       guardianSurname: {},
+       regionAddress: {},
+       regionTK: {},
+       regionArea: {},
+       certificateType: {},
+       relationToStudent: {},
+   });
+*/
+
+
+    this.studentDataGroup = this.fb.group({
+          formArray: this.cfs,
+          studentFirstname: ['', validateName],
+          studentSurname: ['', validateName],
+          guardianFirstname: ['', validateName],
+          guardianSurname: ['', validateName],
+          regionAddress: ['', Validators.required],
+          regionTK: ['', Validators.required],
+          regionArea: ['', Validators.required],
+          certificateType: ['Παρακαλώ επιλέξτε..', Validators.required],
+          relationToStudent: ['Παρακαλώ επιλέξτε..', Validators.required],
+        });
+
+
+
+
+    };
+
+
+   ngOnInit() {
+
+       this._cfa.getStudentDataFields();
+
+       this.studentdataFields$ = this._ngRedux.select(state => {
+         console.log("test");
+           state.studentdataFields.reduce(({}, studentdataField) =>{
+               //this.cfs.push(new FormControl(studentdataField.studentFirstname, []));
+               console.log(studentdataField.studentFirstname);
+               return studentdataField;
+           }, {});
+           return state.studentdataFields;
+       });
+       /*
+        console.log(this.studentDataGroup.value.studentFirstname);
+       this.studentdataFields$ = this._ngRedux.select(state => {
+              console.log("this.studentDataGroup.value.studentFirstname");
+           state.studentdataFields.reduce(({}, studentdataField) =>{
+              console.log("this.studentDataGroup.value.studentFirstname");
+*/
+             //this.studentDataG = this.fb.group({
+                 //formArray: this.cfs,
+
+                /*
+                 this.studentDataGroup.studentFirstname = new FormControl(studentFirstname, validateName);
+                  this.studentDataGroup.studentSurname = new FormControl(studentSurname, validateName);
+                 this.studentDataGroup.guardianFirstname = new FormControl(guardianFirstname, validateName);
+                 this.studentDataGroup.guardianSurname = new FormControl(guardianSurname, validateName);
+                 this.studentDataGroup.regionAddress = new FormControl(regionAddress, validateName);
+                 this.studentDataGroup.regionTK = new FormControl(regionTK, validateName);
+                 this.studentDataGroup.regionArea = new FormControl(regionArea, validateName);
+                 this.studentDataGroup.certificateType = new FormControl(certificateType, validateName);
+                 this.studentDataGroup.relationToStudent = new FormControl(relationToStudent, validateName);
+                */
+
+                 //studentSurname: new FormControl("test", Validators.required)
+             //});
+              //new FormControl(studentdataField.studentFirstname, []);
+               //this.cfs.push(new FormControl(studentdataField.studentFirstname, []));
+               //console.log(studentdataField.studentFirstname);
+
+
+
+
+
+   }
+
+   /*
+   ngOnInit() {
+       this._cfa.getStudentDataFields();
+
+       this.studentdataFields$ = this._ngRedux.select(state => {
+           for (let studentdataField in state.studentdataFields) {
+               this.cfs.push(new FormControl('', []));
+           }
+           return state.studentdataFields;
+       });
+
+   }
+   */
+
+
+
+  saveSelected() {
+      //let test = this.studentDataGroup.value.studentFirstname;
+      //console.log(test);
+
+      //console.log(this.studentDataGroup.value.studentFirstname);
+      //console.log(this.studentDataGroup.value.studentSurname);
+      console.log(this.studentDataGroup.value.relationToStudent);
+
+      this._cfa.saveStudentDataFields(this.studentDataGroup.value.studentFirstname, this.studentDataGroup.value.studentSurname,
+        this.studentDataGroup.value.guardianFirstname,this.studentDataGroup.value.guardianSurname,
+        this.studentDataGroup.value.studentdataFieldsStudentAmka,this.studentDataGroup.value.regionAddress,
+        this.studentDataGroup.value.regionTK, this.studentDataGroup.value.regionArea,
+        this.studentDataGroup.value.certificateType,this.studentDataGroup.value.relationToStudent );
+      //this._cfa.saveStudentDataFields(this.studentDataGroup.value.studentSurname);
+      //this._cfa.saveStudentDataFields("nikos");
+  }
+
+
+}
+
+
+
+function validateName(c: FormControl) {
+
+  //var str = "texttexttext";
+  var dig = ['0','1','2','3','4','5','6','7','8','9'];
+  for (var i = 0, len = dig.length; i < len; ++i) {
+      if (c.value.indexOf(dig[i]) != -1) {
+          // str contains arr[i]
+          console.log('not valid')
+          return {
+            isnumeric: true
+          }
+      }
+  }
+/*
+   if(c.value.indexOf('1') >= 0) {
+     console.log('not valid')
+     return {
+       isnumeric: true
+     }
+   }
+   */
+  if(c.value == "") {
+     console.log('not valid')
+     return {
+       isempty: true
+     }
+   }
+   // Null means valid, believe it or not
+   console.log('valid')
+   return null
+ }
+
+
+ function validateCertificate(c: FormControl) {
+    console.log("New text:");
+    console.log(c.value);
+     if(c.value == "Παρακαλώ επιλέξτε..") {
+      console.log('not valid')
+      return {
+        isempty: true
+      }
+    }
+    // Null means valid, believe it or not
+    console.log('valid')
+    return null
+  }

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/components/student-application-form/studentData-fields-select.ts

+import {Component, OnInit} from '@angular/core';
+import { Http, Response, RequestOptions, Headers } from '@angular/http';
+import { Observable } from 'rxjs/Rx';
+import {Injectable} from "@angular/core";
+import {CourseFieldsActions} from '../../actions/coursefields.actions';
+import {StudentDataFieldsActions} from '../../actions/studentdatafields.actions';
+
+import { DevToolsExtension, NgRedux, select } from 'ng2-redux';
+import { ICourseField, ICourseFields } from '../../store/coursefields/coursefields.types';
+import { IStudentDataField, IStudentDataFields } from '../../store/studentdatafields/studentdatafields.types';
+import { IAppState } from '../../store/store';
+
+import {
+    FormBuilder,
+    FormGroup,
+    FormControl,
+    FormArray,
+    FormsModule,
+    Validators,
+} from '@angular/forms';
+import {AppSettings} from '../../app.settings';
+
+@Component({
+  //moduleId: module.id,
+  selector: 'studentdata-fields-select',
+
+  //templateUrl: './eepal-front/source/components/form-controls/applicantinfo-form.component.html'
+
+  template: `
+  <form [formGroup]="studentDataGroup" (ngSubmit)="saveSelected()" #applicantForm="ngForm">
+
+ <div *ngFor="let studentdataField$ of studentdataFields$ | async; "> </div>
+<!--
+     <div formArrayName="formArray">
+         <div *ngFor="let studentdataField$ of studentdataFields$ | async; ">
+
+         <div class="row">
+
+         <div class="col-md-1">
+             <input type="checkbox" formControlName="{{i}}">
+         </div>
+         <div class="col-md-11 pull-left">
+             {{studentdataField$.guardianADT}}
+         </div>
+
+         </div>
+
+         </div>
+     </div>
+-->
+    <label>ΑΜΚΑ μαθητή</label><input type="text"  formControlName="studentAmka"   >
+
+     <label>Όνομα μαθητή</label><input type="text"  formControlName="studentFirstname"  >
+     <small [hidden]="(studentDataGroup.controls.studentFirstname.pristine || !studentDataGroup.controls.studentFirstname.hasError('isnumeric')) ">
+         Το όνομα δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.studentFirstname.pristine || !studentDataGroup.controls.studentFirstname.hasError('isempty')) ">
+         Δώστε το όνομα του μαθητή..<br/>
+     </small>
+
+     <label>Επώνυμο μαθητή</label><input type="text" formControlName="studentSurname" >
+     <small [hidden]="(studentDataGroup.controls.studentSurname.pristine || !studentDataGroup.controls.studentSurname.hasError('isnumeric')) ">
+         Το επώνυμο δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.studentSurname.pristine || !studentDataGroup.controls.studentSurname.hasError('isempty')) ">
+         Δώστε το επώνυμο του μαθητή..<br/>
+     </small>
+
+     <label>Όνομα κηδεμόνα</label><input type="text" formControlName="guardianFirstname" >
+     <small [hidden]="(studentDataGroup.controls.guardianFirstname.pristine || !studentDataGroup.controls.guardianFirstname.hasError('isnumeric')) ">
+         Το όνομα δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.guardianFirstname.pristine || !studentDataGroup.controls.guardianFirstname.hasError('isempty')) ">
+         Δώστε το όνομα του κηδεμόνα..<br/>
+     </small>
+
+     <label>Επώνυμο κηδεμόνα</label><input type="text" formControlName="guardianSurname" >
+     <small [hidden]="(studentDataGroup.controls.guardianSurname.pristine || !studentDataGroup.controls.guardianSurname.hasError('isnumeric')) ">
+         Το επώνυμο δεν μπορεί να περιέχει αριθμητικά ψηφία!<br/>
+     </small>
+     <small [hidden]="(studentDataGroup.controls.guardianSurname.pristine || !studentDataGroup.controls.guardianSurname.hasError('isempty')) ">
+         Δώστε το επώνυμο του κηδεμόνα..<br/>
+     </small>
+
+     <table><tr>
+     <td>
+     <div   class="form-group">
+        <label>Διεύθυνση κατοικίας</label><input type="text" formControlName="regionAddress" >
+     </div>
+     </td>
+     <td>
+     <div   class="form-group">
+        <label>TK </label><input type="text" formControlName="regionTK" >
+     </div>
+     </td>
+     <td>
+     <div   class="form-group">
+        <label>Πόλη/Περιοχή</label><input type="text" formControlName="regionArea" >
+     </div>
+     </td>
+     </tr></table>
+
+     <label for="certificateType">Τύπος απολυτηρίου</label><br/>
+     <select formControlName="certificateType" required>
+       <option value="Παρακαλώ επιλέξτε..">Παρακαλώ επιλέξτε..</option>
+       <option value="Απολυτήριο Γυμνασίου">Απολυτήριο Γυμνασίου</option>
+       <option value="Απολυτήριο Λυκείου">Απολυτήριο Λυκείου</option>
+     </select>
+     <br/>
+     <small [hidden]="(studentDataGroup.controls.certificateType.pristine || !studentDataGroup.controls.certificateType.hasError('isempty')) ">
+         Επιλέξτε τον τύπο απολυτηρίου..<br/>
+     </small>
+     <br/>
+
+     <label for="relationToStudent">Η αίτηση γίνεται από:</label><br/>
+     <select formControlName="relationToStudent" >
+       <option value="Παρακαλώ επιλέξτε..">Παρακαλώ επιλέξτε..</option>
+       <option value="Γονέας/Κηδεμόνας">Γονέας/Κηδεμόνας</option>
+       <option value="Μαθητής">Μαθητής</option>
+    </select>
+    <br>
+    <small [hidden]="(studentDataGroup.controls.relationToStudent.pristine || !studentDataGroup.controls.relationToStudent.hasError('isempty')) ">
+        Επιλέξτε από ποιον γίνεται αίτηση..<br/>
+    </small>
+    <br/><br/>
+
+    <!--
+       <div class="row">
+       <div class="col-md-2 col-md-offset-5">
+       -->
+     <div id="outer">
+      <!--
+      <script type="text/javascript">
+        var status="on";
+        document.getElementById('bck').innerHTML=status;