Merge branch 'schools_order_select' into 'develop'

Fixed schools-order-select antipattern. UI enhancements

See merge request !60
parents 67b6cdbd 0734a8dd
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx'; import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { Injectable } from "@angular/core"; import { Injectable } from "@angular/core";
import { NgRedux, select } from 'ng2-redux'; import { NgRedux, select } from 'ng2-redux';
import { RegionSchoolsActions } from '../../actions/regionschools.actions'; import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { IRegions } from '../../store/regionschools/regionschools.types'; import { IRegions } from '../../store/regionschools/regionschools.types';
import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
import { IAppState } from '../../store/store'; import { IAppState } from '../../store/store';
import { import {
...@@ -17,56 +18,48 @@ import {AppSettings} from '../../app.settings'; ...@@ -17,56 +18,48 @@ import {AppSettings} from '../../app.settings';
@Component({ @Component({
selector: 'schools-order-select', selector: 'schools-order-select',
template: ` template: `
<p style="margin-top: 20px; line-height: 2em;" *ngIf = "numSelected === 1" >Έχετε επιλέξει το παρακάτω σχολείο. Εάν συμφωνείτε με την επιλογή σας <div class = "loading" *ngIf="(regions$ | async).size === 0">
πατήστε Συνέχεια, διαφορετικά μπορείτε να τροποποιήστε τις επιλογές σας πατώντας <i>Τα σχολεία μου</i> από τον κατάλογο επιλογών.</p> </div>
<p style="margin-top: 20px; line-height: 2em;" *ngIf = "numSelected > 1" >Έχετε επιλέξει {{numSelected}} σχολεία. <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(numSelected$ | async) === 1" >Έχετε επιλέξει το παρακάτω σχολείο. Εάν συμφωνείτε με την επιλογή σας
Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα κουμπάκια δίπλα στα ονόματα των σχολείων. πατήστε Συνέχεια, διαφορετικά μπορείτε να τροποποιήστε τις επιλογές σας επιστρέφοντας στην προηγούμενη οθόνη από το αριστερό βέλος κάτω αριστερά.</p>
<p style="margin-top: 20px; line-height: 2em;" *ngIf = "(numSelected$ | async) > 1" >Έχετε επιλέξει {{numSelected}} σχολεία.
Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα βέλη δεξιά από τα ονόματα των σχολείων.
Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p> Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>
<!-- <div class="row equal">
<div class="col-md-12"> -->
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<div *ngFor="let schoolField$ of schoolNames; let i=index; let isOdd=odd; let isEven=even" [class.odd]="isOdd" [class.even]="isEven"> <ul class="list-group main-view">
<button type="button" class="btn btn-info btn-sm pull-right" style="width:120px;margin-bottom:4px;white-space: normal;word-wrap:break-word;" <div *ngFor="let schoolField$ of schoolNames$ | async; let i=index; let isOdd=odd; let isEven=even">
(click)="changeOrder(i,'up')" *ngIf = "i !== 0">Ανέβασέ με</button> <li class="list-group-item" [class.oddout]="isOdd" [class.evenout]="isEven">
<!--
<button type="button" class="btn btn-info btn-sm pull-right" (click)="changeOrder(i,'down')" style="width:120px;margin-bottom:4px;white-space: normal;word-wrap:break-word;"
*ngIf = "i !== numSelected-1">Κατέβασέ με</button>
-->
<li class="list-group-item" >
<!--
<button type="button" class="btn btn-info btn-sm pull-left" style="width:120px;" [disabled] = "true" >Προτίμηση {{i+1}}</button>
-->
Προτίμηση {{i+1}}: {{schoolField$}} Προτίμηση {{i+1}}: {{schoolField$}}
<div (click)="changeOrder(i,'up')" *ngIf = "i !== 0" class="fa fa-arrow-circle-up isclickable pull-right" style="font-size: 2em;"></div>
</li> </li>
</div> </div>
</ul>
<div class="row" style="margin-top: 20px;"> <div class="row" style="margin-top: 20px;">
<div class="col-md-6"> <div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack();" > <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack();" >
<i class="fa fa-backward"></i> <i class="fa fa-backward"></i>
</button> </button>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToStudentForm()" [disabled] = "numSelected === 0" > <button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToStudentForm()" [disabled] = "numSelected === 0" >
<i class="fa fa-forward"></i> <i class="fa fa-forward"></i>
</button> </button>
</div> </div>
</div> </div>
</form> </form>
<!-- </div>
</div> -->
` `
}) })
@Injectable() export default class SchoolsOrderSelect implements OnInit { @Injectable() export default class SchoolsOrderSelect implements OnInit, OnDestroy {
//private sectorFields$: Observable<ISectorFields>;
private regions$: Observable<IRegions>;
public formGroup: FormGroup; public formGroup: FormGroup;
private numSelected = <number>0; private numSelected$: BehaviorSubject<number> = new BehaviorSubject(0);
private schoolNames: Array<string> = new Array(); private schoolNames$: BehaviorSubject<Array<string>> = new BehaviorSubject(Array());
private schoolSelectedIds: Array<number> = new Array(); private schoolSelectedIds$: BehaviorSubject<Array<number>> = new BehaviorSubject(Array());
private schoolArrayOrders: Array<number> = new Array(); private schoolArrayOrders$: BehaviorSubject<Array<number>> = new BehaviorSubject(Array());
private regions$: BehaviorSubject<IRegions>;
private regionsSub: Subscription;
constructor(private fb: FormBuilder, constructor(private fb: FormBuilder,
private _cfa: RegionSchoolsActions, private _cfa: RegionSchoolsActions,
...@@ -74,54 +67,82 @@ import {AppSettings} from '../../app.settings'; ...@@ -74,54 +67,82 @@ import {AppSettings} from '../../app.settings';
private router: Router) { private router: Router) {
this.formGroup = this.fb.group({ this.formGroup = this.fb.group({
}); });
this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
}; };
ngOnInit() { ngOnInit() {
const { regions } = this._ngRedux.getState();
let idx = -1; this.regionsSub = this._ngRedux.select(state => {
let nm = 1; let numSelected = 0;
for (let l=0; l<regions.size; l++) { let idx = -1;
for (let m=0; m < regions["_tail"]["array"][l]["epals"].length; m++) { let nm = 1;
++idx; let schoolNames = new Array();
if (regions["_tail"]["array"][l]["epals"][m]["selected"] === true) { let schoolSelectedIds = new Array();
this.numSelected++; let schoolArrayOrders = new Array();
this.schoolNames.push(regions["_tail"]["array"][l]["epals"][m]["epal_name"]);
this.schoolSelectedIds.push(idx); state.regions.reduce((prevRegion, region) =>{
this.schoolArrayOrders.push(nm++); region.epals.reduce((prevEpal, epal) =>{
} ++idx;
else if (epal.selected === true) {
this.schoolArrayOrders.push(0); numSelected++;
} schoolArrayOrders[idx] = nm;
} nm++;
this.saveSelected(); if (epal.order_id === 0) {
schoolNames[idx] = epal.epal_name;
schoolSelectedIds[idx] = idx;
}
else {
schoolNames[epal.order_id - 1] = epal.epal_name;
schoolSelectedIds[epal.order_id - 1] = idx;
}
} else {
schoolArrayOrders[idx] = 0;
}
return epal;
}, {});
return region;
}, {});
this.numSelected$.next(numSelected);
this.schoolNames$.next(schoolNames);
this.schoolSelectedIds$.next(schoolSelectedIds);
this.schoolArrayOrders$.next(schoolArrayOrders);
return state.regions;
}).subscribe(this.regions$);
}
ngOnDestroy() {
console.log("on destroy");
if (this.regionsSub) {
this.regionsSub.unsubscribe();
}
if (this.regions$) this.regions$.unsubscribe();
} }
changeOrder(i, orient) { changeOrder(i, orient) {
let sn = this.schoolNames$.getValue();
let ssi = this.schoolSelectedIds$.getValue();
let sao = this.schoolArrayOrders$.getValue();
let ind = 1; let ind = 1;
if (orient === "up") if (orient === "up")
ind = -1; ind = -1;
//αλλιώς (αν orient = "down") είναι ind = 1
[ sn[i], sn[i+ind] ] = [ sn[i+ind], sn[i] ];
//classic swap! [ ssi[i], ssi[i+ind] ] = [ ssi[i+ind], ssi[i] ];
/*
let tempSchoolName = this.schoolNames[i] ; this.saveSelected(ssi, sao);
this.schoolNames[i] = this.schoolNames[i+ind];
this.schoolNames[i+ind] = tempSchoolName;
*/
//another way of swap..
//this.schoolNames[i] = [this.schoolNames[i+ind],this.schoolNames[i+ind]=this.schoolNames[i]][0];
//smart way of swap!
[ this.schoolNames[i], this.schoolNames[i+ind] ] = [ this.schoolNames[i+ind], this.schoolNames[i] ];
[ this.schoolSelectedIds[i], this.schoolSelectedIds[i+ind] ] = [ this.schoolSelectedIds[i+ind], this.schoolSelectedIds[i] ];
this.saveSelected();
} }
saveSelected() { saveSelected(ssi, sao) {
for (let i=0; i < this.schoolSelectedIds.length; i++) for (let i=0; i < ssi.length; i++)
this.schoolArrayOrders[this.schoolSelectedIds[i]] = i+1; sao[ssi[i]] = i+1;
this._cfa.saveRegionSchoolsOrder(this.schoolArrayOrders); this._cfa.saveRegionSchoolsOrder(sao);
} }
navigateToStudentForm() { navigateToStudentForm() {
...@@ -129,18 +150,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -129,18 +150,7 @@ import {AppSettings} from '../../app.settings';
} }
navigateBack() { navigateBack() {
/* this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) =>{
if (epalclass.name === "Α' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Β' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Γ' Λυκείου")
this.router.navigate(['/region-schools-select']);
return epalclass;
}, {});
return state.epalclasses;
}); */
this.router.navigate(['/region-schools-select']); this.router.navigate(['/region-schools-select']);
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment