sector.courses.select.ts 9.05 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
import { SectorCoursesActions } from "../../actions/sectorcourses.actions";
6
import { ISectorRecords } from "../../store/sectorcourses/sectorcourses.types";
7 8 9 10
import { SECTOR_COURSES_INITIAL_STATE } from "../../store/sectorcourses/sectorcourses.initial-state";
import { NgRedux, select } from "@angular-redux/store";
import { IAppState } from "../../store/store";
import {RemoveSpaces} from "../../pipes/removespaces";
11

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

14 15 16 17 18
import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray
19 20
} from "@angular/forms";
import {AppSettings} from "../../app.settings";
21 22

@Component({
23
    selector: "sectorcourses-fields-select",
24
    template: `
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
    <div id="sectorCourseNotice" (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
Open Source Developer committed
43
    <div class="row">
44
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
Open Source Developer committed
45
    </div>
46
    <div class = "loading" *ngIf="(sectors$ | async).size === 0">
47
   </div>
Open Source Developer's avatar
trans  
Open Source Developer committed
48
       <h4> Επιλογή Ειδικότητας</h4>
49 50
      <form [formGroup]="formGroup">
        <div formArrayName="formArray">
51
        <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε την ειδικότητα στην οποία θα φοιτήσει ο μαθητής στην Επαγγελματική Εκπαίδευση. Έπειτα επιλέξτε <i>Συνέχεια</i>.</p>
52
            <ul class="list-group">
53 54
            <div *ngFor="let sector$ of sectors$ | async; let i=index; let isOdd=odd; let isEven=even">
                <li class="list-group-item isclickable" (click)="setActiveSector(i)"  [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="sectorActive === i">
55
                    <h5>{{sector$.get("sector_name")}}</h5>
56
                </li>
57 58
                <div *ngFor="let course$ of sector$.get('courses'); let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== sectorActive">
                        <div class="row">
59
                           <div class="col-md-2 col-md-offset-1">
60 61 62
                                <input #cb type="checkbox" formControlName="{{ course$.get('globalIndex') }}"
                                (change)="updateCheckedOptions(course$.get('globalIndex'), i, j, cb)"
                                [checked] = " course$.get('globalIndex') === idx "
63
                                >
64
                            </div>
65
                            <div class="col-md-8  col-md-offset-1 isclickable">
Open Source Developer's avatar
UI  
Open Source Developer committed
66
                                {{course$.course_name | removeSpaces}}
67
                            </div>
68
                        </div>
Open Source Developer's avatar
Open Source Developer committed
69
                    </div>
70 71 72 73
              </div>
            </ul>
        </div>

74
        <div class="row" style="margin-top: 20px; margin-bottom: 20px;" *ngIf="(sectors$ | async).size > 0">
75
        <div class="col-md-6">
76
            <button type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
77 78 79 80
          <i class="fa fa-backward"></i>
            </button>
        </div>
        <div class="col-md-6">
81
            <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="navigateToSchools()" >
82
                <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
83 84 85 86 87 88
            </button>
        </div>
        </div>
     </form>
  `
})
89
@Injectable() export default class SectorCoursesSelect implements OnInit, OnDestroy {
90
    private sectors$: BehaviorSubject<ISectorRecords>;
91
    private sectorsSub: Subscription;
92
    private formGroup: FormGroup;
93
    private scsControls = new FormArray([]);
94
    private sectorActive = <number>-1;
95 96 97 98
    private sectorBelonging = <number>-1;
    private sectorBelongingPrev = <number>-1;
    private courseSelected = <number>-1;
    private courseSelectedPrev = <number>-1;
99
    private idx = <number>-1;
100
    private idxPrev = <number>-1;
101 102 103 104
    private modalTitle: BehaviorSubject<string>;
    private modalText: BehaviorSubject<string>;
    private modalHeader: BehaviorSubject<string>;
    public isModalShown: BehaviorSubject<boolean>;
105 106

