Admin template editor. Move save/delete/update buttons on top. Add "Back to top" button.
This commit is contained in:
parent
961a4df270
commit
66d9f41081
|
@ -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)'}))])
|
||||
])
|
||||
|
||||
]
|
|
@ -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>
|
||||
|
||||
<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">{{
|
||||
<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>
|
||||
<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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
@ -284,4 +299,9 @@ $blue-color-light: #5cf7f2;
|
|||
}
|
||||
.user-table-body{
|
||||
text-align: center;
|
||||
}
|
||||
.scroll-on-top{
|
||||
position: fixed;
|
||||
bottom: 2em;
|
||||
right: 2em;
|
||||
}
|
|
@ -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{
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue