fix dmp blueprint system fields ui

This commit is contained in:
amentis 2024-01-25 15:49:34 +02:00
parent ecb82f5812
commit f8fa4e519b
4 changed files with 83 additions and 21 deletions

View File

@ -151,6 +151,7 @@ public class SectionPersist {
.over(item.getFields().stream().filter(x -> x.getCategory() == DmpBlueprintFieldCategory.Extra).toList())
.using((itm) -> this.validatorFactory.validator(ExtraFieldPersist.ExtraFieldPersistValidator.class)),
this.spec()
.iff(() -> (item.getHasTemplates()))
.must(() -> !this.isListNullOrEmpty(item.getDescriptionTemplates()))
.failOn(SectionPersist._descriptionTemplates).failWith(messageSource.getMessage("Validation_Required", new Object[]{SectionPersist._descriptionTemplates}, LocaleContextHolder.getLocale())),
this.navSpec()

View File

@ -84,7 +84,7 @@
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELDS' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="selectedSystemFields" [ngModelOptions]="{standalone: true}">
<mat-select multiple [(ngModel)]="selectedSystemFields" [ngModelOptions]="{standalone: true}" (selectionChange)= "addSystemField(sectionIndex, $event)">
<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
</mat-select>
<!-- <mat-error *ngIf="fieldsArray(sectionIndex).hasError('required')">
@ -182,7 +182,7 @@
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</mat-label>
<app-multiple-auto-complete [disabled]="formGroup.disabled" [hidePlaceholder]="true" required='false' [configuration]="templatesAutoCompleteConfiguration" (optionRemoved)="onRemoveDescritionTemplate($event, sectionIndex)" (optionSelected)="onSelectDescritionTemplate($event, sectionIndex)"></app-multiple-auto-complete>
<app-multiple-auto-complete [formControl]="section.get('descriptionTemplates')" [disabled]="formGroup.disabled" [hidePlaceholder]="true" required='false' [configuration]="templatesAutoCompleteConfiguration" (optionRemoved)="onRemoveDescritionTemplate($event, sectionIndex)" (optionSelected)="onSelectDescritionTemplate($event, sectionIndex)"></app-multiple-auto-complete>
</mat-form-field>
</div>
</div>

View File

@ -35,8 +35,14 @@ import { map, takeUntil } from 'rxjs/operators';
import { DescriptionTemplatesInSectionEditorModel, DmpBlueprintDefinitionSectionEditorModel, DmpBlueprintEditorModel, FieldInSectionEditorModel } from './dmp-blueprint-editor.model';
import { DmpBlueprintEditorResolver } from './dmp-blueprint-editor.resolver';
import { DmpBlueprintEditorService } from './dmp-blueprint-editor.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { DescriptionTemplateService } from '@app/core/services/description-template/description-template.service';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { DescriptionTemplateLookup } from '@app/core/query/description-template.lookup';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
import { nameof } from 'ts-simple-nameof';
import { DescriptionTemplateStatus } from '@app/core/common/enum/description-template-status';
import { DescriptionTemplateVersionStatus } from '@app/core/common/enum/description-template-version-status';
import { MatSelectChange } from '@angular/material/select';
@Component({
@ -57,7 +63,14 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
public dmpBlueprintSystemFieldTypeEnum = this.enumUtils.getEnumValues<DmpBlueprintSystemFieldType>(DmpBlueprintSystemFieldType);
dmpBlueprintExtraFieldDataType = DmpBlueprintExtraFieldDataType;
public dmpBlueprintExtraFieldDataTypeEnum = this.enumUtils.getEnumValues<DmpBlueprintExtraFieldDataType>(DmpBlueprintExtraFieldDataType);
templatesAutoCompleteConfiguration: SingleAutoCompleteConfiguration
templatesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
initialItems: (excludedItems: any[], data?: any) => this.descriptionTemplateService.query(this.buildAutocompleteLookup(null, excludedItems ? excludedItems : null)).pipe(map(x => x.items)),
filterFn: (searchQuery: string, excludedItems: any[]) => this.descriptionTemplateService.query(this.buildAutocompleteLookup(searchQuery, excludedItems)).pipe(map(x => x.items)),
getSelectedItems: (selectedItems: any[]) => this.descriptionTemplateService.query(this.buildAutocompleteLookup(null, null, selectedItems)).pipe(map(x => x.items)),
displayFn: (item: DescriptionTemplate) => item.label,
titleFn: (item: DescriptionTemplate) => item.label,
valueAssign: (item: DescriptionTemplate) => item.id,
};
protected get canDelete(): boolean {
return !this.isDeleted && !this.isNew && this.hasPermission(this.authService.permissionEnum.DeleteDmpBlueprint);
@ -99,7 +112,6 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
private descriptionTemplateService: DescriptionTemplateService
) {
super(dialog, language, formService, router, uiNotificationService, httpErrorHandlingService, filterService, datePipe, route, queryParamsService);
this.templatesAutoCompleteConfiguration = this.descriptionTemplateService.singleAutocompleteConfiguration;
}
ngOnInit(): void {
@ -236,6 +248,13 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
sectionsFormArray.controls.forEach((section, index) => {
section.get('ordinal').setValue(index + 1);
});
DmpBlueprintEditorModel.reApplySectionValidators(
{
formGroup: this.formGroup,
validationErrorModel: this.editorModel.validationErrorModel
}
);
this.formGroup.get('definition').get('sections').markAsDirty();
}
@ -263,14 +282,21 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
return (this.formGroup.get('definition').get('sections') as FormArray)?.controls.flatMap(x => (x.get('fields') as FormArray).controls.map(y => (y as UntypedFormGroup).get('systemFieldType')?.value as DmpBlueprintSystemFieldType));
}
addSystemField(sectionIndex: number, systemFieldType: DmpBlueprintSystemFieldType): void {
const field: FieldInSectionEditorModel = new FieldInSectionEditorModel();
field.id = Guid.create();
field.ordinal = ((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields') as FormArray).length + 1;
field.category = DmpBlueprintSectionFieldCategory.SYSTEM;
field.systemFieldType = systemFieldType;
field.required = (systemFieldType == DmpBlueprintSystemFieldType.TEXT || systemFieldType == DmpBlueprintSystemFieldType.HTML_TEXT) ? true : false;
((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields') as FormArray).push(field.buildForm()); //TODO: dtziotzios validation path
addSystemField(sectionIndex: number, matSelect: MatSelectChange): void {
const systemFieldTypes = matSelect.value as number[];
for (let systemFieldType of systemFieldTypes){
const fieldSize = ((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields') as FormArray).length;
if (fieldSize == 0){
((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields') as FormArray).push(this.editorModel.createChildSystemField(sectionIndex, fieldSize, systemFieldType));
return;
}else{
if (!((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields') as FormArray).controls.some(y => (y as UntypedFormGroup).get('systemFieldType')?.value === systemFieldType)){
((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields') as FormArray).push(this.editorModel.createChildSystemField(sectionIndex, fieldSize, systemFieldType));
return;
}
}
}
}
removeSystemField(sectionIndex: number, fieldIndex: number): void {
@ -279,6 +305,14 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
formArray.controls.forEach((section, index) => {
section.get('ordinal').setValue(index + 1);
});
DmpBlueprintEditorModel.reApplySectionValidators(
{
formGroup: this.formGroup,
validationErrorModel: this.editorModel.validationErrorModel
}
);
(this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields').markAsDirty();
}
addExtraField(sectionIndex: number): void {
@ -314,6 +348,13 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
fieldsFormArray.controls.forEach((section, index) => {
section.get('ordinal').setValue(index + 1);
});
DmpBlueprintEditorModel.reApplySectionValidators({
formGroup: this.formGroup,
validationErrorModel: this.editorModel.validationErrorModel
}
);
(this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('fields').markAsDirty();
}
//
@ -322,14 +363,24 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
//
//
//TODO refactor
// filterDescriptionTempaltes(value: string): Observable<DatasetProfileModel[]> {
// const request = new DataTableRequest<DatasetProfileCriteria>(null, null, { fields: ['+label'] });
// const criteria = new DatasetProfileCriteria();
// criteria.like = value;
// request.criteria = criteria;
// return this.dmpService.searchDmpBlueprints(request);
// }
private buildAutocompleteLookup(like?: string, excludedIds?: Guid[], ids?: Guid[]): DescriptionTemplateLookup {
const lookup: DescriptionTemplateLookup = new DescriptionTemplateLookup();
lookup.page = { size: 100, offset: 0 };
if (excludedIds && excludedIds.length > 0) { lookup.excludedIds = excludedIds; }
if (ids && ids.length > 0) { lookup.ids = ids; }
lookup.isActive = [IsActive.Active];
lookup.statuses = [DescriptionTemplateStatus.Finalized];
lookup.versionStatuses = [DescriptionTemplateVersionStatus.Current];
lookup.project = {
fields: [
nameof<DescriptionTemplate>(x => x.id),
nameof<DescriptionTemplate>(x => x.label)
]
};
lookup.order = { items: [nameof<DescriptionTemplate>(x => x.label)] };
if (like) { lookup.like = this.filterService.transformLike(like); }
return lookup;
}
onRemoveDescritionTemplate(event, sectionIndex: number) {
const descriptionTemplateFormArray = (this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('descriptionTemplates') as FormArray;

View File

@ -67,6 +67,16 @@ export class DmpBlueprintEditorModel extends BaseEditorModel implements DmpBluep
return section.buildForm({ rootPath: 'definition.sections[' + index + '].' });
}
createChildSystemField(sectionIndex: number, index: number, systemFieldType: DmpBlueprintSystemFieldType): UntypedFormGroup{
const field: FieldInSectionEditorModel = new FieldInSectionEditorModel(this.validationErrorModel);
field.id = Guid.create();
field.ordinal = index + 1;
field.category = DmpBlueprintSectionFieldCategory.SYSTEM;
field.systemFieldType = systemFieldType;
field.required = (systemFieldType == DmpBlueprintSystemFieldType.TEXT || systemFieldType == DmpBlueprintSystemFieldType.HTML_TEXT) ? true : false;
return field.buildForm({ rootPath: 'definition.sections[' + sectionIndex + '].fields[' + index + '].'});
}
createChildExtraField(sectionIndex: number, index: number): UntypedFormGroup {
const field: FieldInSectionEditorModel = new FieldInSectionEditorModel(this.validationErrorModel);
field.id = Guid.create();