region.schools.select.ts 14.7 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
import { Injectable } from "@angular/core";
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
6
import { NgRedux, select } from '@angular-redux/store';
7
import { IRegionRecord, IRegionRecords } from '../../store/regionschools/regionschools.types';
8
import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
9
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
10
import { IAppState } from '../../store/store';
11
12
13
import { RemoveSpaces } from '../../pipes/removespaces';
import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
14

15

16
17
18
19
20
21
22
23
24
import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray
} from '@angular/forms';
import {AppSettings} from '../../app.settings';

@Component({
25
    selector: 'region-schools-select',
26
    template: `
Open Source Developer's avatar
commit    
Open Source Developer committed
27
    <div class="row">
28
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
commit    
Open Source Developer committed
29
30
    </div>

31
    <div class = "loading" *ngIf="!(regions$ | async) || (regions$ | async).size===0">
Open Source Developer's avatar
Open Source Developer committed
32
    </div>
33
    <!-- <div class="row equal">
34
      <div class="col-md-12"> -->
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

      <div id="choiceSentNotice" (onHidden)="onHidden()" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header {{modalHeader | async}}" >
                <h3 class="modal-title pull-left"><i class="fa fa-check-square-o"></i>&nbsp;&nbsp;{{ modalTitle | async }}</h3>
              <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
                <span aria-hidden="true"><i class="fa fa-times"></i></span>
              </button>
            </div>
            <div class="modal-body">
                <p>{{ modalText | async }}</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Κλείσιμο</button>
            </div>
          </div>
        </div>
      </div>

55
<div style="min-height: 500px;">
Open Source Developer's avatar
trans    
Open Source Developer committed
56
      <h4> Επιλογή Σχολείου</h4>
57
       <form [formGroup]="formGroup">
58
        <div formArrayName="formArray">
Open Source Developer's avatar
bug    
Open Source Developer committed
59
60
61
        <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε εως τρία ΕΠΑΛ στα οποία επιθυμεί να φοιτήσει ο μαθητής.
         Επιλέξτε πρώτα την Περιφερειακή Διεύθυνση στην οποία ανήκει το σχολείο της επιλογής σας,στη συνέχεια τα σχολεία και τέλος πατήστε <i>Συνέχεια</i>.
        Μπορείτε να επιλέξετε απο ένα εως τρία σχολεία που δύναται να ανήκουν σε περισσότερες απο μια Περιφερειακές Διευθύνσεις.</p>
62
63
64
            <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">
65
                    <h5>{{region$.get("region_name")}}</h5>
66
                </li>
67

68
                <div *ngFor="let epal$ of region$.get('epals'); let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== regionActive">
69

70
                        <div class="row">
71
                            <div class="col-md-2 col-md-offset-1">
72
                                <input #cb type="checkbox" formControlName="{{ epal$.get('globalIndex') }}"
73
                                (change)="saveSelected(cb.checked,i,j)"
74
                                [hidden] = "(numSelected | async) === 3 && cb.checked === false"
75
                                >
76
                             </div>
77
                            <div class="col-md-8  col-md-offset-1 isclickable">
78
                                {{epal$.get("epal_name") | removeSpaces}}
79
80
                            </div>
                        </div>
81

82
                </div>
83

84
85
86
            </div>
            </ul>
        </div>
87
        <div class="row" style="margin-top: 20px; margin-bottom: 20px;" *ngIf="(regions$ | async)">
88
        <div class="col-md-6">
89
            <button type="button" class="btn-primary btn-lg pull-left isclickable" (click)="navigateBack()" >
90
91
92
93
          <i class="fa fa-backward"></i>
            </button>
        </div>
        <div class="col-md-6">
94
95
96
            <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="navigateToApplication()" >
                <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
            </button>
97
98
99
        </div>
        </div>
    </form>
100
<!--     <pre>{{formGroup.value | json}}</pre> -->
101
    </div>
102
103
  `
})
104
@Injectable() export default class RegionSchoolsSelect implements OnInit, OnDestroy {
105
    private regions$: BehaviorSubject<IRegionRecords>;
106
107
108
109
110
    private epalclassesSub: Subscription;
    private regionsSub: Subscription;
    private sectorsSub: Subscription;
    private sectorFieldsSub: Subscription;

111
112
    private formGroup: FormGroup;
    private rss = new FormArray([]);
113
    private classActive = "-1";
114
    private regionActive = <number>-1;
115
    private regionActiveId = <number>-1;
116
    private courseActive = <number>-1;
117
118
119
    private numSelected: BehaviorSubject<number>;
    private selectionLimit: BehaviorSubject<number>;
    private selectionLimitOptional: BehaviorSubject<boolean>;
120
    private regionSizeLimit = <number>3;
121
122
    private classNight: BehaviorSubject<boolean>;

123
124
125
126
    private modalTitle: BehaviorSubject<string>;
    private modalText: BehaviorSubject<string>;
    private modalHeader: BehaviorSubject<string>;

127

128
129
130
    constructor(private fb: FormBuilder,
                private _rsa: RegionSchoolsActions,
                private _ngRedux: NgRedux<IAppState>,
131
                private router: Router
132

133
            ) {
134
        this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
135
136
        this.formGroup = this.fb.group({
            formArray: this.rss
137

138
        });
Open Source Developer's avatar
Open Source Developer committed
139

140
141
142
        this.numSelected = new BehaviorSubject(0);
        this.selectionLimit = new BehaviorSubject(3);
        this.selectionLimitOptional = new BehaviorSubject(false);
143
        this.classNight = new BehaviorSubject(false);
144

145
146
147
148
        this.modalTitle =  new BehaviorSubject("");
        this.modalText =  new BehaviorSubject("");
        this.modalHeader =  new BehaviorSubject("");

149
150
151
    };

