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

Ui fixes. 

* Fix issue on table of contents in dataset editor. Invalid fields that are hidden via visibility rules, are not computed in in the validity of the tocEntry.
This commit is contained in:
Kristian Ntavidi 2021-06-15 09:58:51 +03:00
parent c193dd2c09
commit 54b2661ebd
4 changed files with 67 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
View File

@ -17,16 +17,16 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</div> </ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@ -45,46 +45,46 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.InternalDmpEntities" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.InternalDmpEntities" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Researchers"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Researchers">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</div> </ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Datasets"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Datasets">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</div> </ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Dmps"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Dmps">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</div> </ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@ -138,18 +138,18 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ExternalDatasets" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ExternalDatasets" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="externalDatasetAutoCompleteConfiguration"> [configuration]="externalDatasetAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} </ng-container>
</mat-error> <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</div> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field> </mat-form-field>
</div> </div>
@ -158,16 +158,16 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DataRepositories" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DataRepositories" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="dataRepositoriesAutoCompleteConfiguration"> [configuration]="dataRepositoriesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</div> </ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@ -178,16 +178,16 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Registries" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Registries" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="registriesAutoCompleteConfiguration"> [configuration]="registriesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</div> </ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
@ -198,16 +198,16 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Services" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Services" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<div *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="servicesAutoCompleteConfiguration"> [configuration]="servicesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </ng-container>
<div *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</div> </ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>

6
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
View File

@ -10,7 +10,7 @@
[ngStyle]="calculateStyle(entry)" [ngStyle]="calculateStyle(entry)"
[ngClass]="calculateClass(entry)" [ngClass]="calculateClass(entry)"
> >
<span [class.text-danger]="showErrors && entry.form.invalid && ( (entry.type === tocEntryTypeEnum.FieldSet) || entry.type !== tocEntryTypeEnum.FieldSet && !expandChildren[idx]) "> <span [class.text-danger]="showErrors && entry.form.invalid && ( entry.type === tocEntryTypeEnum.FieldSet || (entry.type !== tocEntryTypeEnum.FieldSet && !expandChildren[idx])) && invalidChildsVisible(entry) ">
{{entry.numbering}}. {{entry.label}} {{entry.numbering}}. {{entry.label}}
</span> </span>
<!-- <mat-icon style="transform: translateY(3px);" class="text-danger" <!-- <mat-icon style="transform: translateY(3px);" class="text-danger"
@ -34,7 +34,9 @@
[selected]="selected" [selected]="selected"
[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
[showErrors]="showErrors" [showErrors]="showErrors"
[hiddenEntries]="hiddenEntries"> [hiddenEntries]="hiddenEntries"
[visibilityRulesService]="visibilityRulesService"
>
</table-of-contents-internal> </table-of-contents-internal>
</div> </div>

38
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
View File

@ -1,13 +1,8 @@
import { DOCUMENT } from '@angular/common';
import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core'; import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
import { BaseComponent } from '@common/base/base.component';
import { interval, Subject, Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { type } from 'os';
import { SimpleChanges } from '@angular/core'; import { SimpleChanges } from '@angular/core';
import { FormArray } from '@angular/forms';
import { ToCEntry, ToCEntryType } from '../../dataset-description.component'; import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service'; import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
@Component({ @Component({
selector: 'table-of-contents-internal', selector: 'table-of-contents-internal',
@ -26,11 +21,9 @@ export class TableOfContentsInternal implements OnInit {
@Input() TOCENTRY_ID_PREFIX=""; @Input() TOCENTRY_ID_PREFIX="";
@Input() showErrors: boolean = false; @Input() showErrors: boolean = false;
@Input() hiddenEntries: string[] =[]; @Input() hiddenEntries: string[] =[];
@Input() visibilityRulesService: VisibilityRulesService;
constructor(){
constructor(public visibilityRulesService: VisibilityRulesService){
} }
ngOnInit(): void { ngOnInit(): void {
// console.log('component created'); // console.log('component created');
@ -140,4 +133,29 @@ export class TableOfContentsInternal implements OnInit {
return tocEntryFound? tocEntryFound: null; return tocEntryFound? tocEntryFound: null;
} }
public invalidChildsVisible(entry: ToCEntry):boolean {
if(!entry || !this.visibilityRulesService){
return false;
}
if(entry.type!= this.tocEntryTypeEnum.FieldSet){
return entry.subEntries.some(_ => this.invalidChildsVisible(_));
}
if(entry.type === this.tocEntryTypeEnum.FieldSet){
const fieldsArray = entry.form.get('fields') as FormArray;
const hasError = !fieldsArray.controls.every(field=>{//every invalid field should be invisible
if(field.invalid){
const id = field.get('id').value;
const isVisible = this.visibilityRulesService.checkElementVisibility(id);
if(isVisible){
return false;
}
}
return true;
});
return hasError;
}
return false;
}
} }

2
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
View File

@ -32,7 +32,7 @@
(entrySelected)="onToCentrySelected($event)" (entrySelected)="onToCentrySelected($event)"
[selected]="tocentrySelected" [selected]="tocentrySelected"
[hiddenEntries]="hiddenEntries" [hiddenEntries]="hiddenEntries"
[visibilityRulesService]="visibilityRulesService"
> >
</table-of-contents-internal> </table-of-contents-internal>