schools-orders fixes, UI enhancements

parent 43d5c791
...@@ -59,11 +59,11 @@ export class RegionSchoolsActions { ...@@ -59,11 +59,11 @@ export class RegionSchoolsActions {
}); });
}; };
saveRegionSchoolsOrder = (regionSchoolsOrder) => { saveRegionSchoolsOrder = (selectedSchools) => {
return this._ngRedux.dispatch({ return this._ngRedux.dispatch({
type: REGIONSCHOOLS_ORDER_SAVE, type: REGIONSCHOOLS_ORDER_SAVE,
payload: { payload: {
regionSchoolsOrder selectedSchools
} }
}); });
}; };
......
...@@ -67,7 +67,7 @@ import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields ...@@ -67,7 +67,7 @@ import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields
<div *ngFor="let epal$ of selectedSchools$ | async; let i=index; let isOdd=odd; let isEven=even" > <div *ngFor="let epal$ of selectedSchools$ | async; let i=index; let isOdd=odd; let isEven=even" >
<li class="list-group-item" [class.oddout]="isOdd" [class.evenout]="isEven"> <li class="list-group-item" [class.oddout]="isOdd" [class.evenout]="isEven">
<b>({{ (i+1) }}):</b> {{epal$.epal_name}} <span class="roundedNumber">{{(i+1)}}</span>&nbsp;&nbsp;{{epal$.epal_name}}
</li> </li>
</div> </div>
</ul> </ul>
...@@ -158,7 +158,7 @@ import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields ...@@ -158,7 +158,7 @@ import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields
this.numSelectedSchools = numsel; this.numSelectedSchools = numsel;
this.numSelectedOrder = numsel2; this.numSelectedOrder = numsel2;
this.selectedSchools$.next(selectedSchools.sort(this.compareSchools)); this.selectedSchools$.next(selectedSchools.sort(this.compareSchools));
this.selectedSchools$.next(selectedSchools); // this.selectedSchools$.next(selectedSchools);
return state.regions; return state.regions;
}).subscribe(this.regions$); }).subscribe(this.regions$);
......
...@@ -4,7 +4,7 @@ import { BehaviorSubject, Subscription } from 'rxjs/Rx'; ...@@ -4,7 +4,7 @@ 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, IRegionSchool } from '../../store/regionschools/regionschools.types';
import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state'; import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
import { IAppState } from '../../store/store'; import { IAppState } from '../../store/store';
import {AppSettings} from '../../app.settings'; import {AppSettings} from '../../app.settings';
...@@ -12,19 +12,19 @@ import {AppSettings} from '../../app.settings'; ...@@ -12,19 +12,19 @@ import {AppSettings} from '../../app.settings';
@Component({ @Component({
selector: 'schools-order-select', selector: 'schools-order-select',
template: ` template: `
<div class = "loading" *ngIf="(regions$ | async).size === 0"> <div class = "loading" *ngIf="(selectedSchools$ | async).length === 0 || (regions$ | async).size === 0">
</div> </div>
<p style="margin-top: 20px; line-height: 2em;" *ngIf = "(numSelected$ | async) === 1" >Έχετε επιλέξει το παρακάτω σχολείο. Εάν συμφωνείτε με την επιλογή σας <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(selectedSchools$ | async).length === 1" >Έχετε επιλέξει το παρακάτω σχολείο. Εάν συμφωνείτε με την επιλογή σας
πατήστε Συνέχεια, διαφορετικά μπορείτε να τροποποιήστε τις επιλογές σας επιστρέφοντας στην προηγούμενη οθόνη από το αριστερό βέλος κάτω αριστερά.</p> πατήστε Συνέχεια, διαφορετικά μπορείτε να τροποποιήστε τις επιλογές σας επιστρέφοντας στην προηγούμενη οθόνη από το αριστερό βέλος κάτω αριστερά.</p>
<p style="margin-top: 20px; line-height: 2em;" *ngIf = "(numSelected$ | async) > 1" >Έχετε επιλέξει {{numSelected}} σχολεία. <p style="margin-top: 20px; line-height: 2em;" *ngIf = "(selectedSchools$ | async).length > 1" >Έχετε επιλέξει {{(selectedSchools$ | async).length}} σχολεία.
Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα βέλη δεξιά από τα ονόματα των σχολείων. Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα βέλη δεξιά από τα ονόματα των σχολείων.
Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p> Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>
<ul class="list-group main-view" style="margin-top: 50px; margin-bottom: 50px;"> <ul class="list-group main-view" style="margin-top: 50px; margin-bottom: 50px;">
<div *ngFor="let schoolField$ of schoolNames$ | async; let i=index; let isOdd=odd; let isEven=even"> <div *ngFor="let selectedSchool$ of selectedSchools$ | async; let i=index; let isOdd=odd; let isEven=even">
<li class="list-group-item" [class.oddout]="isOdd" [class.evenout]="isEven"> <li class="list-group-item" [class.oddout]="isOdd" [class.evenout]="isEven">
<b>({{(i+1)}}):</b> {{schoolField$}} <span class="roundedNumber">{{(i+1)}}</span>&nbsp;&nbsp;{{selectedSchool$.epal_name}}
<i (click)="changeOrder(i,'up')" *ngIf = "i !== 0" class="fa fa-arrow-circle-up isclickable pull-right" style="font-size: 2em;"></i> <i (click)="changeOrder(i)" *ngIf = "i !== 0" class="fa fa-arrow-circle-up isclickable pull-right" style="font-size: 2em;"></i>
</li> </li>
</div> </div>
</ul> </ul>
...@@ -44,67 +44,43 @@ import {AppSettings} from '../../app.settings'; ...@@ -44,67 +44,43 @@ import {AppSettings} from '../../app.settings';
}) })
@Injectable() export default class SchoolsOrderSelect implements OnInit, OnDestroy { @Injectable() export default class SchoolsOrderSelect implements OnInit, OnDestroy {
// public formGroup: FormGroup; // public formGroup: FormGroup;
private numSelected$: BehaviorSubject<number> = new BehaviorSubject(0);
private schoolNames$: BehaviorSubject<Array<string>> = new BehaviorSubject(Array());
private schoolSelectedIds$: BehaviorSubject<Array<number>> = new BehaviorSubject(Array());
private schoolArrayOrders$: BehaviorSubject<Array<number>> = new BehaviorSubject(Array());
private regions$: BehaviorSubject<IRegions>; private regions$: BehaviorSubject<IRegions>;
private regionsSub: Subscription; private regionsSub: Subscription;
private selectedSchools$: BehaviorSubject<Array<IRegionSchool>> = new BehaviorSubject(Array());
constructor(private _cfa: RegionSchoolsActions, constructor(private _cfa: RegionSchoolsActions,
private _ngRedux: NgRedux<IAppState>, private _ngRedux: NgRedux<IAppState>,
private router: Router) { private router: Router) {
this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE); this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
}; };
ngOnInit() { ngOnInit() {
this.regionsSub = this._ngRedux.select(state => { this.regionsSub = this._ngRedux.select(state => {
let numSelected = 0; let selectedSchools = Array<IRegionSchool>();
let idx = -1;
let nm = 0; state.regions.reduce((prevRegion, region) => {
let schoolNames = new Array(); region.epals.reduce((prevEpal, epal) => {
let schoolSelectedIds = new Array(); if (epal.selected === true) {
let schoolArrayOrders = new Array(); selectedSchools.push(epal);
let maxOrderId = 3;
}
state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevEpal, epal) =>{ return epal;
++idx;
if (epal.selected === true) {
numSelected++;
if (epal.order_id === 0) {
schoolArrayOrders[idx] = maxOrderId;
maxOrderId--;
schoolNames[nm] = epal.epal_name;
schoolSelectedIds[nm] = idx;
}
else {
schoolArrayOrders[nm] = epal.order_id;
schoolNames[epal.order_id - 1] = epal.epal_name;
schoolSelectedIds[epal.order_id - 1] = idx;
}
nm++;
} 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; return region;
}).subscribe(this.regions$); }, {});
selectedSchools.sort(this.compareSchools);
selectedSchools[0].order_id = 1;
selectedSchools[1].order_id = 2;
selectedSchools[2].order_id = 3;
this.selectedSchools$.next(selectedSchools);
return state.regions;
}).subscribe(this.regions$);
} }
...@@ -115,32 +91,37 @@ import {AppSettings} from '../../app.settings'; ...@@ -115,32 +91,37 @@ import {AppSettings} from '../../app.settings';
if (this.regions$) this.regions$.unsubscribe(); if (this.regions$) this.regions$.unsubscribe();
} }
changeOrder(i, orient) { compareSchools(a: IRegionSchool, b: IRegionSchool) {
let sn = this.schoolNames$.getValue(); if (a.order_id < b.order_id)
let ssi = this.schoolSelectedIds$.getValue(); return -1;
let sao = this.schoolArrayOrders$.getValue(); if (a.order_id > b.order_id)
let ind = 1; return 1;
if (orient === "up") return 0;
ind = -1;
[ sn[i], sn[i+ind] ] = [ sn[i+ind], sn[i] ];
[ ssi[i], ssi[i+ind] ] = [ ssi[i+ind], ssi[i] ];
this.saveSelected(ssi, sao);
} }
saveSelected(ssi, sao) { changeOrder(i) {
for (let i=0; i < ssi.length; i++) let selectedSchools = Array<IRegionSchool>();
sao[ssi[i]] = i+1; selectedSchools = this.selectedSchools$.getValue();
this._cfa.saveRegionSchoolsOrder(sao); if (i === 1) {
selectedSchools[0].order_id = 2;
selectedSchools[1].order_id = 1;
selectedSchools[2].order_id = 3;
}
else if (i === 2) {
selectedSchools[0].order_id = 1;
selectedSchools[1].order_id = 3;
selectedSchools[2].order_id = 2;
}
this._cfa.saveRegionSchoolsOrder(selectedSchools);
} }
navigateToStudentForm() { navigateToStudentForm() {
this._cfa.saveRegionSchoolsOrder(this.selectedSchools$.getValue());
this.router.navigate(['/student-application-form-main']); this.router.navigate(['/student-application-form-main']);
} }
navigateBack() { navigateBack() {
this._cfa.saveRegionSchoolsOrder(this.selectedSchools$.getValue());
this.router.navigate(['/region-schools-select']); this.router.navigate(['/region-schools-select']);
} }
} }
...@@ -175,3 +175,19 @@ ...@@ -175,3 +175,19 @@
.selectedout { .selectedout {
background-color: #fd9665; background-color: #fd9665;
} }
.roundedNumber{
width: 2em;
background-color: coral;
color: white;
font-weight: bold;
border:1px;
border-radius: 10px;
-webkit-border-radius: 10px;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
padding: 0px 10px 0px 10px;
text-align: center;
}
...@@ -35,18 +35,33 @@ export function regionSchoolsReducer(state: IRegions = REGION_SCHOOLS_INITIAL_ST ...@@ -35,18 +35,33 @@ export function regionSchoolsReducer(state: IRegions = REGION_SCHOOLS_INITIAL_ST
}); });
return state; return state;
case REGIONSCHOOLS_ORDER_SAVE: case REGIONSCHOOLS_ORDER_SAVE:
let regionsWithOrders = Array<IRegion>(); let ind2=0;
let idx=0, k = 0; state.forEach(region => {
state.forEach(region => { for(let i=0; i<region.epals.length; i++){
regionsWithOrders.push(<IRegion>{region_id: region.region_id, region_name: region.region_name, epals: Array<IRegionSchool>()}); if (region.epals[i].globalIndex === action.payload.selectedSchools[0].globalIndex) {
region.epals.forEach(epal => { region.epals[i].order_id = action.payload.selectedSchools[0].order_id
regionsWithOrders[idx].epals.push(<IRegionSchool>{epal_id: epal.epal_id, epal_name: epal.epal_name, epal_special_case: epal.epal_special_case, globalIndex: epal.globalIndex, selected: epal.selected, order_id: action.payload.regionSchoolsOrder[k]}); return state.withMutations(function (list) {
k++; list.set(ind2++, region);
}) });
idx++; }
}); if (region.epals[i].globalIndex === action.payload.selectedSchools[1].globalIndex) {
return Seq(regionsWithOrders).map(n => n).toList(); region.epals[i].order_id = action.payload.selectedSchools[1].order_id
return state.withMutations(function (list) {
list.set(ind2++, region);
});
}
if (region.epals[i].globalIndex === action.payload.selectedSchools[2].globalIndex) {
region.epals[i].order_id = action.payload.selectedSchools[2].order_id
return state.withMutations(function (list) {
list.set(ind2++, region);
});
}
}
ind2++;
});
return state;
case REGIONSCHOOLS_INIT: case REGIONSCHOOLS_INIT:
return REGION_SCHOOLS_INITIAL_STATE; return REGION_SCHOOLS_INITIAL_STATE;
......
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