region.schools.select.ts 10.1 KB
Newer Older
1
import { Component, OnInit, OnDestroy} from '@angular/core';
2
import { Router } from '@angular/router';
3
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
4
5
6
7
import { Injectable } from "@angular/core";
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { NgRedux, select } from 'ng2-redux';
import { IRegions } from '../../store/regionschools/regionschools.types';
8
9
10
11
import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
import { EPALCLASSES_INITIAL_STATE } from '../../store/epalclasses/epalclasses.initial-state';
import { SECTOR_COURSES_INITIAL_STATE } from '../../store/sectorcourses/sectorcourses.initial-state';
import { SECTOR_FIELDS_INITIAL_STATE } from '../../store/sectorfields/sectorfields.initial-state';
12
13
import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
14
import { IAppState } from '../../store/store';
15
16
17
import { RemoveSpaces } from '../../pipes/removespaces';
import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
18

19

20
21
22
23
24
25
26
27
28
import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray
} from '@angular/forms';
import {AppSettings} from '../../app.settings';

@Component({
29
    selector: 'region-schools-select',
30
    template: `
31
    <div class = "loading" *ngIf="(regions$ | async).size === 0">
Open Source Developer's avatar
Open Source Developer committed
32
    </div>
33
34
<!--     <div class="row equal">
      <div class="col-md-12"> -->
35
       <form [formGroup]="formGroup">
36
        <div formArrayName="formArray">
37
38
39
            <ul class="list-group main-view">
            <div *ngFor="let region$ of regions$ | async; let i=index; let isOdd=odd; let isEven=even"  >
                <li class="list-group-item isclickable" (click)="setActiveRegion(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="regionActive === i">
40
41
                    <h5>{{region$.region_name}}</h5>
                </li>
42

43
                <div *ngFor="let epal$ of region$.epals; let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== regionActive">
44

45
                        <div class="row">
46
                            <div class="col-md-2 col-md-offset-1">
47
                                <input #cb type="checkbox" formControlName="{{ epal$.globalIndex }}"
48
                                (change)="saveSelected(cb.checked,i,j)"
49
                                [hidden] = "numSelected === 3 && cb.checked === false"
50
                                >
51
                             </div>
52
                            <div class="col-md-8  col-md-offset-1 isclickable">
Open Source Developer's avatar
Open Source Developer committed
53
                                {{epal$.epal_name | removeSpaces}}
54
55
                            </div>
                        </div>
56

57
                </div>
58

59
60
61
            </div>
            </ul>
        </div>
62
        <div class="row" style="margin-top: 20px;" *ngIf="(regions$ | async).size > 0">
63
        <div class="col-md-6">
64
            <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()" >
65
66
67
68
          <i class="fa fa-backward"></i>
            </button>
        </div>
        <div class="col-md-6">
69
            <button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "selectionLimitOptional === false && numSelected < selectionLimit "  >
Open Source Developer's avatar
Open Source Developer committed
70
          <i class="fa fa-forward"></i>
71
72
73
74
75
76
            </button>
        </div>
        </div>
    </form>
  `
})
77
78
79
80
81
82
83
84
85
86
@Injectable() export default class RegionSchoolsSelect implements OnInit, OnDestroy {
    private epalclasses$: BehaviorSubject<IEpalClasses>;
    private regions$: BehaviorSubject<IRegions>;
    private sectors$: BehaviorSubject<ISectors>;
    private sectorFields$: BehaviorSubject<ISectorFields>;
    private epalclassesSub: Subscription;
    private regionsSub: Subscription;
    private sectorsSub: Subscription;
    private sectorFieldsSub: Subscription;

87
88
    private formGroup: FormGroup;
    private rss = new FormArray([]);
89
    private classActive = "-1";
90
    private regionActive = <number>-1;
91
    private regionActiveId = <number>-1;
92
    private courseActive = <number>-1;
93
    private numSelected = <number>0;
94
95
96
    private selectionLimit = <number>3;
    private regionSizeLimit = <number>3;
    private selectionLimitOptional = <boolean>false;
97
    //private schoolArray: Array<boolean> = new Array();
98

99
100
    constructor(private fb: FormBuilder,
                private _rsa: RegionSchoolsActions,
101
                private _rsb: SectorCoursesActions,
102
                private _ngRedux: NgRedux<IAppState>,
103
                private router: Router
104

105
            ) {
106
107
108
109
        this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
        this.epalclasses$ = new BehaviorSubject(EPALCLASSES_INITIAL_STATE);
        this.sectors$ = new BehaviorSubject(SECTOR_COURSES_INITIAL_STATE);
        this.sectorFields$ = new BehaviorSubject(SECTOR_FIELDS_INITIAL_STATE);
110
111
        this.formGroup = this.fb.group({
            formArray: this.rss
112

113
        });
Open Source Developer's avatar
Open Source Developer committed
114

115
116
117
    };

