Admin template editor. Move save/delete/update buttons on top. Add "Back to top" button.

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

@@ -70,6 +70,14 @@ export const GENERAL_ANIMATIONS = [
         })),
         transition('untriggered => triggered', animate('400ms ease')),
         transition('triggered => untriggered', animate('400ms 100ms ease'))
+    ]),
+    trigger('scroll-on-top-btn',[
+        transition(":enter", [style({opacity:0, transform:'scale(0)'}), animate('400ms ease', style({'opacity':1, transform:'scale(1)'}))]),
+        transition(":leave", [style({opacity:1,transform:'scale(1)'}), animate('400ms ease', style({'opacity':0, transform:'scale(0)'}))])
+    ]),
+    trigger('action-btn',[
+        transition(":enter", [style({opacity:0, transform:'scale(0)'}), animate('400ms ease', style({'opacity':1, transform:'scale(1)'}))]),
+        transition(":leave", [style({opacity:1,transform:'scale(1)'}), animate('400ms ease', style({'opacity':0, transform:'scale(0)'}))])
     ])
     
 ]

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

@@ -1,6 +1,6 @@
 <!-- View Only : {{viewOnly}} -->
 
-<div class="main-content">
+<div class="main-content" id="main-content">
 	<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
 
 
@@ -11,27 +11,54 @@
 
 		<div class="row" style="padding: 2em; margin-bottom: 1em; background: #F5F5F5 0% 0% no-repeat padding-box;" >
 
-			<div class="col-12" style="margin-bottom: 2em;">
+			<div class="col-12 d-flex" style="margin-bottom: 4em; justify-content: space-between; align-items: baseline;padding-right: 15px;">
-				<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
+				<div>
-				<h3 *ngIf="isNew && isClone">
+					<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
-					<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
+					<h3 *ngIf="isNew && isClone">
-					{{form.get('label').value}}
+						<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
-				</h3>
+						{{form.get('label').value}}
-				<h3 *ngIf="isNew && isNewVersion">
+					</h3>
-					<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
+					<h3 *ngIf="isNew && isNewVersion">
-					{{form.get('label').value}}
+						<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
-				</h3>
+						{{form.get('label').value}}
+					</h3>
 	
-				<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
+					<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
-
+				</div>
-				<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
+				<div class="d-flex justify-content-end" style="gap: 1em">
-					<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
+					<button mat-raised-button *ngIf="form.get('status').value==1" class="template_action_btn" (click)="downloadXML();" type="button" [@action-btn]>{{
 						'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+
+					<ng-container *ngIf="!viewOnly">
+						<button mat-raised-button class="template_action_btn" type="button"
+							*ngIf="stepper.selectedIndex !=2 && !newVersionId"
+							[@action-btn]
+							(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+							translate}}</button>
+						<button mat-raised-button class="template_action_btn" type="button" [@action-btn]
+							*ngIf="!newVersionId || (newVersionId && stepper.selectedIndex !=2)"
+							(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+							translate}}</button>
+					</ng-container>
+					<!-- SAVE BUTTON  WHEN FINALIZED-->
+					<ng-container *ngIf="showUpdateButton()">
+						<button mat-raised-button class="template_action_btn" type="button"
+							*ngIf="stepper.selectedIndex !=2 && !newVersionId"
+							[@action-btn]
+							(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+							translate}}</button>
+					</ng-container>
+					<!-- DELETE BUTTON -->
+					<ng-container *ngIf="!isNew">
+						<button mat-raised-button class="template_action_btn" (click)="delete()" [@action-btn]>
+							<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
+						</button>
+					</ng-container>
 				</div>
 			</div>
 
 			<!-- Steps Navigation -->
-			<div class="col-12 d-flex" *ngIf="steps">
+			<div class="col-12 d-flex" *ngIf="steps" id="stepper-navigation">
 				<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
 					<div id="progress" [ngStyle]="progressStyle"></div>
 					<div class="row h-100">
