Dataset profile Editor. Ui fixes. Visibility Rules fix.

dmp-frontend/src/app/core/model/dataset/dataset-id.model.ts

@@ -6,11 +6,16 @@ export class DatasetIdModel {
 	type: string;
 
 	constructor(data: any) {
+		try{
 		const parsed = JSON.parse(data);
 		if (!isNullOrUndefined(parsed)) {
 			this.identifier = parsed.identifier;
 			this.type = parsed.type;
 		}
+		}
+		catch(error){
+			console.warn('Could not parse DatasetIdModel');
+		}
 	}
 
 	buildForm(): FormGroup {

dmp-frontend/src/app/ui/admin/dataset-profile/admin/rule-editor-model.ts

@@ -1,4 +1,4 @@
-import { FormGroup } from "@angular/forms";
+import { FormGroup, Validators } from "@angular/forms";
 import { Rule } from "../../../../core/model/admin/dataset-profile/dataset-profile";
 import { BaseFormModel } from "../../../../core/model/base-form-model";
 
@@ -21,9 +21,9 @@ export class RuleEditorModel extends BaseFormModel {
 	buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
 		const formGroup = this.formBuilder.group({
 			// sourceField: [this.sourceField],
-			target: [{ value: this.target, disabled: (disabled && !skipDisable.includes('RuleEditorModel.target')) }],
+			target: [{ value: this.target, disabled: (disabled && !skipDisable.includes('RuleEditorModel.target')) }, [Validators.required]],
 			ruleStyle: [{ value: this.ruleStyle, disabled: (disabled && !skipDisable.includes('RuleEditorModel.ruleStyle')) }],
-			value: [{ value: this.value, disabled: (disabled && !skipDisable.includes('RuleEditorModel.value')) }],
+			value: [{ value: this.value, disabled: (disabled && !skipDisable.includes('RuleEditorModel.value')) }, [Validators.required]],
 			ruleType: [{ value: this.ruleType, disabled: (disabled && !skipDisable.includes('RuleEditorModel.ruleType')) }],
 			valueType: [{ value: this.valueType, disabled: (disabled && !skipDisable.includes('RuleEditorModel.valueType')) }]
 		});

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { FieldEditorModel } from '../../../admin/field-editor-model';
 import { Guid } from '@common/types/guid';
@@ -73,6 +73,7 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 	viewStyleEnum = DatasetProfileFieldViewStyle;
 
 	viewTypeEnum =  ViewStyleType;
+
 	private myCustomValidators:EditorCustomValidators = new EditorCustomValidators();
 
 	constructor(
@@ -245,7 +246,6 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 	}
 
 
-
 	// generatePreview(){
 	// 	const editorModel = new DatasetDescriptionCompositeFieldEditorModel();
 	// 	editorModel.title = this.form.get('title').value;
@@ -806,7 +806,6 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 		}
 
 		(<FormArray>this.form.get('fields')).push(new FieldEditorModel().fromModel(field).buildForm());
-
 		// fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity();
 		// fieldForm.get('data').updateValueAndValidity();
 		

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html

@@ -9,7 +9,7 @@
 						{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-slide-toggle>
 				</li>
-				<li class="list-inline-item" *ngIf="!viewOnly && viewType">
+				<li class="list-inline-item" *ngIf="!viewOnly && viewType && canApplyVisibility">
 					<mat-icon style="cursor: pointer;" (click)="addNewRule()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">visibility</mat-icon>
 				</li>
 				<li class="list-inline-item" *ngIf="!viewOnly && viewType && canBeDeleted">

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts

@@ -380,7 +380,25 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 		// });
 	};
 
-	
+	get canApplyVisibility():boolean{
+
+		
+		switch(this.viewType){
+			case this.viewTypeEnum.TextArea:
+			case this.viewTypeEnum.FreeText:
+			case this.viewTypeEnum.BooleanDecision:
+			case this.viewTypeEnum.RadioBox:
+			case this.viewTypeEnum.Select:
+			case this.viewTypeEnum.CheckBox:
+			case this.viewTypeEnum.DatePicker:
+				return true;
+
+		}
+
+
+		return false;
+
+	}
 
 	// validTicket:string;
 	// generatePreview(){
@@ -417,6 +435,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 
 		const field: Field = this.form.getRawValue();
 		field.defaultValue = {type:null, value: null};
+		if(!this.canApplyVisibility){
+			field.visible.rules = [];
+		}
 
 
 
@@ -767,6 +788,8 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 			fields.removeAt(index);
 			fields.insert(index, form);
 			this.form = form;
+
+			
 		}
 
 		setTimeout(() => { //TODO

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html

@@ -25,7 +25,7 @@
 	<!-- SELECTION -->
 	<mat-form-field class="col align-self-center">
 		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</mat-label>
-		<mat-select formControlName="target" required>
+		<mat-select formControlName="target" (openedChange)="computeOptions($event)">
 			<!-- SHOW SECTIONS -->
 			<!-- <mat-optgroup label="Sections" *ngIf="false">
 				<mat-option *ngFor="let option of sectionOptions" [value]="option.id" style="line-height: normal;"
@@ -43,7 +43,10 @@
 			<!-- SHOW FIELDSETS -->
 			<mat-optgroup [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDSETS' | translate">
 				<mat-option *ngFor="let option of fieldSetOptions" [value]="option.id" style="line-height: normal;"
-				[disabled]="parentIds.includes(option.id)">
+				[disabled]="parentIds.includes(option.id) || hiddenBy.includes(option.id)"
+				[matTooltip]="getToolTipMessage(option.id)"
+				[matTooltipShowDelay]="700"
+				>
 					<span>
 						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
 					</span> <br>
@@ -55,7 +58,10 @@
 			<!-- SHOW FIELDS -->
 			<mat-optgroup [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDS' | translate">
 				<mat-option *ngFor="let option of fieldOptions" [value]="option.id" style="line-height: normal;"
-				[disabled]="parentIds.includes(option.id)">
+				[disabled]="parentIds.includes(option.id) ||hiddenBy.includes(option.id)"
+				[matTooltip]="getToolTipMessage(option.id)"
+				[matTooltipShowDelay]="700"
+				>
 					<span>
 						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
 					</span> <br>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts

@@ -1,8 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { DatasetProfileFieldViewStyle } from '../../../../../../core/common/enum/dataset-profile-field-view-style';
 import { DatasetProfileComboBoxType } from '../../../../../../core/common/enum/dataset-profile-combo-box-type';
 import { ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
+import { Rule } from '@app/core/model/admin/dataset-profile/dataset-profile';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-dataset-profile-editor-rule-component',
@@ -12,6 +14,7 @@ import { ToCEntryType } from '../../../table-of-contents/table-of-contents-entry
 
 export class DatasetProfileEditorRuleComponent implements OnInit{
 	
+	
 	@Input() form: FormArray;
 	
 	@Input() viewStyleForCheck: DatasetProfileFieldViewStyle;
@@ -20,6 +23,16 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 	@Input() comboBoxTypeForCheck: DatasetProfileComboBoxType;
 	@Input() viewOnly: boolean;
 	
+
+	options: OptionItem[];
+	sectionOptions: OptionItem[];
+	fieldSetOptions: OptionItem[];
+	fieldOptions: OptionItem[];
+
+	constructor(private language: TranslateService){
+
+	}
+
 	targetValidation() {
 		//TODO
 	}
@@ -29,8 +42,11 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 	}
 
 	ngOnInit(): void {
+		this._computeOptions();
+	}
+
+	private _computeOptions(){
 		this.options = this.getOptions();
-		// TODO TO SEE IF THE COMPONENT IS NOT DESTROYED AND THE FORM UPDATES
 
 		this.sectionOptions = [];
 		this.fieldOptions = [];
@@ -50,12 +66,39 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 					break;
 			}
 		});
+		//remove options to hide if given fieldset is already hidden by option
 
+		this.fieldOptions.forEach(e=>this._buildHiddenBy(e));
+		this.fieldSetOptions.forEach(e=>this._buildHiddenBy(e));
 	}
-	options: OptionItem[];
+
-	sectionOptions: OptionItem[];
+
-	fieldSetOptions: OptionItem[];
+
-	fieldOptions: OptionItem[];
+	computeOptions(isOpened: boolean){
+		if(isOpened){
+			this._computeOptions();
+		}
+	}
+
+	private _buildHiddenBy(fo:OptionItem){
+		try{
+			this.fieldOptions.forEach(foption=>{
+				const rules = (foption.form.get('visible').get('rules') as FormArray).controls.map(c=>(c as FormGroup).getRawValue()) as Rule[]
+				const targets = rules.map(rule=>rule.target);
+				targets.forEach(target=>{
+					if(fo.parentsIds.includes(target) && !fo.hiddenBy.includes(foption.id)){
+						fo.hiddenBy.push(...foption.parentsIds);
+					}
+				})
+
+			});
+		}catch{
+			console.log('error');
+		}
+	}
+
+
+
 
 
 	getOptions():OptionItem[]{
@@ -96,7 +139,9 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 			type: type,
 			label: type ===ToCEntryType.Field? form.get('data').get('label').value :form.get('title').value,
 			// parentsIds: [form.get('id').value]
-			parentsIds: [...parentIds, form.get('id').value]
+			parentsIds: [...parentIds, form.get('id').value],
+			form: form,
+			hiddenBy:[]
 		}
 		result.push(currentOptionItem);
 
@@ -130,6 +175,26 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 		}
 		return [];
 	}
+	get hiddenBy(): string[]{
+		if(!this.formControlForCheck.get('id')) return [];
+	
+		const current = this.options.find(opt=> opt.id === this.formControlForCheck.get('id').value);
+	
+		if(current){
+			return current.hiddenBy;
+		}
+		return [];
+	}
+
+	getToolTipMessage(id: string){
+		if(this.parentIds.includes(id)){
+			// return 'Cannot hide element that contain the field';
+			return  this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.HINTS.ELEMENT-CHILD-OF-TARGET');
+		}else if(this.hiddenBy.includes(id)){
+			return  this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.HINTS.ELEMENT-HIDDEN-FROM-ELEMENT');
+		}
+		return '';
+	}
 
 }
 
