report-all-stat.ts 23.1 KB
Newer Older
1
import { NgRedux } from "@angular-redux/store";
2
import { Injectable } from "@angular/core";
3 4 5 6
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { LocalDataSource } from "ng2-smart-table";
7
import { BehaviorSubject, Subscription } from "rxjs/Rx";
8

9
import { API_ENDPOINT } from "../../app.settings";
10 11 12 13 14 15 16 17
import { DIDE_ROLE, PDE_ROLE } from "../../constants";
import { HelperDataService } from "../../services/helper-data-service";
import { LOGININFO_INITIAL_STATE } from "../../store/logininfo/logininfo.initial-state";
import { ILoginInfoRecords } from "../../store/logininfo/logininfo.types";
import { IAppState } from "../../store/store";
import { ChartCreator } from "./chart-creator";
import { CsvCreator } from "./csv-creator";
import { ReportsSchema, TableColumn } from "./reports-schema";
18 19

@Component({
20
    selector: "report-all-stat",
21 22
    template: `

23 24
    <div class="reports-container">
        <div class = "loading" *ngIf="validCreator === 0" ></div>
25 26

        <form [formGroup]="formGroup"  #form>
27 28 29 30 31 32 33 34 35 36 37
            <div [ngSwitch]="reportId">
                <h5 *ngSwitchCase="2">Συνολική Πληρότητα σχολικών μονάδων ΕΠΑΛ ανά τάξη</h5>
                <h5 *ngSwitchCase="3">Αριθμός Μαθητών και Πληρότητα σχολικών μονάδων ΕΠΑΛ</h5>
                <h5 *ngSwitchCase="5">Ολιγομελή τμήματα (Προσωρινά τοποθετημένοι μαθητές)</h5>
                <h5 *ngSwitchDefault>Αναφορά</h5>
            </div>
            <h6>Επιλογή Φίλτρων</h6>
            <button type="button" class="btn btn-sm" (click)="toggleRegionFilter()" >
                <div *ngIf = "userLoggedIn === 'supervisor'">Φίλτρο Επιλογής Περιφ/κής Δ/νσης - Δ/νσης Εκπ/σης - Σχολείου</div>
                <div *ngIf = "userLoggedIn === 'dide'">Φίλτρο Επιλογής Σχολείου</div>
                <div *ngIf = "userLoggedIn === 'pde'">Φίλτρο Επιλογής Δ/νσης Εκπ/σης - Σχολείου</div>
38 39
            </button>

40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
            <div  class="col-md-11 offset-md-1">
            <label *ngIf = "enableRegionFilter && userLoggedIn === 'supervisor'"> Περιφερειακή Διεύθυνση </label>
            <select #regsel class="form-control" (change)="checkregion(regsel)" *ngIf = "enableRegionFilter" [value] = "regionSelected" [hidden] = "userLoggedIn !== 'supervisor'" formControlName="region">
                <option value="0"></option>
                <option *ngFor="let RegionSelection$  of RegionSelections$ | async; let i=index" [value] = "RegionSelection$.id"> {{RegionSelection$.name}} </option>
            </select>
            </div>
            <div class="col-md-11 offset-md-1">
            <label *ngIf="(showAdminList | async) && enableRegionFilter && userLoggedIn !== 'dide'">Διεύθυνση Εκπαίδευσης</label>
            <select #admsel class="form-control"  *ngIf="(showAdminList | async) && enableRegionFilter" (change)="checkadminarea(admsel)" [hidden] = "userLoggedIn === 'dide'" formControlName="adminarea">
                <option value="0"></option>
                <option *ngFor="let AdminAreaSelection$  of AdminAreaSelections$ | async; let i=index" [value] = "AdminAreaSelection$.id"> {{AdminAreaSelection$.name}}</option>
            </select>
            </div>
            <div class="col-md-11 offset-md-1">
            <label *ngIf="(showAdminList | async) && enableRegionFilter">Σχολείο</label>
            <select #schsel class="form-control"  *ngIf="(showAdminList | async) && enableRegionFilter" (change)="checkschool(schsel)" formControlName="schoollist">
                <option value="0"></option>
                <option *ngFor="let SchoolSelection$  of SchoolSelections$ | async; let i=index" [value] = "SchoolSelection$.epal_id"> {{SchoolSelection$.epal_name}} </option>
            </select>
            </div>

            <div *ngIf = "reportId === 3 || reportId === 5" >
                <button type="button" class="btn btn-sm" (click)="toggleCourseFilter()" >Φίλτρο Επιλογής Τομέα / Ειδικότητας</button>

                <div  class="col-md-11 offset-md-1">
                    <label for="classid" *ngIf = "enableCourseFilter" >Τάξη</label>
                    <select #class_sel  class="form-control" (change)="checkclass(class_sel)" *ngIf = "enableCourseFilter" formControlName="classid" >
                        <option value="0" ></option>
                        <option value="1" >Α' Λυκείου</option>
                        <option value="2" >Β' Λυκείου</option>
                        <option value="3" >Γ' Λυκείου</option>
                        <option value="4" >Δ' Λυκείου</option>
                    </select>
                </div>
                <div class="col-md-11 offset-md-1">
                    <label *ngIf="(showSectorList | async) && enableCourseFilter && (classSelected === 2 || classSelected === 3 || classSelected === 4) ">Τομέας</label>
                    <select #secsel class="form-control"  *ngIf="(showSectorList | async) && enableCourseFilter && (classSelected === 2 || classSelected === 3 || classSelected === 4)"
                            (change)="checksector(secsel)" formControlName="sector">
                        <option value="0"></option>
                        <option *ngFor="let SectorSelection$  of SectorSelections$ | async; let i=index" [value] = "SectorSelection$.id"> {{SectorSelection$.name}}</option>
                    </select>
                </div>
                <div class="col-md-11 offset-md-1">
                    <label *ngIf="(showCourseList | async) && enableCourseFilter && (classSelected === 3 || classSelected === 4)">Ειδικότητα</label>
                    <select #coursel class="form-control"  *ngIf="(showCourseList | async) && enableCourseFilter && (classSelected === 3 || classSelected === 4)"
                            (change)="checkcourse(coursel)" formControlName="course">
                        <option value="0"></option>
                        <option *ngFor="let CourseSelection$  of CourseSelections$ | async; let i=index" [value] = "CourseSelection$.id"> {{CourseSelection$.name}}</option>
                    </select>
                </div>
            </div>

            <button type="submit" class="btn btn-alert"  (click)="createReport(regsel)" [hidden]="minedu_userName === ''" >
            <i class="fa fa-file-text"></i>
                Δημιουργία Αναφοράς
            </button>
            <button type="submit" class="btn btn-alert pull-right"  (click)="navigateBack()" [hidden]="minedu_userName === ''" >
                Επιστροφή
            </button>
100 101
        </form>

102
        <div *ngIf="validCreator === 1 ">
103 104
            <input #search class="search" type="text" placeholder="Αναζήτηση..." (keydown.enter)="onSearch(search.value)">
            <div class="smart-table-container table table-hover table-striped" reportScroll>
105
            <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
106
            </div>
107 108
        </div>

109 110 111
        <button type="button" class="alert alert-info pull-right" (click)="export2Csv()" [hidden]="validCreator !== 1"><i class="fa fa-download"></i> Εξαγωγή σε csv</button>
        <button type="button" class="alert alert-info pull-left" (click)="createDiagram()" [hidden]="validCreator !== 1 || schSelected === 0 || (reportId !== 2 ) "><i class="fa fa-bar-chart"></i> Διάγραμμα</button>
        <div class="d3-chart" *ngIf = "validCreator === 1" #chart></div>
112 113 114 115 116 117
    </div>
   `
})

