fix dmp blueprint system fields ui
This commit is contained in:
parent
ecb82f5812
commit
f8fa4e519b
|
@ -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()
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue