Bug fixes on dataset templates editor Admin (partial)

* Make use of observables instead of setTimeouts
* Remove not nessecary calculations

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

@@ -76,11 +76,7 @@
 			</mat-form-field>
 		</div>
 	</div>
-	<div style="position: relative;" class="col-12">
+	<div style="position: relative;" class="col-12" *ngIf="hasFocus">
-		
-
-		<ng-container *ngIf="hasFocus">
-
 		<div class="row" *ngIf="showDescription">
 			<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
 				<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
@@ -114,8 +110,6 @@
 				</mat-error>
 			</mat-form-field>
 		</div>
-		</ng-container>
-
 	</div>
 
 
@@ -123,9 +117,8 @@
 	<div class="row">
 
 		<!-- FIELDS -->
-		<div class="col">
+		<div class="col-12" *ngIf="hasFocus">
 
-			<div>
 			<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
 				<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
 					>
@@ -146,7 +139,7 @@
 						(delete)="deleteField(i)">
 					</app-dataset-profile-editor-field-component>
 				</div>
-					<hr *ngIf="hasFocus">
+				<hr>
 			</ng-container>
 <!-- 			
 			<div *ngIf="isComposite" class="row">
@@ -174,8 +167,6 @@
 					<button mat-button class="full-width" (click)="addNewField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD' | translate}}</button>
 				</div>
 			</div> -->
-
-			</div>
 		</div>
 
 		<!-- PREVIEW -->

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

@@ -21,8 +21,9 @@ import { AutoCompleteFieldData, BooleanDecisionFieldData, CheckBoxFieldData, Cur
 import { CompositeField } from '@app/core/model/dataset-profile-definition/composite-field';
 import {Field as FieldDefinition} from '@app/core/model/dataset-profile-definition/field';
 import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, delay, map, takeUntil, tap } from 'rxjs/operators';
 import { GENERAL_ANIMATIONS } from '../../animations/animations';
+import { BaseComponent } from '@common/base/base.component';
 
 @Component({
 	selector: 'app-dataset-profile-editor-composite-field-component',
@@ -30,7 +31,7 @@ import { GENERAL_ANIMATIONS } from '../../animations/animations';
 	styleUrls: ['./dataset-profile-editor-composite-field.component.scss'],
 	animations:[GENERAL_ANIMATIONS]
 })