    constructor(private fb: FormBuilder,
107 108 109 110 111
        private _sca: SectorCoursesActions,
        private _rsa: RegionSchoolsActions,
        private _ngRedux: NgRedux<IAppState>,
        private router: Router
    ) {
112 113

        this.sectors$ = new BehaviorSubject(SECTOR_COURSES_INITIAL_STATE);
114
        this.formGroup = this.fb.group({
115
            formArray: this.scsControls
116
        });
117 118 119 120
        this.modalTitle = new BehaviorSubject("");
        this.modalText = new BehaviorSubject("");
        this.modalHeader = new BehaviorSubject("");
        this.isModalShown = new BehaviorSubject(false);
121 122 123
    };

    ngOnInit() {
124
        (<any>$("#sectorCourseNotice")).appendTo("body");
125
        this._sca.getSectorCourses(false);
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
        let ids = 0, idc = 0;
        this.sectorsSub = this._ngRedux.select("sectors")
            .map(sectors => <ISectorRecords>sectors)
            .subscribe(scs => {

                let pushControls = false;
                if (this.scsControls.length === 0)
                    pushControls = true;

                scs.reduce((prevSector, sector) => {
                    if (sector.get("sector_selected") === true)
                        this.sectorActive = ids;
                    sector.get("courses").reduce((prevCourse, course) => {
                        if (pushControls)
                            this.scsControls.push(new FormControl(course.get("selected"), []));
                        if (course.get("selected") === true) {
                            this.sectorBelongingPrev = this.sectorBelonging;
                            this.sectorBelonging = ids;
                            this.courseSelectedPrev = this.courseSelected;
                            this.courseSelected = idc;
                            this.idxPrev = this.idx;
                            this.idx = course.get("globalIndex");
                        }
                        idc++;
                        return course;
                    }, {});
                    ids++;
                    idc = 0;
                    return sector;
155
                }, {});
156 157 158 159
                ids = 0;
                this.sectors$.next(scs);
            }, error => { console.log("error selecting sectors"); });
    };
160

161
    ngOnDestroy() {
162
        (<any>$("#sectorCourseNotice")).remove();
163
        if (this.sectorsSub) this.sectorsSub.unsubscribe();
164 165
    }

166
    public showModal(): void {
167
        (<any>$("#sectorCourseNotice")).modal("show");
168 169 170
    }

    public hideModal(): void {
171
        (<any>$("#sectorCourseNotice")).modal("hide");
172 173 174 175 176 177 178

    }

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

179
    setActiveSector(ind) {
180
        this.sectorActive = ind;
181 182
    }

183
    navigateToSchools() {
184

185 186 187 188 189 190
        if (this.idx === -1) {
            this.modalTitle.next("Δεν επιλέχθηκε ειδικότητα");
            this.modalText.next("Παρακαλούμε να επιλέξετε πρώτα ειδικότητα φοίτησης του μαθητή για το νέο σχολικό έτος");
            this.modalHeader.next("modal-header-danger");
            this.showModal();
        } else {
191
            this.router.navigate(["/region-schools-select"]);
192
        }
193 194
    }

195 196 197 198 199 200 201
    updateCheckedOptions(globalIndex, i, j, cb) {
        this.sectorBelongingPrev = this.sectorBelonging;
        this.sectorBelonging = i;
        this.courseSelectedPrev = this.courseSelected;
        this.courseSelected = j;

        this.idxPrev = this.idx;
202
        this.idx = globalIndex;
203

204 205 206 207 208 209
        if (this.idxPrev >= 0)
            this.formGroup.value.formArray[this.idxPrev] = false;
        if (this.idx >= 0)
            this.formGroup.value.formArray[globalIndex] = cb.checked;

        this._sca.saveSectorCoursesSelected(this.sectorBelongingPrev, this.courseSelectedPrev, cb.checked, i, j);
210

211 212
        if (cb.checked === false) {
            this.idxPrev = -1;
213
            this.idx = -1;
214 215 216
        }

        this._rsa.initRegionSchools();
217

218
    }
219 220

}