@Injectable() export default class ReportAllStat implements OnInit, OnDestroy {

118
    private formGroup: FormGroup;
119
    private loginInfo$: BehaviorSubject<ILoginInfoRecords>;
120
    private loginInfoSub: Subscription;
121 122 123 124
    private generalReport$: BehaviorSubject<any>;
    private RegionSelections$: BehaviorSubject<any>;
    private AdminAreaSelections$: BehaviorSubject<any>;
    private SchoolSelections$: BehaviorSubject<any>;
125 126
    private SectorSelections$: BehaviorSubject<any>;
    private CourseSelections$: BehaviorSubject<any>;
127
    private RegionRetrieve$: BehaviorSubject<any>;
128 129 130 131
    private generalReportSub: Subscription;
    private RegionSelectionsSub: Subscription;
    private AdminAreaSelectionsSub: Subscription;
    private SchoolSelectionsSub: Subscription;
132 133
    private SectorSelectionsSub: Subscription;
    private CourseSelectionsSub: Subscription;
134
    private RegionRetrieveSub: Subscription;
135 136 137 138
    private apiEndPoint = API_ENDPOINT;
    private minedu_userName: string;
    private minedu_userPassword: string;
    private distStatus = "READY";
139
    private data: any;
140 141 142 143
    private validCreator: number;
    private reportId: number;
    private source: LocalDataSource;
    private showAdminList: BehaviorSubject<boolean>;
144 145
    private showSectorList: BehaviorSubject<boolean>;
    private showCourseList: BehaviorSubject<boolean>;
146
    private regionSelected: number;
147 148
    private adminAreaSelected: number;
    private schSelected: number;
149 150 151
    private classSelected: number;
    private sectorSelected: number;
    private courseSelected: number;
152
    private distribFinalized: number;
153
    private enableRegionFilter: boolean;
154
    private enableCourseFilter: boolean;
155
    private userLoggedIn: string;
156

157
    columnMap: Map<string, TableColumn> = new Map<string, TableColumn>();
158
    @Input() settings: any;
159
    private reportSchema = new ReportsSchema();
160

161 162
    // csvObj:CsvCreator ;
    private csvObj = new CsvCreator();
163

164
    private createGraph: boolean;
165 166 167
    // d3 creator
    private chartObj = new ChartCreator();
    @ViewChild("chart") public chartContainer: ElementRef;
168 169
    private d3data: Array<any>;

170
    // private repid: number;
171 172 173 174 175 176 177 178
    private routerSub: any;

