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

Merge remote-tracking branch 'origin/Development' into Development

This commit is contained in:
George Kalampokis 2020-12-02 14:19:57 +02:00
parent d6970cc49a f87f8e31af
commit d4672f1e60
26 changed files with 775 additions and 580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

@ -201,6 +201,10 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) { if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) {
this._inputSubject.next(this.inputValue); this._inputSubject.next(this.inputValue);
} }
// if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40) && event.keyCode !== COMMA) {
// this._inputSubject.next(this.inputValue);
// }
} }
public onKeyDown(event) { public onKeyDown(event) {
@ -232,6 +236,12 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) { if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
this.optionSelectedInternal(this.autocomplete.options.first.value); this.optionSelectedInternal(this.autocomplete.options.first.value);
} }
// Clear text if not an option
if (this.inputValue && this.inputValue.length > 1) {
this.inputValue = '';
document.getElementById((<HTMLInputElement>$event.target).id).focus();
}
} }

2
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete-configuration.ts
View File

@ -32,6 +32,8 @@ export interface SingleAutoCompleteConfiguration {
// Selected value formating template // Selected value formating template
selectedValueTemplate?: TemplateRef<any>; selectedValueTemplate?: TemplateRef<any>;
// To revert: "We set the items observable on focus to avoid the request being executed on component load."
forceFocus?: boolean;
autoSelectFirstOptionOnBlur?: boolean; autoSelectFirstOptionOnBlur?: boolean;
} }

12
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts
View File

@ -220,7 +220,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
_onInputFocus() { _onInputFocus() {
// We set the items observable on focus to avoid the request being executed on component load. // We set the items observable on focus to avoid the request being executed on component load.
if (!this._items) { if (!this._items || this.forceFocus) {
this._items = this._inputSubject.pipe( this._items = this._inputSubject.pipe(
startWith(null), startWith(null),
debounceTime(this.requestDelay), debounceTime(this.requestDelay),
@ -242,6 +242,12 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
this.inputValue = this._displayFn(this.autocomplete.options.first.value); this.inputValue = this._displayFn(this.autocomplete.options.first.value);
this.optionSelectedInternal(this.autocomplete.options.first.value); this.optionSelectedInternal(this.autocomplete.options.first.value);
} }
// Clear text if not an option
else if (this.inputValue && this.inputValue.length > 1) {
this.inputValue = '';
document.getElementById((<HTMLInputElement>$event.target).id).focus();
}
} }
onChange = (_: any) => { }; onChange = (_: any) => { };
@ -321,4 +327,8 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
get autoSelectFirstOptionOnBlur(): boolean { get autoSelectFirstOptionOnBlur(): boolean {
return this.configuration.autoSelectFirstOptionOnBlur != null ? this.configuration.autoSelectFirstOptionOnBlur : false; return this.configuration.autoSelectFirstOptionOnBlur != null ? this.configuration.autoSelectFirstOptionOnBlur : false;
} }
get forceFocus(): boolean {
return this.configuration.forceFocus != null ? this.configuration.forceFocus : false;
}
} }

444
dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss
View File

