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.previewDirty = true;
this.generatePreviewForm();
});
this.previewSubject$
.pipe(debounceTime(600))
@ -149,7 +148,7 @@ export class DescriptionTemplateEditorFieldSetComponent extends BaseComponent im
data: editorField.data
} as DescriptionTemplateField;
if (editorField.data.fieldType === DescriptionTemplateFieldType.REFERENCE_TYPES) {
if (editorField.data?.fieldType === DescriptionTemplateFieldType.REFERENCE_TYPES) {
convertedField.data = editorField.data;
let selectedReferenceType: ReferenceType = this.availableReferenceTypes.find(referenceType => referenceType.id == (editorField.data as DescriptionTemplateReferenceTypeFieldPersist).referenceTypeId);
(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">
<ul class="list-unstyled list-inline d-flex align-items-center">
<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}}
</mat-slide-toggle>
</li>
<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}}
</mat-slide-toggle>
</li>
@ -28,7 +28,7 @@
<mat-form-field class="w-100">
<!-- 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>
{{enumUtils.toDescriptionTemplateFieldTypeString(select.value)}}
</mat-select-trigger>
@ -130,7 +130,7 @@
</ng-container>
<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>
</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 {
@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;
fieldType: DescriptionTemplateFieldType;
descriptionTemplateFieldTypeEnum = DescriptionTemplateFieldType;
@Input() expandView: boolean = true;
@ -60,13 +77,16 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
const fieldType = this.form.get('data').get('fieldType').value;
if (fieldType) {
this.fieldType = fieldType;
if (this.fieldType !== DescriptionTemplateFieldType.FREE_TEXT) {
if (fieldType !== DescriptionTemplateFieldType.FREE_TEXT) {
this.setValidator(ValidationType.URL, false);
}
}
}
get fieldType() {
return this.form?.get('data')?.get('fieldType');
}
private clearVisibilityRulesValue() {
(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
(visibilityRule, index) => {
@ -85,7 +105,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
get canApplyVisibility(): boolean {
switch (this.fieldType) {
switch (this.fieldType?.value) {
case DescriptionTemplateFieldType.TEXT_AREA:
case DescriptionTemplateFieldType.RICH_TEXT_AREA:
case DescriptionTemplateFieldType.FREE_TEXT:
@ -99,19 +119,22 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
return false;
}
onInputTypeChange() {
const type = this.fieldType;
onInputTypeChange(type: DescriptionTemplateFieldType) {
const field: DescriptionTemplateFieldPersist = this.form.getRawValue();
field.defaultValue = {
booleanValue: null,
dateValue: null,
textValue: null,
};
if (!this.canApplyVisibility) {
field.visibilityRules = [];
field.data.fieldType = type;
if (!this.canApplyVisibility) {
this.form.get('visibilityRules').reset();
}
// field.defaultValue = {
// booleanValue: null,
// dateValue: null,
// textValue: null,
// };
// if (!this.canApplyVisibility) {
// field.visibilityRules = [];
// }
switch (type) {
case DescriptionTemplateFieldType.REFERENCE_TYPES: {
@ -120,7 +143,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type
}
field.data = data;
field.defaultValue = null;
this.form.get('defaultValue').reset();
break;
}
case DescriptionTemplateFieldType.RADIO_BOX: {
@ -130,6 +153,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type
}
field.data = data;
this.form.get('defaultValue').patchValue({
booleanValue: null,
dateValue: null,
textValue: null,
})
break;
}
case DescriptionTemplateFieldType.SELECT: {
@ -141,6 +169,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type
}
field.data = data;
this.form.get('defaultValue').patchValue({
booleanValue: null,
dateValue: null,
textValue: null,
})
break;
}
case DescriptionTemplateFieldType.BOOLEAN_DECISION:
@ -154,6 +187,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type
}
field.data = data;
this.form.get('defaultValue').patchValue({
booleanValue: null,
dateValue: null,
textValue: null,
})
break;
}
@ -165,8 +203,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type
}
field.data = data;
field.defaultValue = null;
this.form.get('defaultValue').reset();
break;
}
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS:
@ -177,7 +214,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type
}
field.data = data;
field.defaultValue = null;
this.form.get('defaultValue').reset();
break;
}
case DescriptionTemplateFieldType.UPLOAD: {
@ -188,31 +225,37 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
fieldType: type
}
field.data = data;
field.defaultValue = null;
this.form.get('defaultValue').reset();
break;
}
}
// const dataEditorModel = DescriptionTemplateFieldEditorModel.getFieldEditorModel(field.data.fieldType, this.validationErrorModel).fromModel(field.data);
const form = (new DescriptionTemplateFieldEditorModel(this.validationErrorModel)).fromModel(field)
.buildForm({rootPath: this.validationRootPath});
this.form.setControl('data', form.controls.data)
this.reApplyValueChanges();
this.clearVisibilityRulesValue();
const fields = this.form.parent as UntypedFormArray;
let index = -1;
// const fields = this.form.parent as UntypedFormArray;
// let index = -1;
fields.controls.forEach((control, i) => {
if (this.form.get('id').value === control.get('id').value) {
index = i
}
});
if (index >= 0) {
fields.removeAt(index);
fields.insert(index, form);
this.form = form;
// fields.controls.forEach((control, i) => {
// if (this.form.get('id').value === control.get('id').value) {
// index = i
// }
// });
// if (index >= 0) {
// fields.removeAt(index);
// fields.insert(index, form);
// this.form = form;
}
this.clearVisibilityRulesValue();
// }
}
@ -240,12 +283,14 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
}
get isRequired() {
if(!this.form?.get('validations')?.value ){ return;}
let validationsControl = this.form.get('validations') as UntypedFormControl;
let validations: Array<ValidationType> = validationsControl.value;
return validations.includes(ValidationType.Required);
let validations: Array<ValidationType> = validationsControl?.value;
return validations?.includes(ValidationType.Required);
}
get isURL() {
if(!this.form?.get('validations')?.value ){ return;}
let validationsControl = this.form.get('validations') as UntypedFormControl;
let validations: Array<ValidationType> = validationsControl.value;
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.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))); }
}
return this;
@ -857,14 +857,14 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
return baseContext;
}
private getFieldEditorModel(fieldType: DescriptionTemplateFieldType): DescriptionTemplateLabelDataEditorModel {
static getFieldEditorModel(fieldType: DescriptionTemplateFieldType, validationErrorModel: ValidationErrorModel = new ValidationErrorModel()): DescriptionTemplateLabelDataEditorModel {
switch (fieldType) {
case DescriptionTemplateFieldType.REFERENCE_TYPES:
return new DescriptionTemplateReferenceTypeDataEditorModel(this.validationErrorModel);
return new DescriptionTemplateReferenceTypeDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.RADIO_BOX:
return new DescriptionTemplateRadioBoxDataEditorModel(this.validationErrorModel);
return new DescriptionTemplateRadioBoxDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.SELECT:
return new DescriptionTemplateSelectDataEditorModel(this.validationErrorModel);
return new DescriptionTemplateSelectDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.BOOLEAN_DECISION:
case DescriptionTemplateFieldType.CHECK_BOX:
case DescriptionTemplateFieldType.FREE_TEXT:
@ -874,12 +874,12 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
case DescriptionTemplateFieldType.TAGS:
case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
case DescriptionTemplateFieldType.VALIDATION:
return new DescriptionTemplateLabelDataEditorModel(this.validationErrorModel);
return new DescriptionTemplateLabelDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS:
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS:
return new DescriptionTemplateLabelAndMultiplicityDataEditorModel(this.validationErrorModel);
return new DescriptionTemplateLabelAndMultiplicityDataEditorModel(validationErrorModel);
case DescriptionTemplateFieldType.UPLOAD:
return new DescriptionTemplateUploadDataEditorModel(this.validationErrorModel);
return new DescriptionTemplateUploadDataEditorModel(validationErrorModel);
}
}
@ -960,13 +960,11 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
}
export interface DescriptionTemplateDefaultValueForm {
target: FormControl<string>;
textValue: FormControl<string>;
dateValue: FormControl<Date>;
booleanValue: FormControl<boolean>;
}
export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTemplateDefaultValuePersist {
target: string;
textValue: string;
dateValue: Date;
booleanValue: boolean;
@ -1034,7 +1032,7 @@ export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTe
validationErrorModel
});
['target', 'textValue', 'dateValue', 'booleanValue'].forEach(keyField => {
['textValue', 'dateValue', 'booleanValue'].forEach(keyField => {
const control = formGroup?.get(keyField);
control?.clearValidators();
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
}): UntypedFormGroup {
let { context = null, disabled = false, rootPath } = params ?? {}
if (context == null) {
context = DescriptionFieldEditorModel.createValidationContext({
validationErrorModel: this.validationErrorModel,
@ -601,7 +602,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
const baseContext: ValidationContext = new ValidationContext();
const baseValidationArray: Validation[] = new Array<Validation>();
const fieldValueControlName = DescriptionEditorModel.getFieldValueControlName(params.fieldDefinition.data.fieldType, params.fieldDefinition.data.multipleSelect);
const validators = [];
validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}${fieldValueControlName}`));
@ -630,8 +631,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): void {
const { formGroup, rootPath, validationErrorModel, fieldDefinition } = params;
const { formGroup, rootPath, validationErrorModel, fieldDefinition } = params;
const context = DescriptionFieldEditorModel.createValidationContext({
rootPath,
validationErrorModel,