connect/src/app/app.component.ts

import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';

import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
import {CommunitiesService} from "./openaireLibrary/connect/communities/communities.service";
import {Session, User} from './openaireLibrary/login/utils/helper.class';
import {ConnectHelper} from './openaireLibrary/connect/connectHelper';
import {UserManagementService} from "./openaireLibrary/services/user-management.service";
import {ConfigurationService} from "./openaireLibrary/utils/configuration/configuration.service";
import {properties} from '../environments/environment';
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
import {Subscriber} from "rxjs";
import {CommunityService} from "./openaireLibrary/connect/community/community.service";
import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
import {LoginErrorCodes} from "./openaireLibrary/login/utils/guardHelper.class";
import {CustomizationOptions} from "./openaireLibrary/connect/community/CustomizationOptions";
import {LayoutService} from "./openaireLibrary/services/layout.service";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {Meta} from "@angular/platform-browser";
import {CommunityInfo} from "./openaireLibrary/connect/community/communityInfo";
import {SEOService} from "./openaireLibrary/sharedComponents/SEO/SEO.service";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {QuickContactService} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.service";
import {EmailService} from "./openaireLibrary/utils/email/email.service";
import {AlertModal} from "./openaireLibrary/utils/modal/alert";
import {QuickContactComponent} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.component";
import {Composer} from "./openaireLibrary/utils/email/composer";
import {NotificationHandler} from "./openaireLibrary/utils/notification-handler";

@Component({
  selector: 'app-root',
  template: `
    <div>
      <navbar *ngIf="properties && showMenu && !community && header" [portal]="properties.dashboard" [onlyTop]=false
              [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user" [header]="header"
              [showMenu]=showMenu [properties]="properties" [showHomeMenuItem]="false" communityId="connect">
        <ul *ngIf="showGetStarted" 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>
        <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>
      </navbar>
      <navbar *ngIf="properties && showMenu  && community && header" [portal]="community.communityId" [onlyTop]=false
              [communityId]="community.communityId" [header]="header"
              [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"
              [showMenu]=showMenu [properties]="properties" [enableSearch]="false"
              searchRoute="/search/find/research-outcomes"
              [showHomeMenuItem]="false">
      </navbar>
      <customization *ngIf="properties &&  showMenu && communityId && communityId.length > 0 && layout" [properties]="properties"
                     [communityId]="communityId" [layout]="layout" ></customization>
      <schema2jsonld *ngIf="properties && showMenu && !community" [URL]="properties.domain + properties.baseLink"
                     [logoURL]="properties.domain + properties.baseLink + logoPath + 'main.svg'"
                     type="home"
                     [searchActionRoute]="properties.searchLinkToCommunities" [searchAction]="true"
                     name="OpenAIRE Connect"
                     description="Build a Gateway for your Community: Turn Open Science into Practice. It takes your open and linked research outcomes.">
      </schema2jsonld>
      <schema2jsonld *ngIf="properties  && showMenu && communityId && communityId.length > 0 && community"
                     [URL]="properties.domain + properties.baseLink"
                     [logoURL]="community.logoUrl" type="home" [searchActionRoute]="properties.searchLinkToResults"
                     [name]="(community.shortTitle) ? community.shortTitle : community.title" [description]="community.description">
      </schema2jsonld>
      <div class="custom-main-content">
        <main>
          <router-outlet></router-outlet>
        </main>
      </div>
      <div id="subscribeAndInviteBtn" *ngIf="isClient && communityId && community">
        <subscribe [communityId]="community.communityId"></subscribe>
        <invite *ngIf="isManager" [longView]="false"></invite>
      </div>
      <!--feedback *ngIf= "isClient && properties" portalName="Connect" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback-->
      <cookie-law *ngIf="isClient" position="bottom">
        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
          href="https://www.openaire.eu/privacy-policy#cookies" target="_blank"> Read more <span class="uk-icon">
            <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>
      </cookie-law>
      <bottom *ngIf="properties && isClient && showMenu && !community" [grantAdvance]="false"
              [properties]="properties"></bottom>
      <bottom *ngIf="properties && isClient  && showMenu && community" class=" communityPanelBackground "
              [showSocialButtons]="true" [showMenuItems]="true" [grantAdvance]="false" [showOpenaire]="true"
              [communityId]="community.communityId" [menuItems]=bottomMenuItems [properties]="properties"
              [darkBackground]="true" [centered]="true"></bottom>
      <quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)"
                     [contact]="'Help'" [images]="images" [background]="'uk-background-secondary'"
                     [contactForm]="contactForm" [sending]="sending"></quick-contact>
      <modal-alert #modal [overflowBody]="false"></modal-alert>
      <role-verification *ngIf="community" service="connect"
                         [id]="community.communityId" [name]="community.title" [type]="'community'"></role-verification>
    </div>
  `
  
})
export class AppComponent implements OnInit, OnDestroy {
  isClient: boolean = false;
  userMenuItems: MenuItem[] = [];
  menuItems: RootMenuItem [] = [];
  bottomMenuItems: MenuItem[] = [];
  public community:CommunityInfo = null;
  properties: EnvProperties = properties;
  showMenu: boolean = false;
  communities = null;
  user: User;
  communityId: string = "";
  header: Header;
  logoPath: string = 'assets/common-assets/logo-services/connect/';
  /* Contact */
  public showQuickContact: boolean;
  public showGetStarted: boolean = true;
  public contactForm: FormGroup;
  public sending = false;
  public images: string[] = [];
  @ViewChild('modal') modal: AlertModal;
  @ViewChild('quickContact') quickContact: QuickContactComponent;
  private subscriptions = [];
  layout: CustomizationOptions = null;
  constructor(private  route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
              private _communitiesService: CommunitiesService, private smoothScroll: SmoothScroll,
              private router: Router, private userManagementService: UserManagementService,
              private configurationService: ConfigurationService, private _communityService: CommunityService,
              private _layoutService: LayoutService, private _meta: Meta, private seoService: SEOService,
              private quickContactService: QuickContactService,
              private fb: FormBuilder,
              private emailService: EmailService) {
    this.subscriptions.push(router.events.forEach((event) => {
      if (event instanceof NavigationEnd) {
        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';
      }
    }));
  }
  