@ -1,246 +1,254 @@
ngx-guided-tour { ngx-guided-tour {
.guided-tour-user-input-mask { .guided-tour-user-input-mask {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
max-height: 100vh; max-height: 100vh;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
} }
.guided-tour-spotlight-overlay { .guided-tour-spotlight-overlay {
position: fixed; position: fixed;
box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 1.5rem rgba(0, 0, 0, 0.5);
border-radius: 44px; /*custom add*/ border-radius: 44px; /*custom add*/
} }
.tour-orb { .tour-orb {
position: fixed; position: fixed;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
.tour-orb-ring { .tour-orb-ring {
width: 35px; width: 35px;
height: 35px; height: 35px;
position: relative; position: relative;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: pulse 2s linear infinite; animation: pulse 2s linear infinite;
&:after { &:after {
content: ''; content: "";
display: inline-block; display: inline-block;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 50%; border-radius: 50%;
} }
} }
@keyframes pulse { @keyframes pulse {
from { from {
transform: translate(-50%, -50%) scale(0.45); transform: translate(-50%, -50%) scale(0.45);
opacity: 1.0; opacity: 1;
} }
to { to {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
opacity: 0.0; opacity: 0;
} }
} }
} }
.tour-step { .tour-step {
position: fixed; position: fixed;
&.page-tour-step { &.page-tour-step {
// max-width: 400px; // max-width: 400px;
max-width: 1043px; /*custom add*/ max-width: 1043px; /*custom add*/
width: 50%; width: 50%;
left: 50%; left: 50%;
top: 50%; top: 50%;
border-radius: 5px; border-radius: 5px;
transform: translate(-50%, -50%) transform: translate(-50%, -50%);
} }
&.tour-bottom, &.tour-bottom-right, &.tour-bottom-left { &.tour-bottom,
.tour-arrow::before { &.tour-bottom-right,
position: absolute; &.tour-bottom-left {
} .tour-arrow::before {
.tour-block { position: absolute;
margin-top: 10px; }
} .tour-block {
} margin-top: 10px;
}
}
&.tour-top, &.tour-top-right, &.tour-top-left { &.tour-top,
margin-bottom: 10px; &.tour-top-right,
&.tour-top-left {
margin-bottom: 10px;
.tour-arrow::before { .tour-arrow::before {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
.tour-block { .tour-block {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
&.tour-bottom , &.tour-top { &.tour-bottom,
.tour-arrow::before { &.tour-top {
// transform: translateX(-50%); .tour-arrow::before {
// left: 50%; // transform: translateX(-50%);
/*custom add*/ // left: 50%;
transform: scale(2); /*custom add*/
left: 494px; transform: scale(2);
} left: 494px;
/*custom add*/ }
margin-top: 20px; /*custom add*/
margin-left: 10px; margin-top: 20px;
} margin-left: 10px;
}
&.tour-bottom-right, &.tour-top-right { &.tour-bottom-right,
.tour-arrow::before { &.tour-top-right {
transform: translateX(-100%); .tour-arrow::before {
left: calc(100% - 5px); transform: translateX(-100%);
} left: calc(100% - 5px);
} }
}
&.tour-bottom-left, &.tour-top-left { &.tour-bottom-left,
.tour-arrow::before { &.tour-top-left {
left: 5px; .tour-arrow::before {
} left: 5px;
} }
}
&.tour-left { &.tour-left {
.tour-arrow::before { .tour-arrow::before {
position: absolute; position: absolute;
left: 100%; left: 100%;
transform: translateX(-100%); transform: translateX(-100%);
top: 5px; top: 5px;
} }
.tour-block { .tour-block {
margin-right: 10px; margin-right: 10px;
} }
} }
&.tour-right { &.tour-right {
margin-left: 10px; /*custom add*/ margin-left: 10px; /*custom add*/
.tour-arrow::before { .tour-arrow::before {
transform: scale(1.5); /*custom add*/ transform: scale(1.5); /*custom add*/
position: absolute; position: absolute;
left: 0; left: 0;
top: 5px; top: 5px;
} }
.tour-block { .tour-block {
margin-top: -15px; /*custom add*/ margin-top: -15px; /*custom add*/
margin-left: 10px; margin-left: 10px;
} }
} }
.tour-block { .tour-block {
// padding: 15px 25px; // padding: 15px 25px;
/*custom add*/ /*custom add*/
padding: 15px 25px 15px 0px; padding: 15px 25px 15px 0px;
max-height: 348px; max-height: 348px;
border-radius: 5px; border-radius: 5px;
} }
.tour-title { .tour-title {
// font-weight: bold !important; // font-weight: bold !important;
// padding-bottom: 20px; // padding-bottom: 20px;
/*custom add*/ /*custom add*/
font-weight: lighter !important; font-weight: lighter !important;
font-size: 16px !important; font-size: 16px !important;
padding: 28px 5px 0px 65px; padding: 28px 5px 25px 65px;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
color: #212121; color: #212121;
line-height: 26px; line-height: 26px;
white-space:pre-line; white-space: pre-line;
height: 210px; // height: 210px;
} }
h3.tour-title { h3.tour-title {
font-size: 20px; font-size: 20px;
} }
h2.tour-title { h2.tour-title {
font-size: 30px; font-size: 30px;
} }
.tour-buttons { .tour-buttons {
overflow: hidden; // clearfix overflow: hidden; // clearfix
padding: 10px 70px 30px 65px; /*custom add*/ padding: 10px 70px 18px 65px; /*custom add*/
button.link-button { button.link-button {
padding-left: 0; padding-left: 0;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
max-width: none !important; max-width: none !important;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
border: 1px solid transparent; border: 1px solid transparent;
line-height: 1.5; line-height: 1.5;
background-color: transparent; background-color: transparent;
position: relative; position: relative;
outline: none; outline: none;
padding: 0 15px; padding: 0 15px;
-webkit-appearance: button; -webkit-appearance: button;
} }
button.skip-button.link-button { button.skip-button.link-button {
// padding-left: 0; // padding-left: 0;
border-left: 0; border-left: 0;
/*custom add*/ /*custom add*/
padding: 0; padding: 0;
float: right; float: right;
width: 133px; width: 133px;
height: 40px; height: 40px;
border: 1px solid #129D99; border: 1px solid #129d99;
background: #FFFFFF 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
color: #129D99; color: #129d99;
} }
.next-button { .next-button {
cursor: pointer; cursor: pointer;
// border-radius: 1px; // border-radius: 1px;
// float: right; // float: right;
border: none; border: none;
outline: none; outline: none;
// padding-left: 10px; // padding-left: 10px;
// padding-right: 10px; // padding-right: 10px;
/*custom add*/ /*custom add*/
float: left; float: left;
padding: 10px 0px;; padding: 10px 0px;
width: 101px; width: 101px;
background: #129D99 0% 0% no-repeat padding-box; background: #129d99 0% 0% no-repeat padding-box;
} }
/*custom add*/ /*custom add*/
button.skip-button.link-button, .next-button { button.skip-button.link-button,
font-size: 14px; .next-button {
font-weight: bold; font-size: 14px;
letter-spacing: 0.35px; font-weight: bold;
height: 40px; letter-spacing: 0.35px;
box-shadow: 0px 3px 6px #1E202029; height: 40px;
border-radius: 30px; box-shadow: 0px 3px 6px #1e202029;
} border-radius: 30px;
} }
}
/*custom add*/ /*custom add*/
.argos-present-img { .argos-present-img {
background: url("../../../assets/splash/assets/img/2_Sign_in/Svg/Sign\ In.svg") no-repeat; background: url("../../../assets/splash/assets/img/2_Sign_in/Svg/Sign\ In.svg") no-repeat;
min-width: 176px; min-width: 176px;
height: 220px; height: 220px;
position: relative; position: relative;
top: 110px; top: 110px;
left: -85px; left: -85px;
border-top: none; border-top: none;
} }
} }
} }

396
dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts
View File

@ -1,4 +1,4 @@
import { debounceTime } from 'rxjs/operators'; import { debounceTime, delay } from 'rxjs/operators';
import { ErrorHandler, Inject, Injectable } from '@angular/core'; import { ErrorHandler, Inject, Injectable } from '@angular/core';
import { Observable, Subject, fromEvent } from 'rxjs'; import { Observable, Subject, fromEvent } from 'rxjs';
import { GuidedTour, TourStep, Orientation, OrientationConfiguration } from './guided-tour.constants'; import { GuidedTour, TourStep, Orientation, OrientationConfiguration } from './guided-tour.constants';
@ -8,222 +8,224 @@ import { WindowRefService } from "./windowref.service";
@Injectable() @Injectable()
export class GuidedTourService { export class GuidedTourService {
public guidedTourCurrentStepStream: Observable<TourStep>; public guidedTourCurrentStepStream: Observable<TourStep>;
public guidedTourOrbShowingStream: Observable<boolean>; public guidedTourOrbShowingStream: Observable<boolean>;
private _guidedTourCurrentStepSubject = new Subject<TourStep>(); private _guidedTourCurrentStepSubject = new Subject<TourStep>();
private _guidedTourOrbShowingSubject = new Subject<boolean>(); private _guidedTourOrbShowingSubject = new Subject<boolean>();
private _currentTourStepIndex = 0; private _currentTourStepIndex = 0;
private _currentTour: GuidedTour = null; private _currentTour: GuidedTour = null;
private _onFirstStep = true; private _onFirstStep = true;
private _onLastStep = true; private _onLastStep = true;
private _onResizeMessage = false; private _onResizeMessage = false;
constructor( constructor(
public errorHandler: ErrorHandler, public errorHandler: ErrorHandler,
private windowRef: WindowRefService, private windowRef: WindowRefService,
@Inject(DOCUMENT) private dom @Inject(DOCUMENT) private dom
) { ) {
this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable(); this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable();
this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable(); this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable();
fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => { fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => {
if (this._currentTour && this._currentTourStepIndex > -1) { if (this._currentTour && this._currentTourStepIndex > -1) {
if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) { if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) {
this._onResizeMessage = true; this._onResizeMessage = true;
const dialog = this._currentTour.resizeDialog || { const dialog = this._currentTour.resizeDialog || {
title: 'Please resize', title: 'Please resize',
content: 'You have resized the tour to a size that is too small to continue. Please resize the browser to a larger size to continue the tour or close the tour.' content: 'You have resized the tour to a size that is too small to continue. Please resize the browser to a larger size to continue the tour or close the tour.'
}; };
this._guidedTourCurrentStepSubject.next(dialog); this._guidedTourCurrentStepSubject.next(dialog);
} else { } else {
this._onResizeMessage = false; this._onResizeMessage = false;
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} }
}
});
}
public nextStep(): void {
if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
this._currentTour.steps[this._currentTourStepIndex].closeAction();
}
if (this._currentTour.steps[this._currentTourStepIndex + 1]) {
this._currentTourStepIndex++;
this._setFirstAndLast();
if (this._currentTour.steps[this._currentTourStepIndex].action) {
this._currentTour.steps[this._currentTourStepIndex].action();
// Usually an action is opening something so we need to give it time to render.
setTimeout(() => {
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.nextStep();
}
});
} else {
setTimeout(() => {
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.nextStep();
}
}, 500);
} }
}); } else {
} if (this._currentTour.completeCallback) {
this._currentTour.completeCallback();
}
this.resetTour();
}
}
public nextStep(): void { public backStep(): void {
if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
this._currentTour.steps[this._currentTourStepIndex].closeAction(); this._currentTour.steps[this._currentTourStepIndex].closeAction();
} }
if (this._currentTour.steps[this._currentTourStepIndex + 1]) { if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
this._currentTourStepIndex++; this._currentTourStepIndex--;
this._setFirstAndLast(); this._setFirstAndLast();
if (this._currentTour.steps[this._currentTourStepIndex].action) { if (this._currentTour.steps[this._currentTourStepIndex].action) {
this._currentTour.steps[this._currentTourStepIndex].action(); this._currentTour.steps[this._currentTourStepIndex].action();
// Usually an action is opening something so we need to give it time to render. setTimeout(() => {
setTimeout(() => { if (this._checkSelectorValidity()) {
if (this._checkSelectorValidity()) { this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); } else {
} else { this.backStep();
this.nextStep(); }
} });
}); } else {
} else { if (this._checkSelectorValidity()) {
if (this._checkSelectorValidity()) { this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); } else {
} else { this.backStep();
this.nextStep(); }
} }
} } else {
} else { this.resetTour();
if (this._currentTour.completeCallback) { }
this._currentTour.completeCallback(); }
}
this.resetTour();
}
}
public backStep(): void { public skipTour(): void {
if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { if (this._currentTour.skipCallback) {
this._currentTour.steps[this._currentTourStepIndex].closeAction(); this._currentTour.skipCallback(this._currentTourStepIndex);
} }
if (this._currentTour.steps[this._currentTourStepIndex - 1]) { this.resetTour();
this._currentTourStepIndex--; }
this._setFirstAndLast();
if (this._currentTour.steps[this._currentTourStepIndex].action) {
this._currentTour.steps[this._currentTourStepIndex].action();
setTimeout(() => {
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.backStep();
}
});
} else {
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.backStep();
}
}
} else {
this.resetTour();
}
}
public skipTour(): void { public resetTour(): void {
if (this._currentTour.skipCallback) { this.dom.body.classList.remove('tour-open');
this._currentTour.skipCallback(this._currentTourStepIndex); this._currentTour = null;
} this._currentTourStepIndex = 0;
this.resetTour(); this._guidedTourCurrentStepSubject.next(null);
} }
public resetTour(): void { public startTour(tour: GuidedTour): void {
this.dom.body.classList.remove('tour-open'); this._currentTour = cloneDeep(tour);
this._currentTour = null; this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep);
this._currentTourStepIndex = 0; this._currentTourStepIndex = 0;
this._guidedTourCurrentStepSubject.next(null); this._setFirstAndLast();
} this._guidedTourOrbShowingSubject.next(this._currentTour.useOrb);
if (
this._currentTour.steps.length > 0
&& (!this._currentTour.minimumScreenSize
|| (this.windowRef.nativeWindow.innerWidth >= this._currentTour.minimumScreenSize))
) {
if (!this._currentTour.useOrb) {
this.dom.body.classList.add('tour-open');
}
if (this._currentTour.steps[this._currentTourStepIndex].action) {
this._currentTour.steps[this._currentTourStepIndex].action();
}
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.nextStep();
}
}
}
public startTour(tour: GuidedTour): void { public activateOrb(): void {
this._currentTour = cloneDeep(tour); this._guidedTourOrbShowingSubject.next(false);
this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep); this.dom.body.classList.add('tour-open');
this._currentTourStepIndex = 0; }
this._setFirstAndLast();
this._guidedTourOrbShowingSubject.next(this._currentTour.useOrb);
if (
this._currentTour.steps.length > 0
&& (!this._currentTour.minimumScreenSize
|| (this.windowRef.nativeWindow.innerWidth >= this._currentTour.minimumScreenSize))
) {
if (!this._currentTour.useOrb) {
this.dom.body.classList.add('tour-open');
}
if (this._currentTour.steps[this._currentTourStepIndex].action) {
this._currentTour.steps[this._currentTourStepIndex].action();
}
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.nextStep();
}
}
}
public activateOrb(): void { private _setFirstAndLast(): void {
this._guidedTourOrbShowingSubject.next(false); this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex;
this.dom.body.classList.add('tour-open'); this._onFirstStep = this._currentTourStepIndex === 0;
} }
private _setFirstAndLast(): void { private _checkSelectorValidity(): boolean {
this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex; if (this._currentTour.steps[this._currentTourStepIndex].selector) {
this._onFirstStep = this._currentTourStepIndex === 0; const selectedElement = this.dom.querySelector(this._currentTour.steps[this._currentTourStepIndex].selector);
} if (!selectedElement) {
this.errorHandler.handleError(
// If error handler is configured this should not block the browser.
new Error(`Error finding selector ${this._currentTour.steps[this._currentTourStepIndex].selector} on step ${this._currentTourStepIndex + 1} during guided tour: ${this._currentTour.tourId}`)
);
return false;
}
}
return true;
}
private _checkSelectorValidity(): boolean { public get onLastStep(): boolean {
if (this._currentTour.steps[this._currentTourStepIndex].selector) { return this._onLastStep;
const selectedElement = this.dom.querySelector(this._currentTour.steps[this._currentTourStepIndex].selector); }
if (!selectedElement) {
this.errorHandler.handleError(
// If error handler is configured this should not block the browser.
new Error(`Error finding selector ${this._currentTour.steps[this._currentTourStepIndex].selector} on step ${this._currentTourStepIndex + 1} during guided tour: ${this._currentTour.tourId}`)
);
return false;
}
}
return true;
}
public get onLastStep(): boolean { public get onFirstStep(): boolean {
return this._onLastStep; return this._onFirstStep;
} }
public get onFirstStep(): boolean { public get onResizeMessage(): boolean {
return this._onFirstStep; return this._onResizeMessage;
} }
public get onResizeMessage(): boolean { public get currentTourStepDisplay(): number {
return this._onResizeMessage; return this._currentTourStepIndex + 1;
} }
public get currentTourStepDisplay(): number { public get currentTourStepCount(): number {
return this._currentTourStepIndex + 1; return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0;
} }
public get currentTourStepCount(): number { public get preventBackdropFromAdvancing(): boolean {
return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0; return this._currentTour && this._currentTour.preventBackdropFromAdvancing;
} }
public get preventBackdropFromAdvancing(): boolean { private getPreparedTourStep(index: number): TourStep {
return this._currentTour && this._currentTour.preventBackdropFromAdvancing; return this.setTourOrientation(this._currentTour.steps[index]);
} }
private getPreparedTourStep(index: number): TourStep { private setTourOrientation(step: TourStep): TourStep {
return this.setTourOrientation(this._currentTour.steps[index]); const convertedStep = cloneDeep(step);
} if (
convertedStep.orientation
&& !(typeof convertedStep.orientation === 'string')
&& (convertedStep.orientation as OrientationConfiguration[]).length
) {
(convertedStep.orientation as OrientationConfiguration[]).sort((a: OrientationConfiguration, b: OrientationConfiguration) => {
if (!b.maximumSize) {
return 1;
}
if (!a.maximumSize) {
return -1;
}
return b.maximumSize - a.maximumSize;
});
private setTourOrientation(step: TourStep): TourStep { let currentOrientation: Orientation = Orientation.Top;
const convertedStep = cloneDeep(step); (convertedStep.orientation as OrientationConfiguration[]).forEach(
if ( (orientationConfig: OrientationConfiguration) => {
convertedStep.orientation if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) {
&& !(typeof convertedStep.orientation === 'string') currentOrientation = orientationConfig.orientationDirection;
&& (convertedStep.orientation as OrientationConfiguration[]).length }
) { }
(convertedStep.orientation as OrientationConfiguration[]).sort((a: OrientationConfiguration, b: OrientationConfiguration) => { );
if (!b.maximumSize) {
return 1;
}
if (!a.maximumSize) {
return -1;
}
return b.maximumSize - a.maximumSize;
});
let currentOrientation: Orientation = Orientation.Top; convertedStep.orientation = currentOrientation;
(convertedStep.orientation as OrientationConfiguration[]).forEach( }
(orientationConfig: OrientationConfiguration) => { return convertedStep;
if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) { }
currentOrientation = orientationConfig.orientationDirection;
}
}
);
convertedStep.orientation = currentOrientation;
}
return convertedStep;
}
} }

