sector.fields.select.ts 5.98 KB
Newer Older
1 2 3
import { Component, OnInit, OnDestroy } from "@angular/core";
import { Router } from "@angular/router";
import { BehaviorSubject, Subscription } from "rxjs/Rx";
4
import { Injectable } from "@angular/core";
5 6
import { SectorFieldsActions } from "../../actions/sectorfields.actions";
import { NgRedux, select } from "@angular-redux/store";
7
import { ISectorFieldRecord, ISectorFieldRecords } from "../../store/sectorfields/sectorfields.types";
8 9
import { IAppState } from "../../store/store";
import { SECTOR_FIELDS_INITIAL_STATE } from "../../store/sectorfields/sectorfields.initial-state";
10

11
import { RegionSchoolsActions } from "../../actions/regionschools.actions";
12

13
import {AppSettings} from "../../app.settings";
14 15

@Component({
16
    selector: "sector-fields-select",
17
    template: `
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
    <div id="sectorFieldsNotice" (onHidden)="onHidden()" class="modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <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" (click)="hideModal()">Κλείσιμο</button>
          </div>
        </div>
      </div>
    </div>
Open Source Developer's avatar
trans  
Open Source Developer committed
36
    <div class="row">
37
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
trans  
Open Source Developer committed
38
    </div>
Open Source Developer's avatar
trans  
Open Source Developer committed
39
    <h4> Επιλογή Τομέα </h4>
40
     <div class = "loading" *ngIf="(sectorFields$ | async).size === 0">
41
    </div>
42
       <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε τον τομέα στον οποίο θα φοιτήσει ο μαθητής το νέο σχολικό έτος στην επαγγελματική εκπαίδευση. Έπειτα επιλέξτε <i>Συνέχεια</i>.</p>
43 44
            <ul class="list-group main-view">
            <div *ngFor="let sectorField$ of sectorFields$ | async; let i=index; let isOdd=odd; let isEven=even">
45
                <li class="list-group-item  isclickable" (click)="saveSelected(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="sectorActive === i">
46 47 48
                    <h5>{{sectorField$.name}}</h5>
                </li>
            </div>
49
            </ul>
50

51
        <div class="row" style="margin-top: 20px; margin-bottom: 20px;" *ngIf="(sectorFields$ | async).size > 0">
52
        <div class="col-md-6">
53
            <button type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
54 55 56 57
          <i class="fa fa-backward"></i>
            </button>
        </div>
        <div class="col-md-6">
58
            <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="navigateToSchools()" >
59
                <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
60 61 62
            </button>
        </div>
        </div>
63
`
64 65

})
66
@Injectable() export default class SectorFieldsSelect implements OnInit, OnDestroy {
67
    private sectorFields$: BehaviorSubject<ISectorFieldRecords>;
68
    private sectorFieldsSub: Subscription;
69
    private sectorActive = <number>-1;
70 71 72 73
    private modalTitle: BehaviorSubject<string>;
    private modalText: BehaviorSubject<string>;
    private modalHeader: BehaviorSubject<string>;
    public isModalShown: BehaviorSubject<boolean>;
74

75
    constructor(private _cfa: SectorFieldsActions,
76 77 78
        private _rsa: RegionSchoolsActions,
        private _ngRedux: NgRedux<IAppState>,
        private router: Router) {
79 80
        this.sectorFields$ = new BehaviorSubject(SECTOR_FIELDS_INITIAL_STATE);

81 82 83 84
        this.modalTitle = new BehaviorSubject("");
        this.modalText = new BehaviorSubject("");
        this.modalHeader = new BehaviorSubject("");
        this.isModalShown = new BehaviorSubject(false);
85 86 87
    };

    ngOnInit() {
88
        (<any>$("#sectorFieldsNotice")).appendTo("body");
89
        this._cfa.getSectorFields(false);
90
        this.sectorFieldsSub = this._ngRedux.select("sectorFields")
91 92
            .map(sectorFields => <ISectorFieldRecords>sectorFields)
            .subscribe(sfds => {
93
                sfds.reduce(({}, sectorField) => {
94 95
                    if (sectorField.get("selected") === true) {
                        this.sectorActive = sectorField.get("id") - 1;
96 97 98 99 100
                    }

                    return sectorField;
                }, {});
                this.sectorFields$.next(sfds);
101
            }, error => { console.log("error selecting sectorFields"); });
102
    }
103

104
    ngOnDestroy() {
105
        (<any>$("#sectorFieldsNotice")).remove();
106
        if (this.sectorFieldsSub) this.sectorFieldsSub.unsubscribe();
107 108
    }

109
    public showModal(): void {
110
        (<any>$("#sectorFieldsNotice")).modal("show");
111 112 113
    }

    public hideModal(): void {
114
        (<any>$("#sectorFieldsNotice")).modal("hide");
115 116 117 118 119 120
    }

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

121
    navigateToSchools() {
122 123 124 125 126 127 128
        if (this.sectorActive === -1) {
            this.modalTitle.next("Δεν επιλέχθηκε τομέας");
            this.modalText.next("Παρακαλούμε να επιλέξετε πρώτα έναν τομέα");
            this.modalHeader.next("modal-header-danger");
            this.showModal();
        }
        else {
129
            this.router.navigate(["/region-schools-select"]);
130
        }
131 132
    }

133 134 135
    private saveSelected(ind: number): void {
        if (ind === this.sectorActive)
            return;
136

137 138
        this._cfa.saveSectorFieldsSelected(this.sectorActive, ind);
        this.sectorActive = ind;
139

140
        this._rsa.initRegionSchools();
141 142
    }

143
}