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

Ui fixes.

Browse Source 
* 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.
spring-update
Kristian Ntavidi 3 years ago
parent c193dd2c09
commit 54b2661ebd
4 changed files with 67 additions and 47 deletions
Show Stats Download Patch File Download Diff File

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

@ -17,16 +17,16 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
<div class="row">
<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')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<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 class="row">
<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')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
<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')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
<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')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<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 class="row">
<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')"
[configuration]="externalDatasetAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
@ -158,16 +158,16 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DataRepositories" class="col-12">
<div class="row">
<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')"
[configuration]="dataRepositoriesAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<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 class="row">
<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')"
[configuration]="registriesAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<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 class="row">
<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')"
[configuration]="servicesAutoCompleteConfiguration">
</app-multiple-auto-complete>
</div>
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
</div>
</ng-container>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<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
Unescape Escape View File

@ -10,7 +10,7 @@
[ngStyle]="calculateStyle(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}}
</span>
<!-- <mat-icon style="transform: translateY(3px);" class="text-danger"
@ -34,7 +34,9 @@
[selected]="selected"
[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
[showErrors]="showErrors"
[hiddenEntries]="hiddenEntries">
[hiddenEntries]="hiddenEntries"
[visibilityRulesService]="visibilityRulesService"
>
</table-of-contents-internal>
</div>

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

@ -1,13 +1,8 @@
import { DOCUMENT } from '@angular/common';
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 { FormArray } from '@angular/forms';
import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
@Component({
selector: 'table-of-contents-internal',
@ -26,11 +21,9 @@ export class TableOfContentsInternal implements OnInit {
@Input() TOCENTRY_ID_PREFIX="";
@Input() showErrors: boolean = false;
@Input() hiddenEntries: string[] =[];
@Input() visibilityRulesService: VisibilityRulesService;
constructor(public visibilityRulesService: VisibilityRulesService){
constructor(){
}
ngOnInit(): void {
// console.log('component created');
@ -140,4 +133,29 @@ export class TableOfContentsInternal implements OnInit {
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
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save