updated Application.Preview component to show live data entry, extented...

updated Application.Preview component to show live data entry, extented Region.School component to populate only schools that offer the selected course, updated Region.School component to allow until three choices

source/actions/regionschools.actions.ts

@@ -10,10 +10,10 @@ export class RegionSchoolsActions {
     private _ngRedux: NgRedux<IAppState>,
     private _hds: HelperDataService) {}
 
-  getRegionSchools = () => {
+  getRegionSchools = (courseActive, reload) => {
     const { regions } = this._ngRedux.getState();
-    if (regions.size === 0) {
-        return this._hds.getRegionsWithSchools().then(regions => {
+    if (reload === true || (reload === false && regions.size === 0)) {
+        return this._hds.getRegionsWithSchools(courseActive).then(regions => {
             return this._ngRedux.dispatch({
                 type: REGIONSCHOOLS_RECEIVED,
                 payload: {
@@ -24,6 +24,22 @@ export class RegionSchoolsActions {
     }
   };
 
+  /*
+  getRegionSchools_Reload = (courseActive) => {
+    const { regions } = this._ngRedux.getState();
+    //if (regions.size === 0) {
+        return this._hds.getRegionsWithSchools(courseActive).then(regions => {
+            return this._ngRedux.dispatch({
+                type: REGIONSCHOOLS_RECEIVED,
+                payload: {
+                    regions
+                }
+            });
+        });
+    //}
+  };
+  */
+
   saveRegionSchoolsSelected = (regionSchoolsSelected) => {
       return this._ngRedux.dispatch({
         type: REGIONSCHOOLS_SELECTED_SAVE,

source/actions/sectorcourses.actions.ts

@@ -10,9 +10,10 @@ export class SectorCoursesActions {
     private _ngRedux: NgRedux<IAppState>,
     private _hds: HelperDataService) {}
 
-  getSectorCourses = () => {
+  getSectorCourses = (reload) => {
     const { sectors } = this._ngRedux.getState();
-    if (sectors.size === 0) {
+    //if (sectors.size === 0) {
+    if (reload === true || (reload === false && sectors.size === 0)) {
         return this._hds.getSectorsWithCourses().then(sectors => {
             return this._ngRedux.dispatch({
                 type: SECTORCOURSES_RECEIVED,
@@ -24,11 +25,28 @@ export class SectorCoursesActions {
     }
   };
 
-  saveSectorCoursesSelected = (sectorCoursesSelected) => {
+ /*
+  getSectorCourses_Reload = () => {
+    const { sectors } = this._ngRedux.getState();
+    //if (sectors.size === 0) {
+        return this._hds.getSectorsWithCourses().then(sectors => {
+            return this._ngRedux.dispatch({
+                type: SECTORCOURSES_RECEIVED,
+                payload: {
+                    sectors
+                }
+            });
+        });
+    //}
+  };
+  */
+
+  saveSectorCoursesSelected = (sectorCoursesSelected,sectorSelected) => {
       return this._ngRedux.dispatch({
         type: SECTORCOURSES_SELECTED_SAVE,
         payload: {
-          sectorCoursesSelected
+          sectorCoursesSelected,
+          sectorSelected
         }
       });
   };

source/app.settings.ts

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

source/components/student-application-form/application.preview.ts

@@ -36,7 +36,7 @@ import {AppSettings} from '../../app.settings';
 
         <div class="row">
         <div class="btn-group inline pull-center">
-            <button type="button" class="btn-primary btn-md pull-center" (click)="defineCourse()">
+            <button type="button" class="btn-primary btn-md pull-center" [disabled] = true>
             Η ειδικότητά μου<span class="glyphicon glyphicon-menu-right"></span>
             </button>
         </div>
@@ -51,9 +51,17 @@ import {AppSettings} from '../../app.settings';
             </div>
         </ul>
 
+        <div class="row">
+        <div class="btn-group inline pull-right">
+            <button class="btn-primary btn-md pull-center my-btn"  type="button" (click)="defineCourse()" [hidden] = "numSelectedSchools === 0" >
+            Επαναφορά<span class="glyphicon glyphicon-menu-right"></span>
+            </button>
+        </div>
+        </div>
+
         <div class="row">
         <div class="btn-group inline pull-center">
-            <button type="button" class="btn-primary btn-md pull-center" (click)="defineSchools()">
+            <button type="button" id = "butsch" class="btn-primary btn-md pull-center" (click)="defineSchools()" [disabled] = "numSelectedSchools === 0 ">
             Τα σχολεία μου<span class="glyphicon glyphicon-menu-right"></span>
             </button>
         </div>
@@ -96,6 +104,10 @@ import {AppSettings} from '../../app.settings';
     private regions$: Observable<IRegions>;
     private sectorFields$: Observable<ISectorFields>;
     private studentDataFields$: Observable<IStudentDataFields>;
+    private courseActive = "-1";
+    private numSelectedSchools = <number>0;
+    private numSelectedCourses = <number>0;
+
 
     constructor(private _rsa: SectorCoursesActions,
                 private _rsb: RegionSchoolsActions,
@@ -107,27 +119,45 @@ import {AppSettings} from '../../app.settings';
     };
 
     ngOnInit() {
-        this._rsa.getSectorCourses();
+        this.courseActive = this.getCourseActive();
+
+        this._rsa.getSectorCourses(false);
         this.sectors$ = this._ngRedux.select(state => {
+            let numsel = 0;
             state.sectors.reduce((prevSector, sector) =>{
                 sector.courses.reduce((prevCourse, course) =>{
+                  if (course.selected === true)  {
+                    numsel++;
+                    //this.numSelectedCourses
+                  }
                     return course;
                 }, {});
                 return sector;
             }, {});
+            this.numSelectedCourses = numsel;
             return state.sectors;
         });
 
-        this._rsb.getRegionSchools();
+        //WORKED STRANGELY BEFORE..
+        /*
+        this.courseActive = this.getCourseActive();
+        this._rsb.getRegionSchools(this.courseActive);
+        */
+
+        this._rsb.getRegionSchools(this.courseActive, false);
         this.regions$ = this._ngRedux.select(state => {
-            state.regions.reduce((prevRegion, region) =>{
-                region.epals.reduce((prevSchool, school) =>{
+              let numsel = 0;
+              state.regions.reduce((prevRegion, region) =>{
+                  region.epals.reduce((prevSchool, school) =>{
+                    if (school.selected === true)
+                        numsel++;
                     return school;
-                }, {});
-                return region;
-            }, {});
-            return state.regions;
-        });
+                  }, {});
+                  return region;
+              }, {});
+              this.numSelectedSchools = numsel;
+              return state.regions;
+          });
 
         this._rsc.getSectorFields();
         this.sectorFields$ = this._ngRedux.select(state => {
@@ -149,9 +179,41 @@ import {AppSettings} from '../../app.settings';
     defineSector() {
         this.router.navigate(['/sector-fields-select']);
     }
+
     defineCourse() {
-        this.router.navigate(['/sectorcourses-fields-select']);
+      //this._rsb.getRegionSchools_Reload("-1");
+      this._rsb.getRegionSchools("-1", true);
+      this.regions$ = this._ngRedux.select(state => {
+          let numsel = 0;
+          state.regions.reduce((prevRegion, region) =>{
+              region.epals.reduce((prevSchool, school) =>{
+                if (school.selected === true)
+                    numsel++;
+                return school;
+              }, {});
+              return region;
+          }, {});
+          this.numSelectedSchools = numsel;
+          return state.regions;
+      });
+
+
+      //this._rsa.getSectorCourses_Reload();
+      this._rsa.getSectorCourses(true);
+      this.sectors$ = this._ngRedux.select(state => {
+          state.sectors.reduce((prevSector, sector) =>{
+              sector.courses.reduce((prevCourse, course) =>{
+                  return course;
+              }, {});
+              return sector;
+          }, {});
+          return state.sectors;
+      });
+
+      this.router.navigate(['/sectorcourses-fields-select']);
+
     }
+
     defineSchools() {
         this.router.navigate(['/region-schools-select']);
     }
@@ -159,4 +221,18 @@ import {AppSettings} from '../../app.settings';
         this.router.navigate(['/student-application-form-main']);
     }
 
+
+    getCourseActive() {
+        const { sectors } = this._ngRedux.getState();
+        let l,m;
+        for ( l=0; l<sectors.size; l++)
+          if (sectors["_tail"]["array"][l]["sector_selected"] === true)
+            for ( m=0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
+              if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
+                 return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
+    }
+
+
+
+
 }

source/components/student-application-form/region.schools.select.ts

@@ -5,8 +5,13 @@ 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 { SectorCoursesActions } from '../../actions/sectorcourses.actions';
+import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
+
 import { IAppState } from '../../store/store';
 
+
 import {
     FormBuilder,
     FormGroup,
@@ -32,7 +37,10 @@ import {AppSettings} from '../../app.settings';
                     <li class="list-group-item" >
                         <div class="row">
                             <div class="col-md-2">
-                                <input type="checkbox" formControlName="{{ epal$.globalIndex }}">
+                                <input #cb type="checkbox" formControlName="{{ epal$.globalIndex }}"
+                                (change)="saveSelected()"
+                                [hidden] = "numSelected === 3 && cb.checked === false"
+                                >
                             </div>
                             <div class="col-md-10">
                                 {{epal$.epal_name}}
@@ -45,7 +53,7 @@ import {AppSettings} from '../../app.settings';
         </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()">
+            <button type="button" class="btn-primary btn-lg pull-center" (click)="navigateToApplication()" [disabled] = "numSelected === 0" >
             Συνέχεια<span class="glyphicon glyphicon-menu-right"></span>
             </button>
         </div>
@@ -53,20 +61,26 @@ import {AppSettings} from '../../app.settings';
     </form>
    </div>
 
+
    <div class="col-md-4">
      <application-preview-select></application-preview-select>
    </div>
+
   </div>
   `
 })
 @Injectable() export default class RegionSchoolsSelect implements OnInit {
     private regions$: Observable<IRegions>;
+    private sectors$: Observable<ISectors>;
     private formGroup: FormGroup;
     private rss = new FormArray([]);
     private regionActive = <number>-1;
+    private numSelected = <number>0;
+    private courseActive = "-1";
 
     constructor(private fb: FormBuilder,
                 private _rsa: RegionSchoolsActions,
+                private _rsb: SectorCoursesActions,
                 private _ngRedux: NgRedux<IAppState>,
                 private router: Router
             ) {
@@ -76,24 +90,31 @@ import {AppSettings} from '../../app.settings';
     };
 
     ngOnInit() {
+        this.courseActive = this.getCourseActive();
 
-        this._rsa.getRegionSchools();
+        this._rsa.getRegionSchools(this.courseActive, false);
 
         this.regions$ = this._ngRedux.select(state => {
+            let numsel = 0;
             state.regions.reduce((prevRegion, region) =>{
                 region.epals.reduce((prevEpal, epal) =>{
                     this.rss.push( new FormControl(epal.selected, []));
+                    if (epal.selected === true)
+                      numsel++;
                     return epal;
                 }, {});
                 return region;
             }, {});
+            this.numSelected = numsel;
             return state.regions;
         });
 
     }
 
     setActiveRegion(ind) {
-        this.regionActive = ind;
+      if (ind === this.regionActive)
+        ind = -1;
+      this.regionActive = ind;
     }
 
     toggleBackgroundColor(ind) {
@@ -102,6 +123,32 @@ import {AppSettings} from '../../app.settings';
 
     saveSelected() {
         this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray);
-        this.router.navigate(['/student-application-form-main']);
+        //this.router.navigate(['/student-application-form-main']);
+    }
+
+    navigateToApplication() {
+      this.router.navigate(['/student-application-form-main']);
+    }
+
+    //not used
+    updateCheckedOptions(globalIndex, cb){
+      /*
+      if (cb.checked)
+        this.numselected--;
+      else
+        this.numselected++;
+      */
+      this.saveSelected();
     }
+
+    getCourseActive() {
+        const { sectors } = this._ngRedux.getState();
+        let l,m;
+        for ( l=0; l<sectors.size; l++)
+          if (sectors["_tail"]["array"][l]["sector_selected"] === true)
+            for ( m=0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
+              if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
+                 return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
+    }
+
 }

source/components/student-application-form/sector.courses.select.ts

@@ -34,7 +34,8 @@ import {AppSettings} from '../../app.settings';
                             <div class="col-md-2">
                                 <input #cb type="checkbox" formControlName="{{ course$.globalIndex }}"
                                 (change)="updateCheckedOptions(course$.globalIndex, cb)"
-                                [checked] = " course$.globalIndex === idx ">
+                                [checked] = " course$.globalIndex === idx "
+                                >
                             </div>
                             <div class="col-md-10">
                                 {{course$.course_name}}
@@ -48,7 +49,7 @@ import {AppSettings} from '../../app.settings';
 
         <div class="row">
         <div class="col-md-2 col-md-offset-5">
-            <button type="button" class="btn-primary btn-lg pull-center" (click)="saveSelected()" [disabled]="idx === -1"	 >
+            <button type="button" class="btn-primary btn-lg pull-center" (click)="navigateToSchools()" [disabled]="idx === -1"	 >
             Συνέχεια<span class="glyphicon glyphicon-menu-right"></span>
             </button>
         </div>
@@ -68,6 +69,8 @@ import {AppSettings} from '../../app.settings';
     private rss = new FormArray([]);
     private sectorActive = <number>-1;
     private idx = <number>-1;
+    private sectorsList: Array<boolean> = new Array();
+    //private  sectorsList = new Array([]);
 
     constructor(private fb: FormBuilder,
                 private _rsa: SectorCoursesActions,
@@ -80,24 +83,38 @@ import {AppSettings} from '../../app.settings';
     };
 
     ngOnInit() {
-        this._rsa.getSectorCourses();
+        this._rsa.getSectorCourses(false);
+        let ids = 0;
 
         this.sectors$ = this._ngRedux.select(state => {
             state.sectors.reduce((prevSector, sector) =>{
+                this.sectorsList[ids] = sector.sector_selected;
+                ids++;
+                //In case we want to preserve last checked option when we revisit the form
+                //if (sector.sector_selected === true)
+                  //this.sectorActive = ids-1;
+
                 sector.courses.reduce((prevCourse, course) =>{
                     this.rss.push( new FormControl(course.selected, []));
-                    this.retrieveCheck();
+                    //this.retrieveCheck();
+                    if (course.selected === true) {
+                      //In case we want to preserve last checked option when we revisit the form
+                      //this.idx = course.globalIndex;
+                    }
                     return course;
                 }, {});
                 return sector;
             }, {});
+            ids = 0;
             return state.sectors;
         });
 
     }
 
     setActiveSector(ind) {
-        this.sectorActive = ind;
+      if (ind === this.sectorActive)
+        ind = -1;
+      this.sectorActive = ind;
     }
 
     toggleBackgroundColor(ind) {
@@ -105,28 +122,29 @@ import {AppSettings} from '../../app.settings';
     }
 
     saveSelected() {
-        this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray);
+        this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList);
+    }
+
+    navigateToSchools() {
         this.router.navigate(['/region-schools-select']);
     }
 
     updateCheckedOptions(globalIndex, cb){
-      /*
-      if (this.oneselected)
-        this.oneselected = 0;
-      else
-        this.oneselected = 1;
-      console.log(this.oneselected);
-      */
-      //this.idx = index;
       this.idx = globalIndex;
-
       for (let i = 0; i < this.formGroup.value.formArray.length; i++)
         this.formGroup.value.formArray[i] = false;
       this.formGroup.value.formArray[globalIndex] = cb.checked;
       if (cb.checked === false)
         this.idx = -1;
+
+      for (let i = 0; i < this.sectorsList.length; i++)
+          this.sectorsList[i] = false;
+      this.sectorsList[this.sectorActive] = true;
+
+      this.saveSelected();
 }
 
+/*
 retrieveCheck()  {
   for (let i = 0; i < this.formGroup.value.formArray.length; i++)
     if (this.formGroup.value.formArray[i] === true) {
@@ -134,5 +152,6 @@ retrieveCheck()  {
       return;
     }
 }
+*/
 
 }

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

@@ -19,25 +19,43 @@ import {AppSettings} from '../../app.settings';
 
 @Component({
     selector: 'sector-fields-select',
-    //declarations: [
-    //  ApplicationPreview,
-    //] ,
-
-    //directives:[ApplicationPreview],
     template: `
+
     <div class="row equal">
+
      <div class="col-md-8">
        <form [formGroup]="formGroup">
         <div formArrayName="formArray">
+
             <div *ngFor="let sectorField$ of sectorFields$ | async; let i=index">
-                <li class="list-group-item" (click)="setActiveSector(i)" [style.background-color]="toggleBackgroundColor(i)">
+                <li class="list-group-item" (click)="setActiveSectorAndSave(i)" [style.background-color]="toggleBackgroundColor(i)">
                     <h5>{{sectorField$.name}}</h5>
                 </li>
             </div>
+
+
+            <!--CHECK BOXES USING BOTSTRAP
+            <div *ngFor="let sectorField$ of sectorFields$ | async; let i=index">
+                <div class="[ form-group ]">
+                  <input type="checkbox" name="{{i}}" id="{{i}}" autocomplete="off" />
+                  <div class="[ btn-group ]">
+                      <label for="{{i}}" class="[ btn btn-primary ]">
+                          <span class="[ glyphicon glyphicon-ok ]"></span>
+                          <span> </span>
+                      </label>
+                      <label for="{{i}}" class="[ btn btn-default active ]">
+                          {{sectorField$.name}}
+                      </label>
+                  </div>
+                </div>
+            </div>
+            -->
+
         </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()" [disabled]="sectorActive === -1"	>
+            <button type="button" class="btn-primary btn-lg pull-center" (click)="navigateToSchools()" [disabled]="sectorActive === -1"	>
             Συνέχεια<span class="glyphicon glyphicon-menu-right"></span>
             </button>
         </div>
@@ -75,7 +93,9 @@ import {AppSettings} from '../../app.settings';
         this.sectorFields$ = this._ngRedux.select(state => {
             state.sectorFields.reduce(({}, sectorField) =>{
                 this.cfs.push(new FormControl(sectorField.selected, []));
-                this.retrieveCheck();
+                if (sectorField.selected === true) {
+                  this.sectorActive = sectorField.id - 1;
+                }
                 return sectorField;
             }, {});
             return state.sectorFields;
@@ -83,17 +103,25 @@ import {AppSettings} from '../../app.settings';
 
     }
 
-    saveSelected() {
-        for (let i = 0; i < this.formGroup.value.formArray.length; i++)
-          this.formGroup.value.formArray[i] = false;
-        if (this.sectorActive != -1)
-          this.formGroup.value.formArray[this.sectorActive] = true;
-        this._cfa.saveSectorFieldsSelected(this.formGroup.value.formArray);
+    navigateToSchools() {
+        //this.saveSelected();
         this.router.navigate(['/region-schools-select']);
     }
 
-    setActiveSector(ind) {
+    saveSelected() {
+      for (let i = 0; i < this.formGroup.value.formArray.length; i++)
+        this.formGroup.value.formArray[i] = false;
+      if (this.sectorActive != -1)
+        this.formGroup.value.formArray[this.sectorActive] = true;
+
+      this._cfa.saveSectorFieldsSelected(this.formGroup.value.formArray);
+    }
+
+    setActiveSectorAndSave(ind) {
+        if (ind === this.sectorActive)
+          ind = -1;
         this.sectorActive = ind;
+        this.saveSelected();
     }
 
     toggleBackgroundColor(ind) {

source/containers/globalstyles.css

@@ -126,6 +126,36 @@
     }
 }
 
-.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
-    position: relative;
+.form-group input[type="checkbox"] {
+    display: none;
+}
+
+.form-group input[type="checkbox"] + .btn-group > label span {
+    width: 7px;
+}
+
+.form-group input[type="checkbox"] + .btn-group > label span:first-child {
+    display: none;
+}
+.form-group input[type="checkbox"] + .btn-group > label span:last-child {
+    display: inline-block;
+}
+
+.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
+    display: inline-block;
+}
+.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
+    display: none;
+}
+
+.black-background {background-color:#000000;}
+.white {color:#ffffff;}
+
+.my-btn{
+  border-color: #116f2f;