D-Net

import {Inject, Injectable, PLATFORM_ID} from "@angular/core";

import {BehaviorSubject, Observable} from "rxjs";

import {isPlatformBrowser} from "@angular/common";

@Injectable({

  providedIn: "root"

})

export class LocalStorageService {

  private communityDirectLink: BehaviorSubject<boolean>;

  constructor(@Inject(PLATFORM_ID) private platformId: string) {

    if(isPlatformBrowser(this.platformId)) {

      let item = localStorage.getItem('communityDirectLink');

      if(item !== null) {

        this.communityDirectLink = new BehaviorSubject<boolean>(item == 'true');

      } else {

        this.communityDirectLink = new BehaviorSubject<boolean>(false);

      }

    } else this.communityDirectLink = new BehaviorSubject<boolean>(true);

  }

  public setCommunityDirectLink(value: string) {

    localStorage.setItem('communityDirectLink', value);

    this.communityDirectLink.next(Boolean(value).valueOf());

  }

  public get(): Observable<boolean> {

    console.log(this.communityDirectLink.getValue());

    return this.communityDirectLink.asObservable();

  }

}

  <errorMessages [status]="[status]" [type]="'results'"></errorMessages>

  <li *ngFor="let result of results" class="uk-animation-fade uk-margin-auto" uk-grid>

    <a *ngIf="directLink" [href]="getCommunityPageUrl(result.communityId)" target="_blank"

       class="uk-width-1-5 uk-height-small uk-card uk-card-default uk-card-small communityCard uk-padding-remove-horizontal uk-inline">

      <div *ngIf="result.isSubscribed"

           class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">

        <span>Subscribed</span>

      </div>

      <div class="uk-card-body uk-position-center uk-flex uk-flex-middle uk-flex-center">

        <img *ngIf="result.logoUrl != null && result.logoUrl != '' " src="{{result.logoUrl}}"

             alt="{{(result.title)?result.title:result.shortTitle}} logo">

        <span *ngIf="result.logoUrl == null || result.logoUrl == '' " class="uk-icon">

                   <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none"

                                                                                                    stroke="#000"

                                                                                                    stroke-width="1.1"

                                                                                                    cx="7.7" cy="8.6"

                                                                                                    r="3.5"></circle> <path

                     fill="none" stroke="#000" stroke-width="1.1"

                     d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"

                                                                                                          stroke="#000"

                                                                                                          stroke-width="1.1"

                                                                                                          d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>

      </div>

      <div *ngIf="result.status == 'manager'"

           class="uk-card-badge private-card-badge uk-width-2-5 uk-position-top-left uk-text-small uk-text-center ">

        <span class="uk-padding-small">Private</span>

      </div>

    </a>

    <a *ngIf="!directLink"

       class="uk-width-1-5 uk-height-small uk-card uk-card-default uk-card-small communityCard uk-padding-remove-horizontal uk-inline"

       (click)="confirmModalOpen(result)">

      <div *ngIf="result.isSubscribed"

           class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">

        <span>Subscribed</span>

      </div>

      <div class="uk-card-body uk-position-center uk-flex uk-flex-middle uk-flex-center">

        <img *ngIf="result.logoUrl != null && result.logoUrl != '' " src="{{result.logoUrl}}"

             alt="{{(result.title)?result.title:result.shortTitle}} logo">

        <span *ngIf="result.logoUrl == null || result.logoUrl == '' " class="uk-icon">

                   <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none"

                                                                                                    stroke="#000"

                                                                                                    stroke-width="1.1"

                                                                                                    cx="7.7" cy="8.6"

                                                                                                    r="3.5"></circle> <path

                     fill="none" stroke="#000" stroke-width="1.1"

                     d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"

                                                                                                          stroke="#000"

                                                                                                          stroke-width="1.1"

                                                                                                          d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>

                </span>

      </div>

      <div *ngIf="result.status == 'manager'"

           class="uk-card-badge private-card-badge uk-width-2-5 uk-position-top-left uk-text-small uk-text-center ">

        <span class="uk-padding-small">Private</span>

      </div>

    </a>

    <div class="uk-width-expand">

      <div [title]=result.shortTitle class="uk-text-large uk-grid">

        <a *ngIf="directLink" [href]="getCommunityPageUrl(result.communityId)" target="_blank"

           [class]="(result.isManager)?'uk-width-3-4':''">

          {{(result.title) ? result.title : result.shortTitle}}

        <a *ngIf="!directLink" (click)="confirmModalOpen(result)" [class]="(result.isManager)?'uk-width-3-4':''">

          {{(result.title) ? result.title : result.shortTitle}}

        </a>

        <manage *ngIf="result.isManager" [communityId]="result.communityId"

                class="uk-width-expand uk-margin-auto-right"></manage>

      </div>

      <div *ngIf="result.description">

        <div class="text-justify descriptionText uk-margin-auto-right" [title]="result.description">

          {{_formatDescription(result.description)}}

      </div>

      <div class="uk-padding-small uk-padding-remove-left uk-grid">

        <div class="uk-width-1-2">

          <span *ngIf="result.date"><b> Creation Date: </b></span>

          <span *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>

        </div>

        <div class="uk-width-expand uk-align-right uk-margin-auto-right">

          <span *ngIf="result.type && result.type != ''"><b> Type: </b></span>

          <span

            *ngIf="result.type && result.type != ''">{{(result.type == 'ri') ? 'Research Initiative' : 'Research Community'}}</span>

        </div>

      </div>

    </div>

  </li>

  <div class="uk-text-left">

    You will be navigated to a new tab. Are you sure that you want to proceed?

  </div>