249
dmp-frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -1,24 +1,67 @@
<div class="main-content dashboard-main-container h-100" [class.non-auth-main-container]="!this.isAuthenticated()"> <div class="main-content dashboard-main-container h-100" [class.non-auth-main-container]="!this.isAuthenticated()">
<div *ngIf="this.isAuthenticated()" class="container-fluid"> <div *ngIf="this.isAuthenticated()" class="container-fluid">
<div *ngIf="this.dashboardStatisticsData"> <div *ngIf="this.dashboardStatisticsData">
<div *ngIf="!this.hasDmps()">
<div class="main-content"> <div class="main-content">
<div class="col-auto"> <div class="col">
<div class="card" [style.display]="isVisible ? 'block' : 'none'"> <div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'">
<!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> --> <a *ngIf="this.hasDmps()" class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<p class="card-title mb-0 pt-4">{{'DASHBOARD.DMP-QUESTION' | translate}}</p>
<p class="card-content mb-0">{{'DASHBOARD.INFO-DMP-TEXT' | translate}}</p> <p *ngIf="!this.hasDmps()" class="card-title mb-0 pt-4">{{'DASHBOARD.DMP-QUESTION' | translate}}</p>
<p class="card-content pt-3 mb-0"> <p *ngIf="!this.hasDmps()" class="card-content mb-0">{{'DASHBOARD.INFO-DMP-TEXT' | translate}}</p>
<p *ngIf="!this.hasDmps()" class="card-content pt-3 mb-0">
{{'DASHBOARD.NEW-QUESTION' | translate}} <a href="https://www.openaire.eu/how-to-create-a-data-management-plan" target="_blank"><u>{{'DASHBOARD.OPEN-AIR-GUIDE' | translate}}</u></a> {{'DASHBOARD.LEARN-MORE' | translate}} {{'DASHBOARD.NEW-QUESTION' | translate}} <a href="https://www.openaire.eu/how-to-create-a-data-management-plan" target="_blank"><u>{{'DASHBOARD.OPEN-AIR-GUIDE' | translate}}</u></a> {{'DASHBOARD.LEARN-MORE' | translate}}
</p> </p>
<div class="d-flex"> <p *ngIf="this.hasDmps()" class="card-content mb-0 pt-0">{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
<button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button> <b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139"> {{'DASHBOARD.DMP-ABOUT-END' | translate}}
<!-- <img class="col-auto ml-auto laptop-img"> --> </p>
<div class="row d-flex align-items-center">
<div *ngIf="!this.hasDmps()" class="col-auto add-dataset-btn d-flex">
<button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button>
<!-- <img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139"> -->
<!-- <img class="col-auto ml-auto laptop-img"> -->
</div>
<div *ngIf="this.hasDmps()" class="new-dataset-tour add-dataset-btn col-auto d-flex">
<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" (click)="addNewDataset()">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
</div>
<span class="col-auto ml-auto">
<img class="laptop-img\6" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139">
</span>
</div> </div>
</div> </div>
<div *ngIf="this.hasDmps()" class="col">
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{totalDraftDatasets}})">
<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts>
<div *ngIf="totalDraftDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DMPS' | translate}} ({{totalDmps}})">
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{totalDatasets}})">
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
<button mat-raised-button class="add-dataset" (click)="addNewDataset()">
<mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div> </div>
<div class="col-auto ml-auto stats">
<!-- Right Sidebar -->
<div *ngIf="!this.hasDmps()" class="col-auto ml-auto stats">
<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div> <div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
<div class="counter-zero">0</div> <div class="counter-zero">0</div>
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.DMPS' | translate}}</a> <a [routerLink]="['/plans']" class="link">{{'DASHBOARD.DMPS' | translate}}</a>
@ -29,48 +72,8 @@
<div class="counter-zero">0</div> <div class="counter-zero">0</div>
<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a> <a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
</div> </div>
</div>
</div> <div *ngIf="this.hasDmps()" class="col-auto stats">
<div *ngIf="this.hasDmps()">
<div class="main-content">
<div class="col">
<div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'">
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<p class="card-content mb-0 pt-0">
{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
{{'DASHBOARD.DMP-ABOUT-END' | translate}}</p>
<div class="d-flex">
<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" (click)="addNewDataset()">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139">
</div>
</div>
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{totalDraftDatasets}})">
<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts>
<div *ngIf="totalDraftDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DMPS' | translate}} ({{totalDmps}})">
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{totalDatasets}})">
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
<button mat-raised-button class="add-dataset" (click)="addNewDataset()">
<mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button>
</div>
</mat-tab>
</mat-tab-group>
</div>
<div class="col-auto stats">
<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div> <div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}"> <div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div> {{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
@ -86,84 +89,91 @@
<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a> <a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
</div> </div>
</div> </div>
</div>
<div>
<div class="main-content">
</div>
</div> </div>
</div> </div>
</div>
<!-- Home screen on log out --> <!-- Home screen on log out -->
<div class="col p-0" *ngIf="!this.isAuthenticated()"> <div class="col p-0" *ngIf="!this.isAuthenticated()">
<div class="col-auto"> <div class="col-auto">
<!-- <div class="row"> <!-- <div class="row">
<div class="col header-text-container"> <div class="col header-text-container">
<h3>{{ 'ABOUT.WELCOME' | translate }}</h3> <h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4> <h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
</div> </div>
</div> --> </div> -->
<div class="main-content"> <div class="main-content">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col d-flex flex-column"> <div class="col d-flex flex-column">
<div class="card non-auth-card" [style.display]="isVisible ? 'block' : 'none'"> <div class="card non-auth-card" [style.display]="isVisible ? 'block' : 'none'">
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a> <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<div class="d-flex flex-column align-items-center non-auth-title-container"> <div class="d-flex flex-column align-items-center non-auth-title-container">
<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4> <h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p> <p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
</div>
<div class="d-flex">
<!-- <button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button> -->
<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139">
<!-- <img class="col-auto ml-auto laptop-img"> -->
</div>
</div> </div>
<div class="d-flex"> <div *ngIf="hasDmps()" class="col activity">
<!-- <button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button> --> <div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139"> <mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<!-- <img class="col-auto ml-auto laptop-img"> --> <mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
</div> <app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
</div> <div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<div *ngIf="hasDmps()" class="col activity"> </mat-tab>
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div> <mat-tab label="{{'DASHBOARD.PUBLIC-DMPS' | translate}} ({{totalDmps}})">
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom"> <app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})"> <div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity> </mat-tab>
<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div> <mat-tab label="{{'DASHBOARD.PUBLIC-DATASETS' | translate}} ({{totalDatasets}})">
</mat-tab> <app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<mat-tab label="{{'DASHBOARD.PUBLIC-DMPS' | translate}} ({{totalDmps}})"> <div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity> <!-- <div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.PUBLIC-DATASETS' | translate}} ({{totalDatasets}})">
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<!-- <div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
<button mat-raised-button class="add-dataset" [routerLink]="['/datasets/new']"> <button mat-raised-button class="add-dataset" [routerLink]="['/datasets/new']">
<mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}} <mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button> </button>
</div> --> </div> -->
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div>
</div> </div>
</div> <div class="col-auto">
<div class="col-auto"> <div *ngIf="!hasDmps()" class="ml-auto pl-4 personal-usage-block">
<div *ngIf="!hasDmps()" class="ml-auto pl-4 personal-usage-block"> <div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div>
<div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div> <div class="counter-zero">0</div>
<div class="counter-zero">0</div> <a>{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
<a>{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a> <div class="counter-zero">0</div>
<div class="counter-zero">0</div> <a>{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
<a>{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a> <div class="counter-zero">0</div>
<div class="counter-zero">0</div> <a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
<a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a> <div class="counter-zero">0</div>
<div class="counter-zero">0</div> <a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a> </div>
</div> <div *ngIf="hasDmps()" class="ml-auto stats">
<div *ngIf="hasDmps()" class="ml-auto stats"> <div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div>
<div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div> <div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}"> {{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div> <a [routerLink]="['/plans']" class="link">{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a> <div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}">
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}"> {{dashboardStatisticsData?.totalDataSetCount}}</div>
{{dashboardStatisticsData?.totalDataSetCount}}</div> <a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a> <div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}">
<div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}"> {{dashboardStatisticsData?.totalGrantCount}}</div>
{{dashboardStatisticsData?.totalGrantCount}}</div> <a href="#" class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
<a href="#" class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a> <div [ngClass]="{'counter': dashboardStatisticsData?.totalOrganisationCount != 0, 'counter-zero': dashboardStatisticsData?.totalOrganisationCount == 0}">
<div [ngClass]="{'counter': dashboardStatisticsData?.totalOrganisationCount != 0, 'counter-zero': dashboardStatisticsData?.totalOrganisationCount == 0}"> {{dashboardStatisticsData?.totalOrganisationCount}}</div>
{{dashboardStatisticsData?.totalOrganisationCount}}</div> <a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a> </div>
</div> </div>
</div> </div>
</div> </div>
@ -171,11 +181,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- <div class="header-image"> <!-- <div class="header-image">
<div class="header-text-container"> <div class="header-text-container">
<h3>{{ 'ABOUT.WELCOME' | translate }}</h3> <h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4> <h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>

