Dataset profile editor. Dynamic progress bar and confirmation before delete

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

@@ -7,6 +7,9 @@ import { ValidationType } from '@app/core/common/enum/validation-type';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
 import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
+import { MatDialog } from '@angular/material';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-dataset-profile-editor-composite-field-component',
@@ -27,7 +30,10 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 	isMultiplicityEnabled = false;
 	viewStyleEnum = DatasetProfileFieldViewStyle;
 
-	constructor() { }
+	constructor(
+		private dialog: MatDialog,
+		private language: TranslateService,
+		) { }
 
 	ngOnChanges(){
 		this.setTargetField(null);
@@ -170,6 +176,26 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 
 
 	deleteTargetField(){
+		
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().subscribe(result => {
+			if (result) {
+				this._deleteTargetField();
+			}
+		});
+	
+	}
+
+
+	private _deleteTargetField(){
 		if(!this.targetField) return;
 
 		let index = -1;

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

@@ -224,7 +224,8 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 				cssClass: null
 			};
 		
-		fieldEditorModel.data = this.form.get('data').value;
+
+		fieldEditorModel.data = (this.form.get('data') as FormGroup).getRawValue();		
 		fieldEditorModel.value = this.form.get('defaultValue').get('value').value;
 		fieldEditorModel.validationRequired = (this.form.get('validations').value as Array<ValidationType>).includes(ValidationType.Required);
 

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

@@ -25,21 +25,11 @@
 		<div class="row" style="padding: 2em;">
 
 			<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
-				<div id="progress" [ngStyle]="{'transform': 'translateX('+barPercentageA+'%) skewX(-25deg)'}"></div>
+				<div id="progress" [ngStyle]="{'transform': 'translateX('+barPercentage+'%) skewX(-25deg)'}"></div>
 				<div class="row p-1">
-					<div class="col text-center" >
+					<div class="col text-center" *ngFor="let step of steps; index as idx">
-						<span (click)="stepper.selectedIndex=0" style="cursor: pointer">
+						<span (click)="stepper.selectedIndex=idx" style="cursor: pointer">
-							{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
+							{{step.label}}
-						</span>
-					</div>
-					<div class="col text-center">
-						<span (click)="stepper.selectedIndex=1" style="cursor: pointer">
-							{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}
-						</span>
-					</div>
-					<div class="col text-center text-muted">
-						<span style="cursor: pointer">
-							Preview and Finalize
 						</span>
 					</div>
 				</div>
@@ -56,10 +46,11 @@
 		</div>
 
 		
-		<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onStepperSelectionChange($event)">
+		<mat-horizontal-stepper [linear]="true" #stepper class="stepper">
-			<mat-step>
+
-				<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
+			<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate">
-				</ng-template>
+				<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
+				</ng-template> -->
 				<div class="row">
 					<div class="col-12">
 						<div class="heading">1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *</div>
@@ -119,8 +110,8 @@
 					</div>
 				</div>
 			</mat-step> -->
-			<mat-step>
+			<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate">
-				<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
+				<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template> -->
 				<div class="row">
 
 					<!-- TABLE -->
@@ -251,12 +242,15 @@
 					</div> -->
 				</div>
 			</mat-step>
+			<mat-step label="Preview and Finalize">
+				Preview and finalize
+			</mat-step>
 
 		</mat-horizontal-stepper>
 
 
 
-		<ng-container *ngIf="false">
+		<ng-container *ngIf="true">
 
 			<div class="d-flex">
 				<!-- SAVE BUTTON -->
@@ -296,10 +290,10 @@
 
 		</ng-container>
 
-		<!-- <div class="row">
+		<div class="row">
 			<button (click)="printForm()">
 				console form
 			</button>
-		</div> -->
+		</div>
 	</div>
 </div>

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

@@ -44,7 +44,7 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
 	templateUrl: './dataset-profile-editor.component.html',
 	styleUrls: ['./dataset-profile-editor.component.scss']
 })
-export class DatasetProfileEditorComponent extends BaseComponent implements OnInit, AfterViewInit {
+export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
 
 	isNew = true;
 	isNewVersion = false;
@@ -88,12 +88,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		// this.profileID = route.snapshot.params['id'];
 		// this.cloneId = route.snapshot.params['cloneid'];
 	}
-	ngAfterViewInit(): void {
-		// setTimeout(() => {		
-		// 	this.barPercentage = (1 / (this.stepper.steps.length+1)) * 110 - 110;
-		// }, 0);
-	}
-
 
 	ngOnInit() {
 		this.matomoService.trackPageView('Admin: Dataset Profile Edit');
@@ -732,9 +726,27 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 
 
+	onRemoveEntry(tce: ToCEntry){
+		
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this._deleteEntry(tce);
+			}
+		});
+	
+	}
 
 
-	onRemoveEntry(tce: ToCEntry) {
+	private _deleteEntry(tce: ToCEntry) {
 		//define entry type
 		switch (tce.type) {
 			case ToCEntryType.Page:
@@ -949,22 +961,19 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		console.log(this.form.value);
 	}
 
-
+	get barPercentage(){
-
-	barPercentage = -100;
-	onStepperSelectionChange(selectionChange: StepperSelectionEvent){
-			
-		this.barPercentage = ((selectionChange.selectedIndex+1) / (this.stepper.steps.length+1)) * 110- 110;
-	}
-
-	get barPercentageA(){
 		if(!this.stepper){
 			return -110;
 		}
-
 		const selectedIndex = this.stepper.selectedIndex + 1;
-		return (selectedIndex / (this.stepper.steps.length+1)) * 110- 110;
+		return (selectedIndex / this.stepper.steps.length) * 110- 110;
 	}
 
-	
+	get steps(){
+		if(!this.stepper){
+			return [];
+		}
+
+		return this.stepper.steps;
+	}
 }