From 3f7817aef14a80dfd8a2c848df3af7a1afddd3d6 Mon Sep 17 00:00:00 2001
From: Jean-Pascal <jean-pascal.aubry@inrae.fr>
Date: Mon, 4 Dec 2023 17:34:52 +0100
Subject: [PATCH] fix: implements select field line component and field set
component to enable or disable calculate button when species are selected
or not Refs #637
---
.../field-set/field-set.component.html | 2 +-
.../field-set/field-set.component.ts | 8 ++++
.../generic-select.component.html | 4 +-
.../results-chart/chart-type.component.ts | 9 ++++-
.../select-field-line.component.ts | 37 +++++++++++++++++--
5 files changed, 52 insertions(+), 8 deletions(-)
diff --git a/src/app/components/field-set/field-set.component.html b/src/app/components/field-set/field-set.component.html
index 88654611e..381115b09 100644
--- a/src/app/components/field-set/field-set.component.html
+++ b/src/app/components/field-set/field-set.component.html
@@ -45,7 +45,7 @@
(inputChange)=onInputChange($event) (tabPressed)="onTabPressed($event)">
</param-field-line>
- <select-field-line *ngIf="isSelectField(p)" [_select]=p>
+ <select-field-line *ngIf="isSelectField(p)" [_select]=p (valueChanged)=onSelectLineChanged($event)>
</select-field-line>
</ng-template>
</mat-card-content>
diff --git a/src/app/components/field-set/field-set.component.ts b/src/app/components/field-set/field-set.component.ts
index 889b28d60..16298d652 100644
--- a/src/app/components/field-set/field-set.component.ts
+++ b/src/app/components/field-set/field-set.component.ts
@@ -268,6 +268,14 @@ export class FieldSetComponent implements DoCheck {
this.updateValidity(true);
}
+ /**
+ * réception d'un événement de validité de SelectFieldLineComponent
+ */
+ public onSelectLineChanged(value:any) {
+ this.updateValidity(true);
+ }
+
+
/**
* réception d'un événement de changement de valeur d'un input
*/
diff --git a/src/app/components/generic-select/generic-select.component.html b/src/app/components/generic-select/generic-select.component.html
index 0a75a714e..86622ddf0 100644
--- a/src/app/components/generic-select/generic-select.component.html
+++ b/src/app/components/generic-select/generic-select.component.html
@@ -1,5 +1,5 @@
<mat-form-field>
- <mat-select [id]="selectId" [placeholder]="label" [(value)]="selectedValue" [multiple]="isMultiple">
+ <mat-select [id]="selectId" [placeholder]="label" [(value)]="selectedValue" [multiple]="isMultiple" (selectionChange) ="onValueChange($event)">
<mat-select-trigger *ngIf="isMultiple">
{{ selectedValue && selectedValue[0] ? entryLabel(selectedValue[0]) : '' }}
<span *ngIf="selectedValue?.length > 1" class="multiple-selection-label">
@@ -11,7 +11,7 @@
</mat-option>
</mat-select>
<button mat-button *ngIf="showClearButton" matSuffix mat-icon-button aria-label="Clear"
- (click)="selectedValue=[]; $event.stopPropagation()">
+ (click)="cancelValue($event)">
<mat-icon>close</mat-icon>
</button>
<div *ngIf="enableHelpButton" class="overlap-select">
diff --git a/src/app/components/results-chart/chart-type.component.ts b/src/app/components/results-chart/chart-type.component.ts
index 123657c51..f8a7be771 100644
--- a/src/app/components/results-chart/chart-type.component.ts
+++ b/src/app/components/results-chart/chart-type.component.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, EventEmitter, Output } from "@angular/core";
import { IObservable, Observer } from "jalhyd";
import { I18nService } from "../../services/internationalisation.service";
import { ChartType } from "../../results/chart-type";
@@ -16,6 +16,9 @@ import { decodeHtml } from "../../util/util";
export class ChartTypeSelectComponent implements IObservable {
private _select: SelectFieldChartType;
+ @Output()
+ private valueChanged = new EventEmitter();
+
constructor(private intlService: I18nService) {
this._select = new SelectFieldChartType(undefined, this.intlService);
this._select.afterParseConfig(); // fill entries, set default value
@@ -65,6 +68,10 @@ export class ChartTypeSelectComponent implements IObservable {
return this._select.multiple;
}
+ public onValueChange($event) {
+ this.selectedValue = $event.value
+ this.valueChanged.emit(this.selectedValue)
+ }
// interface IObservable
/**
diff --git a/src/app/components/select-field-line/select-field-line.component.ts b/src/app/components/select-field-line/select-field-line.component.ts
index 7c4b067ef..7ca5a451d 100644
--- a/src/app/components/select-field-line/select-field-line.component.ts
+++ b/src/app/components/select-field-line/select-field-line.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, DoCheck, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { SelectField } from "../../formulaire/elements/select/select-field";
import { SelectEntry } from "../../formulaire/elements/select/select-entry";
@@ -21,17 +21,23 @@ export class SelectFieldLineComponent implements OnInit {
@Input()
private _select: SelectField;
+ /**
+ * événément de changement de valeur d'un select
+ */
+ @Output()
+ private valueChanged = new EventEmitter();
+
public constructor(
private i18nService: I18nService,
private appSetupService: ApplicationSetupService
) {}
-
+
public get selectId() {
return this._select.id;
}
public get isMultiple(): boolean {
- return this._select.multiple;
+ return this._select.multiple;
}
public get entries(): SelectEntry[] {
@@ -53,10 +59,33 @@ export class SelectFieldLineComponent implements OnInit {
return this._select.getValue();
}
+ public onValueChange($event) {
+ this.selectedValue = $event.value
+ this.valueChanged.emit(this.selectedValue)
+ }
+
+ public cancelValue($event): any {
+ this.selectedValue = [];
+ this.valueChanged.emit(this.selectedValue)
+ // this.validChange.emit(false)
+ $event.stopPropagation();
+ }
+
public get isValid(): boolean {
- return (this._select.getValue() !== undefined);
+ if(this._select.getValue() !== undefined) {
+ if(Object.keys(this._select.getValue()).length > 0) {
+ return true;
+ }
+ else {
+ return false
+ }
+ }
+ else {
+ return false
+ }
}
+
public set selectedValue(v: SelectEntry | SelectEntry[]) {
this._select.setValue(v);
}
--
GitLab