checkbox.component.ts 2.37 KB
Newer Older
François Agneray's avatar
François Agneray committed
1
2
3
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { FormControl, FormArray } from '@angular/forms';

Tifenn Guillas's avatar
Tifenn Guillas committed
4
5
import { Criterion, SelectMultipleCriterion } from '../../../store/model';
import { Option } from '../../../../metamodel/model';
François Agneray's avatar
François Agneray committed
6
7
8
9
10
11
12
13
14
15
16

@Component({
    selector: 'app-checkbox',
    templateUrl: 'checkbox.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class CheckboxComponent {
    @Input() id: number;
    @Input() label: string;
    @Input()
    set options(options: Option[]) {
Tifenn Guillas's avatar
Tifenn Guillas committed
17
        this.optionList = options;
François Agneray's avatar
François Agneray committed
18
19
20
21
22
23
        this.setCheckboxes(options);
    }
    @Input()
    set criterion(criterion: Criterion) {
        this.getDefault(criterion);
    }
Tifenn Guillas's avatar
Tifenn Guillas committed
24
25
    @Output() addCriterion: EventEmitter<SelectMultipleCriterion> = new EventEmitter();
    @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
François Agneray's avatar
François Agneray committed
26
27

    checkboxes: FormArray;
Tifenn Guillas's avatar
Tifenn Guillas committed
28
29
    checkboxesFormControls: { value: string, control: FormControl }[];
    optionList: Option[];
François Agneray's avatar
François Agneray committed
30

Tifenn Guillas's avatar
Tifenn Guillas committed
31
    emitAdd() {
François Agneray's avatar
François Agneray committed
32
33
34
        const values: Option[] = [];
        this.checkboxes.controls.forEach((formControl, i) => {
            if (formControl.value) {
Tifenn Guillas's avatar
Tifenn Guillas committed
35
                values.push(this.optionList[i]);
François Agneray's avatar
François Agneray committed
36
37
            }
        });
Tifenn Guillas's avatar
Tifenn Guillas committed
38
39
        const cb = new SelectMultipleCriterion(this.id, values);
        this.addCriterion.emit(cb);
François Agneray's avatar
François Agneray committed
40
41
    }

Tifenn Guillas's avatar
Tifenn Guillas committed
42
43
    emitDelete() {
        this.deleteCriterion.emit(this.id);
44
45
    }

François Agneray's avatar
François Agneray committed
46
    setCheckboxes(options: Option[]) {
François Agneray's avatar
François Agneray committed
47
48
49
        this.checkboxesFormControls = [];
        this.checkboxes = new FormArray(options.map((option: Option) => {
            const control = new FormControl(false);
Tifenn Guillas's avatar
Tifenn Guillas committed
50
            this.checkboxesFormControls.push({ value: option.value, control });
François Agneray's avatar
François Agneray committed
51
            return control;
François Agneray's avatar
François Agneray committed
52
        }));
Tifenn Guillas's avatar
Tifenn Guillas committed
53
        console.log(this.checkboxesFormControls);
François Agneray's avatar
François Agneray committed
54
55
56
57
58
59
60
    }

    getDefault(criterion: Criterion): void {
        if (!criterion) {
            this.checkboxes.reset();
            this.checkboxes.enable();
        } else {
François Agneray's avatar
François Agneray committed
61
            const checkboxCriterion = criterion as SelectMultipleCriterion;
62
            checkboxCriterion.options.forEach(option => {
François Agneray's avatar
François Agneray committed
63
                this.checkboxesFormControls.find(formControl => formControl.value === option.value).control.setValue(true);
Tifenn Guillas's avatar
Tifenn Guillas committed
64
            });
François Agneray's avatar
François Agneray committed
65
66
67
68
69
70
71
72
            this.checkboxes.disable();
        }
    }

    isChecked() {
        return this.checkboxes.controls.filter(formControl => formControl.value).length > 0;
    }
}