-export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnChanges {
+export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges {
 
 	@Input() form: FormGroup;
 	@Input() indexPath: string;
@@ -61,7 +62,9 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 		private language: TranslateService,
 		public enumUtils: EnumUtils,
 		public datasetProfileService: DatasetProfileService
-		) { }
+		) { 
+			super();
+		}
 
 	ngOnChanges(){
 		// this.setTargetField(null);
@@ -112,16 +115,52 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 		this.showExtendedDescription = !!this.form.get('extendedDescription').value;
 		this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
 
-		this.form.valueChanges.subscribe(changes=>{
+		this.form.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(changes=>{
 			// this.previewForm = null;
 			this.previewDirty = true;
 			this.generatePreviewForm();
 			
 		});
-		this.previewSubject$.pipe(debounceTime(600)).subscribe(model=>{
+		this.previewSubject$
-			const updatedForm = model.buildForm();
+		.pipe(debounceTime(600))
-			this.reloadPreview(updatedForm)
+		.pipe(
-		})
+			takeUntil(this._destroyed),
+			map(model => model.buildForm()),
+			map(updatedForm =>{
+				const previewContainer = document.getElementById('preview_container'+ this.form.get('id').value);
+				// let clientHeight = -1;
+				if(previewContainer){
+					// console.log(previewContainer);
+					const clientHeight = previewContainer.clientHeight;
+					// console.log(clientHeight);
+
+					if(clientHeight){
+						previewContainer.style.height = clientHeight.toString() + 'px';
+
+						// console.log('height:' ,previewContainer.style.height);
+					}
+				}
+				this.showPreview = false;
+				this.previewDirty = true;
+				this.previewForm = updatedForm;
+				return previewContainer;
+				}),
+			delay(100),
+			tap( previewContainer =>{
+				this.showPreview = true;
+				this.previewDirty = false;
+			}),
+			delay(100)
+		)
+		.subscribe(previewContainer=>{
+
+			if(previewContainer){
+				previewContainer.style.height = 'auto';
+			}
+			
+			// const updatedForm = model.buildForm();
+			// this.reloadPreview(updatedForm)
+		});
 
 
 		this.generatePreviewForm();

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

@@ -15,12 +15,10 @@
 				<li class="list-inline-item" *ngIf="!viewOnly && viewType && canBeDeleted" class="text-muted">
 					<mat-icon style="cursor: pointer; opacity: 0.7; transform:translateY(2px) translateX(10px) ;" (click)="onDelete()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.DELETE-INPUT' | translate">delete</mat-icon>
 				</li>
-				
 			</ul>
 		</div>
 	</div>
 	
-
 	<div class="row">
 		<!-- <mat-form-field class="col">
 			<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text" [formControl]="this.form.get('id')"
@@ -173,9 +171,9 @@
 		</mat-form-field>
 
 		<!-- Combo Box -->
-		<mat-form-field *ngIf="showOrdinal" class="col">
+		<!-- <mat-form-field *ngIf="showOrdinal" class="col">
 			<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')" required>
-		</mat-form-field>
+		</mat-form-field> -->
 
 		<!-- Validation -->
 		<!-- <mat-form-field class="col" *ngIf="!(defaulValueRequired(form.get('viewStyle').get('renderStyle').value))">
@@ -189,7 +187,7 @@
 			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label>
 			<mat-select [formControl]="this.form.get('rdaCommonStandard')">
 				<mat-option>--</mat-option>
-				<mat-option *ngFor="let property of datasetProfileService.getRDACommonStandards()" [value]="property">
+				<mat-option *ngFor="let property of rdaCommonStandards" [value]="property">
 					{{property}}
 				</mat-option>
 			</mat-select>
@@ -246,7 +244,6 @@
 		<app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component>
 		<app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component>
 	</div>
-	
 </ng-container>
 
 

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

@@ -41,6 +41,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 
 	@Output() delete = new EventEmitter<void>();
 
+
+	rdaCommonStandards = this.datasetProfileService.getRDACommonStandards();
+
 	constructor(
 		public enumUtils: EnumUtils,
 		public datasetProfileService: DatasetProfileService,

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

@@ -29,6 +29,9 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 	fieldSetOptions: OptionItem[];
 	fieldOptions: OptionItem[];
 
+	parentIds: string[] = [];
+	hiddenBy: string[] = [];
+
 	constructor(private language: TranslateService){
 
 	}
@@ -70,6 +73,8 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 
 		this.fieldOptions.forEach(e=>this._buildHiddenBy(e));
 		this.fieldSetOptions.forEach(e=>this._buildHiddenBy(e));
+		this.parentIds = this.computeParentIds();
+		this.hiddenBy = this.computeHiddenBy();
 	}
 
 
@@ -164,8 +169,15 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 		return result;
 	}
 
-	get parentIds(): string[]{
+	// get parentIds(): string[]{
 
+		
+	// }
+	// get hiddenBy(): string[]{
+		
+	// }
+
+	computeParentIds(): string[]{
 		if(!this.formControlForCheck.get('id')) return [];
 
 		const current = this.options.find(opt=> opt.id === this.formControlForCheck.get('id').value);
@@ -175,7 +187,8 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
 		}
 		return [];
 	}
-	get hiddenBy(): string[]{
+
+	computeHiddenBy(): string[]{
 		if(!this.formControlForCheck.get('id')) return [];
 	
 		const current = this.options.find(opt=> opt.id === this.formControlForCheck.get('id').value);

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

@@ -1,5 +1,5 @@
 <div id="topofcontainer"></div>
-<div class="row" [id]="idprefix+form.get('id').value">
+<div class="row" [id]="idprefix+form.get('id').value" *ngIf="form">
 
 
     <div class="col-12" >
@@ -69,7 +69,7 @@
                         <mat-card-content>
     
                             <mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly">
-                                <mat-icon class="handle" style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;" cdkDragHandle>drag_indicator</mat-icon>
+                                <mat-icon class="handle" style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;">drag_indicator</mat-icon>
                             </mat-card-header>
                             <app-dataset-profile-editor-composite-field-component [form]="fieldset"
                                 [viewOnly]="viewOnly"
@@ -81,7 +81,6 @@
             </div>
 
             <div class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)">
-
                 <div class="row bg-white actions-list stick-list">
                     <nav *ngIf="!viewOnly">
                         <label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>

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

@@ -2,8 +2,10 @@
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
 import { Guid } from '@common/types/guid';
+import { isNullOrUndefined } from '@swimlane/ngx-datatable';
 import { DragulaService } from 'ng2-dragula';
-import { Subscription } from 'rxjs';
+import { pipe, Subject, Subscription } from 'rxjs';
+import { debounceTime, delay, tap } from 'rxjs/operators';
 import { FieldEditorModel } from '../../../admin/field-editor-model';
 import { FieldSetEditorModel } from '../../../admin/field-set-editor-model';
 import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
@@ -36,6 +38,10 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 	readonly dragula_prefix = "dragulaid";
 	private subs = new Subscription();
 	private FIELDSETS = 'FIELDSETS';
+
+	private initializer = new Subject<void>();
+	private scroller = new Subject<string>();
+	// private $selectedFieldsetId = new Subject<string>();
 	constructor(
 		private dragulaService: DragulaService,
 		private myElement: ElementRef
@@ -66,6 +72,33 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 			this.dataNeedsRefresh.emit();
 			return ;
 		}));
+		const initializerSub = this.initializer
+		.pipe(
+			debounceTime(200)
+		)
+		.subscribe(() =>{
+			this.initialize();
+		});
+		this.subs.add(initializerSub);
+		this.subs.add(
+			this.scroller
+			.pipe(debounceTime(700))
+			.subscribe(id => {
+				if(isNullOrUndefined(id)){
+					this._scrollOnTop();
+					return ;
+				}
+				this._scrollToElement(id);
+			})
+		);
+
+		// this.subs.add(
+		// 	this.$selectedFieldsetId
+		// 	.pipe(
+		// 		debounceTime(100)
+		// 	)
+		// 	.subscribe(id => this.selectedEntryId.emit(id))
+		// );
 	
 	}
 	ngOnDestroy(){
@@ -74,15 +107,7 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 		this.subs.unsubscribe();
 	}
 	ngOnChanges(changes: SimpleChanges): void {
-		// console.log('---------element updated-------');
+		this.initializer.next();
-		// console.log('numbering before:', this.numbering);
-		
-		
-		this.initialize();
-		// console.log('----post update----');
-		// console.log('numbering now', this.numbering, ' changes detected:', changes);
-		
-		
 	}
 
 
