region.schools.select.ts 15.5 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: `
Open Source Developer's avatar
commit  
Open Source Developer committed
31
    <div class="row">
32
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
commit  
Open Source Developer committed
33 34
    </div>

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

      <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>

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

71
                <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">
72

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

85
                </div>
86

87 88 89
            </div>
            </ul>
        </div>
90
        <div class="row" style="margin-top: 20px; margin-bottom: 20px;" *ngIf="(regions$ | async).size > 0">
91
        <div class="col-md-6">
92
            <button type="button" class="btn-primary btn-lg pull-left isclickable" (click)="navigateBack()" >
93 94 95 96
          <i class="fa fa-backward"></i>
            </button>
        </div>
        <div class="col-md-6">
97
            <!--
98
            <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="navigateToApplication()"
99

100 101
              [disabled] = " ( (selectionLimitOptional  | async) === false && (classNight  | async) === false  && (numSelected | async) < (selectionLimit | async) )
                                || ( (numSelected | async) === 0)">
102
                <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
103
            </button>
104 105 106 107
            -->
            <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>
108 109 110 111 112
        </div>
        </div>
    </form>
  `
})
113 114 115 116 117 118 119 120 121 122
@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;

123 124
    private formGroup: FormGroup;
    private rss = new FormArray([]);
125
    private classActive = "-1";
126
    private regionActive = <number>-1;
127
    private regionActiveId = <number>-1;
128
    private courseActive = <number>-1;
129 130 131
    private numSelected: BehaviorSubject<number>;
    private selectionLimit: BehaviorSubject<number>;
    private selectionLimitOptional: BehaviorSubject<boolean>;
132
    private regionSizeLimit = <number>3;
133 134
    private classNight: BehaviorSubject<boolean>;

135 136 137 138 139
    private modalTitle: BehaviorSubject<string>;
    private modalText: BehaviorSubject<string>;
    //private modalHeader: string;
    private modalHeader: BehaviorSubject<string>;

140

141 142
    constructor(private fb: FormBuilder,
                private _rsa: RegionSchoolsActions,
143
                private _rsb: SectorCoursesActions,
144
                private _ngRedux: NgRedux<IAppState>,
145
                private router: Router
146

147
            ) {
148 149 150 151
        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);
152 153
        this.formGroup = this.fb.group({
            formArray: this.rss
154

155
        });
Open Source Developer's avatar
Open Source Developer committed
156

157 158 159
        this.numSelected = new BehaviorSubject(0);
        this.selectionLimit = new BehaviorSubject(3);
        this.selectionLimitOptional = new BehaviorSubject(false);
160
        this.classNight = new BehaviorSubject(false);
161

162 163 164 165
        this.modalTitle =  new BehaviorSubject("");
        this.modalText =  new BehaviorSubject("");
        this.modalHeader =  new BehaviorSubject("");

166 167 168
    };

    ngOnInit() {
169

170 171
        (<any>$('#choiceSentNotice')).appendTo("body");

172 173 174 175 176 177
        this.selectEpalClasses();

        this.selectRegionSchools();
    }

    ngOnDestroy() {
178 179 180

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

181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196
        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();
197 198
    }

199 200 201 202 203 204 205 206 207 208 209 210 211
    public showModal():void {
        console.log("about to show modal");
        (<any>$('#choiceSentNotice')).modal('show');
    }

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

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

