schools-order-select.ts 6.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
import { Injectable } from "@angular/core";
import { NgRedux, select } from 'ng2-redux';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
7
import { IRegionRecord, IRegionSchoolRecord } 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
Open Source Developer committed
15
    <div class="row">
16
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
Open Source Developer committed
17
    </div>
18
    <div class = "loading" *ngIf="(selectedSchools$ | async).length === 0 || !(regions$ | async) || ((regions$ | async).length === 1 &&  (regions$ | async)[0].region_id === null)">
19
    </div>
20

Open Source Developer's avatar
Open Source Developer committed
21
    <h4> Σειρά προτίμησης</h4>
22
    <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(selectedSchools$ | async).length === 1" >Έχετε επιλέξει το παρακάτω σχολείο. Εάν συμφωνείτε με την επιλογή σας
23
    πατήστε Συνέχεια, διαφορετικά μπορείτε να τροποποιήστε τις επιλογές σας επιστρέφοντας στην προηγούμενη οθόνη από το αριστερό βέλος κάτω αριστερά.</p>
Open Source Developer's avatar
Open Source Developer committed
24 25
    <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(selectedSchools$ | async).length > 1" >
    Σε περίπτωση που έχετε επιλέξει πρισσότερα απο ένα σχολεία, καθορίστε εδώ την επιθυμητη σειρά προτίμησησς πατώντας τα αντίστοιχα βέλη δεξιά από τα ονόματα των σχολείων.
26 27
    Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>

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

49 50 51
  `

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

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

    ngOnInit() {
65
        this.regionsSub = this._ngRedux.select(state => {
66
            let selectedSchools = Array<IRegionSchoolRecord>();
67 68

            state.regions.reduce((prevRegion, region) => {
69 70 71
                region.get("epals").reduce((prevEpal, epal) => {
                    if (epal.get("selected") === true) {
                        selectedSchools.push(epal.toJS());
72 73 74
                    }

                    return epal;
75 76
                }, {});

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

            selectedSchools.sort(this.compareSchools);
81 82 83 84 85
            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;
86 87 88 89 90

            this.selectedSchools$.next(selectedSchools);

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

    }

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

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

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

113
        if (i === 1) {
114 115 116 117 118 119
          //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 ];
120 121
        }
        else if (i === 2) {
122 123 124 125 126 127
          //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 ];
128
        }
129

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

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

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