    ngOnInit() {
152

153
154
        (<any>$('#choiceSentNotice')).appendTo("body");

155
156
157
158
159
160
        this.selectEpalClasses();

        this.selectRegionSchools();
    }

    ngOnDestroy() {
161
162
163

        (<any>$('#choiceSentNotice')).remove();

164
165
166
167
168
169
170
171
172
173
174
175
        if (this.epalclassesSub) {
            this.epalclassesSub.unsubscribe();
        }
        if (this.regionsSub) {
            this.regionsSub.unsubscribe();
        }
        if (this.sectorsSub) {
            this.sectorsSub.unsubscribe();
        }
        if (this.sectorFieldsSub) {
            this.sectorFieldsSub.unsubscribe();
        }
176

177
178
    }

179
180
181
182
183
184
185
186
187
188
189
190
    public showModal():void {
        (<any>$('#choiceSentNotice')).modal('show');
    }

    public hideModal():void {
        (<any>$('#choiceSentNotice')).modal('hide');
    }

    public onHidden():void {
        //this.isModalShown.next(false);
    }

191
    selectEpalClasses() {
192
193
194
195
196
197
198
199
200
201
202
203
204
205
      this.epalclassesSub = this._ngRedux.select('epalclasses')
                .subscribe(epalclasses => {
                    let ecs = <IEpalClasses>epalclasses;
                      if (ecs.size > 0) {
                          ecs.reduce(({}, epalclass, i) => {
                              this.setClassActive(epalclass.name);
                              if (epalclass.name === "4") {
                                this.classNight.next(true);
                              }
                              this.getAppropriateSchools(epalclass.name);
                              return epalclass;
                          }, {});
                      }
                  }, error => {console.log("error selecting epalclasses");});
206
207
208
209
    }