@@ -138,5 +203,7 @@ interface OptionItem{
 	id: string,
 	label: string,
 	type: ToCEntryType,
-	parentsIds: string[]
+	parentsIds: string[],
+	form:FormGroup,
+	hiddenBy:string[]
 }

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts

@@ -118,7 +118,8 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 			this.numbering = this.tocentry.numbering;
 			this._selectedFieldSetId = null;
 
-			this._scrollToElement(this.tocentry.id);
+			// this._scrollToElement(this.tocentry.id);
+			this._scrollOnTop();
 		}else if(this.tocentry.type === ToCEntryType.FieldSet){
 			this.form = this.tocentry.form.parent.parent;
 			const numberingArray = this.tocentry.numbering.split('.');

dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss

@@ -69,10 +69,11 @@ mat-row:hover {
 //   //   background-color: #eef0fb;
 // }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
+  align-items: center;
   // height: 30px;
   // min-height: 30px !important;
 }

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html

@@ -72,7 +72,7 @@
 	<!-- [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }" -->
 	<div dragula="TABLEDRAG" class="ml-2"  
 	[ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'ml-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }"
-	[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id || dragHoveringOver ||isDragging)"
+	[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id ||isDragging)"
 	class="cdk-link-list"
 	[id]="parentLink.id"
 	[ngStyle]="{'border': overContainerId === parentLink?.id? '1px solid #129D99': '', 'min-height': ((!links?.length||(links.length ==1) ) && (parentLink?.type != tocEntryType.FieldSet) && (isDragging) && (draggingItemId != parentLink?.id)) ? '3em':'inherit'}"

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts

@@ -84,7 +84,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 
 
 			if(!(elementId && targetId && sourceId)){
-				console.error('Elements not have an id');
+				console.info('Elements do not have an id');
 				this.dataNeedsRefresh.emit();
 				return;
 			}
@@ -95,7 +95,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 			const sourceContainer:ToCEntry = this._findTocEntryById(sourceId, this.links);
 
 			if(!(element && (targetContainer ||((element.type===ToCEntryType.Page) && (targetId === this.ROOT_ID))) && (sourceContainer||((element.type===ToCEntryType.Page) && (sourceId === this.ROOT_ID))))){
-				console.info('Could not find elements');
+				// console.info('Could not find elements');
 				this.dataNeedsRefresh.emit();
 				drake.cancel(true);
 				return;
@@ -107,7 +107,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 					if(targetContainer.type != this.tocEntryType.Section){
 						// const message = 'Fieldset can only be child of Subsections';
 						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.FIELDSET-MUST-HAVE-PARENT-SECTION');
-						console.error(message);
+						// console.error(message);
 						this.notifyUser(message)
 						this.dataNeedsRefresh.emit();
 						return;
@@ -118,7 +118,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 						// const message = 'Cannot have inputs and sections on the same level';
 						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.INPUT-SECTION-SAME-LEVEL');
 						this.notifyUser(message);
-						console.error(message);
+						// console.error(message);
 						this.dataNeedsRefresh.emit();
 						return;
 					}
@@ -128,7 +128,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 					const sourceFieldsets = sourceContainer.form.get('fieldSets') as FormArray;
 
 					if(!targetFieldsets){
-						console.error('Not target fieldsets container found');
+						console.info('Not target fieldsets container found');
 						this.dataNeedsRefresh.emit();
 						return;
 					}
@@ -196,7 +196,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 							// const message = 'Cannot have inputs and sections on the same level';
 							const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.INPUT-SECTION-SAME-LEVEL');;
 							this.notifyUser(message);
-							console.info(message);
+							// console.info(message);
 							this.dataNeedsRefresh.emit();
 							return;
 						}
@@ -331,7 +331,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 						// const message = 'Drag not support to specific container';
 						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.DRAG-NOT-SUPPORTED');
 						this.notifyUser(message);
-						console.info(message);
+						// console.info(message);
 						this.dataNeedsRefresh.emit();
 						return;
 					}
@@ -346,7 +346,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 						// const message = 'A page element can only be at top level';
 						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.PAGE-ELEMENT-ONLY-TOP-LEVEL');
 						this.notifyUser(message);
-						console.info(message);
+						// console.info(message);
 						this.dataNeedsRefresh.emit();
 						return;
 					}
