argos/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts

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