@@ -51,7 +78,7 @@
 					</div>
 				</div>
 
-				<div class="col d-flex justify-content-end">
+				<div class="col d-flex justify-content-end" style="padding-right: 0px;">
 					<button [@previous_btn] mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
 						<!-- <mat-icon>navigate_before</mat-icon>  -->
 						{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
@@ -67,44 +94,23 @@
 
 
 					<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
-					<!-- <ng-container *ngIf="stepper.selectedIndex === (steps.length-1)"> -->
+						<button [@finalize_btn] mat-button class="finalize-btn ml-3"
-						<ng-container *ngIf="!viewOnly">
+							[disabled]="!form.valid"
+							(click)="updateAndFinalize()"
+							>
 
-							<!-- <button mat-button class="navigate-btn ml-2"
+							<ng-container *ngIf="form.get('status').value==1">
-								(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+								<ng-container *ngIf="newVersionId else updateText">
-								translate}}</button> -->
+									{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |translate}}
-							<!-- <button mat-button class="finalize-btn ml-2"
+								</ng-container>
-								(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+								<ng-template #updateText>
-								translate}}</button> -->
+									{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |translate}}
-						</ng-container>
+								</ng-template>
-
-						<!-- //TODO -->
-						<ng-container *ngIf="true">
-
-							<!-- <button mat-button class="navigate-btn ml-2"
-								(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
-								translate}}</button> -->
-							<!-- <button mat-button class="finalize-btn ml-2"
-								(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
-								translate}}</button> -->
-							<button [@finalize_btn] mat-button class="finalize-btn ml-3"
-								[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
-								translate}}</button>
-
-						</ng-container>
-						<!-- SAVE BUTTON  WHEN FINALIZED-->
-
-						<ng-container *ngIf="false">
-							<ng-container *ngIf="showUpdateButton()">
-
-								<!-- <button mat-button class="navigate-btn ml-2"
-									(click)='checkFormValidation()'
-									[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
-								<button mat-button class="navigate-btn ml-2"
-									(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
-									translate}}</button>
 							</ng-container>
-						</ng-container>
+							<ng-container *ngIf="form.get('status').value!=1">
+								{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |translate}}
+							</ng-container>
+						</button>
 					</ng-container>
 
 
@@ -461,7 +467,7 @@
 
 
 
-		<ng-container *ngIf="true">
+		<ng-container *ngIf="false">
 
 			<div class="d-flex">
 				<!-- SAVE BUTTON -->
@@ -508,6 +514,14 @@
 
 		</ng-container>
 
+		<div class="scroll-on-top">
+			<button mat-fab (click)="scrollOnTop()" *ngIf="showScrollOnTopButton" [@scroll-on-top-btn] [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.BACK-TO-TOP'| translate">
+				<mat-icon>
+					keyboard_arrow_up
+				</mat-icon>
+			</button>
+		</div>
+
 		<!-- <div class="row">
 			<button (click)="printForm()">
 				console form

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

@@ -129,6 +129,21 @@ $blue-color-light: #5cf7f2;
 	box-shadow: 0px 3px 6px #1E202029;
 	color: #129D99;
 }
+.template_action_btn{
+	border-radius: 30px;
+	border: 1px solid #129D99;
+	background: transparent;
+	padding-left: 2em;
+	padding-right: 2em;
+	box-shadow: 0px 3px 6px #1E202029;
+	color: #129D99;
+	flex: 0 0 auto;
+	&:disabled{
+		background-color: #CBCBCB;
+		color: #FFF;
+		border: 0px;
+	}
+}
 
 
 
@@ -285,3 +300,8 @@ $blue-color-light: #5cf7f2;
 .user-table-body{
 	text-align: center;
 }
+.scroll-on-top{
+	position: fixed;
+	bottom: 2em;
+	right: 2em;
+}

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

@@ -1,7 +1,7 @@
 
