epal.class.select.ts 6.65 KB
Newer Older
1
import { Component, OnInit, OnDestroy } from '@angular/core';
Open Source Developer's avatar
Open Source Developer committed
2
import { Router } from '@angular/router';
3
import { Observable, BehaviorSubject } from 'rxjs/Rx';
Open Source Developer's avatar
Open Source Developer committed
4
5
6
7
import { Injectable } from "@angular/core";
import { EpalClassesActions } from '../../actions/epalclass.actions';
import { NgRedux, select } from 'ng2-redux';
import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
Open Source Developer's avatar
Open Source Developer committed
8
9
10
import { SectorFieldsActions } from '../../actions/sectorfields.actions';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
Open Source Developer's avatar
Open Source Developer committed
11
12
13
14
15
16
17
18
19
20
21
22
import { IAppState } from '../../store/store';
import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray
} from '@angular/forms';
import {AppSettings} from '../../app.settings';

@Component({
    selector: 'epal-class-select',
    template: `
Open Source Developer's avatar
trans    
Open Source Developer committed
23
    <div class="row">
24
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
trans    
Open Source Developer committed
25
    </div>
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    <div id="epalClassNotice" (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
44
    <h4> Επιλογή Τάξης </h4>
Open Source Developer's avatar
Open Source Developer committed
45
    <form [formGroup]="formGroup">
Open Source Developer's avatar
bug    
Open Source Developer committed
46
47
           <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε την τάξη φοίτησης του μαθητή
            στην Επαγγελματική Εκπαίδευση κατά το σχολικό έτος 2017-18 και έπειτα επιλέξτε <i>Συνέχεια</i>.</p>
Open Source Developer's avatar
Open Source Developer committed
48
           <div *ngFor="let epalclass$ of epalclasses$ | async;"> </div>
49
            <div class="form-group" style= "margin-top: 50px; margin-bottom: 100px;">
Open Source Developer's avatar
trans    
Open Source Developer committed
50
              <label for="name"></label><br/>
Open Source Developer's avatar
Open Source Developer committed
51
                    <select class="form-control" formControlName="name" (change)="initializestore()">
52
53
54
55
56
                        <option value="">Επιλέξτε Τάξη</option>
                        <option value="1">Α’ Λυκείου</option>
                        <option value="2">Β’ Λυκείου</option>
                        <option value="3">Γ' Λυκείου</option>
                        <option value="4">Δ' Λυκείου</option>
57

Open Source Developer's avatar
Open Source Developer committed
58
59
                    </select>

60
            </div>
61
        <div class="row" style="margin-bottom: 20px;">
62
63
64
65
66
67
        <div class="col-md-6">
            <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()">
                <i class="fa fa-backward"></i>
            </button>
        </div>
            <div class="col-md-6">
68
69
                <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="saveSelected()">
               <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
Open Source Developer's avatar
Open Source Developer committed
70
71
72
                </button>
            </div>
        </div>
Open Source Developer's avatar
a    
Open Source Developer committed
73

Open Source Developer's avatar
Open Source Developer committed
74
75
76
77
    </form>
   `
})

78
@Injectable() export default class EpalClassesSelect implements OnInit, OnDestroy {
Open Source Developer's avatar
Open Source Developer committed
79
80
81
    private epalclasses$: Observable<IEpalClasses>;

    public formGroup: FormGroup;
82
83
84
85
    private modalTitle: BehaviorSubject<string>;
    private modalText: BehaviorSubject<string>;
    private modalHeader: BehaviorSubject<string>;
    public isModalShown: BehaviorSubject<boolean>;
Open Source Developer's avatar
Open Source Developer committed
86
87
88
89

       constructor(private fb: FormBuilder,
                private _cfa: EpalClassesActions,
                private _ngRedux: NgRedux<IAppState>,
Open Source Developer's avatar
Open Source Developer committed
90
91
92
                private _csa: SectorCoursesActions,
                private _sfa: SectorFieldsActions,
                private _rsa: RegionSchoolsActions,
Open Source Developer's avatar
Open Source Developer committed
93
94
95
96
                private router: Router) {
       this.formGroup = this.fb.group({
            name: []
            });
97
98
99
100
            this.modalTitle = new BehaviorSubject("");
            this.modalText = new BehaviorSubject("");
            this.modalHeader = new BehaviorSubject("");
            this.isModalShown = new BehaviorSubject(false);
Open Source Developer's avatar
Open Source Developer committed
101
102
103
        };

    ngOnInit() {
104
        (<any>$('#epalClassNotice')).appendTo("body");
Open Source Developer's avatar
Open Source Developer committed
105
106
107
108
109
110
          this.epalclasses$ = this._ngRedux.select(state => {
            if (state.epalclasses.size > 0) {
                state.epalclasses.reduce(({}, epalclass) => {
                    this.formGroup.setValue(epalclass);
                    return epalclass;
                }, {});
111
112
            } else {
                this.formGroup.controls["name"].setValue("");
Open Source Developer's avatar
Open Source Developer committed
113
114
115
116
117
118
            }
            return state.epalclasses;
        });

    }

119
120
121
    ngOnDestroy() {
        (<any>$('#epalClassNotice')).remove();
    }
Open Source Developer's avatar
a    
Open Source Developer committed
122

123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
    public showModal(): void {
        (<any>$('#epalClassNotice')).modal('show');
    }

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

    }

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


    saveSelected() {
        if (this.formGroup.controls["name"].value === "") {
            this.modalTitle.next("Δεν επιλέχθηκε τάξη");
            this.modalText.next("Παρακαλούμε να επιλέξετε πρώτα τάξη φοίτησης του μαθητή για το νέο σχολικό έτος");
            this.modalHeader.next("modal-header-danger");
            this.showModal();
143
        }
Open Source Developer's avatar
a    
Open Source Developer committed
144
145
146
        else
        {
            this._cfa.saveEpalClassesSelected(this.formGroup.value);
Open Source Developer's avatar
trans    
Open Source Developer committed
147
            if (this.formGroup.value.name === "1")
148
              this.router.navigate(['/region-schools-select']);
Open Source Developer's avatar
trans    
Open Source Developer committed
149
            else if (this.formGroup.value.name === "2")
150
                this.router.navigate(['/sector-fields-select']);
151
            else if (this.formGroup.value.name === "3" || this.formGroup.value.name === "4")
152
153
                this.router.navigate(['/sectorcourses-fields-select']);

Open Source Developer's avatar
a    
Open Source Developer committed
154
        }
155

Open Source Developer's avatar
Open Source Developer committed
156
    }
Open Source Developer's avatar
Open Source Developer committed
157

158
159
160
161
    navigateBack() {
        this.router.navigate(['/intro-statement']);
    }

Open Source Developer's avatar
Open Source Developer committed
162
163
164
165

    initializestore()
    {
       this._cfa.saveEpalClassesSelected(this.formGroup.value);
166
167
168
       this._sfa.initSectorFields();
       this._rsa.initRegionSchools();
       this._csa.initSectorCourses();
Open Source Developer's avatar
Open Source Developer committed
169
170
    }

Open Source Developer's avatar
a    
Open Source Developer committed
171
}