    constructor(private fb: FormBuilder,
        private _ngRedux: NgRedux<IAppState>,
        private _hds: HelperDataService,
        private activatedRoute: ActivatedRoute,
        private router: Router) {

179
        this.formGroup = this.fb.group({
180 181 182 183 184 185
            region: ["", []],
            adminarea: ["", []],
            schoollist: ["", []],
            classid: ["", []],
            sector: ["", []],
            course: ["", []],
186 187 188 189 190 191 192 193 194 195
        });

        this.loginInfo$ = new BehaviorSubject(LOGININFO_INITIAL_STATE);
        this.generalReport$ = new BehaviorSubject([{}]);
        this.RegionSelections$ = new BehaviorSubject([{}]);
        this.AdminAreaSelections$ = new BehaviorSubject([{}]);
        this.SchoolSelections$ = new BehaviorSubject([{}]);
        this.SectorSelections$ = new BehaviorSubject([{}]);
        this.CourseSelections$ = new BehaviorSubject([{}]);
        this.RegionRetrieve$ = new BehaviorSubject([{}]);
196
        this.minedu_userName = "";
197 198 199 200 201 202 203 204 205 206 207 208 209
        this.validCreator = -1;
        this.showAdminList = new BehaviorSubject(false);
        this.showSectorList = new BehaviorSubject(false);
        this.showCourseList = new BehaviorSubject(false);
        this.regionSelected = 0;
        this.adminAreaSelected = 0;
        this.schSelected = 0;
        this.classSelected = 0;
        this.sectorSelected = 0;
        this.courseSelected = 0;
        this.enableRegionFilter = false;
        this.enableCourseFilter = false;
        this.createGraph = false;
210 211 212 213 214

    }