7
dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
View File

@ -90,7 +90,7 @@
line-height: 1; line-height: 1;
font-size: 0.87rem; font-size: 0.87rem;
padding: 0.62rem 1.87rem; padding: 0.62rem 1.87rem;
margin-left: 40px; // margin-left: 40px;
} }
.personal-usage { .personal-usage {
@ -394,6 +394,11 @@ input[type="text"] {
// top: 7px; // top: 7px;
} }
.add-dataset-btn {
height: 40px;
margin-left: 40px;
}
::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar { .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background: #129d99; background: #129d99;

89
dmp-frontend/src/app/ui/dashboard/dashboard.component.ts
View File

@ -30,9 +30,10 @@ import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-
import { StartNewDatasetDialogComponent } from '../dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component'; import { StartNewDatasetDialogComponent } from '../dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component';
import { DatasetWizardEditorModel } from '../dataset/dataset-wizard/dataset-wizard-editor.model'; import { DatasetWizardEditorModel } from '../dataset/dataset-wizard/dataset-wizard-editor.model';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service'; import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard'; import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
@Component({ @Component({
@ -66,6 +67,10 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
totalDraftDatasets: number; totalDraftDatasets: number;
totalRecents: number; totalRecents: number;
dmpText: string;
datasetText: string;
importFileText: string;
startWizardText: string;
constructor( constructor(
private router: Router, private router: Router,
@ -80,7 +85,8 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
private userService: UserService, private userService: UserService,
private dialog: MatDialog, private dialog: MatDialog,
private language: TranslateService, private language: TranslateService,
private uiNotificationService: UiNotificationService private uiNotificationService: UiNotificationService,
private guidedTourService: GuidedTourService
) { ) {
super(); super();
// this.dashboardStatisticsData.totalDataManagementPlanCount = 0; // this.dashboardStatisticsData.totalDataManagementPlanCount = 0;
@ -125,6 +131,10 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(results => { .subscribe(results => {
this.dashboardStatisticsData = results; this.dashboardStatisticsData = results;
if (this.dashboardStatisticsData && this.dashboardStatisticsData.totalDataManagementPlanCount === 0) {
this.openDashboardTour();
}
}); });
} }
@ -133,6 +143,12 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
})); }));
} }
// ngAfterContentChecked(): void {
// if (this.dashboardStatisticsData && this.dashboardStatisticsData.totalDataManagementPlanCount === 0) {
// this.openTour();
// }
// }
public isAuthenticated(): boolean { public isAuthenticated(): boolean {
return !(!this.authentication.current()); return !(!this.authentication.current());
} }
@ -271,6 +287,73 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
}); });
} }
public dashboardTour: GuidedTour = {
tourId: 'dashboard-tour',
useOrb: true,
steps: [
{
selector: '.new-dmp-dialog',
content: 'Step 1',
orientation: Orientation.BottomRight,
isStepUnique: false,
highlightPadding: 10,
closeAction: () => this.openNewDmpDialog()
},
{
selector: '.import-file',
content: 'Step 2',
orientation: Orientation.Bottom,
isStepUnique: false,
highlightPadding: 10
},
{
selector: '.start-wizard',
content: 'Step 3',
orientation: Orientation.Bottom,
isStepUnique: false,
highlightPadding: 10,
closeAction: () => this.dialog.closeAll()
},
{
selector: '.new-dataset-tour',
content: 'Step 4',
orientation: Orientation.BottomLeft,
isStepUnique: false,
highlightPadding: 10
}
]
};
public setDashboardTourDmpText(): void {
this.dmpText = this.language.instant('DASHBOARD.TOUR-GUIDE.DMP') + '\n\n' +
this.language.instant('DASHBOARD.TOUR-GUIDE.START-NEW');
this.dashboardTour.steps[0].title = this.dmpText;
}
public setDashboardImportFileText(): void {
this.importFileText = this.language.instant('DASHBOARD.TOUR-GUIDE.IMPORT-DMP');
this.dashboardTour.steps[1].title = this.importFileText;
}
public setDashboardStartWizardText(): void {
this.startWizardText = this.language.instant('DASHBOARD.TOUR-GUIDE.START-WIZARD');
this.dashboardTour.steps[2].title = this.startWizardText;
}
public setDatasetText(): void {
this.datasetText = this.language.instant('DASHBOARD.TOUR-GUIDE.DATASET') + '\n\n' +
this.language.instant('DASHBOARD.TOUR-GUIDE.NEW-DATASET');
this.dashboardTour.steps[3].title = this.datasetText;
}
openDashboardTour() {
this.setDashboardTourDmpText();
this.setDashboardImportFileText();
this.setDashboardStartWizardText();
this.setDatasetText();
this.guidedTourService.startTour(this.dashboardTour);
}
// onCallbackSuccess(datasetId: String): void { // onCallbackSuccess(datasetId: String): void {
// this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION'), SnackBarNotificationLevel.Success); // this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION'), SnackBarNotificationLevel.Success);
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', datasetId]); }); // this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', datasetId]); });

