update regionSchoolSelect component in order to support variable maximum...

update regionSchoolSelect component in order to support variable maximum number of choices based to defined issues

package.json

@@ -45,7 +45,10 @@
     "@angular/platform-browser": "^2.0.0",
     "@angular/platform-browser-dynamic": "^2.0.0",
     "@angular/router": "^3.2.0",
+    "@types/html2canvas": "^0.5.33",
+    "@types/jspdf": "^1.1.31",
     "@types/node": "^6.0.60",
+    "@types/node-sass": "^3.10.32",
     "babel-polyfill": "^6.20.0",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
@@ -55,8 +58,11 @@
     "es6-shim": "^0.35.0",
     "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.24.1",
+    "html2canvas": "^0.5.0-beta4",
     "immutable": "^3.8.1",
     "jquery": "^3.1.1",
+    "jspdf": "^1.3.3",
+    "ng2-bootstrap": "^1.4.2",
     "ng2-redux": "^5.1.0",
     "ng2-smart-table": "^0.4.0-5",
     "raw-loader": "^0.5.1",

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

-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy} from '@angular/core';
 import { Router } from '@angular/router';
 import { BehaviorSubject, Subscription } from 'rxjs/Rx';
 import { Injectable } from "@angular/core";
@@ -66,14 +66,12 @@ import {AppSettings} from '../../app.settings';
             </button>
         </div>
         <div class="col-md-6">
-            <button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0"  >
+            <button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "selectionLimitOptional === false && numSelected < selectionLimit "  >
           <i class="fa fa-forward"></i>
             </button>
         </div>
         </div>
     </form>