    selectRegionSchools() {

210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
        this.regionsSub = this._ngRedux.select('regions')
            .subscribe(regions => {
                let rgns = <IRegionRecords>regions;
                let numsel = 0;
                let numreg = 0;   //count reduced regions in order to set activeRegion when user comes back to his choices
                console.log("selectRegionSchools");
                this.selectionLimitOptional.next(false);

                if (rgns.size === 0)
                    return;

                rgns.reduce((prevRegion, region) =>{
                    numreg++;
                    region.get("epals").reduce((prevEpal, epal) =>{
                        this.rss.push( new FormControl(epal.get("selected"), []));
                        if (epal.get("selected") === true) {
                          numsel++;
                          if ( epal.get("epal_special_case") === "1") {
                            this.selectionLimitOptional.next(true);
                          }
                          this.regionActiveId = Number(region.region_id);
                          this.regionActive = numreg - 1;
                        }
                        if (Number(region.region_id) ===  this.regionActiveId)  {
                          if (region.get("epals").length < this.regionSizeLimit)
                            this.selectionLimitOptional.next(true);
                        }
                        return epal;
                    }, {});

                    return region;
241
                }, {});
242

243
244
245
                this.numSelected.next(numsel);
                this.regions$.next(rgns);
            }, error => {console.log("error selecting regions")});
246

247
248
    }

249
250
251
    setClassActive(className) {
        this.classActive = className;
    }
252

253
    getAppropriateSchools(epalClass) {
254

Open Source Developer's avatar
trans    
Open Source Developer committed
255
        if (epalClass === "1")  {
256
            console.log("getRegionSchools");
257
258
            this._rsa.getRegionSchools(1,"-1", false);
        }
259
/*        else if (epalClass === "2") {
260
            this.sectorFieldsSub = this._ngRedux.select(state => {
261
                console.log("sectorFieldsSub");
262
263
264
265
266
267
268
269
                state.sectorFields.reduce(({}, sectorField) =>{
                    if (sectorField.selected === true) {
                        this.courseActive = sectorField.id;
                        this._rsa.getRegionSchools(2,this.courseActive, false);
                    }
                    return sectorField;
                }, {});
                return state.sectorFields;
270
            }).subscribe(this.sectorFields$);
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
        } */
        else if (epalClass === "2") {
            this.sectorFieldsSub = this._ngRedux.select('sectorFields')
                .subscribe(sectorFields => {
                    let sfds = <ISectorFields>sectorFields;
                    console.log("sectorFieldsSub");
                    sfds.reduce(({}, sectorField) =>{
                        if (sectorField.selected === true) {
                            this.courseActive = sectorField.id;
                            this._rsa.getRegionSchools(2,this.courseActive, false);
                        }
                        return sectorField;
                    }, {});
                },
                error => {
                    console.log("Error Selecting Sector Fields");
                });
288
        }
289
        else if (epalClass === "3" || epalClass === "4")  {
290

291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
            this.sectorsSub = this._ngRedux.select('sectors')
                .map(sectors => <ISectors>sectors)
                .subscribe(sectors => {
                    console.log("sectorsSub");
                    sectors.reduce((prevSector, sector) =>{
                          if (sector.sector_selected === true) {
                              sector.courses.reduce((prevCourse, course) =>{
                                  if (course.selected === true) {
                                      this.courseActive = parseInt(course.course_id);
                                      //this._rsa.getRegionSchools(3,this.courseActive, false);
                                      this._rsa.getRegionSchools(Number(epalClass),this.courseActive, false);
                                  }
                                  return course;
                              }, {});
                          }
                        return sector;
                    }, {});
                });
309
        }
310
    }
311

312
313
    navigateBack() {
//        this.router.navigate(['/epal-class-select']);
Open Source Developer's avatar
trans    
Open Source Developer committed
314
        if (this.classActive === "1")  {
315
316
            this.router.navigate(['/epal-class-select']);
        }
Open Source Developer's avatar
trans    
Open Source Developer committed
317
        else if (this.classActive === "2") {
318
319
            this.router.navigate(['/sector-fields-select']);
        }
320
        else if (this.classActive === "3" || this.classActive === "4")  {
321
322
            this.router.navigate(['/sectorcourses-fields-select']);
        }
323
324
325
    }

    setActiveRegion(ind) {
326
327
328
      if (ind === this.regionActive)
        ind = -1;
      this.regionActive = ind;
329
330
    }

331
332
    saveSelected(checked,i,j) {
        this._rsa.saveRegionSchoolsSelected(checked, i, j);
333
334
335
    }

    navigateToApplication() {
336
337
338
      //  if ( (this.selectionLimitOptional.value === false /*&& this.classNight.value === false */  && this.numSelected.value < this.selectionLimit.value )
      //        || (this.numSelected.value === 0) )    {

339
      if ( this.numSelected.getValue() === 0)     {
340
341

          //this.modalHeader = "modal-header-success";
342
          this.modalHeader.next("modal-header-danger");
343
          this.modalTitle.next("Επιλογή αριθμού σχολείων");
344
          if (this.numSelected.getValue() === 0)
345
            this.modalText.next("Δεν έχετε επιλέξει κανένα σχολείο!");
346
          /*
347
348
349
350
          else
            this.modalText.next("Παρακαλώ επιλέξτε ΤΡΙΑ σχολεία. "
                              + "Μπορείτε να επιλέξετε ή να αφαιρέσετε μια επιλογή, κάνωντας κλικ στο αντίστοιχο κουτάκι που βρίσκεται μπροστά στο όνομα κάθε σχολείου. "
                              + "Θα έχετε τη δυνατότητα να καθορίσετε την επιθυμητή σειρά προτίμησής των επιλεγμένων σχολείων στην επόμενη οθόνη.");
351
352
            */

353
354
355
356
357
          this.showModal();
        }
        else
          this.router.navigate(['/schools-order-select']);

358
    }
359
}