1
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts
View File

@ -58,7 +58,6 @@ export class DatasetEditorComponent extends BaseComponent {
public restartTour(label: string): void { public restartTour(label: string): void {
this.setDashboardTourDmp(label); this.setDashboardTourDmp(label);
// console.log(this.dashboardTourDmp.steps[0].selector);
this.guidedTourService.startTour(this.dashboardTourDmp); this.guidedTourService.startTour(this.dashboardTourDmp);
} }

1
dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts
View File

@ -141,7 +141,6 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
public restartTour(label: string): void { public restartTour(label: string): void {
this.setDashboardTourDmp(label); this.setDashboardTourDmp(label);
// console.log(this.dashboardTourDmp.steps[0].selector);
this.guidedTourService.startTour(this.dashboardTourDmp); this.guidedTourService.startTour(this.dashboardTourDmp);
} }

10
dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.ts
View File

@ -38,6 +38,7 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
isCreateNewProject = false; isCreateNewProject = false;
isCreateNewFunder = false; isCreateNewFunder = false;
grant: GrantTabModel; grant: GrantTabModel;
forceFocus = false;
grantAutoCompleteConfiguration: SingleAutoCompleteConfiguration; grantAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration; projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
@ -98,8 +99,10 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
initialItems: () => this.searchGrant(''), initialItems: () => this.searchGrant(''),
displayFn: (item) => item['label'] + this.getGrantIdText(item), displayFn: (item) => item['label'] + this.getGrantIdText(item),
titleFn: (item) => item['label'] + this.getGrantIdText(item), titleFn: (item) => item['label'] + this.getGrantIdText(item),
subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')) subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')),
}; forceFocus: this.forceFocus,
}
// this.forceFocus = false;
this.projectAutoCompleteConfiguration = { this.projectAutoCompleteConfiguration = {
filterFn: this.searchProject.bind(this), filterFn: this.searchProject.bind(this),
@ -116,7 +119,6 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
grantRequestItem.criteria.like = query; grantRequestItem.criteria.like = query;
if (this.funderFormGroup.get('existFunder').value) { if (this.funderFormGroup.get('existFunder').value) {
grantRequestItem.criteria.funderReference = this.funderFormGroup.controls['existFunder'].value.reference; grantRequestItem.criteria.funderReference = this.funderFormGroup.controls['existFunder'].value.reference;
console.log(grantRequestItem);
} }
return this.grantService.getWithExternal(grantRequestItem); return this.grantService.getWithExternal(grantRequestItem);
} }
@ -237,8 +239,8 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
|| (funder.existFunder !== null && funder.existFunder !== undefined && funder.existFunder.id !== undefined)) { || (funder.existFunder !== null && funder.existFunder !== undefined && funder.existFunder.id !== undefined)) {
this.grantformGroup.reset(); this.grantformGroup.reset();
this.grantformGroup.enable(); this.grantformGroup.enable();
this.forceFocus = true;
this.setGrantValidators(); this.setGrantValidators();
// this.grantformGroup.updateValueAndValidity();
} else { } else {
this.grantformGroup.reset(); this.grantformGroup.reset();
this.grantformGroup.disable(); this.grantformGroup.disable();

3
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -29,9 +29,6 @@ import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service'; import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants'; import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
import { NgDialogAnimationService } from "ng-dialog-animation"; import { NgDialogAnimationService } from "ng-dialog-animation";
import { StartNewDatasetDialogComponent } from '../start-new-dataset-dialogue/start-new-dataset-dialog.component';
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
import { StartNewDmpDialogComponent } from '../start-new-dmp-dialogue/start-new-dmp-dialog.component';
@Component({ @Component({
selector: 'app-dmp-listing-component', selector: 'app-dmp-listing-component',

20
dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html
View File

@ -9,15 +9,19 @@
<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1> <h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p> <p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
<div class="actions"> <div class="actions">
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)"> <div class="import-file col-auto">
<mat-icon class="pr-2">file_upload</mat-icon> <button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }} <mat-icon class="pr-2">file_upload</mat-icon>
</button> {{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
</button>
</div>
<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p> <p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()"> <div class="start-wizard col-auto">
<mat-icon>chevron_right</mat-icon> <button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
{{ 'NAV-BAR.START-WIZARD' | translate }} <mat-icon>chevron_right</mat-icon>
</button> {{ 'NAV-BAR.START-WIZARD' | translate }}
</button>
</div>
</div> </div>
</div> </div>
<div class="row pt-4"> <div class="row pt-4">

2
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
View File

@ -3,7 +3,7 @@
<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded"> <mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<h6 class='panel-title'>{{form.get('numbering').value}} {{form.get('title').value}}</h6> <h6 class='panel-title'>{{form.get('numbering').value}}. {{form.get('title').value}}</h6>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-panel-description class="col-12"> <mat-panel-description class="col-12">

6
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -18,8 +18,10 @@
<div class="collapse navbar-collapse justify-content-end" id="navigation"> <div class="collapse navbar-collapse justify-content-end" id="navigation">
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())"> <div class="new-dmp-dialog col-md-auto ml-auto">
<button type="button" class="normal-btn ml-auto" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> <button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
</div>
<div class="col-md-auto pl-0" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> --> <!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> -->
<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a> <a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
<!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> --> <!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> -->

4
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -134,3 +134,7 @@ $mat-card-header-size: 40px !default;
background-color: #ececec; background-color: #ececec;
border-radius: 6px; border-radius: 6px;
} }
.new-dmp-dialog {
padding: 0em .5em 0em 0em;
}

2
dmp-frontend/src/app/ui/sidebar/sidebar.component.html
View File

@ -4,7 +4,7 @@
<div *ngIf="showItem(groupMenuItem);"> <div *ngIf="showItem(groupMenuItem);">
<hr *ngIf="!firstGroup"> <hr *ngIf="!firstGroup">
<mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}"> <mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}">
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/datasets'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}"> <a class="new-dmp nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/datasets'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}">
<i class="material-icons icon">{{ groupMenuRoute.icon }}</i> <i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
<i *ngIf="groupMenuRoute.path == '/plans'" class="material-icons icon-mask">person</i> <i *ngIf="groupMenuRoute.path == '/plans'" class="material-icons icon-mask">person</i>
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span> <span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span>

