2022-11-01 11:20:03 +01:00
import { Component , ElementRef , ViewChild } from '@angular/core' ;
2022-06-20 17:01:19 +02:00
import { ActivatedRoute , NavigationEnd , Router } from '@angular/router' ;
2019-01-09 12:05:23 +01:00
2019-09-30 14:48:48 +02:00
import { EnvProperties } from './openaireLibrary/utils/properties/env-properties' ;
2022-09-20 23:08:20 +02:00
import { MenuItem } from './openaireLibrary/sharedComponents/menu' ;
2019-09-30 14:48:48 +02:00
import { EnvironmentSpecificService } from './openaireLibrary/utils/properties/environment-specific.service' ;
import { Session , User } from './openaireLibrary/login/utils/helper.class' ;
import { UserManagementService } from "./openaireLibrary/services/user-management.service" ;
2020-06-11 17:34:42 +02:00
import { properties } from "../environments/environment" ;
2022-06-20 17:01:19 +02:00
import { Subscriber } from "rxjs" ;
2020-06-29 15:16:21 +02:00
import { StakeholderService } from "./openaireLibrary/monitor/services/stakeholder.service" ;
2020-10-14 13:23:40 +02:00
import { Header } from "./openaireLibrary/sharedComponents/navigationBar.component" ;
2021-04-21 14:52:40 +02:00
import { SmoothScroll } from "./openaireLibrary/utils/smooth-scroll" ;
2022-02-22 15:40:33 +01:00
import { QuickContactService } from './openaireLibrary/sharedComponents/quick-contact/quick-contact.service' ;
2022-09-23 14:36:10 +02:00
import { UntypedFormBuilder , UntypedFormGroup , Validators } from "@angular/forms" ;
2022-02-24 17:43:20 +01:00
import { Composer } from "./openaireLibrary/utils/email/composer" ;
import { NotificationHandler } from "./openaireLibrary/utils/notification-handler" ;
import { EmailService } from "./openaireLibrary/utils/email/email.service" ;
import { StringUtils } from "./openaireLibrary/utils/string-utils.class" ;
import { QuickContactComponent } from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.component" ;
import { AlertModal } from "./openaireLibrary/utils/modal/alert" ;
2022-06-08 13:01:10 +02:00
import { StakeholderEntities } from './openaireLibrary/monitor/entities/stakeholder' ;
2022-08-02 22:34:59 +02:00
import { ResourcesService } from "./openaireLibrary/monitor/services/resources.service" ;
2019-01-09 12:05:23 +01:00
@Component ( {
selector : 'app-root' ,
template : `
2022-06-20 14:47:49 +02:00
< div >
< div id = "modal-container" > < / div >
2020-10-14 13:40:12 +02:00
< navbar * ngIf = "properties && showMenu && header" portal = "monitor" [ header ] = " header " [ onlyTop ] = " false "
2019-09-30 14:48:48 +02:00
[ userMenuItems ] = userMenuItems [ menuItems ] = menuItems [ user ] = "user"
2022-03-03 17:24:17 +01:00
[ showMenu ] = showMenu [ properties ] = "properties" >
< ul extra - s class = "uk-nav uk-nav-default uk-margin-small-top" >
< li routerLinkActive = "uk-active" >
< a routerLink = "/get-started" > Get Started < / a >
< / li >
< / ul >
2022-03-04 16:51:22 +01:00
< a * ngIf = "showGetStarted" extra - m class = "uk-button uk-button-small uk-button-primary uk-text-uppercase uk-margin-left" routerLink = "/get-started" > Get Started < / a >
2022-03-03 17:24:17 +01:00
< / navbar >
2020-11-16 17:28:16 +01:00
< schema2jsonld * ngIf = "properties " [ URL ] = " properties.domain + properties.baseLink "
2022-06-02 17:15:22 +02:00
[ logoURL ] = "properties.domain + properties.baseLink + logoPath + 'main.svg'"
2022-03-03 17:24:17 +01:00
type = "home"
2020-11-16 17:28:16 +01:00
description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators. "
2022-03-03 17:24:17 +01:00
name = "OpenAIRE Monitor" [ searchAction ] = "true"
[ searchActionRoute ] = "properties.domain + properties.baseLink + '/browse'" >
2020-11-16 17:28:16 +01:00
< / schema2jsonld >
2022-02-16 11:03:03 +01:00
< div class = "uk-background-default" >
2019-09-30 14:48:48 +02:00
< main >
< router - outlet > < / r o u t e r - o u t l e t >
< / main >
< / div >
2020-10-13 22:32:48 +02:00
< cookie - law position = "bottom" >
2019-09-30 14:48:48 +02:00
OpenAIRE uses cookies in order to function properly . < br >
Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing
experience possible .
By using the OpenAIRE portal you accept our use of cookies . < a
2021-12-10 11:30:32 +01:00
href = "https://www.openaire.eu/privacy-policy#cookies" target = "_blank" > Read more < span class = "uk-icon" >
2019-09-30 14:48:48 +02:00
< svg width = "20" height = "20" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg" icon = "chevron-right"
ratio = "1" > < polyline fill = "none" stroke = "#000" stroke - width = "1.03"
points = "7 4 13 10 7 16" > < / polyline > < / svg >
< / span > < / a >
< / c o o k i e - l a w >
2022-11-01 11:20:03 +01:00
< bottom # bottom * ngIf = "properties && showMenu" id = "bottom" [ grantAdvance ] = " false "
[ properties ] = "properties" > < / bottom >
2022-03-03 17:24:17 +01:00
< quick - contact # quickContact * ngIf = "showQuickContact && contactForm" ( sendEmitter ) = " send ( $ event ) "
2022-10-12 14:34:47 +02:00
[ contactForm ] = "contactForm" [ sending ] = "sending" [ images ] = "images" [ contact ] = "'Help'"
2022-03-03 17:24:17 +01:00
[ organizationTypes ] = "organizationTypes" > < / q u i c k - c o n t a c t >
2022-06-02 17:15:22 +02:00
< modal - alert # modal [ overflowBody ] = " false " > < / m o d a l - a l e r t >
2019-09-30 14:48:48 +02:00
< / div >
`
2020-06-05 14:59:28 +02:00
2019-09-30 14:48:48 +02:00
} )
export class AppComponent {
userMenuItems : MenuItem [ ] = [ ] ;
2022-09-20 23:08:20 +02:00
menuItems : MenuItem [ ] = [ ] ;
2019-09-30 14:48:48 +02:00
bottomMenuItems : MenuItem [ ] = [ ] ;
2020-06-29 15:16:21 +02:00
properties : EnvProperties = properties ;
2019-09-30 14:48:48 +02:00
showMenu : boolean = false ;
user : User ;
2020-10-14 13:23:40 +02:00
header : Header ;
2022-03-08 20:15:08 +01:00
logoPath : string = 'assets/common-assets/logo-services/monitor/' ;
2022-02-24 17:43:20 +01:00
/* Contact */
2022-03-03 17:24:17 +01:00
public showQuickContact : boolean ;
public showGetStarted : boolean = true ;
2022-09-23 14:36:10 +02:00
public contactForm : UntypedFormGroup ;
2022-02-24 17:43:20 +01:00
public organizationTypes : string [ ] = [
'Funding agency' , 'University / Research Center' ,
'Research Infrastructure' , 'Government' ,
'Non-profit' , 'Industry' , 'Other'
] ;
2022-06-02 17:15:22 +02:00
public images : string [ ] = [ 'assets/monitor-assets/avatar1.jpg' , 'assets/monitor-assets/avatar2.jpg' ]
2022-02-24 17:43:20 +01:00
public sending = false ;
@ViewChild ( 'modal' ) modal : AlertModal ;
@ViewChild ( 'quickContact' ) quickContact : QuickContactComponent ;
2022-11-01 11:20:03 +01:00
@ViewChild ( 'bottom' , { read : ElementRef } ) bottom : ElementRef ;
2020-06-29 15:16:21 +02:00
private subscriptions : any [ ] = [ ] ;
2022-06-08 13:01:10 +02:00
public stakeholderEntities = StakeholderEntities ;
2020-06-05 14:59:28 +02:00
2022-03-03 17:24:17 +01:00
constructor ( private route : ActivatedRoute , private propertiesService : EnvironmentSpecificService ,
2021-04-21 14:52:40 +02:00
private router : Router , private stakeholderService : StakeholderService , private smoothScroll : SmoothScroll ,
2022-02-22 15:40:33 +01:00
private userManagementService : UserManagementService ,
2022-03-03 17:24:17 +01:00
private quickContactService : QuickContactService ,
2022-09-23 14:36:10 +02:00
private fb : UntypedFormBuilder ,
2022-08-02 22:34:59 +02:00
private emailService : EmailService ,
private resourcesService : ResourcesService ) {
2020-11-13 16:08:17 +01:00
this . subscriptions . push ( router . events . forEach ( ( event ) = > {
2022-02-24 17:43:20 +01:00
if ( event instanceof NavigationEnd ) {
2022-03-03 17:24:17 +01:00
if ( event . url === '/contact-us' ) {
this . quickContactService . setDisplay ( false ) ;
} else if ( event . url !== '/contact-us' && ! this . showQuickContact ) {
this . quickContactService . setDisplay ( true ) ;
}
this . showGetStarted = event . url !== '/get-started' ;
}
2020-11-13 16:08:17 +01:00
} ) ) ;
2019-09-30 14:48:48 +02:00
}
2020-06-05 14:59:28 +02:00
2019-09-30 14:48:48 +02:00
ngOnInit() {
2022-02-16 17:19:35 +01:00
this . userManagementService . fixRedirectURL = properties . afterLoginRedirectLink ;
2020-07-13 15:05:41 +02:00
this . subscriptions . push ( this . userManagementService . getUserInfo ( ) . subscribe ( user = > {
this . user = user ;
this . setUserMenu ( ) ;
2020-10-14 13:23:40 +02:00
this . header = {
route : "/" ,
url : null ,
title : 'monitor' ,
2022-03-16 13:24:53 +01:00
logoUrl : this.logoPath + 'main.svg' ,
logoSmallUrl : this.logoPath + 'small.svg' ,
2022-03-03 17:24:17 +01:00
position : 'left' ,
badge : true ,
2022-08-04 17:03:33 +02:00
menuPosition : 'center'
2020-10-14 13:23:40 +02:00
} ;
2020-07-13 15:05:41 +02:00
this . buildMenu ( ) ;
2022-02-24 17:43:20 +01:00
this . reset ( ) ;
2020-06-29 15:16:21 +02:00
} ) ) ;
2022-03-03 17:24:17 +01:00
this . subscriptions . push ( this . quickContactService . isDisplayed . subscribe ( display = > {
this . showQuickContact = display ;
} ) ) ;
2020-06-29 15:16:21 +02:00
}
2022-11-01 11:20:03 +01:00
createObservers() {
let options = {
root : null ,
rootMargin : '300px' ,
threshold : 1.0
} ;
let intersectionObserver = new IntersectionObserver ( entries = > {
entries . forEach ( entry = > {
if ( entry . isIntersecting && this . showQuickContact ) {
this . showQuickContact = false ;
this . quickContactService . setDisplay ( this . showQuickContact ) ;
} else if ( ! entry . isIntersecting && ! this . showQuickContact ) {
this . showQuickContact = true ;
this . quickContactService . setDisplay ( this . showQuickContact ) ;
}
} ) ;
} , options ) ;
intersectionObserver . observe ( this . bottom . nativeElement ) ;
this . subscriptions . push ( intersectionObserver ) ;
}
2020-06-29 15:16:21 +02:00
public ngOnDestroy() {
this . subscriptions . forEach ( value = > {
if ( value instanceof Subscriber ) {
value . unsubscribe ( ) ;
}
} ) ;
2020-11-13 16:08:17 +01:00
this . userManagementService . clearSubscriptions ( ) ;
this . stakeholderService . clearSubscriptions ( ) ;
2021-04-21 14:52:40 +02:00
this . smoothScroll . clearSubscriptions ( ) ;
2020-06-29 15:16:21 +02:00
}
2022-06-02 17:15:22 +02:00
2020-06-05 14:59:28 +02:00
public buildMenu() {
this . menuItems = [ ] ;
2022-09-20 23:08:20 +02:00
this . menuItems . push (
new MenuItem ( "stakeholders" , "Browse " + this . stakeholderEntities . STAKEHOLDERS , "" , "/browse" , false , [ ] , null , { } )
) ;
2022-09-21 11:07:13 +02:00
this . resourcesService . setResources ( this . menuItems ) ;
2022-10-24 15:38:21 +02:00
let about = new MenuItem ( "about" , "About" , "" , "" , false , [ ] , null , { } ) ;
about . items = [
new MenuItem ( "how-it-works" , "How it works" , "" , "/about/how-it-works" , false , [ ] , null , { } ) ,
new MenuItem ( "faqs" , "FAQs" , "" , "/about/faqs" , false , [ ] , null , { } )
]
this . menuItems . push ( about ) ;
2020-06-05 14:59:28 +02:00
this . bottomMenuItems = [
new MenuItem ( "" , "About" , "https://beta.openaire.eu/project-factsheets" , "" , false , [ ] , [ ] , { } ) ,
new MenuItem ( "" , "News - Events" , "https://beta.openaire.eu/news-events" , "" , false , [ ] , [ ] , { } ) ,
new MenuItem ( "" , "Blog" , "https://blogs.openaire.eu/" , "" , false , [ ] , [ ] , { } ) ,
new MenuItem ( "" , "Contact us" , "https://beta.openaire.eu/contact-us" , "" , false , [ ] , [ ] , { } )
] ;
2020-06-29 15:16:21 +02:00
this . showMenu = true ;
2022-11-01 11:20:03 +01:00
setTimeout ( ( ) = > {
this . createObservers ( ) ;
} )
2020-06-29 15:16:21 +02:00
}
public setUserMenu() {
2020-06-05 14:59:28 +02:00
this . userMenuItems = [ ] ;
2020-11-04 18:19:27 +01:00
if ( this . user ) {
if ( Session . isPortalAdministrator ( this . user ) || Session . isMonitorCurator ( this . user ) || Session . isKindOfMonitorManager ( this . user ) ) {
this . userMenuItems . push ( new MenuItem ( "" , "Manage profiles" ,
2022-07-12 11:13:28 +02:00
this . properties . domain + properties . baseLink + "/dashboard/admin" , "" , false , [ ] , [ ] , { } , null , null , null , null , "_self" ) ) ;
2020-11-04 18:19:27 +01:00
}
2022-06-08 13:01:10 +02:00
this . userMenuItems . push ( new MenuItem ( "" , "My " + this . stakeholderEntities . STAKEHOLDERS , "" , "/my-dashboards" , false , [ ] , [ ] , { } ) ) ;
2020-11-04 18:19:27 +01:00
this . userMenuItems . push ( new MenuItem ( "" , "User information" , "" , "/user-info" , false , [ ] , [ ] , { } ) ) ;
2020-06-05 14:59:28 +02:00
}
}
2022-02-24 17:43:20 +01:00
public send ( event ) {
2022-03-03 17:24:17 +01:00
if ( event . valid === true ) {
2022-02-24 17:43:20 +01:00
this . sendMail ( this . properties . admins ) ;
}
}
public reset() {
2022-03-03 17:24:17 +01:00
if ( this . quickContact ) {
2022-02-24 17:43:20 +01:00
this . quickContact . close ( ) ;
}
2022-03-03 17:24:17 +01:00
this . contactForm = this . fb . group ( {
2022-02-24 17:43:20 +01:00
name : this.fb.control ( '' , Validators . required ) ,
surname : this.fb.control ( '' , Validators . required ) ,
email : this.fb.control ( '' , [ Validators . required , Validators . email ] ) ,
job : this.fb.control ( '' , Validators . required ) ,
organization : this.fb.control ( '' , Validators . required ) ,
organizationType : this.fb.control ( '' , [ Validators . required , StringUtils . validatorType ( this . organizationTypes ) ] ) ,
message : this.fb.control ( '' , Validators . required ) ,
recaptcha : this.fb.control ( '' , Validators . required ) ,
} ) ;
}
private sendMail ( admins : string [ ] ) {
this . sending = true ;
this . subscriptions . push ( this . emailService . contact ( this . properties ,
Composer . composeEmailForMonitor ( this . contactForm . value , admins ) ,
this . contactForm . value . recaptcha ) . subscribe (
res = > {
if ( res ) {
this . sending = false ;
this . reset ( ) ;
this . modalOpen ( ) ;
} else {
this . handleError ( 'Email <b>sent failed!</b> Please try again.' ) ;
}
} ,
error = > {
this . handleError ( 'Email <b>sent failed!</b> Please try again.' , error ) ;
}
) ) ;
}
public modalOpen() {
this . modal . okButton = true ;
this . modal . alertTitle = 'Your request has been successfully submitted' ;
2022-06-02 17:15:22 +02:00
this . modal . message = 'Our team will respond to your submission soon.' ;
2022-02-24 17:43:20 +01:00
this . modal . cancelButton = false ;
this . modal . okButtonLeft = false ;
this . modal . okButtonText = 'OK' ;
this . modal . open ( ) ;
}
handleError ( message : string , error = null ) {
2022-03-03 17:24:17 +01:00
if ( error ) {
2022-02-24 17:43:20 +01:00
console . error ( error ) ;
}
this . sending = false ;
this . quickContact . close ( ) ;
NotificationHandler . rise ( message , 'danger' ) ;
this . contactForm . get ( 'recaptcha' ) . setValue ( '' ) ;
}
2019-01-09 12:05:23 +01:00
}