@@ -99,14 +124,18 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 
 		if(id === this._selectedFieldSetId) return;
 		this._selectedFieldSetId = id;
-		this.selectedEntryId.emit(this._selectedFieldSetId);
+		this.selectedEntryId.emit(id);
 	}
 
-	private _findParentSection():FormGroup{
-		const parent = this.form.parent;
 	
-		return parent;
+
-	}
+
+
+	// private _findParentSection():FormGroup{
+	// 	const parent = this.form.parent;
+
+	// 	return parent;
+	// }
 
 
 	private initialize(){
@@ -115,8 +144,7 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 			this.numbering = this.tocentry.numbering;
 			this._selectedFieldSetId = null;
 
-			// this._scrollToElement(this.tocentry.id);
+			this.scroller.next(null);
-			this._scrollOnTop();
 		}else if(this.tocentry.type === ToCEntryType.FieldSet){
 			this.form = this.tocentry.form.parent.parent;
 			const numberingArray = this.tocentry.numbering.split('.');
@@ -126,42 +154,27 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 			}else{
 				// console.warn('!not found numbering');
 			}
-			this.selectedFieldSetId = this.tocentry.id;
+			this._selectedFieldSetId = this.tocentry.id;
 
-			this._scrollToElement(this.selectedFieldSetId);
+			// this._scrollToElement(this.selectedFieldSetId);
+			this.scroller.next(this.tocentry.id);
 		}else{//scroll on top
-			this._scrollOnTop();
+			// this._scrollOnTop();
+			this.scroller.next(null);
 		}
 	}
 
 	private _scrollToElement(id: string){
 		let el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id);