-import { of as observableOf, Observable, Subject, combineLatest, BehaviorSubject, pipe, of, from } from 'rxjs';
+import { of as observableOf, Observable,  combineLatest, BehaviorSubject,of } from 'rxjs';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { AfterViewInit, Component, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core';
 import { AbstractControl, Form, FormArray, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatHorizontalStepper, MatStep } from '@angular/material/stepper';
@@ -89,7 +89,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	inputUserState: 'untriggered'| 'triggered' = 'untriggered';
 	private _inputUserField$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 	private _inputUserButton$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+	showScrollOnTopButton:boolean = false;
 
+	private stepperNavigationObserver: IntersectionObserver;
 
 	// customEditorValidators = new EditorCustomValidators();
 
@@ -123,6 +125,10 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 	ngOnDestroy(){
 		this.sidenavService.setStatus(true);
+		if(this.stepperNavigationObserver){
+			this.stepperNavigationObserver.disconnect();
+			this.stepperNavigationObserver = null;
+		}
 	}
 
 	ngOnInit() {
@@ -250,6 +256,27 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		if(tocentries && tocentries.length){
 			this.selectedTocEntry = tocentries[0];
 		}
+		setTimeout(() => {
+			const stepperNavigation = document.getElementById('stepper-navigation');
+			if(stepperNavigation){
+				if(this.stepperNavigationObserver){
+					this.stepperNavigationObserver.disconnect();
+					this.stepperNavigationObserver = null;
+				}
+				this.stepperNavigationObserver = new IntersectionObserver((e)=>{
+					e.forEach(_=>{
+						if(_.isIntersecting){
+							this.showScrollOnTopButton = false;
+						}else{
+							this.showScrollOnTopButton = true;
+						}
+					})
+				}, {root:null,  rootMargin:'0px', threshold:1});
+				this.stepperNavigationObserver.observe(stepperNavigation);			
+			}else{
+				console.log('Could not load scroll On Top Observer')
+			}
+		}, 400);
 		// this._initializeFormValidity(tocentries);
 
 
@@ -277,7 +304,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			this.steps = this.stepper.steps;
 		});
 		this._initializeToCEntries();
-		console.log(this.form.get('users').value);
+		// console.log(this.form.get('users').value);
 		this.userChipList = [...this.form.get('users').value];
 
 	}
@@ -1937,6 +1964,30 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		});
 	}
 
+	scrollOnTop(){
+		try{
+			const topPage = document.getElementById('main-content');
+			topPage.scrollIntoView({behavior:'smooth'});
+		}catch{
+			console.log('coulnd not scroll');
+		}
+	}
+
+	updateAndFinalize(){
+		if(this.form.get('status').value == DatasetProfileEnum.FINALIZED ){
+			//UPDATE FORM
+			if(this.newVersionId){
+				this.onSubmit();
+			}else{
+				this.updateFinalized();
+			}
+		}else{
+			//finalize
+			this.finalize();
+		}
+
+	}
+
 }
 
 interface InvalidControl{

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Add Section +",
 			"VALIDATE": "Validate",
 			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Add Section +",
 			"VALIDATE": "Validate",
 			"PREVIEW-AND-FINALIZE": "Preview & Finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Añadir sección +",
 			"VALIDATE": "Validate",
 			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Προσθήκη Ενότητας +",
 			"VALIDATE": "Επιβεβαίωση",
 			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Adicionar Secção +",
 			"VALIDATE": "Validar",
 			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Pridať sekciu +",
 			"VALIDATE": "Potvrdiť",
 			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Dodajte sekciju +",
 			"VALIDATE": "Potvrdite",
 			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",

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

@@ -513,6 +513,7 @@
 			"ADD-SECTION": "Bölüm Ekle +",
 			"VALIDATE": "Validate",
 			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"BACK-TO-TOP":"Back to top",
 			"FIELD": {
 				"MAKE-IT-REQUIRED": "Make input required",
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",