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
}