  ngOnInit() {
    if (this.properties.environment == "production" || this.properties.environment == "development") {
      this.subscriptions.push(this.route.queryParams.subscribe(data => {
        this._meta.updateTag({content: 'all', name: 'robots'});
        this.seoService.removeLinkForPrevURL();
        this.seoService.removeLinkForNextURL();
      }));
    }
    this._communitiesService.updateCommunities(this.properties, this.properties.communitiesAPI);
    if (typeof document !== 'undefined') {
      try {
        this.isClient = true;
      } catch (e) {
      }
    }
    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
      this.user = user;
      this.init();
    }, error => {
      this.init()}));
    this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => {
      this.showQuickContact = display;
    }));
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        subscription.unsubscribe();
      }
    });
    this._communitiesService.clearSubscriptions();
    this.userManagementService.clearSubscriptions();
    this.configurationService.clearSubscriptions();
    this._communityService.clearSubscriptions();
    this.smoothScroll.clearSubscriptions();
  }
  
  get isManager() {
    return Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user) || (this.communityId && Session.isManager('community', this.communityId, this.user))
  }

  get isPrivate() {
    return this.community && !ConnectHelper.isPrivate(this.community, this.user)
  }
  
  private init() {
    let communityId: string = ConnectHelper.getCommunityFromDomain(this.properties.domain);
    this.showMenu = false;
    if(typeof document !== "undefined") {
      if(communityId) {
        document.body.classList.add(communityId + 'App');
        document.body.classList.add('communityApp');
      } else {
        document.body.classList.add('connectApp');
      }
    }
    this.initAdminToolCommunity(communityId);
    this.buildMenu(communityId);
    // this.communityId = communityId;
    if (!communityId) {
      this.reset();
      this.userManagementService.fixRedirectURL = properties.afterLoginRedirectLink;
    } else {
      this.userManagementService.fixRedirectURL = null;
    }
  }
  
  initAdminToolCommunity(communityId) {
    if (communityId) {
      this.properties.adminToolsPortalType = "community";
      this.initLayout(communityId);
    }else{
      this.properties.adminToolsPortalType = "connect";
    }
    this.configurationService.initCommunityInformation(this.properties, (communityId) ? communityId : this.properties.adminToolsPortalType);
  }
  initLayout(communityId){
    if(!this.layout && (typeof location == 'undefined' || (typeof location !== 'undefined'  && location.pathname.indexOf("/preview") == -1))) {
      this._layoutService.getLayout(this.properties, communityId).subscribe(
        layout => {
          if (layout) {
            this.layout = CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId);
          } else {
            this.layout = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
          }

        },
        error => {
          this.layout = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
        }
      );
    }
  }
  public buildMenu(communityId: string) {
    if (communityId) {
      if (!this.community || this.communityId !== communityId) {
        this.subscriptions.push(this._communityService.getCommunity(communityId).subscribe(community => {
          if (community) {
           this.community = community;
          }else{
            this.community = null;
            this.communityId = null;
          }
          this.buildCommunityMenu();
        }));
      } else {
        this.buildCommunityMenu();
      }
    } else {
      this.buildConnectMenu();
    }
  }

  buildCommunityMenu(){
    if (this.community && !ConnectHelper.isPrivate(this.community, this.user)) {
      this.communityId = this.community.communityId;
      this.header = {
        // url: 'https://' + (this.properties.environment == 'beta' ? 'beta.' : '') + this.community.id + '.openaire.eu',
        route: "/",
        title: (this.community.shortTitle) ? this.community.shortTitle : this.community.title,
        logoUrl: (this.community.isUpload) ? (properties.utilsService + '/download/' + this.community.logoUrl) : (StringUtils.urlPrefix(this.community.logoUrl) + this.community.logoUrl),
        logoSmallUrl: (this.community.isUpload) ? (properties.utilsService + '/download/' + this.community.logoUrl) : (StringUtils.urlPrefix(this.community.logoUrl) + this.community.logoUrl),
        position: 'left',
        badge: true
      };
      this.menuItems = [];
      this.menuItems.push({
        rootItem: new MenuItem("deposit", "Deposit", "", "/participate/deposit/learn-how", false, [], ["/participate/deposit/learn-how"], {}),
        items: []
      });
      this.menuItems.push(
        {
          rootItem: new MenuItem("link", "Link", "", "/participate/claim", false, [], ["/participate/claim"], {}),
          items: [
            new MenuItem("", "Start linking", "", "/participate/claim", false, [], ["/participate/claim"], {}),
            new MenuItem("", "Learn more", this.properties.claimsInformationLink, "", false, [], [], {})
          ]
        });
      this.menuItems.push(
        {
          rootItem: new MenuItem("search", "Search", "", "/search/find", false, [], ["/search/find"], {}),
          items: [
            new MenuItem("", "Research outcomes", "", "/search/find/research-outcomes", false, [], ["/search/find/research-outcomes"], {resultbestaccessright: '"' + encodeURIComponent("Open Access") + '"'}),
            new MenuItem("", "Projects", "", "/search/find/projects/", false, ["project"], ["/search/find/projects"], {}),
            new MenuItem("", "Content Providers", "", "/search/find/dataproviders", false, ["datasource"], ["/search/find/dataproviders"], {}),
          ]
        });
      this.menuItems.push(
        {
          rootItem: new MenuItem("about", "About", "", "", false, [], [], {}),
          items: [
            new MenuItem("", "Supporting organizations", "", "/organizations", false, [], ["/organizations"], {}),
            new MenuItem("", "Curators", "", "/curators", false, [], ["/curators"], {}),
            new MenuItem("", "Sources and methodology", "", "/content", false, [], ["/content"], {}),
            new MenuItem("", "National Bulletins", "", "/national-bulletins", false, [], ["/national-bulletins"], {}),
            new MenuItem("", "Subjects", "", "/subjects", false, [], ["/subjects"], {}),
            new MenuItem("", "Projects and funding Opportunities", "", "/projects", false, [], ["/projects"], {}),
          ]
        });
      if (this.isManager) {
        this.menuItems.push(
          {
            rootItem: new MenuItem("manage", "Manage", this.properties.adminPortalURL + '/' + this.community.communityId, "", false, [], [], {}),
            items: []
          });
      }
      this.bottomMenuItems = [
        new MenuItem("", "Supporting organizations", "", "/organizations", false, [], ["/organizations"], {})
      ];
      if (this.properties.showContent) {
        this.bottomMenuItems.push(new MenuItem("", "Sources and methodology", "", "/content", false, [], [], {}));
      }
      if (this.user) {
        this.userMenuItems = [ /*new MenuItem("","My profile","","",false,[],[],{}),*/
          new MenuItem("", "My ORCID links", "", "/my-orcid-links", false, [], [], {}),
          new MenuItem("", "My links", "", "/myclaims", false, [], ["/myclaims"], {}),
          new MenuItem("", "Invite users", "", "/invite", false, [], [], {}),
        ];
        if (this.isManager) {
          this.userMenuItems.push(new MenuItem("", "Support", "https://tools.openaire.eu/group/openaire_rcd", "", false, [], [], {}))
        }
      }
      this.showMenu = true;
    } else {
      this.communityId = null;
      this.properties.adminToolsPortalType = "connect";
      this.configurationService.initCommunityInformation(this.properties, "connect");
      this.initAdminToolCommunity(null);
      this.buildConnectMenu(true);
      if (this.community && this.community.status == "manager") {
        if (!this.user ) {
          if(typeof location !== 'undefined' && location.pathname.indexOf("user-info") == -1) {
            this.router.navigate(['/user-info'], {
              queryParams: {
                "errorCode": LoginErrorCodes.NOT_LOGIN,
                "redirectUrl": location.pathname + location.search + location.hash
              }
            });
          }
        }  else {
          if(typeof location !== 'undefined' && location.pathname.indexOf("user-info") == -1) {
            this.router.navigate(['/'], {queryParamsHandling: "merge"});
          }
        }
      }else  if (this.community && this.community.status == "hidden") {
        this.router.navigate([this.properties.errorLink]);
      }else{
        this.router.navigate(['/'], this.community && this.community.status ? {  queryParamsHandling: "merge" } : {});
      }
    }
  }
  buildConnectMenu(restrictedData: boolean = false) {
    let url = "https://" + (properties.environment != "production" ? "beta." : "") + "connect.openaire.eu";
    this.header = {
      route: restrictedData ? "" : "/",
      url: restrictedData ? url : "",
      title: 'connect',
      logoUrl: this.logoPath + 'main.svg',
      logoSmallUrl: this.logoPath + 'small.svg',
      position: 'left',
      badge: true
    };
    this.menuItems = [];
    this.menuItems.push({
      rootItem: new MenuItem("about", "About", restrictedData ? url + "/about/learn-how" : "", restrictedData ? "" : "/about/learn-how", false, [], ["/about/learn-how"], {}),
      items: [
        new MenuItem("", "Learn the process", restrictedData ? url + "/about/learn-how" : "", restrictedData ? "" : "/about/learn-how", false, [], ["/about/learn-in-depth"], {}),
        new MenuItem("", "Publications", restrictedData ? url + "/publications" : "", restrictedData ? "" : "/publications", false, [], ["/publications"], {}),
        new MenuItem("", "Roadmap", "https://trello.com/b/yfzUz0kp/openaire-connect-dashboard", "", false, [], [], {}),
        new MenuItem("", "FAQs", restrictedData ? url + "/about/faq" : "", restrictedData ? "" : "/about/faq", false, [], ["/about/faq"], {})
      ]
      
    });
    this.menuItems.push({
      rootItem: new MenuItem("communities", "Communities", restrictedData ? url + "/search/find/communities" : "", restrictedData ? "" : "/search/find/communities", false, [], ['/search/find/communities'], {}),
      items: []
    });
    this.bottomMenuItems = [
      new MenuItem("", "About", "https://openaire.eu/project-factsheets", "", false, [], [], {}),
      new MenuItem("", "News - Events", "https://openaire.eu/news-events", "", false, [], [], {}),
      new MenuItem("", "Blog", "https://blogs.openaire.eu/", "", false, [], [], {}),
      new MenuItem("", "Contact us", restrictedData ? url + "/contact-us" : "", restrictedData ? "" : "/contact-us", false, [], [], {})
    ];
    this.userMenuItems = [];
    if (Session.isPortalAdministrator(this.user)) {
      this.userMenuItems.push(new MenuItem("", "Manage Helptexts",
        properties.adminPortalURL + "/connect/admin-tools/pages", "", false, [], [], {}))
    }
    if (this.user) {
      this.userMenuItems.push(new MenuItem("my-communities", "My Communities", restrictedData ? url + "/myCommunities" : "",
        restrictedData ? "" : "/myCommunities", false, [], [], {}));
    }
    this.showMenu = true;
  }
  
  /**
   * Contact methods
   * */
  public send(event) {
    if (event.valid === true) {
      this.sendMail(this.properties.admins);
    }
  }
  
  public reset() {
    if (this.quickContact) {
      this.quickContact.close();
    }
    this.contactForm = this.fb.group({
      name: this.fb.control('', Validators.required),
      surname: this.fb.control('', Validators.required),
      email: this.fb.control('', [Validators.required, Validators.email]),
      affiliation: this.fb.control('', Validators.required),
      community: this.fb.control('', Validators.required),
      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.composeEmailForNewCommunity(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';
    this.modal.message = 'Our team will respond to your submission soon.';
    this.modal.alertMessage = true;
    this.modal.cancelButton = false;
    this.modal.okButtonLeft = false;
    this.modal.okButtonText = 'OK';
    this.modal.open();
  }
  
  handleError(message: string, error = null) {
    if (error) {
      console.error(error);
    }
    this.sending = false;
    this.quickContact.close();
    NotificationHandler.rise(message, 'danger');
    this.contactForm.get('recaptcha').setValue('');
  }
}