topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix(rule-settings-dialog): disable Save button until form is modified 

The Save button was always enabled on open, even before a user interacted
with the threshold sliders. Migrated from ngModel/FormsModule to
FormGroup/ReactiveFormsModule so the form dirty state can be tracked.
The Save button is now disabled when the form is pristine (no changes made).
pull/6741/head
Ai-chan-0411 (藍) 7 days ago
parent
6d4cae3123
commit
06001424ce
Failed to extract signature
2 changed files with 147 additions and 136 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
  2. 265
      apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

18
apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
View File

@ -3,7 +3,7 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
import { CommonModule } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import {
MAT_DIALOG_DATA,
@ -17,21 +17,31 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
@Component({
imports: [
CommonModule,
FormsModule,
GfValueComponent,
MatButtonModule,
MatDialogModule,
MatSliderModule
MatSliderModule,
ReactiveFormsModule
],
selector: 'gf-rule-settings-dialog',
styleUrls: ['./rule-settings-dialog.scss'],
templateUrl: './rule-settings-dialog.html'
})
export class GfRuleSettingsDialogComponent {
public settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
public settingsForm = new FormGroup({
thresholdMax: new FormControl(this.data.settings?.thresholdMax ?? null),
thresholdMin: new FormControl(this.data.settings?.thresholdMin ?? null)
});
public constructor(
@Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
) {}
public onSave() {
this.dialogRef.close({
...this.data.settings,
...this.settingsForm.value
});
}
}

265
apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
View File

@ -1,138 +1,139 @@
<div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
<div class="py-3" mat-dialog-content>
@if (
data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
) {
<div class="w-100">
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold range</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.settings.thresholdMin"
/>
<span class="mx-1">-</span>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.settings.thresholdMax"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<mat-slider
class="flex-grow-1"
[max]="data.rule.configuration.threshold.max"
[min]="data.rule.configuration.threshold.min"
[step]="data.rule.configuration.threshold.step"
>
<input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
<input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
<form [formGroup]="settingsForm">
<div class="py-3" mat-dialog-content>
@if (
data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
) {
<div class="w-100">
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold range</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="settingsForm.controls.thresholdMin.value"
/>
<span class="mx-1">-</span>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="settingsForm.controls.thresholdMax.value"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<mat-slider
class="flex-grow-1"
[max]="data.rule.configuration.threshold.max"
[min]="data.rule.configuration.threshold.min"
[step]="data.rule.configuration.threshold.step"
>
<input formControlName="thresholdMin" matSliderStartThumb />
<input formControlName="thresholdMax" matSliderEndThumb />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
</div>
</div>
</div>
} @else {
<div
class="w-100"
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
>
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold Min</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.settings.thresholdMin"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<mat-slider
class="flex-grow-1"
name="thresholdMin"
[max]="data.rule.configuration.threshold.max"
[min]="data.rule.configuration.threshold.min"
[step]="data.rule.configuration.threshold.step"
>
<input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
} @else {
<div
class="w-100"
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
>
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold Min</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="settingsForm.controls.thresholdMin.value"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<mat-slider
class="flex-grow-1"
[max]="data.rule.configuration.threshold.max"
[min]="data.rule.configuration.threshold.min"
[step]="data.rule.configuration.threshold.step"
>
<input formControlName="thresholdMin" matSliderThumb />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
</div>
</div>
</div>
<div
class="w-100"
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
>
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold Max</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.settings.thresholdMax"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<mat-slider
class="flex-grow-1"
name="thresholdMax"
[max]="data.rule.configuration.threshold.max"
[min]="data.rule.configuration.threshold.min"
[step]="data.rule.configuration.threshold.step"
>
<input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
<div
class="w-100"
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
>
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold Max</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="settingsForm.controls.thresholdMax.value"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<mat-slider
class="flex-grow-1"
[max]="data.rule.configuration.threshold.max"
[min]="data.rule.configuration.threshold.min"
[step]="data.rule.configuration.threshold.step"
>
<input formControlName="thresholdMax" matSliderThumb />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
</div>
</div>
</div>
}
</div>
}
</div>
<div align="end" mat-dialog-actions>
<button i18n mat-button (click)="dialogRef.close()">Close</button>
<button
color="primary"
mat-flat-button
(click)="dialogRef.close(data.settings)"
>
<ng-container i18n>Save</ng-container>
</button>
</div>
<div align="end" mat-dialog-actions>
<button i18n mat-button (click)="dialogRef.close()">Close</button>
<button
color="primary"
mat-flat-button
[disabled]="settingsForm.pristine"
(click)="onSave()"
>
<ng-container i18n>Save</ng-container>
</button>
</div>
</form>

Write Preview
Loading…
Cancel
Save