import {EnvProperties} from '../../utils/properties/env-properties';

import {LocalStorageService} from "../../services/localStorage.service";

  templateUrl: 'communitySearchResults.component.html'

  public errorCodes: ErrorCodes = new ErrorCodes();

  public routerHelper: RouterHelper = new RouterHelper();

  public directLink: boolean = true;

  constructor(private router: Router,

              private localStorageService: LocalStorageService) {

  ngOnInit() {

    this.localStorageService.get().subscribe(value => {

      this.directLink = value;

    });

  getProductionPrefix(): string {

    return (this.properties.environment == "beta") ? "beta." : ""

  }

  isProduction(): boolean {

    return this.properties.environment != "development";

  public _formatDescription(description) {

    return (((description).length > this.maxCharacters) ? (description.substring(0, (this.maxCharacters - ('...').length)) + "...") : description);

    this.modal.cancelButton = true;

    this.modal.okButton = true;

    this.modal.alertTitle = 'You are going to visit ' +

      ((community.title) ? community.title : community.shortTitle);

    this.modal.alertMessage = false;

    this.modal.okButtonLeft = false;

    this.modal.okButtonText = 'Yes';

    this.modal.cancelButtonText = 'No';

    this.modal.choice = true;

    this.modal.open();

  public getCommunityPageUrl(communityId: string): string {

    if (this.isProduction()) {

      url = 'https://' + this.getProductionPrefix() + communityId + '.openaire.eu';

        queryParams: {'communityId': communityId}

      }).toString();

    return url;

  public goToCommunityPage(data: any) {

    if (data.value == true) {

      this.localStorageService.setCommunityDirectLink(data.choice);

      let url = '';

      if (this.isProduction()) {

        url = 'https://' + this.getProductionPrefix() + this.selectedCommunityId + '.openaire.eu';

      } else {

        url = this.router.createUrlTree(['/'], {

          queryParams: {'communityId': this.selectedCommunityId}

        }).toString();

      }

      window.open(url, '_blank');

    }

  }

    <div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open'" uk-modal [open]="!isOpen" id="myModal"

         tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

      <div class="uk-modal-dialog  uk-modal-body uk-animation-slide-bottom-small  uk-text-left" role="">

        <div class="uk-modal-title" [hidden]=!alertHeader>

          <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>

          <h4 class="modal-title" id="myModalLabel">{{alertTitle}}</h4>

        <div class="uk-margin">

            {{message}}

        <div class="uk-grid uk-flex uk-flex-middle">

          <label *ngIf="choice" class="uk-width-1-2 checkbox">

            <input type="checkbox" [(ngModel)]="select">

            <span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>

          </label>

          <div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">

            <div *ngIf="okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>

              <span [hidden]=!okButton>

                <button class="uk-button uk-button-default" (click)="ok()">{{okButtonText}}</button>

              </span>

              <span [hidden]=!cancelButton>

                <button class="uk-button uk-button-default uk-margin-small-left"

                        (click)="cancel()">{{cancelButtonText}}</button>

              </span>

            </div>

            <div *ngIf="!okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>

               <span [hidden]=!cancelButton>

                  <button class="uk-button uk-button-default uk-margin-small-right"

                          (click)="cancel()">{{cancelButtonText}}</button>

              </span>

              <span [hidden]=!okButton>

              <button *ngIf="okDisabled" class="uk-button uk-button-default" disabled>{{okButtonText}}</button>

              <button *ngIf="!okDisabled" class="uk-button portal-button" (click)="ok()">{{okButtonText}}</button>

            </span>

            </div>

          </div>

      </div>

 * API to an open alert window.

 */

export class AlertModal {

   * Caption for the title.

   */

  public alertTitle: string;

   * Describes if the alert contains Ok Button.

   * The default Ok button will close the alert and emit the callback.

   * Defaults to true.

   */

  public okButton: boolean = true;

   * Caption for the OK button.

   * Default: Ok

   */

  public okButtonText: string = 'Ok';

   * Describes if the alert contains cancel Button.

   * The default Cancelbutton will close the alert.

   * Defaults to true.

   */

  public cancelButton: boolean = true;

   * Caption for the Cancel button.

   * Default: Cancel

   */

  public cancelButtonText: string = 'Cancel';

   * if the alertMessage is true it will show the contentString inside alert body.

   */

  public alertMessage: boolean = true;

   * Some message/content can be set in message which will be shown in alert body.

   */

  public message: string;

   * if the value is true alert footer will be visible or else it will be hidden.

   */

  public alertFooter: boolean = true;

   * shows alert header if the value is true.

   */

  public alertHeader: boolean = true;

   * if the value is true alert will be visible or else it will be hidden.

   */

  public isOpen: boolean = false;

  @Input()

  public choice: boolean = false;

  public select: boolean = false;

   * Emitted when a ok button was clicked

   * or when Ok method is called.

   */

  @Output() public alertOutput: EventEmitter<any> = new EventEmitter();

  constructor(public _elementRef: ElementRef) {

  }

   * Opens a alert window creating backdrop.

   */

  open() {

    this.isOpen = true;

   *  ok method closes the modal and emits modalOutput.

   */

  ok() {

    if (!this.choice) {

      this.alertOutput.emit(true);

    } else {

      this.alertOutput.emit({

        value: true,

        choice: this.select

      });

    }

   *  cancel method closes the moda.

   */

  cancel() {