schools-order-select.ts 6.27 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 { NgRedux, select } from 'ng2-redux';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { IRegions } from '../../store/regionschools/regionschools.types';
8
import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
9
10
11
12
13
14
import { IAppState } from '../../store/store';
import {AppSettings} from '../../app.settings';

@Component({
    selector: 'schools-order-select',
    template: `
15
16
17
18
19
20
    <div class = "loading" *ngIf="(regions$ | async).size === 0">
    </div>
    <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(numSelected$ | async) === 1" >Έχετε επιλέξει το παρακάτω σχολείο. Εάν συμφωνείτε με την επιλογή σας
    πατήστε Συνέχεια, διαφορετικά μπορείτε να τροποποιήστε τις επιλογές σας επιστρέφοντας στην προηγούμενη οθόνη από το αριστερό βέλος κάτω αριστερά.</p>
    <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(numSelected$ | async) > 1" >Έχετε επιλέξει {{numSelected}} σχολεία.
    Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα βέλη δεξιά από τα ονόματα των σχολείων.
21
22
    Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>

23
            <ul class="list-group main-view" style="margin-top: 50px; margin-bottom: 50px;">
24
25
            <div *ngFor="let schoolField$ of schoolNames$ | async; let i=index; let isOdd=odd; let isEven=even">
                <li class="list-group-item"  [class.oddout]="isOdd" [class.evenout]="isEven">
26
                <b>({{(i+1)}}):</b> {{schoolField$}}
27
                <i (click)="changeOrder(i,'up')" *ngIf = "i !== 0" class="fa fa-arrow-circle-up isclickable pull-right" style="font-size: 2em;"></i>
28
29
                </li>
            </div>
30
            </ul>
31
32
              <div class="row" style="margin-top: 20px;">
              <div class="col-md-6">
33
                  <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack();" >
34
35
36
37
                <i class="fa fa-backward"></i>
                  </button>
              </div>
              <div class="col-md-6">
38
                  <button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToStudentForm()" [disabled] = "numSelected === 0"  >
39
40
41
                <i class="fa fa-forward"></i>
                  </button>
              </div>
Open Source Developer's avatar
UI    
Open Source Developer committed
42
              </div>
43
44
45
  `

})
46
@Injectable() export default class SchoolsOrderSelect implements OnInit, OnDestroy {
47
//    public formGroup: FormGroup;
48
49
50
51
52
53
    private numSelected$: BehaviorSubject<number> = new BehaviorSubject(0);
    private schoolNames$: BehaviorSubject<Array<string>> = new BehaviorSubject(Array());
    private schoolSelectedIds$: BehaviorSubject<Array<number>> = new BehaviorSubject(Array());
    private schoolArrayOrders$: BehaviorSubject<Array<number>> = new BehaviorSubject(Array());
    private regions$: BehaviorSubject<IRegions>;
    private regionsSub: Subscription;
54

55
    constructor(private _cfa: RegionSchoolsActions,
56
57
                private _ngRedux: NgRedux<IAppState>,
                private router: Router) {
58
        this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
59
60
61
    };

    ngOnInit() {
62
63
64
          this.regionsSub = this._ngRedux.select(state => {
              let numSelected = 0;
              let idx = -1;
65
              let nm = 0;
66
67
68
              let schoolNames = new Array();
              let schoolSelectedIds = new Array();
              let schoolArrayOrders = new Array();
69
              let maxOrderId = 3;
70
71
72
73
74
75

              state.regions.reduce((prevRegion, region) =>{
                  region.epals.reduce((prevEpal, epal) =>{
                      ++idx;
                      if (epal.selected === true) {
                            numSelected++;
76
77


78
                            if (epal.order_id === 0) {
79
80
81
82
                                schoolArrayOrders[idx] = maxOrderId;
                                maxOrderId--;
                                schoolNames[nm] = epal.epal_name;
                                schoolSelectedIds[nm] = idx;
83
84
                            }
                            else {
85
                                schoolArrayOrders[nm] = epal.order_id;
86
87
88
89
                                schoolNames[epal.order_id - 1] = epal.epal_name;
                                schoolSelectedIds[epal.order_id - 1] = idx;
                            }

90
91
                            nm++;

92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

                        } else {
                            schoolArrayOrders[idx] = 0;
                        }
                        return epal;
                    }, {});

                    return region;
                }, {});
                this.numSelected$.next(numSelected);
                this.schoolNames$.next(schoolNames);
                this.schoolSelectedIds$.next(schoolSelectedIds);
                this.schoolArrayOrders$.next(schoolArrayOrders);

              return state.regions;
          }).subscribe(this.regions$);

    }

    ngOnDestroy() {
        if (this.regionsSub) {
            this.regionsSub.unsubscribe();
        }
        if (this.regions$) this.regions$.unsubscribe();
116
117
118
    }

    changeOrder(i, orient) {
119
120
121
      let sn = this.schoolNames$.getValue();
      let ssi = this.schoolSelectedIds$.getValue();
      let sao = this.schoolArrayOrders$.getValue();
122
123
124
      let ind = 1;
      if (orient === "up")
        ind = -1;
125
126
127
128
129

      [ sn[i], sn[i+ind] ] = [ sn[i+ind], sn[i] ];
      [ ssi[i], ssi[i+ind] ] = [ ssi[i+ind], ssi[i] ];

      this.saveSelected(ssi, sao);
130
131
    }

132
133
134
135
    saveSelected(ssi, sao) {
      for (let i=0; i < ssi.length; i++)
        sao[ssi[i]] = i+1;
      this._cfa.saveRegionSchoolsOrder(sao);
136
137
138
139
140
141
    }

    navigateToStudentForm() {
        this.router.navigate(['/student-application-form-main']);
    }

142
    navigateBack() {
143

144
145
        this.router.navigate(['/region-schools-select']);
    }
146
}