@@ -413,7 +413,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 				}
 				default:
 
-					console.error('Could not support moving objects for specific type of element');
+					console.info('Could not support moving objects for specific type of element');
 					this.dataNeedsRefresh.emit();
 					return;
 

dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss

@@ -33,7 +33,7 @@
   }
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
@@ -41,25 +41,25 @@
   min-height: 30px !important;
 }
 
-::ng-deep .mat-paginator-page-size {
+:host ::ng-deep .mat-paginator-page-size {
   height: 43px;
 }
 
-::ng-deep .mat-paginator-range-label {
+:host ::ng-deep .mat-paginator-range-label {
   margin: 15px 32px 0 24px !important;
 }
 
-::ng-deep .mat-paginator-range-actions {
+:host ::ng-deep .mat-paginator-range-actions {
   width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
 
-::ng-deep .mat-paginator-navigation-previous {
+:host ::ng-deep .mat-paginator-navigation-previous {
   margin-left: auto !important;
 }
 
-::ng-deep .mat-icon-button {
+:host ::ng-deep .mat-icon-button {
   height: 30px !important;
   font-size: 12px !important;
 }

dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss

@@ -59,7 +59,7 @@
 	}
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
 	// flex-direction: row-reverse !important;
 	// justify-content: space-between !important;
 	// height: 30px;

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss

@@ -199,11 +199,11 @@
   padding-bottom: 0 !important;
 }
 
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
   padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
@@ -211,27 +211,27 @@
   min-height: 30px !important;
 }
 
-::ng-deep .mat-paginator-page-size {
+:host ::ng-deep .mat-paginator-page-size {
   height: 43px;
 }
 
-::ng-deep .mat-icon-button {
+:host ::ng-deep .mat-icon-button {
   height: 30px !important;
   font-size: 12px !important;
 }
 
-::ng-deep .mat-paginator-range-label {
+:host ::ng-deep .mat-paginator-range-label {
   margin: 15px 32px 0 24px !important;
 }
 
-::ng-deep .mat-paginator-range-actions {
+:host ::ng-deep .mat-paginator-range-actions {
   width: auto !important;
   min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
 
-::ng-deep .mat-paginator-navigation-previous {
+:host ::ng-deep .mat-paginator-navigation-previous {
   margin-left: auto !important;
 }
 

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss

@@ -6,12 +6,12 @@
   .lightblue-btn {
     font-size: 12px;
   }
-  ::ng-deep .mat-paginator-container {
+  :host ::ng-deep .mat-paginator-container {
     height: auto !important;
   }
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
@@ -19,7 +19,7 @@
   min-height: 30px !important;
 }
 
-::ng-deep .mat-paginator-page-size {
+:host ::ng-deep .mat-paginator-page-size {
   height: 43px;
 }
 
@@ -28,18 +28,18 @@
   font-size: 12px !important;
 }
 
-::ng-deep .mat-paginator-range-label {
+:host ::ng-deep .mat-paginator-range-label {
   margin: 15px 32px 0 24px !important;
 }
 
-::ng-deep .mat-paginator-range-actions {
+:host ::ng-deep .mat-paginator-range-actions {
   width: auto !important;
   min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
 
-::ng-deep .mat-paginator-navigation-previous {
+:host ::ng-deep .mat-paginator-navigation-previous {
   margin-left: auto !important;
 }
 
@@ -256,7 +256,7 @@
   padding-bottom: 0 !important;
 }
 
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
   padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
 

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts

@@ -384,6 +384,9 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 	}
 
 	parseTags() {
+		try{
+			
+		
 		let stringValue = this.form.get('value').value;
 		if (typeof stringValue === 'string') {
 			stringValue = (<string>stringValue).replace(new RegExp('{', 'g'), '{"').replace(new RegExp('=', 'g'), '":"').replace(new RegExp(',', 'g'), '",').replace(new RegExp(', ', 'g'), ', "').replace(new RegExp('}', 'g'), '"}');
@@ -397,6 +400,9 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 		}
 		const tagArray = JSON.parse(stringValue);
 		this.form.patchValue({'value': tagArray});
+		}catch(e){
+			console.warn('Could not parse tags');
+		}
 	}
 
 	filterTags(value: string): Observable<ExternalSourceItemModel[]> {

dmp-frontend/src/assets/i18n/de.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "then show Field With Id",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/i18n/en.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "then show Field With Id",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/i18n/es.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "entonces muestra el campo con identificación",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/i18n/gr.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "τότε δείξε το Πεδίο με ταυτοποίηση",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/i18n/pt.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "então mostrar Campo com o Id",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/i18n/sk.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "then show Field With Id",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/i18n/sr.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "tada prikazati polje sa Id",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/i18n/tr.json

@@ -468,6 +468,10 @@
 						"RULE-THEN": "sonra alanı kimliği ile göster",
 						"FIELDSETS": "Questions",
 						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
 					}
 				},
 				"FORM-VALIDATION":{
@@ -515,8 +519,8 @@
 			"FIELDSET": {
 				"ADD-INPUT": "Add new input",
 				"COMMENT-FIELD": "Comment field",
-				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the givven question.",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
-				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the givven question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
 				"MULTIPLICITY": "Multiplicity",
 				"MORE": "More.."
 			}

dmp-frontend/src/assets/splash/about/how-it-works.html

@@ -180,7 +180,7 @@
 				<div class="options-menu" id="options-menu">
 
 					<div class="row">
-						<div class="col-7">
+						<div class="col-12 col-md-7">
 							<ul class="nav nav-tabs">
 								<li class="nav-item">
 								  <a class="nav-link active" data-toggle="tab" id="multiple-navigation-1" data-img-fragment href="#create_and_add">Create & Add</a>
@@ -280,7 +280,7 @@
 							</div>
 						</div>
 						<!-- Images -->
-						<div class="col">
+						<div class="col" style="min-height: 20em;">
 							<img src="../assets/img/3_dmp_editor.png" class="img-fragment-step opacity-1 img-sharp" id="img-fragment-dmp-editor" alt="DMP editor">
 							<img src="../assets/img/dmp_out.png" class="img-fragment-step img-sharp" id="img-fragment-dmp-out" alt="DMP outputs">
 							<img src="../assets/img/4_dataset_editor.png" class="img-fragment-step img-sharp" id="img-fragment-dataset-editor" alt="Dataset editor">