212 213
    selectEpalClasses() {
        this.epalclassesSub = this._ngRedux.select(state => {
214
          if (state.epalclasses.size > 0) {
215 216
              state.epalclasses.reduce(({}, epalclass, i) => {
                  this.setClassActive(epalclass.name);
217 218 219 220 221 222 223
                  console.log("My class:");
                  console.log(epalclass.name);
                  if (epalclass.name === "4") {
                    //this.selectionLimitOptional.next(true);
                    this.classNight.next(true);
                    console.log("Mphka!");
                  }
224
                  this.getAppropriateSchools(epalclass.name);
225 226 227 228
                  return epalclass;
              }, {});
          }
          return state.epalclasses;
229 230 231 232 233 234
      }).subscribe(this.epalclasses$);
    }

    selectRegionSchools() {

        this.regionsSub = this._ngRedux.select(state => {
235
            let numsel = 0;
236
            let numreg = 0;   //count reduced regions in order to set activeRegion when user comes back to his choices
237
            this.selectionLimitOptional.next(false);
238

239
            state.regions.reduce((prevRegion, region) =>{
240
                numreg++;
241 242
                region.epals.reduce((prevEpal, epal) =>{
                    this.rss.push( new FormControl(epal.selected, []));
243
                    if (epal.selected === true) {
244
                      numsel++;
245
                      if ( epal.epal_special_case === "1") {
246
                        this.selectionLimitOptional.next(true);
247 248 249 250 251 252
                      }
                      this.regionActiveId = Number(region.region_id);
                      this.regionActive = numreg - 1;
                    }
                    if (Number(region.region_id) ===  this.regionActiveId)  {
                      if (region.epals.length < this.regionSizeLimit)
253
                        this.selectionLimitOptional.next(true);
254
                    }
255 256
                    return epal;
                }, {});
257

258 259
                return region;
            }, {});
260 261
            this.numSelected.next(numsel);
            console.log("numselected=" + this.numSelected.getValue());
262
            return state.regions;
263
        }).subscribe(this.regions$);
264 265
    }

266 267 268
    setClassActive(className) {
        this.classActive = className;
    }
269

270
    getAppropriateSchools(epalClass) {
271

Open Source Developer's avatar
trans  
Open Source Developer committed
272
        if (epalClass === "1")  {
273 274
            this._rsa.getRegionSchools(1,"-1", false);
        }
Open Source Developer's avatar
trans  
Open Source Developer committed
275
        else if (epalClass === "2") {
276
            this.sectorFieldsSub = this._ngRedux.select(state => {
277 278 279 280 281 282 283 284
                state.sectorFields.reduce(({}, sectorField) =>{
                    if (sectorField.selected === true) {
                        this.courseActive = sectorField.id;
                        this._rsa.getRegionSchools(2,this.courseActive, false);
                    }
                    return sectorField;
                }, {});
                return state.sectorFields;
285
            }).subscribe(this.sectorFields$);
286
        }
287
        else if (epalClass === "3" || epalClass === "4")  {
288
            this.sectorsSub = this._ngRedux.select(state => {
289 290 291 292 293
                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);
294 295
                                  //this._rsa.getRegionSchools(3,this.courseActive, false);
                                  this._rsa.getRegionSchools(Number(epalClass),this.courseActive, false);
296 297 298 299 300 301 302
                              }
                              return course;
                          }, {});
                      }
                    return sector;
                }, {});
                return state.sectors;
303
            }).subscribe(this.sectors$);
304
        }
305
    }
306

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

    setActiveRegion(ind) {
321 322 323
      if (ind === this.regionActive)
        ind = -1;
      this.regionActive = ind;
324 325
    }

326 327
    saveSelected(checked,i,j) {
        this._rsa.saveRegionSchoolsSelected(checked, i, j);
328 329 330
    }

    navigateToApplication() {
331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350
        //[disabled] = " ( (selectionLimitOptional  | async) === false && (classNight  | async) === false  && (numSelected | async) < (selectionLimit | async) )
          //                || ( (numSelected | async) === 0)"
        if ( (this.selectionLimitOptional.value === false && this.classNight.value === false && this.numSelected.value < this.selectionLimit.value )
              || (this.numSelected.value === 0) )    {
          console.log("check Behaviours..");

          //this.modalHeader = "modal-header-success";
          this.modalHeader.next("modal-header-success");
          this.modalTitle.next("Επιλογή αριθμού σχολείων");
          if (this.numSelected.value === 0)
            this.modalText.next("Δεν έχετε επιλέξει κανένα σχολείο!");
          else
            this.modalText.next("Παρακαλώ επιλέξτε ΤΡΙΑ σχολεία. "
                              + "Μπορείτε να επιλέξετε ή να αφαιρέσετε μια επιλογή, κάνωντας κλικ στο αντίστοιχο κουτάκι που βρίσκεται μπροστά στο όνομα κάθε σχολείου. "
                              + "Θα έχετε τη δυνατότητα να καθορίσετε την επιθυμητή σειρά προτίμησής των επιλεγμένων σχολείων στην επόμενη οθόνη.");
          this.showModal();
        }
        else
          this.router.navigate(['/schools-order-select']);

351 352
    }

353
}