schools-order-select.ts 6.35 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
import { Injectable } from "@angular/core";
import { NgRedux, select } from 'ng2-redux';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
7
import { IRegions, IRegionSchool } 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: `
Open Source Developer's avatar
commit    
Open Source Developer committed
15
    <div class="row">
16
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
commit    
Open Source Developer committed
17
    </div>
18
    <div class = "loading" *ngIf="(selectedSchools$ | async).length === 0 || (regions$ | async).size === 0">
19
    </div>
Open Source Developer's avatar
bug    
Open Source Developer committed
20
    <h4> Σειρά προτίμησης</h4>
21
    <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(selectedSchools$ | async).length === 1" >Έχετε επιλέξει το παρακάτω σχολείο. Εάν συμφωνείτε με την επιλογή σας
22
    πατήστε Συνέχεια, διαφορετικά μπορείτε να τροποποιήστε τις επιλογές σας επιστρέφοντας στην προηγούμενη οθόνη από το αριστερό βέλος κάτω αριστερά.</p>
Open Source Developer's avatar
bug    
Open Source Developer committed
23
24
    <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(selectedSchools$ | async).length > 1" >
    Σε περίπτωση που έχετε επιλέξει πρισσότερα απο ένα σχολεία, καθορίστε εδώ την επιθυμητη σειρά προτίμησησς πατώντας τα αντίστοιχα βέλη δεξιά από τα ονόματα των σχολείων.
25
26
    Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>

27
            <ul class="list-group main-view" style="margin-top: 50px; margin-bottom: 50px;">
28
            <div *ngFor="let selectedSchool$ of selectedSchools$ | async; let i=index; let isOdd=odd; let isEven=even">
Open Source Developer's avatar
trans    
Open Source Developer committed
29
                <li class="list-group-item "  [class.oddout]="isOdd" [class.evenout]="isEven">
30
                <span class="roundedNumber">{{(i+1)}}</span>&nbsp;&nbsp;{{selectedSchool$.epal_name}}
Open Source Developer's avatar
trans    
Open Source Developer committed
31
                <i (click)="changeOrder(i)" *ngIf = "i !== 0" class="fa fa-arrow-circle-up isclickable pull-right" style="font-size: 1.5em;"></i>
32
33
                </li>
            </div>
34
            </ul>
35
              <div class="row" style="margin-top: 20px; margin-bottom: 20px;">
36
              <div class="col-md-6">
37
                  <button type="button" class="btn-primary btn-lg pull-left isclickable" (click)="navigateBack();" >
38
39
40
41
                <i class="fa fa-backward"></i>
                  </button>
              </div>
              <div class="col-md-6">
42
43
44
                    <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="navigateToStudentForm()" [disabled] = "numSelected === 0">
                        <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
                    </button>
45
              </div>
Open Source Developer's avatar
UI    
Open Source Developer committed
46
              </div>
Open Source Developer's avatar
trans    
Open Source Developer committed
47

48
49
50
  `

})
51
@Injectable() export default class SchoolsOrderSelect implements OnInit, OnDestroy {
52
    //    public formGroup: FormGroup;
53
54
    private regions$: BehaviorSubject<IRegions>;
    private regionsSub: Subscription;
55
    private selectedSchools$: BehaviorSubject<Array<IRegionSchool>> = new BehaviorSubject(Array());
56

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

    ngOnInit() {
64
65
66
67
68
69
70
71
72
73
        this.regionsSub = this._ngRedux.select(state => {
            let selectedSchools = Array<IRegionSchool>();

            state.regions.reduce((prevRegion, region) => {
                region.epals.reduce((prevEpal, epal) => {
                    if (epal.selected === true) {
                        selectedSchools.push(epal);
                    }

                    return epal;
74
75
                }, {});

76
77
78
79
                return region;
            }, {});

            selectedSchools.sort(this.compareSchools);
80
81
82
83
84
            for (let i=0; i < selectedSchools.length; i++)
              selectedSchools[i].order_id = i+1;
            //selectedSchools[0].order_id = 1;
            //selectedSchools[1].order_id = 2;
            //selectedSchools[2].order_id = 3;
85
86
87
88
89

            this.selectedSchools$.next(selectedSchools);

            return state.regions;
        }).subscribe(this.regions$);
90
91
92
93
94
95
96
97

    }

    ngOnDestroy() {
        if (this.regionsSub) {
            this.regionsSub.unsubscribe();
        }
        if (this.regions$) this.regions$.unsubscribe();
98
99
    }

100
101
102
103
104
105
    compareSchools(a: IRegionSchool, b: IRegionSchool) {
        if (a.order_id < b.order_id)
            return -1;
        if (a.order_id > b.order_id)
            return 1;
        return 0;
106
107
    }

108
109
110
    changeOrder(i) {
        let selectedSchools = Array<IRegionSchool>();
        selectedSchools = this.selectedSchools$.getValue();
111

112
        if (i === 1) {
113
114
115
116
117
118
          //selectedSchools[0].order_id = 2;
          //selectedSchools[1].order_id = 1;
          //selectedSchools[2].order_id = 3;

          //swap selectedSchools[0].order_id <-> selectedSchools[1].order_id
          [ selectedSchools[0].order_id, selectedSchools[1].order_id ] = [ selectedSchools[1].order_id, selectedSchools[0].order_id ];
119
120
        }
        else if (i === 2) {
121
122
123
124
125
126
          //selectedSchools[0].order_id = 1;
          //selectedSchools[1].order_id = 3;
          //selectedSchools[2].order_id = 2;

          //swap selectedSchools[1].order_id <-> selectedSchools[2].order_id
          [ selectedSchools[1].order_id, selectedSchools[2].order_id ] = [ selectedSchools[2].order_id, selectedSchools[1].order_id ];
127
        }
128

129
        this._cfa.saveRegionSchoolsOrder(selectedSchools);
130
131
132
    }

    navigateToStudentForm() {
133
        this._cfa.saveRegionSchoolsOrder(this.selectedSchools$.getValue());
134
135
136
        this.router.navigate(['/student-application-form-main']);
    }

137
    navigateBack() {
138
        this._cfa.saveRegionSchoolsOrder(this.selectedSchools$.getValue());
139
140
        this.router.navigate(['/region-schools-select']);
    }
141
}