    ngOnInit() {

215
        this.loginInfoSub = this._ngRedux.select("loginInfo")
216
            .map(loginInfo => <ILoginInfoRecords>loginInfo)
217 218
            .subscribe(loginInfo => {
                if (loginInfo.size > 0) {
219 220 221
                    loginInfo.reduce(({}, loginInfoObj) => {
                        this.minedu_userName = loginInfoObj.minedu_username;
                        this.minedu_userPassword = loginInfoObj.minedu_userpassword;
222

223 224
                        this.userLoggedIn = loginInfoObj.auth_role;
                        if (loginInfoObj.auth_role === PDE_ROLE || loginInfoObj.auth_role === DIDE_ROLE) {
225
                            let regId = -1;
226 227 228
                            this.minedu_userName = loginInfoObj.auth_token;
                            this.minedu_userPassword = loginInfoObj.auth_token;
                            if (loginInfoObj.auth_role === PDE_ROLE || loginInfoObj.auth_role === DIDE_ROLE) {
229 230 231 232 233 234

                                this.RegionRetrieveSub = this._hds.getUserRegistryNo(this.minedu_userName, this.minedu_userPassword).subscribe(data => {
                                    this.RegionRetrieve$.next(data);
                                    this.data = data;
                                    regId = this.data["id"];

235
                                    if (loginInfoObj.auth_role === PDE_ROLE) {
236 237 238 239 240
                                        this.regionSelected = regId;
                                        this.showAdminList.next(true);

                                        this.checkregion(this.regionSelected);
                                    }
241
                                    else if (loginInfoObj.auth_role === DIDE_ROLE) {
242 243 244 245 246 247 248 249 250
                                        this.adminAreaSelected = regId;
                                        this.showAdminList.next(false);
                                        this.checkadminarea(this.adminAreaSelected);
                                    }
                                },
                                    error => {
                                        this.RegionRetrieve$.next([{}]);
                                    });
                            }
251
                        }
252
                        return loginInfoObj;
253 254 255 256
                    }, {});
                }
                this.loginInfo$.next(loginInfo);
            }, error => console.log("error selecting loginInfo"));
257 258

        this.routerSub = this.activatedRoute.params.subscribe(params => {
259
            this.reportId = +params["reportId"];
260 261 262
        });

        this.showFilters();
263 264 265 266
    }

