Skip to content

GitLab

E
e-epal
Commit 2cab38d0 authored by Χάρης Παπαδόπουλος's avatar Χάρης Παπαδόπουλος
Browse files
Options

Reworked application.form.main to comply with Reactive forms standards and... 

Reworked application.form.main to comply with Reactive forms standards and Redux patterns. Connected course.fields.select form with application.form.main. Other fixes and restructuring
parent 2fb612e0
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 698 deletions
drupal/modules/epal/src/Entity/EpalUsers.php
View file @ 2cab38d0
......@@ -175,8 +175,8 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['name'] = BaseFieldDefinition::create('entity_reference')
->setLabel(t('User Id από Drupal Users '))
......@@ -221,7 +221,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userTaxId'] = BaseFieldDefinition::create('string')
->setLabel(t('Tax id χρήστη'))
->setDescription(t('Δώσε το tax id / ΑΦΜ του χρήστη.'))
......@@ -241,7 +241,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userFirstname'] = BaseFieldDefinition::create('string')
->setLabel(t('Όνομα χρήστη'))
->setDescription(t('Δώσε το μικρό όνομα του χρήστη.'))
......@@ -261,7 +261,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userSurname'] = BaseFieldDefinition::create('string')
->setLabel(t('Επώνυμο χρήστη'))
->setDescription(t('Δώσε το επώνυμο του χρήστη.'))
......@@ -281,7 +281,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userFatherName'] = BaseFieldDefinition::create('string')
->setLabel(t('Όνομα πατέρα χρήστη'))
->setDescription(t('Δώσε το όνομα του πατέρα του χρήστη.'))
......@@ -301,7 +301,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userMothername'] = BaseFieldDefinition::create('string')
->setLabel(t('Όνομα μητέρας χρήστη'))
->setDescription(t('Δώσε το όνομα της μητέρας χρήστη.'))
......@@ -321,9 +321,9 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userAddress'] = BaseFieldDefinition::create('string')
->setLabel(t('Διεύθυνση κατοικίας'))
->setDescription(t('Δώσε τη διεύθυνση κατοικίας.'))
......@@ -343,7 +343,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userAddressTK'] = BaseFieldDefinition::create('string')
->setLabel(t('ΤΚ'))
->setDescription(t('Δώσε τον ΤΚ κατοικίας.'))
......@@ -363,7 +363,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userAddressArea'] = BaseFieldDefinition::create('string')
->setLabel(t('Πόλη/Περιοχή διεύθυνσης κατοικίας'))
->setDescription(t('Δώσε την πόλη/περιοχή διεύθυνσης.'))
......@@ -383,7 +383,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['accessToken'] = BaseFieldDefinition::create('string')
->setLabel(t('Access-Token από taxis'))
->setDescription(t('Access-Token από taxis.'))
......@@ -403,7 +403,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['offToken'] = BaseFieldDefinition::create('string')
->setLabel(t('Off-Token'))
->setDescription(t('Off-Token που δημιουργείται από εμάς.'))
......@@ -423,12 +423,12 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['timeLogin'] = BaseFieldDefinition::create('timestamp')
->setLabel(t('timeLogin'))
->setDescription(t('timeLogin.'))
;
$fields['timeRegistration'] = BaseFieldDefinition::create('timestamp')
->setLabel(t('timeRegistration'))
->setDescription(t('timeRegistration.'))
......@@ -444,13 +444,15 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
->setDisplayOptions('view', array(
'label' => 'above',
'type' => 'integer',
'weight' => -4,
))
->setDisplayOptions('form', array(
'type' => 'integer',
'weight' => -4,
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['userIP'] = BaseFieldDefinition::create('string')
->setLabel(t('userIP'))
->setDescription(t('userIP.'))
......@@ -470,7 +472,7 @@ class EpalUsers extends ContentEntityBase implements EpalUsersInterface {
))
->setDisplayConfigurable('form', TRUE)
->setDisplayConfigurable('view', TRUE);
$fields['status'] = BaseFieldDefinition::create('boolean')
->setLabel(t('Publishing status'))
->setDescription(t('A boolean indicating whether the Epal users is published.'))
......
source/actions/studentdatafields.actions.ts
View file @ 2cab38d0
......@@ -14,9 +14,9 @@ export class StudentDataFieldsActions {
getStudentDataFields = () => {
const { studentdataFields } = this._ngRedux.getState();
const { studentDataFields } = this._ngRedux.getState();
//console.log(studentdataFields);
if (studentdataFields.size === 0) {
if (studentDataFields.size === 0) {
return this._hds.getStudentDataFields().then(studentdataFields => {
return this._ngRedux.dispatch({
type: STUDENTDATAFIELDS_RECEIVED,
......@@ -40,25 +40,12 @@ export class StudentDataFieldsActions {
};
*/
saveStudentDataFields = (studentdataFieldsFirstname, studentdataFieldsSurname, studentdataFieldsGuardianFirstname,
studentdataFieldsGuardianSurname, studentdataFieldsStudentAmka,
studentdataFieldsRegionAddress, studentdataFieldsRegionTK, studentdataFieldsRegionArea,
studentdataFieldsCertificateType, studentdataFieldsRelationToStudent,) => {
saveStudentDataFields = (studentDataFields) => {
return this._ngRedux.dispatch({
type: STUDENTDATAFIELDS_SAVE,
payload: {
studentdataFieldsFirstname,
studentdataFieldsSurname,
studentdataFieldsGuardianFirstname,
studentdataFieldsGuardianSurname,
studentdataFieldsStudentAmka,
studentdataFieldsRegionAddress,
studentdataFieldsRegionTK,
studentdataFieldsRegionArea,
studentdataFieldsCertificateType,
studentdataFieldsRelationToStudent,
studentDataFields
}
});
......
source/app.settings.ts
View file @ 2cab38d0
export class AppSettings {
public static get API_ENDPOINT(): string {
// return 'http://localhost/dist';
return 'http://localhost/drupal-8.2.5';
return 'http://localhost/dist';
// return 'http://eepal.dev/drupal';
// return 'http://eduslim2.minedu.gov.gr/drupal';
}
}
source/components/student-application-form/TEST_studentData-fields-select.ts deleted 100644 → 0
View file @ 2fb612e0
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/application.form.main.html 0 → 100644
View file @ 2cab38d0
<form novalidate [formGroup]="studentDataGroup">
<div *ngFor="let studentDataField$ of studentDataFields$ | async; "> </div>
<label>ΑΜΚΑ μαθητή</label><input type="text" formControlName="studentAmka">
<label>Όνομα μαθητή</label><input type="text" formControlName="studentFirstname">
<div class="alert alert-danger" *ngIf="studentDataGroup.get('studentFirstname').touched && studentDataGroup.get('studentFirstname').hasError('required')">
Το πεδίο δεν μπορεί να αφεθεί κενό!
</div>
<div class="alert alert-danger" *ngIf="studentDataGroup.get('studentFirstname').touched && studentDataGroup.get('studentFirstname').hasError('pattern')">
Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
</div>
<label>Επώνυμο μαθητή</label><input type="text" formControlName="studentSurname">
<div class="alert alert-danger" *ngIf="studentDataGroup.get('studentSurname').touched && studentDataGroup.get('studentSurname').hasError('required')">
Το πεδίο δεν μπορεί να αφεθεί κενό!
</div>
<div class="alert alert-danger" *ngIf="studentDataGroup.get('studentSurname').touched && studentDataGroup.get('studentSurname').hasError('pattern')">
Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
</div>
<label>Όνομα κηδεμόνα</label><input type="text" formControlName="guardianFirstname">
<div class="alert alert-danger" *ngIf="studentDataGroup.get('guardianFirstname').touched && studentDataGroup.get('guardianFirstname').hasError('required')">
Το πεδίο δεν μπορεί να αφεθεί κενό!
</div>
<div class="alert alert-danger" *ngIf="studentDataGroup.get('guardianFirstname').touched && studentDataGroup.get('guardianFirstname').hasError('pattern')">
Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
</div>
<label>Επώνυμο κηδεμόνα</label><input type="text" formControlName="guardianSurname">
<div class="alert alert-danger" *ngIf="studentDataGroup.get('guardianSurname').touched && studentDataGroup.get('guardianSurname').hasError('required')">
Το πεδίο δεν μπορεί να αφεθεί κενό!
</div>
<div class="alert alert-danger" *ngIf="studentDataGroup.get('guardianSurname').touched && studentDataGroup.get('guardianSurname').hasError('pattern')">
Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
</div>
<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">
<option value="">Παρακαλώ επιλέξτε..</option>
<option value="Απολυτήριο Γυμνασίου">Απολυτήριο Γυμνασίου</option>
<option value="Απολυτήριο Λυκείου">Απολυτήριο Λυκείου</option>
</select>
<br/>
<div class="alert alert-danger" *ngIf="studentDataGroup.get('certificateType').touched && studentDataGroup.get('certificateType').hasError('required')">
Η επιλογή από αυτή τη λίστα είναι απαραίτητη!
</div>
<label for="relationToStudent">Η αίτηση γίνεται από:</label><br/>
<select formControlName="relationToStudent">
<option value="">Παρακαλώ επιλέξτε..</option>
<option value="Γονέας/Κηδεμόνας">Γονέας/Κηδεμόνας</option>
<option value="Μαθητής">Μαθητής</option>
</select>
<div class="alert alert-danger" *ngIf="studentDataGroup.get('relationToStudent').touched && studentDataGroup.get('relationToStudent').hasError('required')">
Η επιλογή από αυτή τη λίστα είναι απαραίτητη!
</div>
<h4 style="margin-top: 20px; line-height: 2em; background: #dddddd;">Επιλεγμένες Ειδικότητες</h4>
<ul class="list-group" style="margin-bottom: 20px;">
<div *ngFor="let courseField$ of courseFields$ | async">
<li class="list-group-item" *ngIf="courseField$.selected === true">
{{courseField$.name}}
</li>
</div>
</ul>
<