import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { UntypedFormBuilder, Validators } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; import { DashboardStatistics } from '@app/core/model/dashboard/dashboard-statistics'; import { AuthService } from '@app/core/services/auth/auth.service'; import { ConfigurationService } from '@app/core/services/configuration/configuration.service'; import { DashboardService } from '@app/core/services/dashboard/dashboard.service'; import { MatomoService } from '@app/core/services/matomo/matomo-service'; import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service'; import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants'; import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service'; import { BaseComponent } from '@common/base/base.component'; import { TranslateService } from '@ngx-translate/core'; import * as moment from 'moment'; import { CookieService } from 'ngx-cookie-service'; import { takeUntil } from 'rxjs/operators'; import { StartNewDescriptionDialogComponent } from '../description/start-new-description-dialog/start-new-description-dialog.component'; import { StartNewDmpDialogComponent } from '../dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent extends BaseComponent implements OnInit { public dashboardStatistics: DashboardStatistics; public grantCount = 0; public organizationCount = 0; currentType: string = "recent"; newReleaseNotificationVisible = false; isIntroCardVisible = true; constructor( private router: Router, private route: ActivatedRoute, private dashboardService: DashboardService, private authentication: AuthService, private dialog: MatDialog, private language: TranslateService, private guidedTourService: GuidedTourService, private matomoService: MatomoService, public referenceTypeService: ReferenceTypeService, private fb: UntypedFormBuilder, private cookieService: CookieService, public configurationService: ConfigurationService ) { super(); } ngOnInit() { this.route.queryParams.subscribe(params => { let type = params['type']; if (type || type == "recent" || (type == "drafts" && this.isAuthenticated()) || type == "dmps" || type == "descriptions") { this.currentType = type; } else { this.currentType = "recent"; } }); this.matomoService.trackPageView('Home Dashboard'); if (!this.isAuthenticated()) { this.dashboardService.getPublicDashboardStatistics() .pipe(takeUntil(this._destroyed)) .subscribe(results => { this.dashboardStatistics = results; this.grantCount = this.dashboardStatistics.referenceTypeStatistics.filter(x => x.referenceType.id == this.referenceTypeService.getGrantReferenceType())?.find(Boolean).count; this.organizationCount = this.dashboardStatistics.referenceTypeStatistics.filter(x => x.referenceType.id == this.referenceTypeService.getOrganizationReferenceType())?.find(Boolean).count; }); } else { this.dashboardService.getMyDashboardStatistics() .pipe(takeUntil(this._destroyed)) .subscribe(results => { this.dashboardStatistics = results; this.grantCount = this.dashboardStatistics.referenceTypeStatistics.filter(x => x.referenceType.id == this.referenceTypeService.getGrantReferenceType())?.find(Boolean).count; this.organizationCount = this.dashboardStatistics.referenceTypeStatistics.filter(x => x.referenceType.id == this.referenceTypeService.getOrganizationReferenceType())?.find(Boolean).count; if (this.dashboardStatistics && this.dashboardStatistics.dmpCount === 0) { this.openDashboardTour(); } }); } this.newReleaseNotificationVisible = this.isNewReleaseNotificationVisible(); } public get indexFromCurrentType() { if (this.currentType == "recent") { return 0; } if (this.currentType == "drafts") { return 1; } if (this.currentType == "dmps") { return this.isAuthenticated() ? 2 : 1; } if (this.currentType == "descriptions") { return this.isAuthenticated() ? 3 : 2; } return 0; } public isAuthenticated(): boolean { return this.authentication.currentAccountIsAuthenticated(); } openNewDmpDialog() { if (this.dialog.openDialogs.length > 0) { this.dialog.closeAll(); } else { const dialogRef = this.dialog.open(StartNewDmpDialogComponent, { disableClose: false, data: { isDialog: true } }); } } public hasDmps(): boolean { if (this.dashboardStatistics) { return this.dashboardStatistics.dmpCount !== 0 || this.dashboardStatistics.descriptionCount !== 0 || this.dashboardStatistics.referenceTypeStatistics.length !== 0 } else { return false; } } addNewDescription() { const formGroup = this.fb.group({ dmpId: this.fb.control(null, Validators.required), }) const dialogRef = this.dialog.open(StartNewDescriptionDialogComponent, { disableClose: false, restoreFocus: false, data: { startNewDmp: false, formGroup: formGroup } }); dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { if (result) { if (result.startNewDmp) { this.openNewDmpDialog(); } else { this.router.navigate(['/plans', 'edit', result.formGroup.get('dmpId').value]); } } }); } 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-description-tour', content: 'Step 4', orientation: Orientation.BottomLeft, isStepUnique: false, highlightPadding: 10 } ] }; public setDashboardTourDmpText(): void { const dmpText = this.language.instant('DASHBOARD.TOUR-GUIDE.DMP') + '\n\n' + this.language.instant('DASHBOARD.TOUR-GUIDE.START-NEW'); this.dashboardTour.steps[0].title = dmpText; } public setDashboardImportFileText(): void { const importFileText = this.language.instant('DASHBOARD.TOUR-GUIDE.IMPORT-DMP'); this.dashboardTour.steps[1].title = importFileText; } public setDashboardStartWizardText(): void { const startWizardText = this.language.instant('DASHBOARD.TOUR-GUIDE.START-WIZARD'); this.dashboardTour.steps[2].title = startWizardText; } public setDescriptionText(): void { const descriptionText = this.language.instant('DASHBOARD.TOUR-GUIDE.DESCRIPTION') + '\n\n' + this.language.instant('DASHBOARD.TOUR-GUIDE.NEW-DESCRIPTION'); this.dashboardTour.steps[3].title = descriptionText; } openDashboardTour() { this.setDashboardTourDmpText(); this.setDashboardImportFileText(); this.setDashboardStartWizardText(); this.setDescriptionText(); this.guidedTourService.startTour(this.dashboardTour); } dismissIntroCard() { this.isIntroCardVisible = false; } dismissNewReleaseNotification() { this.cookieService.set('new-release-dismiss-' + this.configurationService.newReleaseNotificationVersionCode, 'true', 5000, null, null, false, 'Lax'); this.newReleaseNotificationVisible = false; } isNewReleaseNotificationVisible() { if (this.configurationService.newReleaseNotificationVersionCode == null) { return false; } if (this.configurationService.newReleaseNotificationExpires == null && this.configurationService.newReleaseNotificationLink == null) { return false; } if (this.configurationService.newReleaseNotificationExpires != null && moment(this.configurationService.newReleaseNotificationExpires).tz('UTC') < moment.utc()) { return false; } if (this.cookieService.get('new-release-dismiss-' + this.configurationService.newReleaseNotificationVersionCode) === 'true') { return false; } return true; } }