MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

handle visibility rules while value changes

This commit is contained in:
amentis 2024-07-02 16:32:27 +03:00
parent 9ec2ba3081
commit 6689722799
5 changed files with 118 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/radio-box/description-template-editor-radio-box-field.component.html
View File

@ -25,7 +25,7 @@
</mat-form-field>
<mat-form-field class="col">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-VALUE' | translate}}</mat-label>
<input matInput type="string" [formControl]="option.get('value')" required="true">
<input matInput type="string" [formControl]="option.get('value')" required="true" (change)="applyNewVisibilityValueListener()">
<mat-error *ngIf="option.get('value').hasError('backendError')">{{option.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="option.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>

56
dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/radio-box/description-template-editor-radio-box-field.component.ts
View File

@ -1,20 +1,57 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { DescriptionTemplateRadioBoxDataEditorModel, DescriptionTemplateRadioBoxOptionEditorModel } from '../../../description-template-editor.model';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
import { BaseComponent } from '@common/base/base.component';
@Component({
selector: 'app-description-template-editor-radio-box-field-component',
styleUrls: ['./description-template-editor-radio-box-field.component.scss'],
templateUrl: './description-template-editor-radio-box-field.component.html'
})
export class DescriptionTemplateEditorRadioBoxFieldComponent implements OnInit {
export class DescriptionTemplateEditorRadioBoxFieldComponent extends BaseComponent implements OnInit {
@Input() form: UntypedFormGroup;
@Input() validationErrorModel: ValidationErrorModel;
@Input() validationRootPath: string;
ngOnInit() {
this.applyNewVisibilityValueListener();
}
ngOnChanges(changes: SimpleChanges) {
this.applyNewVisibilityValueListener();
}
applyNewVisibilityValueListener() {
(this.form.get('data').get('options') as UntypedFormArray).controls?.forEach(
(option, index) => {
let oldValue = option.get('value').value || null;
option.get('value').valueChanges
.pipe(takeUntil(this._destroyed), debounceTime(200), distinctUntilChanged())
.subscribe(newValue => {
if (newValue) {
(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
(visibilityRule, index) => {
if (visibilityRule.get('textValue').value == oldValue){
setTimeout( () => {
if (newValue == null){
visibilityRule.get('textValue').setValue(null);
} else {
visibilityRule.get('textValue').setValue(newValue);
}
visibilityRule.updateValueAndValidity();
oldValue = newValue;
}, 100);
}
}
)
}
});
}
)
}
addNewRow() {
@ -23,10 +60,25 @@ export class DescriptionTemplateEditorRadioBoxFieldComponent implements OnInit {
if (!selectOptionsArray) { (<UntypedFormGroup>this.form.get('data')).addControl('options', new UntypedFormBuilder().array([])); }
selectOptionsArray.push(radioListOptions.buildForm({rootPath: this.validationRootPath + 'data.options[' + selectOptionsArray.length + '].'}));
this.applyNewVisibilityValueListener();
}
deleteRow(intex: number) {
if (this.form.get('data').get('options')) {
const control = (this.form.get('data').get('options') as UntypedFormArray).at(intex) as UntypedFormGroup;
if (control && control.get('value').value != null){
(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
(visibilityRule, index) => {
if (visibilityRule.get('textValue').value == control.get('value').value){
setTimeout( () => {
visibilityRule.get('textValue').setValue(null);
visibilityRule.updateValueAndValidity();
}, 100);
}
}
);
}
(<UntypedFormArray>this.form.get('data').get('options')).removeAt(intex);
DescriptionTemplateRadioBoxDataEditorModel.reapplyRadioBoxValidators({

2
dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/select/description-template-editor-select-field.component.html
View File

@ -28,7 +28,7 @@
</mat-form-field>
<mat-form-field class="col">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-SELECT-VALUE' | translate}}</mat-label>
<input matInput [formControl]="form.get('data').get('options').get(''+i).get('value')">
<input matInput [formControl]="form.get('data').get('options').get(''+i).get('value')" (change)="applyNewVisibilityValueListener()">
<mat-error *ngIf="form.get('data').get('options').get(''+i).get('value').hasError('backendError')">{{form.get('data').get('options').get(''+i).get('value').getError('backendError').message}}</mat-error>
</mat-form-field>
<button mat-icon-button class="col-auto" (click)="deleteRow(i)" type="button" [disabled]="this.form.disabled">

52
dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/select/description-template-editor-select-field.component.ts
View File

@ -1,30 +1,78 @@
import { Component, Input, OnInit } from '@angular/core';
import { ChangeDetectorRef, Component, Input, OnInit, SimpleChanges } from '@angular/core';
import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
import { DescriptionTemplateSelectDataEditorModel, DescriptionTemplateSelectOptionEditorModel } from '../../../description-template-editor.model';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
import { BaseComponent } from '@common/base/base.component';
@Component({
selector: 'app-description-template-editor-select-field-component',
styleUrls: ['./description-template-editor-select-field.component.scss'],
templateUrl: './description-template-editor-select-field.component.html'
})
export class DescriptionTemplateEditorSelectFieldComponent implements OnInit {
export class DescriptionTemplateEditorSelectFieldComponent extends BaseComponent implements OnInit {
@Input() form: UntypedFormGroup;
@Input() validationErrorModel: ValidationErrorModel;
@Input() validationRootPath: string;
ngOnInit() {
this.applyNewVisibilityValueListener();
}
ngOnChanges(changes: SimpleChanges) {
this.applyNewVisibilityValueListener();
}
applyNewVisibilityValueListener() {
(this.form.get('data').get('options') as UntypedFormArray).controls?.forEach(
(option, index) => {
let oldValue = option.get('value').value || null;
option.get('value').valueChanges
.pipe(takeUntil(this._destroyed), debounceTime(200), distinctUntilChanged())
.subscribe(newValue => {
if (newValue) {
(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
(visibilityRule, index) => {
if (visibilityRule.get('textValue').value == oldValue){
setTimeout( () => {
visibilityRule.get('textValue').setValue(newValue);
visibilityRule.updateValueAndValidity();
oldValue = newValue;
}, 100);
}
}
)
}
});
}
)
}
addNewRow() {
const selectOptions: DescriptionTemplateSelectOptionEditorModel = new DescriptionTemplateSelectOptionEditorModel(this.validationErrorModel);
const selectOptionsArray = this.form.get('data').get('options') as UntypedFormArray;
selectOptionsArray.push(selectOptions.buildForm({rootPath: this.validationRootPath + 'data.options[' + selectOptionsArray.length + '].'}));
this.applyNewVisibilityValueListener();
}
deleteRow(intex: number) {
if (this.form.get('data').get('options')) {
const control = (this.form.get('data').get('options') as UntypedFormArray).at(intex) as UntypedFormGroup;
if (control && control.get('value').value != null){
(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
(visibilityRule, index) => {
if (visibilityRule.get('textValue').value == control.get('value').value){
setTimeout( () => {
visibilityRule.get('textValue').setValue(null);
visibilityRule.updateValueAndValidity();
}, 100);
}
}
);
}
(<UntypedFormArray>this.form.get('data').get('options')).removeAt(intex);
DescriptionTemplateSelectDataEditorModel.reapplySelectValidators({

12
dmp-frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.ts
View File

@ -14,6 +14,7 @@ import { BaseComponent } from '@common/base/base.component';
import { DescriptionTemplateFieldEditorModel, DescriptionTemplateRuleEditorModel } from '../../description-template-editor.model';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { SemanticsService } from '@app/core/services/semantic/semantics.service';
import { takeUntil } from 'rxjs';
@Component({
selector: 'app-description-template-editor-field-component',
@ -65,6 +66,16 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
}
}
private clearVisibilityRulesValue() {
(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
(visibilityRule, index) => {
visibilityRule.get('textValue').setValue(null);
visibilityRule.updateValueAndValidity();
}
)
}
addNewRule() {
const rule: DescriptionTemplateRuleEditorModel = new DescriptionTemplateRuleEditorModel(this.validationErrorModel);
const ruleArray = this.form.get('visibilityRules') as UntypedFormArray;
@ -200,6 +211,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
}
this.clearVisibilityRulesValue();
// setTimeout(() => { //TODO
// this.showPreview = true;