fieldset-container.component.ts

import { Component, Input, Output, EventEmitter, QueryList, ViewChildren, DoCheck } from "@angular/core";

import { FieldsetContainer } from "../../formulaire/fieldset-container";
import { SelectEntry } from "../../formulaire/select-entry";
import { FieldSet } from "../../formulaire/fieldset";
import { FieldSetComponent } from "../field-set/field-set.component";

@Component({
    selector: "fieldset-container",
    templateUrl: "./fieldset-container.component.html"
})
export class FieldsetContainerComponent implements DoCheck {
    @Input("container")
    private _container: FieldsetContainer;

    /**
     * liste des composants FieldSet enfants
     */
    @ViewChildren(FieldSetComponent)
    private _fieldsetComponents: QueryList<FieldSetComponent>;

    /**
     * flag de validité des FieldSet enfants
     */
    private _isValid: boolean = false;

    private get title(): string {
        if (this._container == undefined)
            return undefined;
        return this._container.label;
    }

    private get fieldsets() {
        return this._container.fieldsets;
    }

    private addStructure() {
        this._container.addFromTemplate(this._container.templates[0].id);
    }

    /*
     * gestion des événements clic sur les radios :
     * réception d'un message du composant enfant (field-set)
     * cf. https://angular.io/guide/component-interaction#parent-listens-for-child-event
     */
    private onRadioClick(info: any) {
        // on renvoie l'info au parent
        this.onRadio.emit(info);
    }

    /**
     * événément de changement d'état d'un radio
     */
    @Output()
    private onRadio = new EventEmitter<any>();

    public ngDoCheck() {
        this.updateValidity();
    }

    /**
    * calcul de la validité de tous les FieldSet de la vue
    */
    private updateValidity() {
        this._isValid = false;

        if (this._fieldsetComponents != undefined)
            this._isValid = this._fieldsetComponents.reduce(
                // callback
                (
                    // accumulator (valeur précédente du résultat)
                    acc,
                    // currentValue (élément courant dans le tableau)
                    fielset,
                    // currentIndex (indice courant dans le tableau)
                    currIndex,
                    // array (tableau parcouru)
                    array
                ) => {
                    return acc && fielset.isValid;
                }
                // valeur initiale
                , this._fieldsetComponents.length > 0);

        this.validChange.emit();
    }

    public get isValid() {
        return this._isValid;
    }

    /**
     * événément de changement de validité
     */
    @Output()
    private validChange = new EventEmitter();

    /**
     * réception d'un événement de validité de FieldSet
     */
    private onFieldsetValid() {
        this.updateValidity();
    }
}