Adds guided tour on dashboard for new user
This commit is contained in:
apapachristou
parent
c796745c73
commit
208824f55b
|
|
@ -1,246 +1,254 @@
|
|||
ngx-guided-tour {
|
||||
.guided-tour-user-input-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-height: 100vh;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
.guided-tour-user-input-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-height: 100vh;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.guided-tour-spotlight-overlay {
|
||||
position: fixed;
|
||||
box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5);
|
||||
border-radius: 44px; /*custom add*/
|
||||
}
|
||||
.guided-tour-spotlight-overlay {
|
||||
position: fixed;
|
||||
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*/
|
||||
}
|
||||
|
||||
.tour-orb {
|
||||
position: fixed;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
.tour-orb {
|
||||
position: fixed;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
|
||||
.tour-orb-ring {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse 2s linear infinite;
|
||||
.tour-orb-ring {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse 2s linear infinite;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: translate(-50%, -50%) scale(0.45);
|
||||
opacity: 1.0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: translate(-50%, -50%) scale(0.45);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tour-step {
|
||||
position: fixed;
|
||||
&.page-tour-step {
|
||||
// max-width: 400px;
|
||||
max-width: 1043px; /*custom add*/
|
||||
width: 50%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
border-radius: 5px;
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
&.tour-bottom, &.tour-bottom-right, &.tour-bottom-left {
|
||||
.tour-arrow::before {
|
||||
position: absolute;
|
||||
}
|
||||
.tour-block {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.tour-step {
|
||||
position: fixed;
|
||||
&.page-tour-step {
|
||||
// max-width: 400px;
|
||||
max-width: 1043px; /*custom add*/
|
||||
width: 50%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
border-radius: 5px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&.tour-bottom,
|
||||
&.tour-bottom-right,
|
||||
&.tour-bottom-left {
|
||||
.tour-arrow::before {
|
||||
position: absolute;
|
||||
}
|
||||
.tour-block {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-top, &.tour-top-right, &.tour-top-left {
|
||||
margin-bottom: 10px;
|
||||
&.tour-top,
|
||||
&.tour-top-right,
|
||||
&.tour-top-left {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tour-arrow::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.tour-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.tour-arrow::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.tour-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-bottom , &.tour-top {
|
||||
.tour-arrow::before {
|
||||
// transform: translateX(-50%);
|
||||
// left: 50%;
|
||||
/*custom add*/
|
||||
transform: scale(2);
|
||||
left: 494px;
|
||||
}
|
||||
/*custom add*/
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
&.tour-bottom,
|
||||
&.tour-top {
|
||||
.tour-arrow::before {
|
||||
// transform: translateX(-50%);
|
||||
// left: 50%;
|
||||
/*custom add*/
|
||||
transform: scale(2);
|
||||
left: 494px;
|
||||
}
|
||||
/*custom add*/
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.tour-bottom-right, &.tour-top-right {
|
||||
.tour-arrow::before {
|
||||
transform: translateX(-100%);
|
||||
left: calc(100% - 5px);
|
||||
}
|
||||
}
|
||||
&.tour-bottom-right,
|
||||
&.tour-top-right {
|
||||
.tour-arrow::before {
|
||||
transform: translateX(-100%);
|
||||
left: calc(100% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-bottom-left, &.tour-top-left {
|
||||
.tour-arrow::before {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
&.tour-bottom-left,
|
||||
&.tour-top-left {
|
||||
.tour-arrow::before {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-left {
|
||||
.tour-arrow::before {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
transform: translateX(-100%);
|
||||
top: 5px;
|
||||
}
|
||||
.tour-block {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
&.tour-left {
|
||||
.tour-arrow::before {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
transform: translateX(-100%);
|
||||
top: 5px;
|
||||
}
|
||||
.tour-block {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-right {
|
||||
margin-left: 10px; /*custom add*/
|
||||
.tour-arrow::before {
|
||||
transform: scale(1.5); /*custom add*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
.tour-block {
|
||||
margin-top: -15px; /*custom add*/
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&.tour-right {
|
||||
margin-left: 10px; /*custom add*/
|
||||
.tour-arrow::before {
|
||||
transform: scale(1.5); /*custom add*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
.tour-block {
|
||||
margin-top: -15px; /*custom add*/
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tour-block {
|
||||
// padding: 15px 25px;
|
||||
.tour-block {
|
||||
// padding: 15px 25px;
|
||||
|
||||
/*custom add*/
|
||||
padding: 15px 25px 15px 0px;
|
||||
max-height: 348px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/*custom add*/
|
||||
padding: 15px 25px 15px 0px;
|
||||
max-height: 348px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tour-title {
|
||||
// font-weight: bold !important;
|
||||
// padding-bottom: 20px;
|
||||
.tour-title {
|
||||
// font-weight: bold !important;
|
||||
// padding-bottom: 20px;
|
||||
|
||||
/*custom add*/
|
||||
font-weight: lighter !important;
|
||||
font-size: 16px !important;
|
||||
padding: 28px 5px 0px 65px;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
color: #212121;
|
||||
line-height: 26px;
|
||||
white-space:pre-line;
|
||||
height: 210px;
|
||||
}
|
||||
/*custom add*/
|
||||
font-weight: lighter !important;
|
||||
font-size: 16px !important;
|
||||
padding: 28px 5px 0px 65px;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
color: #212121;
|
||||
line-height: 26px;
|
||||
white-space: pre-line;
|
||||
// height: 210px;
|
||||
}
|
||||
|
||||
h3.tour-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2.tour-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
h3.tour-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2.tour-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.tour-buttons {
|
||||
overflow: hidden; // clearfix
|
||||
padding: 10px 70px 30px 65px; /*custom add*/
|
||||
.tour-buttons {
|
||||
overflow: hidden; // clearfix
|
||||
padding: 10px 70px 30px 65px; /*custom add*/
|
||||
|
||||
button.link-button {
|
||||
padding-left: 0;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
max-width: none !important;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
line-height: 1.5;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button.link-button {
|
||||
padding-left: 0;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
max-width: none !important;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
line-height: 1.5;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button.skip-button.link-button {
|
||||
// padding-left: 0;
|
||||
border-left: 0;
|
||||
button.skip-button.link-button {
|
||||
// padding-left: 0;
|
||||
border-left: 0;
|
||||
|
||||
/*custom add*/
|
||||
padding: 0;
|
||||
float: right;
|
||||
width: 133px;
|
||||
height: 40px;
|
||||
border: 1px solid #129D99;
|
||||
background: #FFFFFF 0% 0% no-repeat padding-box;
|
||||
color: #129D99;
|
||||
}
|
||||
/*custom add*/
|
||||
padding: 0;
|
||||
float: right;
|
||||
width: 133px;
|
||||
height: 40px;
|
||||
border: 1px solid #129d99;
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
color: #129d99;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
cursor: pointer;
|
||||
// border-radius: 1px;
|
||||
// float: right;
|
||||
border: none;
|
||||
outline: none;
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
.next-button {
|
||||
cursor: pointer;
|
||||
// border-radius: 1px;
|
||||
// float: right;
|
||||
border: none;
|
||||
outline: none;
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
|
||||
/*custom add*/
|
||||
float: left;
|
||||
padding: 10px 0px;;
|
||||
width: 101px;
|
||||
background: #129D99 0% 0% no-repeat padding-box;
|
||||
}
|
||||
/*custom add*/
|
||||
float: left;
|
||||
padding: 10px 0px;
|
||||
width: 101px;
|
||||
background: #129d99 0% 0% no-repeat padding-box;
|
||||
}
|
||||
|
||||
/*custom add*/
|
||||
button.skip-button.link-button, .next-button {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.35px;
|
||||
height: 40px;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
/*custom add*/
|
||||
button.skip-button.link-button,
|
||||
.next-button {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.35px;
|
||||
height: 40px;
|
||||
box-shadow: 0px 3px 6px #1e202029;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/*custom add*/
|
||||
.argos-present-img {
|
||||
background: url("../../../assets/splash/assets/img/2_Sign_in/Svg/Sign\ In.svg") no-repeat;
|
||||
min-width: 176px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
top: 110px;
|
||||
left: -85px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
/*custom add*/
|
||||
.argos-present-img {
|
||||
background: url("../../../assets/splash/assets/img/2_Sign_in/Svg/Sign\ In.svg") no-repeat;
|
||||
min-width: 176px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
top: 110px;
|
||||
left: -85px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { debounceTime } from 'rxjs/operators';
|
||||
import { debounceTime, delay } from 'rxjs/operators';
|
||||
import { ErrorHandler, Inject, Injectable } from '@angular/core';
|
||||
import { Observable, Subject, fromEvent } from 'rxjs';
|
||||
import { GuidedTour, TourStep, Orientation, OrientationConfiguration } from './guided-tour.constants';
|
||||
|
|
@ -8,222 +8,224 @@ import { WindowRefService } from "./windowref.service";
|
|||
|
||||
@Injectable()
|
||||
export class GuidedTourService {
|
||||
public guidedTourCurrentStepStream: Observable<TourStep>;
|
||||
public guidedTourOrbShowingStream: Observable<boolean>;
|
||||
public guidedTourCurrentStepStream: Observable<TourStep>;
|
||||
public guidedTourOrbShowingStream: Observable<boolean>;
|
||||
|
||||
private _guidedTourCurrentStepSubject = new Subject<TourStep>();
|
||||
private _guidedTourOrbShowingSubject = new Subject<boolean>();
|
||||
private _currentTourStepIndex = 0;
|
||||
private _currentTour: GuidedTour = null;
|
||||
private _onFirstStep = true;
|
||||
private _onLastStep = true;
|
||||
private _onResizeMessage = false;
|
||||
private _guidedTourCurrentStepSubject = new Subject<TourStep>();
|
||||
private _guidedTourOrbShowingSubject = new Subject<boolean>();
|
||||
private _currentTourStepIndex = 0;
|
||||
private _currentTour: GuidedTour = null;
|
||||
private _onFirstStep = true;
|
||||
private _onLastStep = true;
|
||||
private _onResizeMessage = false;
|
||||
|
||||
constructor(
|
||||
public errorHandler: ErrorHandler,
|
||||
private windowRef: WindowRefService,
|
||||
@Inject(DOCUMENT) private dom
|
||||
) {
|
||||
this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable();
|
||||
this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable();
|
||||
constructor(
|
||||
public errorHandler: ErrorHandler,
|
||||
private windowRef: WindowRefService,
|
||||
@Inject(DOCUMENT) private dom
|
||||
) {
|
||||
this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable();
|
||||
this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable();
|
||||
|
||||
fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => {
|
||||
if (this._currentTour && this._currentTourStepIndex > -1) {
|
||||
if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) {
|
||||
this._onResizeMessage = true;
|
||||
const dialog = this._currentTour.resizeDialog || {
|
||||
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.'
|
||||
};
|
||||
fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => {
|
||||
if (this._currentTour && this._currentTourStepIndex > -1) {
|
||||
if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) {
|
||||
this._onResizeMessage = true;
|
||||
const dialog = this._currentTour.resizeDialog || {
|
||||
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.'
|
||||
};
|
||||
|
||||
this._guidedTourCurrentStepSubject.next(dialog);
|
||||
} else {
|
||||
this._onResizeMessage = false;
|
||||
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
|
||||
}
|
||||
this._guidedTourCurrentStepSubject.next(dialog);
|
||||
} else {
|
||||
this._onResizeMessage = false;
|
||||
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 {
|
||||
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 {
|
||||
if (this._checkSelectorValidity()) {
|
||||
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
|
||||
} else {
|
||||
this.nextStep();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this._currentTour.completeCallback) {
|
||||
this._currentTour.completeCallback();
|
||||
}
|
||||
this.resetTour();
|
||||
}
|
||||
}
|
||||
public backStep(): 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();
|
||||
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 backStep(): 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();
|
||||
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 {
|
||||
if (this._currentTour.skipCallback) {
|
||||
this._currentTour.skipCallback(this._currentTourStepIndex);
|
||||
}
|
||||
this.resetTour();
|
||||
}
|
||||
|
||||
public skipTour(): void {
|
||||
if (this._currentTour.skipCallback) {
|
||||
this._currentTour.skipCallback(this._currentTourStepIndex);
|
||||
}
|
||||
this.resetTour();
|
||||
}
|
||||
public resetTour(): void {
|
||||
this.dom.body.classList.remove('tour-open');
|
||||
this._currentTour = null;
|
||||
this._currentTourStepIndex = 0;
|
||||
this._guidedTourCurrentStepSubject.next(null);
|
||||
}
|
||||
|
||||
public resetTour(): void {
|
||||
this.dom.body.classList.remove('tour-open');
|
||||
this._currentTour = null;
|
||||
this._currentTourStepIndex = 0;
|
||||
this._guidedTourCurrentStepSubject.next(null);
|
||||
}
|
||||
public startTour(tour: GuidedTour): void {
|
||||
this._currentTour = cloneDeep(tour);
|
||||
this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep);
|
||||
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 startTour(tour: GuidedTour): void {
|
||||
this._currentTour = cloneDeep(tour);
|
||||
this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep);
|
||||
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 {
|
||||
this._guidedTourOrbShowingSubject.next(false);
|
||||
this.dom.body.classList.add('tour-open');
|
||||
}
|
||||
|
||||
public activateOrb(): void {
|
||||
this._guidedTourOrbShowingSubject.next(false);
|
||||
this.dom.body.classList.add('tour-open');
|
||||
}
|
||||
private _setFirstAndLast(): void {
|
||||
this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex;
|
||||
this._onFirstStep = this._currentTourStepIndex === 0;
|
||||
}
|
||||
|
||||
private _setFirstAndLast(): void {
|
||||
this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex;
|
||||
this._onFirstStep = this._currentTourStepIndex === 0;
|
||||
}
|
||||
private _checkSelectorValidity(): boolean {
|
||||
if (this._currentTour.steps[this._currentTourStepIndex].selector) {
|
||||
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 {
|
||||
if (this._currentTour.steps[this._currentTourStepIndex].selector) {
|
||||
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 {
|
||||
return this._onLastStep;
|
||||
}
|
||||
|
||||
public get onLastStep(): boolean {
|
||||
return this._onLastStep;
|
||||
}
|
||||
public get onFirstStep(): boolean {
|
||||
return this._onFirstStep;
|
||||
}
|
||||
|
||||
public get onFirstStep(): boolean {
|
||||
return this._onFirstStep;
|
||||
}
|
||||
public get onResizeMessage(): boolean {
|
||||
return this._onResizeMessage;
|
||||
}
|
||||
|
||||
public get onResizeMessage(): boolean {
|
||||
return this._onResizeMessage;
|
||||
}
|
||||
public get currentTourStepDisplay(): number {
|
||||
return this._currentTourStepIndex + 1;
|
||||
}
|
||||
|
||||
public get currentTourStepDisplay(): number {
|
||||
return this._currentTourStepIndex + 1;
|
||||
}
|
||||
public get currentTourStepCount(): number {
|
||||
return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0;
|
||||
}
|
||||
|
||||
public get currentTourStepCount(): number {
|
||||
return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0;
|
||||
}
|
||||
public get preventBackdropFromAdvancing(): boolean {
|
||||
return this._currentTour && this._currentTour.preventBackdropFromAdvancing;
|
||||
}
|
||||
|
||||
public get preventBackdropFromAdvancing(): boolean {
|
||||
return this._currentTour && this._currentTour.preventBackdropFromAdvancing;
|
||||
}
|
||||
private getPreparedTourStep(index: number): TourStep {
|
||||
return this.setTourOrientation(this._currentTour.steps[index]);
|
||||
}
|
||||
|
||||
private getPreparedTourStep(index: number): TourStep {
|
||||
return this.setTourOrientation(this._currentTour.steps[index]);
|
||||
}
|
||||
private setTourOrientation(step: TourStep): TourStep {
|
||||
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 {
|
||||
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;
|
||||
});
|
||||
let currentOrientation: Orientation = Orientation.Top;
|
||||
(convertedStep.orientation as OrientationConfiguration[]).forEach(
|
||||
(orientationConfig: OrientationConfiguration) => {
|
||||
if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) {
|
||||
currentOrientation = orientationConfig.orientationDirection;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let currentOrientation: Orientation = Orientation.Top;
|
||||
(convertedStep.orientation as OrientationConfiguration[]).forEach(
|
||||
(orientationConfig: OrientationConfiguration) => {
|
||||
if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) {
|
||||
currentOrientation = orientationConfig.orientationDirection;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
convertedStep.orientation = currentOrientation;
|
||||
}
|
||||
return convertedStep;
|
||||
}
|
||||
convertedStep.orientation = currentOrientation;
|
||||
}
|
||||
return convertedStep;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,67 @@
|
|||
<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.dashboardStatisticsData">
|
||||
<div *ngIf="!this.hasDmps()">
|
||||
<div class="main-content">
|
||||
<div class="col-auto">
|
||||
<div class="card" [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> -->
|
||||
<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 class="card-content pt-3 mb-0">
|
||||
<div class="col">
|
||||
<div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'">
|
||||
<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 *ngIf="!this.hasDmps()" class="card-title mb-0 pt-4">{{'DASHBOARD.DMP-QUESTION' | translate}}</p>
|
||||
<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}}
|
||||
</p>
|
||||
<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"> -->
|
||||
<p *ngIf="this.hasDmps()" 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="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 *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 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="counter-zero">0</div>
|
||||
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.DMPS' | translate}}</a>
|
||||
|
|
@ -29,48 +72,8 @@
|
|||
<div class="counter-zero">0</div>
|
||||
<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 *ngIf="this.hasDmps()" class="col-auto stats">
|
||||
<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
|
||||
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
|
||||
|
|
@ -86,84 +89,91 @@
|
|||
<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="main-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Home screen on log out -->
|
||||
<div class="col p-0" *ngIf="!this.isAuthenticated()">
|
||||
<div class="col-auto">
|
||||
<!-- <div class="row">
|
||||
<!-- Home screen on log out -->
|
||||
<div class="col p-0" *ngIf="!this.isAuthenticated()">
|
||||
<div class="col-auto">
|
||||
<!-- <div class="row">
|
||||
<div class="col header-text-container">
|
||||
<h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
|
||||
<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="main-content">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col d-flex flex-column">
|
||||
<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>
|
||||
<div class="d-flex flex-column align-items-center non-auth-title-container">
|
||||
<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
|
||||
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
|
||||
<div class="main-content">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col d-flex flex-column">
|
||||
<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>
|
||||
<div class="d-flex flex-column align-items-center non-auth-title-container">
|
||||
<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
|
||||
<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 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 *ngIf="hasDmps()" class="col activity">
|
||||
<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.PUBLIC-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.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">
|
||||
<div *ngIf="hasDmps()" class="col activity">
|
||||
<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.PUBLIC-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.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']">
|
||||
<mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
|
||||
</button>
|
||||
</div> -->
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div *ngIf="!hasDmps()" class="ml-auto pl-4 personal-usage-block">
|
||||
<div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div>
|
||||
<div class="counter-zero">0</div>
|
||||
<a>{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
|
||||
<div class="counter-zero">0</div>
|
||||
<a>{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
|
||||
<div class="counter-zero">0</div>
|
||||
<a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
|
||||
<div class="counter-zero">0</div>
|
||||
<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
|
||||
</div>
|
||||
<div *ngIf="hasDmps()" class="ml-auto stats">
|
||||
<div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
|
||||
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
|
||||
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}">
|
||||
{{dashboardStatisticsData?.totalDataSetCount}}</div>
|
||||
<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}">
|
||||
{{dashboardStatisticsData?.totalGrantCount}}</div>
|
||||
<a href="#" class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalOrganisationCount != 0, 'counter-zero': dashboardStatisticsData?.totalOrganisationCount == 0}">
|
||||
{{dashboardStatisticsData?.totalOrganisationCount}}</div>
|
||||
<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
|
||||
<div class="col-auto">
|
||||
<div *ngIf="!hasDmps()" class="ml-auto pl-4 personal-usage-block">
|
||||
<div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div>
|
||||
<div class="counter-zero">0</div>
|
||||
<a>{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
|
||||
<div class="counter-zero">0</div>
|
||||
<a>{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
|
||||
<div class="counter-zero">0</div>
|
||||
<a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
|
||||
<div class="counter-zero">0</div>
|
||||
<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
|
||||
</div>
|
||||
<div *ngIf="hasDmps()" class="ml-auto stats">
|
||||
<div class="personal-usage">{{'DASHBOARD.PUBLIC-USAGE' | translate}}</div>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
|
||||
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
|
||||
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}">
|
||||
{{dashboardStatisticsData?.totalDataSetCount}}</div>
|
||||
<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}">
|
||||
{{dashboardStatisticsData?.totalGrantCount}}</div>
|
||||
<a href="#" class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
|
||||
<div [ngClass]="{'counter': dashboardStatisticsData?.totalOrganisationCount != 0, 'counter-zero': dashboardStatisticsData?.totalOrganisationCount == 0}">
|
||||
{{dashboardStatisticsData?.totalOrganisationCount}}</div>
|
||||
<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -171,11 +181,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- <div class="header-image">
|
||||
<!-- <div class="header-image">
|
||||
<div class="header-text-container">
|
||||
<h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
|
||||
<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
line-height: 1;
|
||||
font-size: 0.87rem;
|
||||
padding: 0.62rem 1.87rem;
|
||||
margin-left: 40px;
|
||||
// margin-left: 40px;
|
||||
}
|
||||
|
||||
.personal-usage {
|
||||
|
|
@ -394,6 +394,11 @@ input[type="text"] {
|
|||
// top: 7px;
|
||||
}
|
||||
|
||||
.add-dataset-btn {
|
||||
height: 40px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
|
||||
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
|
||||
background: #129d99;
|
||||
|
|
|
|||
|
|
@ -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 { DatasetWizardEditorModel } from '../dataset/dataset-wizard/dataset-wizard-editor.model';
|
||||
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 { 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({
|
||||
|
|
@ -66,6 +67,10 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
|
|||
totalDraftDatasets: number;
|
||||
totalRecents: number;
|
||||
|
||||
dmpText: string;
|
||||
datasetText: string;
|
||||
importFileText: string;
|
||||
startWizardText: string;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
|
|
@ -80,7 +85,8 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
|
|||
private userService: UserService,
|
||||
private dialog: MatDialog,
|
||||
private language: TranslateService,
|
||||
private uiNotificationService: UiNotificationService
|
||||
private uiNotificationService: UiNotificationService,
|
||||
private guidedTourService: GuidedTourService
|
||||
) {
|
||||
super();
|
||||
// this.dashboardStatisticsData.totalDataManagementPlanCount = 0;
|
||||
|
|
@ -125,6 +131,10 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
|
|||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(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 {
|
||||
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 {
|
||||
// this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION'), SnackBarNotificationLevel.Success);
|
||||
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', datasetId]); });
|
||||
|
|
|
|||
|
|
@ -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 { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
|
||||
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({
|
||||
selector: 'app-dmp-listing-component',
|
||||
|
|
|
|||
|
|
@ -9,15 +9,19 @@
|
|||
<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
|
||||
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
|
||||
<div class="actions">
|
||||
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
|
||||
<mat-icon class="pr-2">file_upload</mat-icon>
|
||||
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
|
||||
</button>
|
||||
<div class="import-file col-auto">
|
||||
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
|
||||
<mat-icon class="pr-2">file_upload</mat-icon>
|
||||
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<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()">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
{{ 'NAV-BAR.START-WIZARD' | translate }}
|
||||
</button>
|
||||
<div class="start-wizard col-auto">
|
||||
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
{{ 'NAV-BAR.START-WIZARD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
|
|
|
|||
|
|
@ -18,8 +18,10 @@
|
|||
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navigation">
|
||||
|
||||
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
|
||||
<button type="button" class="normal-btn ml-auto" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
|
||||
<div class="new-dmp-dialog col-md-auto ml-auto">
|
||||
<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> -->
|
||||
<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> -->
|
||||
|
|
|
|||
|
|
@ -134,3 +134,7 @@ $mat-card-header-size: 40px !default;
|
|||
background-color: #ececec;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.new-dmp-dialog {
|
||||
padding: 0em .5em 0em 0em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div *ngIf="showItem(groupMenuItem);">
|
||||
<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}">
|
||||
<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 *ngIf="groupMenuRoute.path == '/plans'" class="material-icons icon-mask">person</i>
|
||||
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue