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

replace data form group instead of entire form

This commit is contained in:
mchouliara 2024-09-06 09:44:50 +03:00
parent e068d5e566
commit 8f455a5324
5 changed files with 97 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,7 +88,6 @@ export class DescriptionTemplateEditorFieldSetComponent extends BaseComponent im
this.form.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(changes => { this.form.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(changes => {
this.previewDirty = true; this.previewDirty = true;
this.generatePreviewForm(); this.generatePreviewForm();
}); });
this.previewSubject$ this.previewSubject$
.pipe(debounceTime(600)) .pipe(debounceTime(600))
@ -149,7 +148,7 @@ export class DescriptionTemplateEditorFieldSetComponent extends BaseComponent im
data: editorField.data data: editorField.data
} as DescriptionTemplateField; } as DescriptionTemplateField;
if (editorField.data.fieldType === DescriptionTemplateFieldType.REFERENCE_TYPES) { if (editorField.data?.fieldType === DescriptionTemplateFieldType.REFERENCE_TYPES) {
convertedField.data = editorField.data; convertedField.data = editorField.data;
let selectedReferenceType: ReferenceType = this.availableReferenceTypes.find(referenceType => referenceType.id == (editorField.data as DescriptionTemplateReferenceTypeFieldPersist).referenceTypeId); let selectedReferenceType: ReferenceType = this.availableReferenceTypes.find(referenceType => referenceType.id == (editorField.data as DescriptionTemplateReferenceTypeFieldPersist).referenceTypeId);
(convertedField.data as DescriptionTemplateReferenceTypeData).referenceType = { (convertedField.data as DescriptionTemplateReferenceTypeData).referenceType = {

8
frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.html
View File

@ -6,12 +6,12 @@
<div class="col-auto"> <div class="col-auto">
<ul class="list-unstyled list-inline d-flex align-items-center"> <ul class="list-unstyled list-inline d-flex align-items-center">
<li class="list-inline-item"> <li class="list-inline-item">
<mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType || form.disabled"> <mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType?.value || form.disabled">
{{'GENERAL.VALIDATION.REQUIRED' | translate}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-slide-toggle> </mat-slide-toggle>
</li> </li>
<li *ngIf="fieldType === descriptionTemplateFieldTypeEnum.FREE_TEXT" class="list-inline-item"> <li *ngIf="fieldType === descriptionTemplateFieldTypeEnum.FREE_TEXT" class="list-inline-item">
<mat-slide-toggle class="field-toggler" [checked]="isURL" (change)="toggleURL($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType || form.disabled"> <mat-slide-toggle class="field-toggler" [checked]="isURL" (change)="toggleURL($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType?.value || form.disabled">
{{'GENERAL.VALIDATION.URL.LABEL' | translate}} {{'GENERAL.VALIDATION.URL.LABEL' | translate}}
</mat-slide-toggle> </mat-slide-toggle>
</li> </li>
@ -28,7 +28,7 @@
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<!-- NEW VERSION --> <!-- NEW VERSION -->
<mat-select #select placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(ngModel)]="fieldType" (selectionChange)="onInputTypeChange()" [disabled]="viewOnly" [errorStateMatcher]="this"> <mat-select #select placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="fieldType" [errorStateMatcher]="this">
<mat-select-trigger> <mat-select-trigger>
{{enumUtils.toDescriptionTemplateFieldTypeString(select.value)}} {{enumUtils.toDescriptionTemplateFieldTypeString(select.value)}}
</mat-select-trigger> </mat-select-trigger>
@ -130,7 +130,7 @@
</ng-container> </ng-container>
<div class="col-auto"> <div class="col-auto">
<mat-checkbox [formControl]="this.form.get('includeInExport')" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXPORT' | translate}}</mat-checkbox> <mat-checkbox [formControl]="this.form.get('includeInExport')">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXPORT' | translate}}</mat-checkbox>
<mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error>
</div> </div>

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

@ -23,10 +23,27 @@ import { takeUntil } from 'rxjs';
}) })
export class DescriptionTemplateEditorFieldComponent extends BaseComponent implements OnInit, ErrorStateMatcher { export class DescriptionTemplateEditorFieldComponent extends BaseComponent implements OnInit, ErrorStateMatcher {
@Input() viewOnly: boolean; @Input() viewOnly: boolean;
@Input() form: UntypedFormGroup;
private _form: UntypedFormGroup;
@Input() set form(val: UntypedFormGroup){
if(val){
this._form = val;
this.reApplyValueChanges();
}
}
get form(): UntypedFormGroup {
return this._form;
}
reApplyValueChanges() {
this.form.get('data').get('fieldType').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe((fieldType) => {
this.onInputTypeChange(fieldType);
})
}
validationTypeEnum = ValidationType; validationTypeEnum = ValidationType;
fieldType: DescriptionTemplateFieldType;
descriptionTemplateFieldTypeEnum = DescriptionTemplateFieldType; descriptionTemplateFieldTypeEnum = DescriptionTemplateFieldType;
@Input() expandView: boolean = true; @Input() expandView: boolean = true;
@ -60,13 +77,16 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
const fieldType = this.form.get('data').get('fieldType').value; const fieldType = this.form.get('data').get('fieldType').value;
if (fieldType) { if (fieldType) {
this.fieldType = fieldType; if (fieldType !== DescriptionTemplateFieldType.FREE_TEXT) {
if (this.fieldType !== DescriptionTemplateFieldType.FREE_TEXT) {
this.setValidator(ValidationType.URL, false); this.setValidator(ValidationType.URL, false);
} }
} }
} }
get fieldType() {
return this.form?.get('data')?.get('fieldType');
}
private clearVisibilityRulesValue() { private clearVisibilityRulesValue() {
(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach( (this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
(visibilityRule, index) => { (visibilityRule, index) => {
@ -85,7 +105,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
get canApplyVisibility(): boolean { get canApplyVisibility(): boolean {
switch (this.fieldType) { switch (this.fieldType?.value) {
case DescriptionTemplateFieldType.TEXT_AREA: case DescriptionTemplateFieldType.TEXT_AREA:
case DescriptionTemplateFieldType.RICH_TEXT_AREA: case DescriptionTemplateFieldType.RICH_TEXT_AREA:
case DescriptionTemplateFieldType.FREE_TEXT: case DescriptionTemplateFieldType.FREE_TEXT:
@ -99,19 +119,22 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
return false; return false;
} }
onInputTypeChange() { onInputTypeChange(type: DescriptionTemplateFieldType) {
const type = this.fieldType;
const field: DescriptionTemplateFieldPersist = this.form.getRawValue(); const field: DescriptionTemplateFieldPersist = this.form.getRawValue();
field.defaultValue = { field.data.fieldType = type;
booleanValue: null,
dateValue: null, if (!this.canApplyVisibility) {
textValue: null, this.form.get('visibilityRules').reset();
};
if (!this.canApplyVisibility) {
field.visibilityRules = [];
} }
// field.defaultValue = {
// booleanValue: null,
// dateValue: null,
// textValue: null,
// };
// if (!this.canApplyVisibility) {
// field.visibilityRules = [];
// }
switch (type) { switch (type) {
case DescriptionTemplateFieldType.REFERENCE_TYPES: { case DescriptionTemplateFieldType.REFERENCE_TYPES: {
@ -120,7 +143,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type fieldType: type
} }
field.data = data; field.data = data;
field.defaultValue = null; this.form.get('defaultValue').reset();
break; break;
} }
case DescriptionTemplateFieldType.RADIO_BOX: { case DescriptionTemplateFieldType.RADIO_BOX: {
@ -130,6 +153,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type fieldType: type
} }
field.data = data; field.data = data;
this.form.get('defaultValue').patchValue({
booleanValue: null,
dateValue: null,
textValue: null,
})
break; break;
} }
case DescriptionTemplateFieldType.SELECT: { case DescriptionTemplateFieldType.SELECT: {
@ -141,6 +169,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type fieldType: type
} }
field.data = data; field.data = data;
this.form.get('defaultValue').patchValue({
booleanValue: null,
dateValue: null,
textValue: null,
})
break; break;
} }
case DescriptionTemplateFieldType.BOOLEAN_DECISION: case DescriptionTemplateFieldType.BOOLEAN_DECISION:
@ -154,6 +187,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type fieldType: type
} }
field.data = data; field.data = data;
this.form.get('defaultValue').patchValue({
booleanValue: null,
dateValue: null,
textValue: null,
})
break; break;
} }
@ -165,8 +203,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type fieldType: type
} }
field.data = data; field.data = data;
field.defaultValue = null; this.form.get('defaultValue').reset();
break; break;
} }
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS: case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS:
@ -177,7 +214,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type fieldType: type
} }
field.data = data; field.data = data;
field.defaultValue = null; this.form.get('defaultValue').reset();
break; break;
} }
case DescriptionTemplateFieldType.UPLOAD: { case DescriptionTemplateFieldType.UPLOAD: {
@ -188,31 +225,37 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type fieldType: type
} }
field.data = data; field.data = data;
field.defaultValue = null; this.form.get('defaultValue').reset();
break; break;
} }
} }
// const dataEditorModel = DescriptionTemplateFieldEditorModel.getFieldEditorModel(field.data.fieldType, this.validationErrorModel).fromModel(field.data);
const form = (new DescriptionTemplateFieldEditorModel(this.validationErrorModel)).fromModel(field) const form = (new DescriptionTemplateFieldEditorModel(this.validationErrorModel)).fromModel(field)
.buildForm({rootPath: this.validationRootPath}); .buildForm({rootPath: this.validationRootPath});
this.form.setControl('data', form.controls.data)
this.reApplyValueChanges();
this.clearVisibilityRulesValue();
const fields = this.form.parent as UntypedFormArray; // const fields = this.form.parent as UntypedFormArray;
let index = -1; // let index = -1;
fields.controls.forEach((control, i) => { // fields.controls.forEach((control, i) => {
if (this.form.get('id').value === control.get('id').value) { // if (this.form.get('id').value === control.get('id').value) {
index = i // index = i
} // }
}); // });
if (index >= 0) { // if (index >= 0) {
fields.removeAt(index); // fields.removeAt(index);
fields.insert(index, form); // fields.insert(index, form);
this.form = form; // this.form = form;
} // }
this.clearVisibilityRulesValue();
} }
@ -240,12 +283,14 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
} }
get isRequired() { get isRequired() {
if(!this.form?.get('validations')?.value ){ return;}
let validationsControl = this.form.get('validations') as UntypedFormControl; let validationsControl = this.form.get('validations') as UntypedFormControl;
let validations: Array<ValidationType> = validationsControl.value; let validations: Array<ValidationType> = validationsControl?.value;
return validations.includes(ValidationType.Required); return validations?.includes(ValidationType.Required);
} }
get isURL() { get isURL() {
if(!this.form?.get('validations')?.value ){ return;}
let validationsControl = this.form.get('validations') as UntypedFormControl; let validationsControl = this.form.get('validations') as UntypedFormControl;
let validations: Array<ValidationType> = validationsControl.value; let validations: Array<ValidationType> = validationsControl.value;
return validations.includes(ValidationType.URL); return validations.includes(ValidationType.URL);

20
frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts
View File

@ -793,7 +793,7 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
this.validations = item.validations; this.validations = item.validations;
this.includeInExport = item.includeInExport; this.includeInExport = item.includeInExport;
this.data = this.getFieldEditorModel(item.data.fieldType).fromModel(item.data); this.data = DescriptionTemplateFieldEditorModel.getFieldEditorModel(item.data.fieldType, this.validationErrorModel).fromModel(item.data);
if (item.visibilityRules) { item.visibilityRules.map(x => this.visibilityRules.push(new DescriptionTemplateRuleEditorModel(this.validationErrorModel).fromModel(x))); } if (item.visibilityRules) { item.visibilityRules.map(x => this.visibilityRules.push(new DescriptionTemplateRuleEditorModel(this.validationErrorModel).fromModel(x))); }
} }
return this; return this;
@ -857,14 +857,14 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
return baseContext; return baseContext;
} }
private getFieldEditorModel(fieldType: DescriptionTemplateFieldType): DescriptionTemplateLabelDataEditorModel { static getFieldEditorModel(fieldType: DescriptionTemplateFieldType, validationErrorModel: ValidationErrorModel = new ValidationErrorModel()): DescriptionTemplateLabelDataEditorModel {
switch (fieldType) { switch (fieldType) {
case DescriptionTemplateFieldType.REFERENCE_TYPES: case DescriptionTemplateFieldType.REFERENCE_TYPES:
return new DescriptionTemplateReferenceTypeDataEditorModel(this.validationErrorModel); return new DescriptionTemplateReferenceTypeDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.RADIO_BOX: case DescriptionTemplateFieldType.RADIO_BOX:
return new DescriptionTemplateRadioBoxDataEditorModel(this.validationErrorModel); return new DescriptionTemplateRadioBoxDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.SELECT: case DescriptionTemplateFieldType.SELECT:
return new DescriptionTemplateSelectDataEditorModel(this.validationErrorModel); return new DescriptionTemplateSelectDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.BOOLEAN_DECISION: case DescriptionTemplateFieldType.BOOLEAN_DECISION:
case DescriptionTemplateFieldType.CHECK_BOX: case DescriptionTemplateFieldType.CHECK_BOX:
case DescriptionTemplateFieldType.FREE_TEXT: case DescriptionTemplateFieldType.FREE_TEXT:
@ -874,12 +874,12 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
case DescriptionTemplateFieldType.TAGS: case DescriptionTemplateFieldType.TAGS:
case DescriptionTemplateFieldType.DATASET_IDENTIFIER: case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
case DescriptionTemplateFieldType.VALIDATION: case DescriptionTemplateFieldType.VALIDATION:
return new DescriptionTemplateLabelDataEditorModel(this.validationErrorModel); return new DescriptionTemplateLabelDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS: case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS:
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS: case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS:
return new DescriptionTemplateLabelAndMultiplicityDataEditorModel(this.validationErrorModel); return new DescriptionTemplateLabelAndMultiplicityDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.UPLOAD: case DescriptionTemplateFieldType.UPLOAD:
return new DescriptionTemplateUploadDataEditorModel(this.validationErrorModel); return new DescriptionTemplateUploadDataEditorModel(validationErrorModel);
} }
} }
@ -960,13 +960,11 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
} }
export interface DescriptionTemplateDefaultValueForm { export interface DescriptionTemplateDefaultValueForm {
target: FormControl<string>;
textValue: FormControl<string>; textValue: FormControl<string>;
dateValue: FormControl<Date>; dateValue: FormControl<Date>;
booleanValue: FormControl<boolean>; booleanValue: FormControl<boolean>;
} }
export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTemplateDefaultValuePersist { export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTemplateDefaultValuePersist {
target: string;
textValue: string; textValue: string;
dateValue: Date; dateValue: Date;
booleanValue: boolean; booleanValue: boolean;
@ -1034,7 +1032,7 @@ export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTe
validationErrorModel validationErrorModel
}); });
['target', 'textValue', 'dateValue', 'booleanValue'].forEach(keyField => { ['textValue', 'dateValue', 'booleanValue'].forEach(keyField => {
const control = formGroup?.get(keyField); const control = formGroup?.get(keyField);
control?.clearValidators(); control?.clearValidators();
control?.addValidators(context.getValidation(keyField).validators); control?.addValidators(context.getValidation(keyField).validators);

6
frontend/src/app/ui/description/editor/description-editor.model.ts
View File

@ -537,6 +537,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
visibilityRulesKey: string visibilityRulesKey: string
}): UntypedFormGroup { }): UntypedFormGroup {
let { context = null, disabled = false, rootPath } = params ?? {} let { context = null, disabled = false, rootPath } = params ?? {}
if (context == null) { if (context == null) {
context = DescriptionFieldEditorModel.createValidationContext({ context = DescriptionFieldEditorModel.createValidationContext({
validationErrorModel: this.validationErrorModel, validationErrorModel: this.validationErrorModel,
@ -601,7 +602,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
const baseContext: ValidationContext = new ValidationContext(); const baseContext: ValidationContext = new ValidationContext();
const baseValidationArray: Validation[] = new Array<Validation>(); const baseValidationArray: Validation[] = new Array<Validation>();
const fieldValueControlName = DescriptionEditorModel.getFieldValueControlName(params.fieldDefinition.data.fieldType, params.fieldDefinition.data.multipleSelect); const fieldValueControlName = DescriptionEditorModel.getFieldValueControlName(params.fieldDefinition.data.fieldType, params.fieldDefinition.data.multipleSelect);
const validators = []; const validators = [];
validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}${fieldValueControlName}`)); validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}${fieldValueControlName}`));
@ -630,8 +631,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
visibilityRulesService: VisibilityRulesService, visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string visibilityRulesKey: string
}): void { }): void {
const { formGroup, rootPath, validationErrorModel, fieldDefinition } = params;
const { formGroup, rootPath, validationErrorModel, fieldDefinition } = params;
const context = DescriptionFieldEditorModel.createValidationContext({ const context = DescriptionFieldEditorModel.createValidationContext({
rootPath, rootPath,
validationErrorModel, validationErrorModel,