    ngOnInit() {
118

119
120
121
122
123
124
        this.selectEpalClasses();

        this.selectRegionSchools();
    }

    ngOnDestroy() {
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
        console.log("on destroy");
        if (this.epalclassesSub) {
            this.epalclassesSub.unsubscribe();
        }
        if (this.regionsSub) {
            this.regionsSub.unsubscribe();
        }
        if (this.sectorsSub) {
            this.sectorsSub.unsubscribe();
        }
        if (this.sectorFieldsSub) {
            this.sectorFieldsSub.unsubscribe();
        }
        if (this.sectorFields$) this.sectorFields$.unsubscribe();
        if (this.sectors$) this.sectors$.unsubscribe();
        if (this.regions$) this.regions$.unsubscribe();
        if (this.epalclasses$) this.epalclasses$.unsubscribe();
142
143
144
145
    }

    selectEpalClasses() {
        this.epalclassesSub = this._ngRedux.select(state => {
146
          if (state.epalclasses.size > 0) {
147
148
149
              state.epalclasses.reduce(({}, epalclass, i) => {
                  this.setClassActive(epalclass.name);
                  this.getAppropriateSchools(epalclass.name);
150
151
152
153
                  return epalclass;
              }, {});
          }
          return state.epalclasses;
154
155
156
157
158
159
      }).subscribe(this.epalclasses$);
    }

    selectRegionSchools() {

        this.regionsSub = this._ngRedux.select(state => {
160
            let numsel = 0;
161
162
163
            let numreg = 0;   //count reduced regions in order to set activeRegion when user comes back to his choices
            this.selectionLimitOptional = false;

164
            state.regions.reduce((prevRegion, region) =>{
165
                numreg++;
166
167
                region.epals.reduce((prevEpal, epal) =>{
                    this.rss.push( new FormControl(epal.selected, []));
168
                    if (epal.selected === true) {
169
                      numsel++;
170
171
172
173
174
175
176
177
178
179
180
                      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;
181
                    }
182
183
                    return epal;
                }, {});
184

185
186
                return region;
            }, {});
187
            this.numSelected = numsel;
188
            return state.regions;
189
        }).subscribe(this.regions$);
190
191
    }

192
193
194
    setClassActive(className) {
        this.classActive = className;
    }
195

196
    getAppropriateSchools(epalClass) {
197

198
199
200
201
        if (epalClass === "Α' Λυκείου")  {
            this._rsa.getRegionSchools(1,"-1", false);
        }
        else if (epalClass === "Β' Λυκείου") {
202
            this.sectorFieldsSub = this._ngRedux.select(state => {
203
204
205
                state.sectorFields.reduce(({}, sectorField) =>{
                    if (sectorField.selected === true) {
                        this.courseActive = sectorField.id;
206
                        console.log(epalClass);
207
208
209
210
211
                        this._rsa.getRegionSchools(2,this.courseActive, false);
                    }
                    return sectorField;
                }, {});
                return state.sectorFields;
212
            }).subscribe(this.sectorFields$);
213
214
        }
        else if (epalClass === "Γ' Λυκείου")  {
215
            this.sectorsSub = this._ngRedux.select(state => {
216
217
218
219
220
                state.sectors.reduce((prevSector, sector) =>{
                      if (sector.sector_selected === true) {
                          sector.courses.reduce((prevCourse, course) =>{
                              if (course.selected === true) {
                                  this.courseActive = parseInt(course.course_id);
221
                                  console.log(epalClass);
222
223
224
225
226
227
228
229
                                  this._rsa.getRegionSchools(3,this.courseActive, false);
                              }
                              return course;
                          }, {});
                      }
                    return sector;
                }, {});
                return state.sectors;
230
            }).subscribe(this.sectors$);
231
        }
232
    }
233

234
235
236
237
238
239
240
241
242
243
244
    navigateBack() {
//        this.router.navigate(['/epal-class-select']);
        if (this.classActive === "Α' Λυκείου")  {
            this.router.navigate(['/epal-class-select']);
        }
        else if (this.classActive === "Β' Λυκείου") {
            this.router.navigate(['/sector-fields-select']);
        }
        else if (this.classActive === "Γ' Λυκείου")  {
            this.router.navigate(['/sectorcourses-fields-select']);
        }
245
246
247
    }

    setActiveRegion(ind) {
248
249
250
      if (ind === this.regionActive)
        ind = -1;
      this.regionActive = ind;
251
252
    }

253
254
    saveSelected(checked,i,j) {
        this._rsa.saveRegionSchoolsSelected(checked, i, j);
255
256
257
    }

    navigateToApplication() {
258
        this.router.navigate(['/schools-order-select']);
259
260
    }

261
}