1
dmp-frontend/src/app/ui/user-profile/user-profile.component.ts
View File

@ -294,6 +294,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
restoreFocus: false, restoreFocus: false,
autoFocus: false, autoFocus: false,
width: '653px', width: '653px',
maxHeight: '90vh',
data: { data: {
} }
}); });

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

@ -1355,6 +1355,14 @@
"ADD-DATASET-DESCRIPTION": "Add Dataset", "ADD-DATASET-DESCRIPTION": "Add Dataset",
"ADD-DATASET": "Add Dataset", "ADD-DATASET": "Add Dataset",
"ADD-DMP-DESCRIPTION": "Add DMP Description" "ADD-DMP-DESCRIPTION": "Add DMP Description"
},
"TOUR-GUIDE": {
"DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.",
"START-NEW": "Create your DMP with Start new DMP.",
"IMPORT-DMP": "You can import a DMP",
"START-WIZARD": "or create new in Argos.",
"DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.",
"NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process."
} }
}, },
"USER-DIALOG": { "USER-DIALOG": {

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

@ -1359,6 +1359,14 @@
"ADD-DATASET-DESCRIPTION": "Add Dataset", "ADD-DATASET-DESCRIPTION": "Add Dataset",
"ADD-DATASET": "Add Dataset", "ADD-DATASET": "Add Dataset",
"ADD-DMP-DESCRIPTION": "Add DMP Description" "ADD-DMP-DESCRIPTION": "Add DMP Description"
},
"TOUR-GUIDE": {
"DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.",
"START-NEW": "Create your DMP with Start new DMP.",
"IMPORT-DMP": "You can import a DMP",
"START-WIZARD": "or create new in Argos.",
"DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.",
"NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process."
} }
}, },
"USER-DIALOG": { "USER-DIALOG": {

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

@ -1355,6 +1355,14 @@
"ADD-DATASET-DESCRIPTION": "Añadir la descripción del dataset", "ADD-DATASET-DESCRIPTION": "Añadir la descripción del dataset",
"ADD-DATASET": "Añadir un dataset", "ADD-DATASET": "Añadir un dataset",
"ADD-DMP-DESCRIPTION": "Añadir la descripción de un PGD" "ADD-DMP-DESCRIPTION": "Añadir la descripción de un PGD"
},
"TOUR-GUIDE": {
"DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.",
"START-NEW": "Create your DMP with Start new DMP.",
"IMPORT-DMP": "You can import a DMP",
"START-WIZARD": "or create new in Argos.",
"DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.",
"NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process."
} }
}, },
"USER-DIALOG": { "USER-DIALOG": {

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

@ -1355,6 +1355,14 @@
"ADD-DATASET-DESCRIPTION": "Προσθήκη Περιγραφής Συνόλου Δεδομένων", "ADD-DATASET-DESCRIPTION": "Προσθήκη Περιγραφής Συνόλου Δεδομένων",
"ADD-DATASET": "Προσθήκη Συνόλου Δεδομένων", "ADD-DATASET": "Προσθήκη Συνόλου Δεδομένων",
"ADD-DMP-DESCRIPTION": "Προσθήκη Περιγραφής Σχεδίου Διαχείρισης Δεδομένων " "ADD-DMP-DESCRIPTION": "Προσθήκη Περιγραφής Σχεδίου Διαχείρισης Δεδομένων "
},
"TOUR-GUIDE": {
"DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.",
"START-NEW": "Create your DMP with Start new DMP.",
"IMPORT-DMP": "You can import a DMP",
"START-WIZARD": "or create new in Argos.",
"DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.",
"NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process."
} }
}, },
"USER-DIALOG": { "USER-DIALOG": {

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

@ -1355,6 +1355,14 @@
"ADD-DATASET-DESCRIPTION": "Pridať súbor dát", "ADD-DATASET-DESCRIPTION": "Pridať súbor dát",
"ADD-DATASET": "Pridať súbor dát", "ADD-DATASET": "Pridať súbor dát",
"ADD-DMP-DESCRIPTION": "Pridať opis DMP" "ADD-DMP-DESCRIPTION": "Pridať opis DMP"
},
"TOUR-GUIDE": {
"DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.",
"START-NEW": "Create your DMP with Start new DMP.",
"IMPORT-DMP": "You can import a DMP",
"START-WIZARD": "or create new in Argos.",
"DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.",
"NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process."
} }
}, },
"USER-DIALOG": { "USER-DIALOG": {

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

@ -1320,7 +1320,7 @@
"TITLE-DASHED": "-Dil-", "TITLE-DASHED": "-Dil-",
"CLOSE": "Kapat" "CLOSE": "Kapat"
}, },
"DAHBOARD": { "DASHBOARD": {
"MY-GRANTS": "Hibelerim", "MY-GRANTS": "Hibelerim",
"GRANTS": "Hibeler", "GRANTS": "Hibeler",
"MY-DMPS": "VYP'larım", "MY-DMPS": "VYP'larım",
@ -1355,6 +1355,14 @@
"ADD-DATASET-DESCRIPTION": "Veri Seti Tanımı Ekle", "ADD-DATASET-DESCRIPTION": "Veri Seti Tanımı Ekle",
"ADD-DATASET": "Veri Seti Ekle", "ADD-DATASET": "Veri Seti Ekle",
"ADD-DMP-DESCRIPTION": "VYP Tanımı Ekle" "ADD-DMP-DESCRIPTION": "VYP Tanımı Ekle"
},
"TOUR-GUIDE": {
"DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.",
"START-NEW": "Create your DMP with Start new DMP.",
"IMPORT-DMP": "You can import a DMP",
"START-WIZARD": "or create new in Argos.",
"DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.",
"NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process."
} }
}, },
"USER-DIALOG": { "USER-DIALOG": {

2
dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html
View File

@ -24,7 +24,7 @@
<div class="row"> <div class="row">
<!-- <div class="col"></div> --> <!-- <div class="col"></div> -->
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div> <div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div>
<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete">{{ data.confirmButton }}</button></div> <div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete-btn">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="submit-btn">{{ data.confirmButton }}</button></div> <div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="submit-btn">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="submiit-btn">{{ data.confirmButton }}</button></div> <div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="submiit-btn">{{ data.confirmButton }}</button></div>
</div> </div>

44
dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss
View File

@ -1,25 +1,25 @@
.confirmation-dialog { .confirmation-dialog {
.confirmation { .confirmation {
padding-bottom: 20px; padding-bottom: 20px;
} }
.privacy-policy-names { .privacy-policy-names {
font-weight: 700; font-weight: 700;
padding: 1em; padding: 1em;
} }
.close-btn { .close-btn {
margin-left: auto; margin-left: auto;
cursor: pointer; cursor: pointer;
} }
.warn-text { .warn-text {
color: #f44336; color: #f44336;
} }
.cancel { .cancel {
background-color: #aaaaaa; background-color: #aaaaaa;
color: #ffffff; color: #ffffff;
} }
.cancel-btn { .cancel-btn {
@ -32,23 +32,23 @@
} }
.confirm { .confirm {
background-color: #2cba6c; background-color: #2cba6c;
color: #ffffff; color: #ffffff;
} }
.delete { .delete {
background-color: #ba2c2c; background-color: #ba2c2c;
color: #ffffff; color: #ffffff;
} }
.checkbox-privacy { .checkbox-privacy {
padding: 0em 1em; padding: 0em 1em;
} }
.required-policy { .required-policy {
padding: 0em 1.2em 1em; padding: 0em 1.2em 1em;
font-size: smaller; font-size: smaller;
color: #f44336; color: #f44336;
} }
.submit-btn { .submit-btn {
@ -69,4 +69,14 @@
background-color: #129d99; background-color: #129d99;
color: #ffffff; color: #ffffff;
} }
}
.delete-btn {
min-width: 101px;
height: 43px;
background: #ffffff;
color: #ba2c2c;
border: 1px solid #ba2c2c;
border-radius: 30px;
opacity: 1;
}
}