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

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

This commit is contained in:
Kristian Ntavidi 2021-04-13 16:27:29 +03:00
parent 961a4df270
commit 66d9f41081
12 changed files with 159 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)'}))])
])
]

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

@ -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;">
<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
<h3 *ngIf="isNew && isClone">
<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
{{form.get('label').value}}
</h3>
<h3 *ngIf="isNew && isNewVersion">
<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
{{form.get('label').value}}
</h3>
<div class="col-12 d-flex" style="margin-bottom: 4em; justify-content: space-between; align-items: baseline;padding-right: 15px;">
<div>
<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
<h3 *ngIf="isNew && isClone">
<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
{{form.get('label').value}}
</h3>
<h3 *ngIf="isNew && isNewVersion">
<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
{{form.get('label').value}}
</h3>
<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
</div>
<div class="d-flex justify-content-end" style="gap: 1em">
<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)"> -->
<ng-container *ngIf="!viewOnly">
<button [@finalize_btn] mat-button class="finalize-btn ml-3"
[disabled]="!form.valid"
(click)="updateAndFinalize()"
>
<!-- <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> -->
</ng-container>
<!-- //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 *ngIf="form.get('status').value==1">
<ng-container *ngIf="newVersionId else updateText">
{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |translate}}
</ng-container>
<ng-template #updateText>
{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |translate}}
</ng-template>
</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

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

@ -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;
}

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

@ -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{

1
dmp-frontend/src/assets/i18n/de.json
View File

@ -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",

1
dmp-frontend/src/assets/i18n/en.json
View File

@ -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",

1
dmp-frontend/src/assets/i18n/es.json
View File

@ -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",

1
dmp-frontend/src/assets/i18n/gr.json
View File

@ -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",

1
dmp-frontend/src/assets/i18n/pt.json
View File

@ -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",

1
dmp-frontend/src/assets/i18n/sk.json
View File

@ -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",

1
dmp-frontend/src/assets/i18n/sr.json
View File

@ -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",

1
dmp-frontend/src/assets/i18n/tr.json
View File

@ -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",