-<!--   </div>
-  </div>  -->
   `
 })
 @Injectable() export default class RegionSchoolsSelect implements OnInit, OnDestroy {
@@ -90,9 +88,14 @@ import {AppSettings} from '../../app.settings';
     private rss = new FormArray([]);
     private classActive = "-1";
     private regionActive = <number>-1;
+    private regionActiveId = <number>-1;
     private courseActive = <number>-1;
     private numSelected = <number>0;
+    private selectionLimit = <number>3;
+    private regionSizeLimit = <number>3;
+    private selectionLimitOptional = <boolean>false;
     //private schoolArray: Array<boolean> = new Array();
+
     constructor(private fb: FormBuilder,
                 private _rsa: RegionSchoolsActions,
                 private _rsb: SectorCoursesActions,
@@ -112,6 +115,7 @@ import {AppSettings} from '../../app.settings';
     };
 
     ngOnInit() {
+
         this.selectEpalClasses();
 
         this.selectRegionSchools();
@@ -141,14 +145,30 @@ import {AppSettings} from '../../app.settings';
 
         this.regionsSub = this._ngRedux.select(state => {
             let numsel = 0;
+            let numreg = 0;   //count reduced regions in order to set activeRegion when user comes back to his choices
+            this.selectionLimitOptional = false;
+
             state.regions.reduce((prevRegion, region) =>{
+                numreg++;
                 region.epals.reduce((prevEpal, epal) =>{
                     this.rss.push( new FormControl(epal.selected, []));
                     if (epal.selected === true) {
                       numsel++;
+                      if ( epal.epal_special_case === "1") {
+                        this.selectionLimitOptional = true;
+                      }
+                      this.regionActiveId = Number(region.region_id);
+                      this.regionActive = numreg - 1;
+                      //console.log("HERE1: ");
+                      //console.log(this.regionActive);
+                    }
+                    if (Number(region.region_id) ===  this.regionActiveId)  {
+                      if (region.epals.length < this.regionSizeLimit)
+                        this.selectionLimitOptional = true;
                     }
                     return epal;
                 }, {});
+
                 return region;
             }, {});
             this.numSelected = numsel;

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

@@ -9,6 +9,8 @@ import { NgRedux, select } from 'ng2-redux';
 import { IAppState } from '../../store/store';
 import {RemoveSpaces} from '../../pipes/removespaces';
 
+//import { RegionSchoolsActions } from '../../actions/regionschools.actions';
+
 import {
     FormBuilder,
     FormGroup,
@@ -72,6 +74,7 @@ import {AppSettings} from '../../app.settings';
 
     constructor(private fb: FormBuilder,
                 private _sca: SectorCoursesActions,
+                //private _rsa: RegionSchoolsActions,
                 private _ngRedux: NgRedux<IAppState>,
                 private router: Router
             ) {
@@ -121,9 +124,13 @@ import {AppSettings} from '../../app.settings';
 
     saveSelected() {
         this._sca.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList);
+
+        //this._rsa.initRegionSchools();
     }
 
     navigateToSchools() {
+        //this._rsa.initRegionSchools();
+
         this.router.navigate(['/region-schools-select']);
     }
 

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

@@ -8,6 +8,8 @@ import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
 import { IAppState } from '../../store/store';
 import { SECTOR_FIELDS_INITIAL_STATE } from '../../store/sectorfields/sectorfields.initial-state';
 
+//import { RegionSchoolsActions } from '../../actions/regionschools.actions';
+
 import {
     FormBuilder,
     FormGroup,
@@ -59,6 +61,7 @@ import {AppSettings} from '../../app.settings';
 
     constructor(private fb: FormBuilder,
                 private _cfa: SectorFieldsActions,
+                //private _rsa: RegionSchoolsActions,
                 private _ngRedux: NgRedux<IAppState>,
                 private router: Router) {
         this.sectorFields$ = new BehaviorSubject(SECTOR_FIELDS_INITIAL_STATE);
@@ -91,7 +94,6 @@ import {AppSettings} from '../../app.settings';
     }
 
     navigateToSchools() {
-        //this.saveSelected();
         this.router.navigate(['/region-schools-select']);
     }
 
@@ -102,6 +104,8 @@ import {AppSettings} from '../../app.settings';
         this.formGroup.value.formArray[this.sectorActive] = true;
 
       this._cfa.saveSectorFieldsSelected(this.formGroup.value.formArray);
+
+      //this._rsa.initRegionSchools();
     }
 
     setActiveSectorAndSave(ind) {

source/services/helper-data-service.ts

@@ -280,7 +280,7 @@ export class HelperDataService {
                 rsa.push(<IRegion>{'region_id': regionSchool.region_id, 'region_name': regionSchool.region_name, 'epals': Array<IRegionSchool>()});
                 trackRegionId = regionSchool.region_id;
             }
-            rsa[trackIndex].epals.push(<IRegionSchool>{'epal_id': regionSchool.epal_id, 'epal_name': regionSchool.epal_name, 'globalIndex': j, 'selected': false, 'order_id': 0});
+            rsa[trackIndex].epals.push(<IRegionSchool>{'epal_id': regionSchool.epal_id, 'epal_name': regionSchool.epal_name, 'epal_special_case': regionSchool.epal_special_case, 'globalIndex': j, 'selected': false, 'order_id': 0});
             j++;
         });
         return rsa;
@@ -411,13 +411,13 @@ transformUserSchema(userlogin:any,oauthtoken:string, oauthrole:string){
 
     getSubmittedPreviw() {
 
-       
+
         this.loginInfo$.forEach(loginInfoToken => {
             this.authToken = loginInfoToken.get(0).auth_token;
         });
         let headers = new Headers({
             "Content-Type": "application/json",
-             "id": ""  
+             "id": ""
         });
         this.createAuthorizationHeader(headers);
         let options = new RequestOptions({ headers: headers });

source/store/regionschools/regionschools.reducer.ts

@@ -17,7 +17,7 @@ export function regionSchoolsReducer(state: IRegions = REGION_SCHOOLS_INITIAL_ST
         action.payload.regions.forEach(region => {
             newRegions.push(<IRegion>{region_id: region.region_id, region_name: region.region_name, epals: Array<IRegionSchool>() });
             region.epals.forEach(epal => {
-                newRegions[i].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, globalIndex: epal.globalIndex, selected: epal.selected, order_id: epal.order_id });
+                newRegions[i].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, epal_special_case: epal.epal_special_case, globalIndex: epal.globalIndex, selected: epal.selected, order_id: epal.order_id });
             })
             i++;
         });
@@ -41,7 +41,7 @@ export function regionSchoolsReducer(state: IRegions = REGION_SCHOOLS_INITIAL_ST
             state.forEach(region => {
                 regionsWithOrders.push(<IRegion>{region_id: region.region_id, region_name: region.region_name, epals: Array<IRegionSchool>()});
                 region.epals.forEach(epal => {
-                    regionsWithOrders[idx].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, globalIndex: epal.globalIndex, selected: epal.selected, order_id: action.payload.regionSchoolsOrder[k]});
+                    regionsWithOrders[idx].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, epal_special_case: epal.epal_special_case, globalIndex: epal.globalIndex, selected: epal.selected, order_id: action.payload.regionSchoolsOrder[k]});
                     k++;
                 })
                 idx++;

source/store/regionschools/regionschools.transformers.ts

@@ -6,7 +6,7 @@ export function deimmutifyRegionSchools(state: IRegions): IRegion[] {
     state.forEach(region => {
         fetchedRegions.push(<IRegion>{region_id: region.region_id, region_name: region.region_name, epals: Array<IRegionSchool>()});
         region.epals.forEach(epal => {
-            fetchedRegions[i].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, globalIndex: epal.globalIndex, selected: epal.selected, order_id: epal.order_id })
+            fetchedRegions[i].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, epal_special_case: epal.epal_special_case, globalIndex: epal.globalIndex, selected: epal.selected, order_id: epal.order_id })
         });
         i++;
     });

source/store/regionschools/regionschools.types.ts

@@ -9,6 +9,7 @@ export interface IRegion {
 export interface IRegionSchool {
     epal_id: string;
     epal_name: string;
+    epal_special_case: string;
     globalIndex: number;
     selected: boolean;
     order_id: number;