    ngOnDestroy() {

267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282
        if (this.loginInfoSub)
            this.loginInfoSub.unsubscribe();
        if (this.generalReportSub)
            this.generalReportSub.unsubscribe();
        if (this.RegionSelectionsSub)
            this.RegionSelectionsSub.unsubscribe();
        if (this.AdminAreaSelectionsSub)
            this.AdminAreaSelectionsSub.unsubscribe();
        if (this.SchoolSelectionsSub)
            this.SchoolSelectionsSub.unsubscribe();
        if (this.SectorSelectionsSub)
            this.SectorSelectionsSub.unsubscribe();
        if (this.CourseSelectionsSub)
            this.CourseSelectionsSub.unsubscribe();
        if (this.RegionRetrieveSub)
            this.RegionRetrieveSub.unsubscribe();
283 284
    }

285
    createReport(regionSel) {
286

287 288
        this.validCreator = 0;
        this.createGraph = false;
289

290 291 292 293 294 295 296 297 298 299 300 301 302
        let route;
        if (this.reportId === 1) {
            route = "/ministry/general-report/";
            this.settings = this.reportSchema.genReportSchema;
        }
        else if (this.reportId === 2) {
            route = "/ministry/report-completeness/";
            this.settings = this.reportSchema.reportCompletenessSchema;
        }
        else if (this.reportId === 3) {
            route = "/ministry/report-all-stat/";
            this.distribFinalized = 1;
            this.settings = this.reportSchema.reportAllStatSchema;
303
            this.settings.fileName = "e-ΕΠΑΛ Αριθμός Μαθητών και Πληρότητα σχολικών μονάδων ΕΠΑΛ";
304 305 306 307 308
        }
        else if (this.reportId === 5) {
            route = "/ministry/report-all-stat/";
            this.distribFinalized = 0;
            this.settings = this.reportSchema.reportAllStatSchema;
309
            this.settings.fileName = "e-ΕΠΑΛ Ολιγομελή τμήματα - Προσωρινά τοποθετημένοι μαθητές";
310 311 312 313
        }

        let regSel = 0, admSel = 0, schSel = 0;
        if (this.enableRegionFilter) {
314 315
            // if (regionSel.value !== 0)
            // regSel = regionSel.value;
316 317 318 319
            regSel = this.regionSelected;
            admSel = this.adminAreaSelected;
            schSel = this.schSelected;
        }
320

321 322 323 324 325 326
        let clSel = 0, secSel = 0, courSel = 0;
        if (this.enableCourseFilter) {
            clSel = this.classSelected;
            secSel = this.sectorSelected;
            courSel = this.courseSelected;
        }
327

328
        if (this.userLoggedIn === PDE_ROLE) {
329 330
            regSel = this.regionSelected;
        }
331
        else if (this.userLoggedIn === DIDE_ROLE) {
332
            admSel = this.adminAreaSelected;
333
        }
334 335 336 337 338 339 340 341 342 343 344

        this.generalReportSub = this._hds.makeReport(this.minedu_userName, this.minedu_userPassword, route, regSel, admSel, schSel, clSel, secSel, courSel, this.distribFinalized).subscribe(data => {
            this.generalReport$.next(data);
            this.data = data;

            for (let i = 0; i < this.data.length; i++) {
                this.data[i].num = Number(data[i].num);
                this.data[i].percentage = Number(data[i].percentage);

                this.data[i].percTotal = Number(data[i].percTotal);
                this.data[i].percA = Number(data[i].percA);
345 346 347
                if (Number.isNaN(this.data[i].percA)) {
                    this.data[i].percA = "-";
                }
348
                this.data[i].percB = Number(data[i].percB);
349 350 351
                if (Number.isNaN(this.data[i].percB)) {
                    this.data[i].percB = "-";
                }
352
                this.data[i].percC = Number(data[i].percC);
353 354 355
                if (Number.isNaN(this.data[i].percC)) {
                    this.data[i].percC = "-";
                }
356 357 358 359 360
            }
            this.validCreator = 1;
            this.source = new LocalDataSource(this.data);
            this.columnMap = new Map<string, TableColumn>();

361
            // pass parametes to csv class object
362 363 364
            this.csvObj.columnMap = this.columnMap;
            this.csvObj.source = this.source;
            this.csvObj.settings = this.settings;
365
            // this.prepareColumnMap();
366
            this.csvObj.prepareColumnMap();
367
        },
368 369 370 371
        error => {
            this.generalReport$.next([{}]);
            console.log("Error Getting generalReport");
        });
372
    }
373

374
    navigateBack() {
375
        this.router.navigate(["/ministry/minister-reports"]);
376
    }
377

378
    showFilters() {
379

380 381 382 383 384 385 386 387
        this.RegionSelectionsSub = this._hds.getRegions(this.minedu_userName, this.minedu_userPassword).subscribe(data => {
            this.RegionSelections$.next(data);
        },
            error => {
                this.RegionSelections$.next([{}]);
                console.log("Error Getting RegionSelections");
            });
    }
388

389
    toggleRegionFilter() {
390

391
        this.enableRegionFilter = !this.enableRegionFilter;
392

393
    }
394

395
    toggleCourseFilter() {
396

397 398
        this.enableCourseFilter = !this.enableCourseFilter;
    }
399

400
    checkregion(regionId) {
401

402
        if (typeof regionId.value !== "undefined")
403 404 405
            this.regionSelected = regionId.value;
        this.adminAreaSelected = 0;
        this.schSelected = 0;
406

407 408 409 410 411 412 413 414
        this.AdminAreaSelectionsSub = this._hds.getAdminAreas(this.minedu_userName, this.minedu_userPassword, this.regionSelected).subscribe(data => {
            this.AdminAreaSelections$.next(data);
            this.showAdminList.next(true);
        },
            error => {
                this.AdminAreaSelections$.next([{}]);
                console.log("Error Getting AdminAreaSelections");
            });
415

416 417 418 419 420 421 422 423 424
        this.SchoolSelectionsSub = this._hds.getSchoolsPerRegion(this.minedu_userName, this.minedu_userPassword, this.regionSelected).subscribe(data => {
            this.SchoolSelections$.next(data);
            this.showAdminList.next(true);
        },
            error => {
                this.SchoolSelections$.next([{}]);
                console.log("Error Getting SchoolSelections");
            });
    }
425

426
    checkadminarea(adminId) {
427

428
        this.schSelected = 0;
429

430
        if (typeof adminId.value !== "undefined")
431 432 433
            this.adminAreaSelected = adminId.value;
        this.SchoolSelectionsSub = this._hds.getSchoolsPerAdminArea(this.minedu_userName, this.minedu_userPassword, this.adminAreaSelected).subscribe(data => {
            this.SchoolSelections$.next(data);
434
        },
435 436 437 438 439 440 441 442
            error => {
                this.SchoolSelections$.next([{}]);
                console.log("Error Getting SchoolSelections");
            },
            () => {
                console.log("Success Getting SchoolSelectionsSub");
                this.showAdminList.next(true);
            }
443

444 445
        );
    }
446

447 448 449
    checkschool(schId) {
        this.schSelected = schId.value;
    }
450

451 452 453 454
    checkclass(classId) {
        this.classSelected = classId.value;
        this.sectorSelected = 0;
        this.courseSelected = 0;
455

456
        if (this.classSelected === 2 || this.classSelected === 3 || this.classSelected === 4) {
457 458 459 460 461 462 463 464
            this.SectorSelectionsSub = this._hds.getSectors(this.minedu_userName, this.minedu_userPassword, this.classSelected).subscribe(data => {
                this.SectorSelections$.next(data);
                this.showSectorList.next(true);
            },
                error => {
                    this.SectorSelections$.next([{}]);
                    console.log("Error Getting SectorSelections");
                });
465
        } // end if
466
    }
467

468 469 470
    checksector(sectorId) {
        this.courseSelected = 0;
        this.sectorSelected = sectorId.value;
471

472 473
        this.CourseSelectionsSub = this._hds.getCourses(this.minedu_userName, this.minedu_userPassword, this.sectorSelected).subscribe(data => {
            this.CourseSelections$.next(data);
474
            this.showCourseList.next(true);
475 476 477 478 479 480
        },
            error => {
                this.CourseSelections$.next([{}]);
                console.log("Error Getting CourseSelections");
            });
    }
481

482 483 484
    checkcourse(courseId) {
        this.courseSelected = courseId.value;
    }
485

486
    onSearch(query: string = "") {
487 488
        this.csvObj.onSearch(query);
    }
489

490 491 492
    export2Csv() {
        this.csvObj.export2Csv();
    }
493 494


495 496 497 498 499 500 501 502 503 504
    createDiagram() {
        if (!this.createGraph) {
            this.generateGraphData();
            this.chartObj.d3data = this.d3data;
            this.chartObj.chartContainer = this.chartContainer;
            this.chartObj.createChart();
            this.chartObj.updateChart();
            this.createGraph = true;
        }
    }
505

506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537
    generateGraphData() {
        this.d3data = [];
        if (this.reportId === 2) {
            let labelsX = [];
            labelsX.push("Σχολείο");
            labelsX.push("Α\' τάξη");
            labelsX.push("Β\' τάξη");
            labelsX.push("Γ\' τάξη");
            labelsX.push("Δ\' τάξη");

            this.d3data.push([
                labelsX[0],
                this.data[0].percTotal,
            ]);
            this.d3data.push([
                labelsX[1],
                this.data[0].percA,
            ]);
            this.d3data.push([
                labelsX[2],
                this.data[0].percB,
            ]);
            this.d3data.push([
                labelsX[3],
                this.data[0].percC,
            ]);
            this.d3data.push([
                labelsX[4],
                this.data[0].percD,
            ]);
        }
    }
538
}