import { Component, Input, Output, EventEmitter, ViewChild, AfterViewChecked } from "@angular/core"; import { ParamValueMode } from "jalhyd"; import { InternationalisationService } from "../../services/internationalisation/internationalisation.service"; import { NgParameter } from "../../formulaire/ngparam"; import { NgParamMinComponent } from "./ngparam-min.component"; import { NgParamMaxComponent } from "./ngparam-max.component"; import { NgParamStepComponent } from "./ngparam-step.component"; import { BaseComponent } from "../base/base.component"; import { ValueListComponent } from "./value-list.component"; @Component({ selector: "param-values", templateUrl: "./param-values.component.html", styles: [ `.btn-on { color:#505050; border: 3px solid #505050; background-color:white; text-transform: uppercase; font-size: 0.8em; }`, `.btn-off { color:white; border: 3px solid #505050; background-color:#505050; text-transform: uppercase; font-size: 0.8em; }` ] }) export class ParamValuesComponent extends BaseComponent implements AfterViewChecked { @Input("param") private _param: NgParameter; private _valueModes = []; /** * true quand les champs du composant et de ses enfants sont initialisés */ private _initCompleted = false; /** * true si la valeur min est valide */ private _validMin: boolean = false; /** * true si la valeur max est valide */ private _validMax: boolean = false; /** * true si la valeur du pas est valide */ private _validStep: boolean = false; /** * true si la liste de valeurs est valide */ private _validList: boolean = false; /** * flag signalant qu'il faut initialiser le composant ValueListComponent (par ex quand on a sélectionné le mode "liste") */ private _doInitList: boolean = false; /** * flag signalant qu'il faut initialiser les composants min/max/pas */ private _doInitMinmax: boolean = false; /** * composant de saisie du minimum */ @ViewChild(NgParamMinComponent) private _minComponent: NgParamMinComponent; /** * composant de saisie du maximum */ @ViewChild(NgParamMaxComponent) private _maxComponent: NgParamMaxComponent; /** * composant de saisie du pas de variation */ @ViewChild(NgParamStepComponent) private _stepComponent: NgParamStepComponent; /** * composant de saisie d'une liste de valeurs */ @ViewChild(ValueListComponent) private _listComponent: ValueListComponent; @Output() private onValid: EventEmitter<boolean>; constructor(private intlService: InternationalisationService) { super(); this._valueModes.push({ "value": ParamValueMode.MINMAX, "label": "Min/max" }); this._valueModes.push({ "value": ParamValueMode.LISTE, "label": "Liste" }); this.onValid = new EventEmitter(); } /** * init des champs min/max/pas */ private initMinMaxStep() { if (this.isMinMax && this._doInitMinmax) { this._doInitMinmax = false; // valeur pour min : celle déjà définie ou celle déduite de la valeur saisie let min: number = this._param.minValue; if (min == undefined) min = this._param.getValue() / 2; // valeur pour max : celle déjà définie ou celle déduite de la valeur saisie let max: number = this._param.maxValue; if (max == undefined) max = this._param.getValue() * 2; this._param.minValue = min; this._minComponent.model = this._param; this._param.maxValue = max; this._maxComponent.model = this._param; // valeur du pas let step = this._param.stepValue; if (step == undefined) step = (max - min) / 20; this._param.stepValue = step; this._stepComponent.model = this._param; this.validateAll(); this._validMin = this._minComponent.isValid; this._validMax = this._maxComponent.isValid; this._validStep = this._stepComponent.isValid; this.emitValidity(); this._initCompleted = true; } } /** * initialisation de la liste de valeurs avec celle du paramètre géré */ private initList() { if (this._doInitList && this._listComponent != undefined) { this._doInitList = false; let l = this._param.valueList; if (l == undefined) { if (this._param.isDefined) l = [this._param.getValue()]; else l = []; } this._param.valueList = l; this._listComponent.model = this._param; } } /** * revalidation de tous les composants enfants */ private validateAll() { if (this._minComponent != undefined) this._minComponent.validate(); if (this._maxComponent != undefined) this._maxComponent.validate(); if (this._stepComponent != undefined) this._stepComponent.validate(); if (this._listComponent != undefined) this._listComponent.validate(); } /** * envoi d'un événement de validité */ private emitValidity() { switch (this._param.valueMode) { case ParamValueMode.LISTE: this.onValid.emit(this._validList); break; case ParamValueMode.MINMAX: this.onValid.emit(this._validMin && this._validMax && this._validStep); break; } } /** * réception d'un événement de NgParamMinComponent */ private onMinChanged(event: any) { if (this._initCompleted) switch (event.action) { case "model": this.validateAll(); break; case "valid": this._validMin = event.value; this.emitValidity(); break; } } /** * réception d'un événement de NgParamMaxComponent */ private onMaxChanged(event: any) { if (this._initCompleted) switch (event.action) { case "model": this.validateAll(); break; case "valid": this._validMax = event.value; this.emitValidity(); break; } } /** * réception d'un événement de NgParamStepComponent */ private onStepChanged(event: any) { if (this._initCompleted) switch (event.action) { case "model": this.validateAll(); break; case "valid": this._validStep = event.value; this.emitValidity(); break; } } /** * réception d'un événement de ValueListComponent */ private onListChanged(event: any) { if (this._initCompleted) switch (event.action) { case "model": this.validateAll(); break; case "valid": this._validList = event.value; this.emitValidity(); break; } } private get uitextValeurMini() { return this.intlService.localizeText("INFO_PARAMFIELD_VALEURMINI"); } private get uitextValeurMaxi() { return this.intlService.localizeText("INFO_PARAMFIELD_VALEURMAXI"); } private get uitextPasVariation() { return this.intlService.localizeText("INFO_PARAMFIELD_PASVARIATION"); } /** * true si mode "liste de valeurs" */ private get isList(): boolean { return this._param.valueMode == ParamValueMode.LISTE; } /** * true si mode "lié" */ private get isLink(): boolean { return this._param.valueMode == ParamValueMode.LINK; } /** * true si mode "min/max/pas" */ private get isMinMax(): boolean { return this._param.valueMode == ParamValueMode.MINMAX; } /** * valeur courante affichée dans le select min-max/list */ private get currentModeSelectLabel(): string { return ParamValueMode[this._param.valueMode]; } /** * réception d'un événement du menu "min/max/liste" */ private onSelectValueMode(event: any) { const next = event.target.value; switch (next) { // on a sélectionné "min/max" ? case ParamValueMode.MINMAX: this._doInitMinmax = true; break; // on a sélectionné "liste" ? case ParamValueMode.LISTE: this._doInitList = true; break; default: throw "valeur " + next + " de ParamValueMode non prise en charge"; } this._param.valueMode = next; } /** * appelé quand les @Input changent */ ngOnChanges() { if (this.isMinMax) this._doInitMinmax = true; else this._doInitList = true; } ngAfterViewChecked() { super.ngAfterViewChecked(); this.initMinMaxStep(); this.initList(); } }