dialog-edit-param-values.component.ts 13.50 KiB
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Inject, Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { I18nService } from "../../services/internationalisation/internationalisation.service";
import { NgParameter } from "../../formulaire/ngparam";
import { ParamValueMode } from "jalhyd";
import { sprintf } from "sprintf-js";
import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
@Component({
    selector: "dialog-edit-param-values",
    templateUrl: "dialog-edit-param-values.component.html",
    styleUrls: ["dialog-edit-param-values.component.scss"]
export class DialogEditParamValuesComponent implements OnInit {
    /** the related parameter to change the "variable" value of */
    public param: NgParameter;
    /** available value modes (min / max, list) */
    public valueModes: { value: ParamValueMode; label: string; }[];
    /** available decimal separators */
    public decimalSeparators: { label: string; value: string; }[];
    /** current decimal separator */
    public decimalSeparator: string;
    public valuesListForm: FormGroup;
    /** when true, shows the values chart instead of the edit form */
    public viewChart = false;
    // chart config
    public chartData = {};
    public chartOptions;
    constructor(
        public dialogRef: MatDialogRef<DialogEditParamValuesComponent>,
        private intlService: I18nService,
        private appSetupService: ApplicationSetupService,
        private fb: FormBuilder,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {
        this.param = data.param;
        // an explicit ReactiveForm is required for file input component
        const initialValue = (this.param.valueMode === ParamValueMode.LISTE ? this.valuesList : "");
        this.valuesListForm = this.fb.group({
            file: [""],
            valuesList: [ initialValue,
                    Validators.required
                    // Validators.pattern(new RegExp(this.valuesListPattern)) // behaves weirdly
        });
        // available options for select controls
        this.valueModes = [
                value: ParamValueMode.MINMAX,
                label: this.intlService.localizeText("INFO_PARAMMODE_MINMAX")
                value: ParamValueMode.LISTE,
                label: this.intlService.localizeText("INFO_PARAMMODE_LIST")
        this.decimalSeparators = [
                label: this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_POINT"),
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
value: "." }, { label: this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_VIRGULE"), value: "," } ]; this.decimalSeparator = this.decimalSeparators[0].value; // chart configuration const nDigits = this.appSetupService.displayDigits; this.chartOptions = { responsive: true, maintainAspectRatio: true, animation: { duration: 0 }, legend: { display: false }, scales: { xAxes: [{ type: "linear", position: "bottom", ticks: { precision: nDigits } }], yAxes: [{ type: "linear", position: "left", ticks: { precision: nDigits } }] }, tooltips: { callbacks: { label: function(tooltipItem) { return Number(tooltipItem.yLabel).toFixed(nDigits); } } } }; } // proxy to model values public get minValue() { return this.param.minValue; } public set minValue(v) { this.param.setMinValue(this, v); } public get maxValue() { return this.param.maxValue; } public set maxValue(v) { this.param.setMaxValue(this, v); } public get stepValue() { return this.param.stepValue; } public set stepValue(v) { this.param.setStepValue(this, v);
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
} /** * regular expression pattern for values list validation (depends on decimal separator) */ public get valuesListPattern() { // standard pattern for decimal separator "." : ^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$ const escapedDecimalSeparator = (this.decimalSeparator === "." ? "\\." : this.decimalSeparator); const numberSubPattern = `-?([0-9]*${escapedDecimalSeparator})?([0-9]+[Ee]-?)?[0-9]+`; const re = `^${numberSubPattern}(${this.separatorPattern}${numberSubPattern})*$`; return re; } /** * accepted separator: everything but [numbers, E, +, -, decimal separator], any length */ public get separatorPattern() { return "[^0-9-+Ee" + this.decimalSeparator + "]+"; } public get selectedValueMode() { return this.param.valueMode; } public set selectedValueMode(v) { this.param.valueMode = v; } public get isMinMax() { return this.param.valueMode === ParamValueMode.MINMAX; } public get isListe() { return this.param.valueMode === ParamValueMode.LISTE; } /** * renders model's numbers list as text values list (semicolon separated) */ public get valuesList() { return (this.param.valueList || []).join(";"); } /** * injects text values list into model's numbers list */ public set valuesList(list: string) { const vals = []; const separatorRE = new RegExp(this.separatorPattern); const parts = list.trim().split(separatorRE); parts.forEach((e) => { if (e.length > 0) { // ensure decimal separator is "." for Number() if (this.decimalSeparator !== ".") { const re = new RegExp(this.decimalSeparator, "g"); // @TODO remove "g" ? e = e.replace(re, "."); } vals.push(Number(e)); } }); this.param.setValueList(this, vals); } public toggleViewChart() { // validate list values before switching views ? if (! this.viewChart && this.param.valueMode === ParamValueMode.LISTE) { if (this.onValidate(false)) { // toggle this.viewChart = ! this.viewChart; }