course.fields.select.ts 2.62 KB
Newer Older
1
import { Component, OnInit } from '@angular/core';
2
import { Router } from '@angular/router';
3
import { Observable } from 'rxjs/Rx';
4 5
import { Injectable } from "@angular/core";
import { CourseFieldsActions } from '../../actions/coursefields.actions';
6
import { NgRedux, select } from '@angular-redux/store';
7
import { ICourseFields } from '../../store/coursefields/coursefields.types';
8
import { IAppState } from '../../store/store';
9 10 11 12 13 14 15 16 17 18 19 20

import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray
} from '@angular/forms';
import {AppSettings} from '../../app.settings';

@Component({
    selector: 'course-fields-select',
    template: `
Open Source Developer's avatar
commit  
Open Source Developer committed
21
    <div class="row">
22
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
commit  
Open Source Developer committed
23
    </div>
24 25
     <form [formGroup]="formGroup">
        <div formArrayName="formArray">
26
            <div *ngFor="let courseField$ of courseFields$ | async; let i=index">
27
            <div class="row">
28
            <div class="col-md-1">
29 30
                <input type="checkbox" formControlName="{{i}}">
            </div>
31
            <div class="col-md-11 pull-left">
32
                {{courseField$.name}}
33 34 35 36
            </div>
            </div>
            </div>
        </div>
37
        <div class="row" style="margin-bottom: 20px;">
Open Source Developer's avatar
UI  
Open Source Developer committed
38
        <div class="col-md-12 col-md-offset-5">
39 40
            <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>
41
            </button>
42 43
        </div>
        </div>
44
    </form>
45
<!--    <pre>{{formGroup.value | json}}</pre> -->
46 47 48
  `
})
@Injectable() export default class CourseFieldsSelect implements OnInit {
49 50
    private courseFields$: Observable<ICourseFields>;

51 52 53
    public formGroup: FormGroup;
    public cfs = new FormArray([]);

54 55 56 57
    constructor(private fb: FormBuilder,
                private _cfa: CourseFieldsActions,
                private _ngRedux: NgRedux<IAppState>,
                private router: Router) {
58 59 60 61 62 63
        this.formGroup = this.fb.group({
            formArray: this.cfs
        });
    };

    ngOnInit() {
64

65
        this._cfa.getCourseFields();
66

67
        this.courseFields$ = this._ngRedux.select(state => {
68 69 70 71
            state.courseFields.reduce(({}, courseField) =>{
                this.cfs.push(new FormControl(courseField.selected, []));
                return courseField;
            }, {});
72
            return state.courseFields;
73 74 75 76 77 78
        });

    }

    saveSelected() {
        this._cfa.saveCourseFieldsSelected(this.formGroup.value.formArray);
79
        this.router.navigate(['/region-schools-select']);
80
    }
81
}