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

fixed mat input asterist issue for description form.

This commit is contained in:
Diamantis Tziotzios 2024-06-17 13:02:57 +03:00
parent 5ffc07979f
commit d2e3bc4aba
12 changed files with 165 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/core/services/culture/culture-service.ts
View File

@ -63,7 +63,7 @@ export class CultureService {
// This is a very hacky way to map cultures with angular cultures, since there is no mapping. We first try to
// use the culture with the specialization (ex en-US), and if not exists we import the base culture (first part).
let locale = newCulture.name;
this.loadLocale(locale);
this.loadLocale(locale);
}
getCultureChangeObservable(): Observable<CultureInfo> {

2
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

@ -118,7 +118,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
this.stateChanges.next();
}
private _required = false;
private _required;
@Input()
get disabled() {

2
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts
View File

@ -85,7 +85,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
this._required = !!(req);
this.stateChanges.next();
}
private _required = false;
private _required;
@Input()
get disabled() { return this._disabled; }

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

@ -323,7 +323,7 @@ export class DescriptionPropertyDefinitionFieldSetEditorModel implements Descrip
const validators = [];
validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}items`));
if (params.fieldSetDefinition?.hasMultiplicity){
if (params.fieldSetDefinition?.hasMultiplicity) {
if (params.fieldSetDefinition?.multiplicity?.min >= 0 && params.fieldSetDefinition?.multiplicity?.max >= 0) {
validators.push(Validators.minLength(params.fieldSetDefinition.multiplicity.min));
validators.push(Validators.maxLength(params.fieldSetDefinition.multiplicity.max));
@ -334,7 +334,7 @@ export class DescriptionPropertyDefinitionFieldSetEditorModel implements Descrip
validators.push(Validators.maxLength(params.fieldSetDefinition.multiplicity.max));
}
}
baseValidationArray.push({ key: 'items', validators: validators });
baseContext.validation = baseValidationArray;
return baseContext;
@ -496,7 +496,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
this.dateValue = item.dateValue;
this.booleanValue = item.booleanValue;
this.tags = item.tags?.map(x => x.label);
const references = descriptionReferences?.filter(x => x.data?.fieldId == descriptionTemplateField?.id && x.data.ordinal == ordinal && x.isActive == IsActive.Active).map(x => {
const references = descriptionReferences?.filter(x => x.data?.fieldId == descriptionTemplateField?.id && x.data.ordinal == ordinal && x.isActive == IsActive.Active).map(x => {
return {
id: x.reference.id,
label: x.reference.label,
@ -557,7 +557,10 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
case DescriptionTemplateFieldType.VALIDATION:
formGroup.addControl(fieldValueControlName, this.externalIdentifier.buildForm({
rootPath: `${rootPath}externalIdentifier.`
rootPath: `${rootPath}externalIdentifier.`,
fieldDefinition: this.fieldDefinition,
visibilityRulesService: params.visibilityRulesService,
visibilityRulesKey: params.visibilityRulesKey
}));
case DescriptionTemplateFieldType.DATE_PICKER:
formGroup.addControl(fieldValueControlName, new FormControl({ value: this.dateValue, disabled: disabled }, context.getValidation(fieldValueControlName).validators));
@ -643,7 +646,10 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
DescriptionExternalIdentifierEditorModel.reapplyValidators({
formGroup: formGroup?.get('externalIdentifier') as UntypedFormGroup,
rootPath: `${rootPath}externalIdentifier.`,
validationErrorModel: validationErrorModel
validationErrorModel: validationErrorModel,
fieldDefinition: params.fieldDefinition,
visibilityRulesService: params.visibilityRulesService,
visibilityRulesKey: params.visibilityRulesKey
});
}
}
@ -669,13 +675,19 @@ export class DescriptionExternalIdentifierEditorModel implements DescriptionExte
buildForm(params?: {
context?: ValidationContext,
disabled?: boolean,
rootPath?: string
rootPath?: string,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): UntypedFormGroup {
let { context = null, disabled = false, rootPath } = params ?? {}
if (context == null) {
context = DescriptionExternalIdentifierEditorModel.createValidationContext({
validationErrorModel: this.validationErrorModel,
rootPath
rootPath,
fieldDefinition: params.fieldDefinition,
visibilityRulesService: params.visibilityRulesService,
visibilityRulesKey: params.visibilityRulesKey
});
}
@ -687,14 +699,30 @@ export class DescriptionExternalIdentifierEditorModel implements DescriptionExte
static createValidationContext(params: {
rootPath?: string,
validationErrorModel: ValidationErrorModel
validationErrorModel: ValidationErrorModel,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): ValidationContext {
const { rootPath = '', validationErrorModel } = params;
const baseContext: ValidationContext = new ValidationContext();
const baseValidationArray: Validation[] = new Array<Validation>();
baseValidationArray.push({ key: 'identifier', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}identifier`)] });
baseValidationArray.push({ key: 'type', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}type`)] });
let validators = [];
validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}identifier`));
if (params.fieldDefinition?.validations?.includes(DescriptionTemplateFieldValidationType.Required)) {
validators.push(RequiredWithVisibilityRulesValidator(params.visibilityRulesService, params.visibilityRulesKey));
}
baseValidationArray.push({ key: 'identifier', validators: validators });
validators = [];
validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}type`));
if (params.fieldDefinition?.validations?.includes(DescriptionTemplateFieldValidationType.Required)) {
validators.push(RequiredWithVisibilityRulesValidator(params.visibilityRulesService, params.visibilityRulesKey));
}
baseValidationArray.push({ key: 'type', validators: validators });
baseContext.validation = baseValidationArray;
return baseContext;
}
@ -702,13 +730,19 @@ export class DescriptionExternalIdentifierEditorModel implements DescriptionExte
static reapplyValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
rootPath: string
rootPath: string,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): void {
const { formGroup, rootPath, validationErrorModel } = params;
const context = DescriptionExternalIdentifierEditorModel.createValidationContext({
rootPath,
validationErrorModel
validationErrorModel,
fieldDefinition: params.fieldDefinition,
visibilityRulesService: params.visibilityRulesService,
visibilityRulesKey: params.visibilityRulesKey
});
['identifier', 'type'].forEach(keyField => {
@ -778,13 +812,19 @@ export class DescriptionReferenceEditorModel implements DescriptionReferencePers
static reapplyValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
rootPath: string
rootPath: string,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): void {
const { formGroup, rootPath, validationErrorModel } = params;
const context = DescriptionExternalIdentifierEditorModel.createValidationContext({
rootPath,
validationErrorModel
validationErrorModel,
fieldDefinition: params.fieldDefinition,
visibilityRulesService: params.visibilityRulesService,
visibilityRulesKey: params.visibilityRulesKey
});
['id', 'reference'].forEach(keyField => {

52
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
View File

@ -11,7 +11,7 @@
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{ field.data.label }}</mat-label>
<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}">
<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')">
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
@ -21,31 +21,35 @@
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES" class="col-12">
<ng-container *ngIf="field.data.multipleSelect">
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="(field.data.label | translate)" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.data.label" [placeholder]="field.data.label" [referenceType]="field.data.referenceType" [multiple]="true" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
</ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)">
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="(field.data.label | translate)" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.data.label" [placeholder]="field.data.label" [referenceType]="field.data.referenceType" [multiple]="false" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
</ng-container>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect">
<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [multiple]="field.data.multipleSelect">
<ng-container *ngIf="field.data.multipleSelect">
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [multiple]="field.data.multipleSelect">
<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</mat-option>
</mat-select>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)">
<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [multiple]="field.data.multipleSelect">
</mat-form-field>
</ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)">
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [multiple]="field.data.multipleSelect">
<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</ng-container>
</mat-form-field>
</mat-form-field>
</ng-container>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS" class="col-12">
@ -53,7 +57,7 @@
<ng-container *ngIf="field.data.multipleSelect">
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="descriptionService.multipleAutocompleteConfiguration">
<app-multiple-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="descriptionService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -63,7 +67,7 @@
<ng-container *ngIf="!(field.data.multipleSelect)">
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="descriptionService.singleAutocompleteConfiguration">
<app-single-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="descriptionService.singleAutocompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -77,7 +81,7 @@
<ng-container *ngIf="field.data.multipleSelect">
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="dmpService.multipleAutocompleteConfiguration">
<app-multiple-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="dmpService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -87,7 +91,7 @@
<ng-container *ngIf="!(field.data.multipleSelect)">
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="dmpService.singleAutocompleteConfiguration">
<app-single-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="dmpService.singleAutocompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -105,7 +109,7 @@
<div class="col-12">
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="w-100">
<mat-label>{{ field.data.label }}</mat-label>
<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15"></textarea>
<button mat-icon-button type="button" *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').disabled && propertiesFormGroup?.get(field.id).get('textValue').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup?.get(field.id).get('textValue').patchValue('')">
<mat-icon>close</mat-icon>
</button>
@ -138,7 +142,7 @@
<div class="col-12 d-flex justify-content-center attach-btn">
<button *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn" [disabled]="!!propertiesFormGroup?.get(field.id).get('textValue').value || propertiesFormGroup?.get(field.id).get('textValue').disabled">
<mat-icon class="mr-2">upload</mat-icon>
<mat-label>{{ (field.data.label | translate)}}</mat-label>
<mat-label>{{field.data.label}}</mat-label>
</button>
<button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn">
@ -170,7 +174,7 @@
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12">
<mat-label>{{ field.data.label }}</mat-label>
<input matInput placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" class="table-input" [matDatepicker]="date" [formControl]="propertiesFormGroup?.get(field.id).get('dateValue')">
<input matInput class="table-input" [matDatepicker]="date" [formControl]="propertiesFormGroup?.get(field.id).get('dateValue')">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('dateValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
@ -178,20 +182,20 @@
</mat-form-field>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12">
<app-tags-field-component [label]="field.data.label" [placeholder]="(field.data.label | translate) + (isRequired? ' *': '')" [form]="propertiesFormGroup?.get(field.id).get('tags')"></app-tags-field-component>
<app-tags-field-component [label]="field.data.label" [placeholder]="field.data.label" [form]="propertiesFormGroup?.get(field.id).get('tags')"></app-tags-field-component>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
<div class="row" *ngIf="datasetIdInitialized">
<div class="row">
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').disabled">
<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')">
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label>
<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (isRequired? ' *': '')" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type').disabled">
<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')">
<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
{{ type.name }}
</mat-option>
@ -206,13 +210,13 @@
<div class="row align-items-baseline">
<mat-form-field class="col-md-4">
<mat-label>{{ field.data.label }}</mat-label>
<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}">
<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')">
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-4">
<mat-label>{{ field.data.label }}</mat-label>
<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')" [placeholder]="('TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate) + (isRequired? ' *': '')">
<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')" [placeholder]="'TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate">
<mat-option *ngFor="let type of validationTypes" [value]="type.value">
{{ type.name }}
</mat-option>

55
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts
View File

@ -60,8 +60,6 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
datasetIdInitialized: boolean = false;
validationIcon;
readonly datasetIdTypes: any[] = [
@ -105,10 +103,10 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
ngOnInit() {
if(this.field?.data?.fieldType == DescriptionTemplateFieldType.UPLOAD && this.field && this.field.id && (this.propertiesFormGroup?.get(this.field.id).get('textValue').value != undefined) && !this.fileNameDisplay) {
if (this.field?.data?.fieldType == DescriptionTemplateFieldType.UPLOAD && this.field && this.field.id && (this.propertiesFormGroup?.get(this.field.id).get('textValue').value != undefined) && !this.fileNameDisplay) {
const id = Guid.parse((this.propertiesFormGroup?.get(this.field.id).get('textValue').value as string));
const fields = [
const fields = [
nameof<StorageFile>(x => x.id),
nameof<StorageFile>(x => x.name),
nameof<StorageFile>(x => x.extension),
@ -124,38 +122,9 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
this.descriptionFormService.getDetectChangesObservable().pipe(takeUntil(this._destroyed)).subscribe( x => this.changeDetectorRef.markForCheck());
}
private applyFieldType(){
private applyFieldType() {
this.isRequired = this.field.validations?.includes(DescriptionTemplateFieldValidationType.Required);
switch (this.field?.data?.fieldType) {
case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
// const value = this.propertiesFormGroup.get(this.field.id).get('value').value;
// const disabled = this.propertiesFormGroup.get(this.field.id).disabled;
//TODO: Refactor this.
// this.form.removeControl('value');
// this.form.addControl('value', new DatasetIdModel(value).buildForm());
// if (disabled) {
// this.form.disable();
// }
this.datasetIdInitialized = true;
break;
case DescriptionTemplateFieldType.VALIDATION:
// const value1 = this.propertiesFormGroup.get(this.field.id).get('value').value;
// const disabled1 = this.propertiesFormGroup.get(this.field.id).disabled;
//TODO: Refactor this.
// this.form.removeControl('value');
// this.form.addControl('value', new DatasetIdModel(value1).buildForm());
// if (disabled1) {
// this.form.disable();
// }
break;
}
// this.form = this.visibilityRulesService.getFormGroup(this.field.id);
//TODO: refactor
this.propertiesFormGroup.get(this.field.id).valueChanges
.pipe(
takeUntil(this._destroyed),
@ -238,18 +207,18 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
public upload() {
this.storageFileService.uploadTempFiles(this.filesToUpload[0])
.pipe(takeUntil(this._destroyed)).subscribe((response) => {
this.propertiesFormGroup?.get(this.field.id).get('textValue').patchValue(response[0].id.toString());
this.createFileNameDisplay(response[0].name, response[0].extension);
this.cdr.detectChanges();
}, error => {
this.onCallbackUploadFail(error.error);
})
.pipe(takeUntil(this._destroyed)).subscribe((response) => {
this.propertiesFormGroup?.get(this.field.id).get('textValue').patchValue(response[0].id.toString());
this.createFileNameDisplay(response[0].name, response[0].extension);
this.cdr.detectChanges();
}, error => {
this.onCallbackUploadFail(error.error);
})
}
private createFileNameDisplay(name: string, extension: string){
private createFileNameDisplay(name: string, extension: string) {
if (extension.startsWith('.')) this.fileNameDisplay = name + extension;
else this.fileNameDisplay = name + '.' + extension;
this.changeDetectorRef.markForCheck();
@ -326,7 +295,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
const filename = this.fileUtils.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
FileSaver.saveAs(blob, filename);
},
error => this.httpErrorHandlingService.handleBackedRequestError(error));
error => this.httpErrorHandlingService.handleBackedRequestError(error));
}
}

26
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts
View File

@ -1,11 +1,11 @@
import {ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import { AbstractControl, FormControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { BaseComponent } from '@common/base/base.component';
import { MarkedValidatorFn } from '@common/forms/validation/custom-validator';
import { takeUntil } from 'rxjs/operators';
import { DescriptionEditorModel } from '../description-editor.model';
import { nameof } from 'ts-simple-nameof';
import { BackendErrorValidator, MarkedValidatorFn } from '@common/forms/validation/custom-validator';
import { DescriptionEditorModel } from '../description-editor.model';
@Component({
selector: 'app-form-progress-indication',
@ -20,7 +20,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
progressSoFar: number;
total: number;
percent: number;
fieldTypes: string[] = ['dateValue', 'booleanValue', 'externalIdentifier.identifier', 'externalIdentifier.type', 'reference', 'references' , 'tags', 'textListValue', 'textValue'];
fieldTypes: string[] = ['dateValue', 'booleanValue', 'externalIdentifier.identifier', 'externalIdentifier.type', 'reference', 'references', 'tags', 'textListValue', 'textValue'];
constructor(private visibilityRulesService: VisibilityRulesService) { super(); }
@ -30,18 +30,18 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
}
ngOnChanges(changes: SimpleChanges) {
if(changes.formGroup) {
if (changes.formGroup) {
this.init();
}
}
init() {
setTimeout(() => {this.calculateValueForProgressbar();});
setTimeout(() => { this.calculateValueForProgressbar(); });
this.formGroup
.valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(control => {
setTimeout(() => {this.calculateValueForProgressbar();});
setTimeout(() => { this.calculateValueForProgressbar(); });
});
}
@ -65,7 +65,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
countRequiredFields(formControl: AbstractControl, checkVisibility = false, countCompletedFields = false): number {
let valueCurrent = 0;
if (formControl instanceof UntypedFormGroup) {
if(!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
if (!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
valueCurrent = valueCurrent + this.countRequiredFields(control, checkVisibility, countCompletedFields);
@ -82,7 +82,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
countRequiredFieldsByFieldset(ordinal: number, fieldsFormGroup: UntypedFormGroup, filterValid: boolean = false): number {
let fieldsCount: number = 0;
const fieldSetNames = Object.keys(fieldsFormGroup.controls);
for(let item of fieldSetNames) {
for (let item of fieldSetNames) {
if (!this.checkVisibility || this.visibilityRulesService.isVisible(item, ordinal)) {
const fieldControl = fieldsFormGroup.get(item);
const fieldNames = Object.keys((fieldControl as UntypedFormGroup).controls);
@ -92,7 +92,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
if (filterValid) controlFilter = controlFilter && typedControl.valid;
if (controlFilter) {
fieldsCount ++;
fieldsCount++;
break;
}
}
@ -199,7 +199,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
countFormControlsValidForProgress(formControl: AbstractControl): number {
let valueCurrent = 0;
if (formControl instanceof UntypedFormControl) {
if (this.controlRequired(formControl) && this.controlEnabled(formControl) && formControl.valid) {
if (this.controlRequired(formControl) && this.controlEnabled(formControl) && formControl.valid) {
valueCurrent++;
}
} else if (formControl instanceof UntypedFormGroup) {
@ -218,7 +218,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
controlRequired(formControl: AbstractControl) {
if (formControl.validator) {
const validators = (formControl as AbstractControl & { _rawValidators: MarkedValidatorFn[] })._rawValidators;
return validators.some(validator => validator.type === 'RequiredWithVisibilityRulesValidator');
return validators.some(validator => validator.type === 'RequiredWithVisibilityRulesValidator');
}
return false;

6
dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.html
View File

@ -1,6 +1,6 @@
<mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration">
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration" [required]="required">
<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -12,7 +12,7 @@
</mat-form-field>
<mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration">
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration" [required]="required">
<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -23,4 +23,4 @@
</mat-hint>
</mat-form-field>
<div class="mb-4">
</div>
</div>

2
dmp-frontend/src/app/utilities/enhancers/utils.ts
View File

@ -49,4 +49,4 @@ Object.defineProperty(Array.prototype, 'firstSafe', {
value() {
return this.find(e => true) // or this.find(Boolean)
}
})
});

8
dmp-frontend/src/common/forms/common-forms.module.ts
View File

@ -2,19 +2,25 @@ import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { PendingChangesGuard } from '@common/forms/pending-form-changes/pending-form-changes-guard.service';
import { FormService } from './form-service';
import { ReactiveAsteriskDirective } from './reactive-asterisk-directive';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule,
],
declarations:[
ReactiveAsteriskDirective,
],
exports: [
FormsModule,
ReactiveFormsModule,
ReactiveAsteriskDirective,
],
providers: [
FormService,
PendingChangesGuard
PendingChangesGuard,
ReactiveAsteriskDirective,
]
})
export class CommonFormsModule { }

34
dmp-frontend/src/common/forms/reactive-asterisk-directive.ts Normal file
View File

@ -0,0 +1,34 @@
import { AfterContentChecked, Directive } from "@angular/core";
import { AbstractControl } from "@angular/forms";
import { MatFormField } from "@angular/material/form-field";
import { MatInput } from "@angular/material/input";
import { MatSelect } from "@angular/material/select";
import { MultipleAutoCompleteComponent } from "@app/library/auto-complete/multiple/multiple-auto-complete.component";
import { SingleAutoCompleteComponent } from "@app/library/auto-complete/single/single-auto-complete.component";
import { MarkedValidatorFn } from "./validation/custom-validator";
/**
* Input/Select into FormField consider Validator.required from reactive form if the [required] attribute is missing in the template
*/
@Directive({
selector: 'mat-form-field:has(input:not([required])), mat-form-field:has(mat-select:not([required])), mat-form-field:has(app-multiple-auto-complete:not([required])), mat-form-field:has(app-single-auto-complete:not([required]))',
})
export class ReactiveAsteriskDirective implements AfterContentChecked {
private readonly requiredValidatornames = ['RequiredWithVisibilityRulesValidator', 'required'];
constructor(private matFormField: MatFormField) { }
ngAfterContentChecked() {
const ctrl = this.matFormField._control;
const abstractControl = ctrl?.ngControl?.control;
const validators = (abstractControl as AbstractControl & { _rawValidators: MarkedValidatorFn[] })?._rawValidators;
if (!validators) return;
if (ctrl instanceof MatInput ||
ctrl instanceof MatSelect ||
ctrl instanceof SingleAutoCompleteComponent ||
ctrl instanceof MultipleAutoCompleteComponent
) {
ctrl.required = validators.some(validator => this.requiredValidatornames.includes(validator.type));
}
}
}

20
dmp-frontend/src/common/forms/validation/custom-validator.ts
View File

@ -13,20 +13,20 @@ export type MarkedValidatorFn = ValidatorFn & { type: string, metadata: unknown
// To address this we followed the approach discussed here https://github.com/angular/angular/issues/54305
export class CustomValidators {
static extendValidatorWithMetadata(validatorFn: ValidatorFn, type: string, metadata?: unknown): MarkedValidatorFn {
const fn = validatorFn as MarkedValidatorFn;
fn.type = type;
fn.metadata = metadata;
return fn;
}
static extendValidatorWithMetadata(validatorFn: ValidatorFn, type: string, metadata?: unknown): MarkedValidatorFn {
const fn = validatorFn as MarkedValidatorFn;
fn.type = type;
fn.metadata = metadata;
return fn;
}
static required = (): MarkedValidatorFn => this.extendValidatorWithMetadata(Validators.required, 'required');
static required = (): MarkedValidatorFn => this.extendValidatorWithMetadata(Validators.required, 'required');
static RequiredWithVisibilityRulesValidator(visibilityRulesService: VisibilityRulesService, visibilityRulesKey: string) {
return this.extendValidatorWithMetadata((control: UntypedFormControl): { [key: string]: any } => {
if (visibilityRulesService.isVisibleMap[visibilityRulesKey] ?? true) {
return Validators.required(control) ;
return Validators.required(control);
}
FormService.removeError(control, 'required');
return null;
@ -71,7 +71,7 @@ export function RequiredWithVisibilityRulesValidator(visibilityRulesService: Vis
};
}
export function UrlValidator(): ValidatorFn{
export function UrlValidator(): ValidatorFn {
const urlRegex = /^(?:http(s)?:\/\/)[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:\/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
return Validators.pattern(urlRegex);
}