-			// let el = this.myElement.nativeElement.getElementbyId (this.selectedFieldSetId);
-			
-		if(el){
-
-			/*
-				Give time to template to build itself (extending and collapsing).
-				In case we are dragging from one container to another, then  the ui takes around 600ms to build 
-				individual previews (dataset-profile-editor-field.component.ts);
-
-			*/
-			setTimeout(() => {
-				const el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id);
 		if(el){
 			el.scrollIntoView({behavior: "smooth", block:'start'});
 		}
-			}, 700);
-		}
-
 	}
 	private _scrollOnTop(){
-		setTimeout(() => {
 		const el = this.myElement.nativeElement.querySelector('#topofcontainer');
 		if(el){
-				el.scrollIntoView({behavior:'smooth', block:'end'})
+			el.scrollIntoView({behavior:'smooth', block:'end'});
 		}
-		},200);
 	}
 	ngOnInit() {
 		
@@ -175,7 +188,18 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 		this.cloneFieldSet.emit(fieldset);
 	}
 	onAddFieldSet(){
-		this.addNewFieldSet.emit(this.form);
+		// this.addNewFieldSet.emit(this.form);
+		try{
+			const length = (this.form.get('fieldSets') as FormArray).length;
+			if(length === 0){
+				this.addFieldSetAfter(-9999, 0);
+				return;
+			}
+			else{
+				const lastElement = (this.form.get('fieldSets') as FormArray).at(length -1);
+				this.addFieldSetAfter(lastElement.get('ordinal').value, length-1);
+			}
+		} catch {}
 	}
 
 	addFieldSetAfter(afterOrdinal: number, afterIndex: number):void{
@@ -205,6 +229,8 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
 		const index = afterOrdinal < 0 ? 0: afterIndex +1;
 		parentArray.insert(index, fieldsetForm);
 		this.dataNeedsRefresh.emit();
+
+		// this.selectedFieldSetId = fieldSetId;
 		setTimeout(() => {
 			this.selectedFieldSetId = fieldSetId;
 		}, 200);

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

@@ -318,7 +318,7 @@
 										(addNewFieldSet)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: $event}})"
 										(removeFieldSet)="onRemoveEntry(_findTocEntryById($event, toCEntries))"
 										(cloneFieldSet)="cloneFieldSet($event)"
-										(selectedEntryId)="displayItem(_findTocEntryById($event, getTocEntries()))"
+										(selectedEntryId)="displayItem(_findTocEntryById($event, toCEntries))"
 										(dataNeedsRefresh)="onDataNeedsRefresh()"
 									>
 

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

@@ -462,11 +462,19 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 		const tableDiv = document.querySelector('#tocentrytable');
 
 		try {
-			top.addEventListener('mouseover', (e) => {this.scrollTableTop = true; });
+			top.addEventListener('mouseover', (e) => {this.scrollTableTop = true; },{
-			bottom.addEventListener('mouseover', (e) => {this.scrollTableBottom = true; });
+				passive: true
+			  });
+			bottom.addEventListener('mouseover', (e) => {this.scrollTableBottom = true; },{
+				passive: true
+			  });
 	
-			top.addEventListener('mouseout', (e) => {this.scrollTableTop = false});
+			top.addEventListener('mouseout', (e) => {this.scrollTableTop = false},{
-			bottom.addEventListener('mouseout', (e) => {this.scrollTableBottom = false;});
+				passive: true
+			  });
+			bottom.addEventListener('mouseout', (e) => {this.scrollTableBottom = false;},{
+				passive: true
+			  });
 	
 	
 			this.$clock
@@ -557,10 +565,6 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 	ngOnInit(): void {
 		
 
-	}
-
-	ngOnChanges(changes: SimpleChanges) {
-		
 	}