connect/src/app/communities/browseCommunity/browse-community.component.ts

import {Component, Input, Output, EventEmitter}   from '@angular/core';
import {ViewChild, ChangeDetectionStrategy}       from '@angular/core';
import {ViewEncapsulation}                        from '@angular/core';
import {ActivatedRoute, Router}                   from '@angular/router';
import {Location}                                 from '@angular/common';

import {EnvProperties}                            from '../../openaireLibrary/utils/properties/env-properties';
import {ErrorCodes}                               from '../../openaireLibrary/utils/properties/errorCodes';
import {CommunityInfo}                            from '../../openaireLibrary/connect/community/communityInfo';

@Component({
    selector: 'browse-community',
    template: `
      <!--community-card-height-->
      <div  [class]="(showDescription ? 'uk-height-medium' : 'uk-height-max-medium') + ' uk-card  uk-card-default uk-padding-small'"
            [attr.uk-tooltip]="(!showDescription && community.description ? ('title: '+ community.description + (community.status != 'all' ? '<hr> '+hiddenMessage : '')) : 'cls: uk-invisible')">
        <span>
          <div class="uk-card-media-top">
            <a (click)="confirmModalOpen()">
              <div style="" class="uk-margin-auto communitiesImageBox">
                <!--class="uk-card-badge portal-card-badge uk-width-1-2 uk-position-top-left uk-text-small uk-text-center"-->
                <div *ngIf="community.status !='all'" class="uk-card-badge portal-card-badge uk-width-1-2 uk-position-top-left uk-text-small uk-text-center"
                      [attr.uk-tooltip]="showDescription || !community.description ? 'title: ' + hiddenMessage : 'cls: uk-invisible'">
                      Private view
                </div>
                <img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo"  class="uk-height-small uk-responsive-height uk-padding-small">
                <span  *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-padding-small">
                  <svg width="50" height="37" 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>
            </a>
          </div>
        </span>
        <div class="uk-text-center">
          <!--[class]="(isManager ? 'community-title-height ' : '') + -->
          <p class="uk-text-small uk-text-bold uk-margin-small community-title">
            <a (click)="confirmModalOpen()">
              {{(community.title)?community.title:community.shortTitle}}
            </a>
          </p>

          <!--[class]="(isManager ? 'community-description-height ' : '') + -->
          <div class="uk-text-center">
            <!--span *ngIf="community.status !='all'"  uk-tooltip="title: Community is hidden to registered users. It is visible only to users that have privileges to  manage community; delay: 100">
              <span class="private-view-label uk-label label-grey " aria-expanded="false">Private view</span>
            </span-->
            <!--community-description-font -->
            <!--p class="uk-text-small uk-margin-small" *ngIf="community.description != null && !isManager" >{{community.description}}</p>
            <p class="uk-text-small uk-margin-small" *ngIf="community.description != null && isManager" >{{community.description.slice(0,thresholdDescription)}}<span *ngIf="community.description.length > thresholdDescription">...</span></p-->
            <p class="uk-text-small uk-margin-small" *ngIf="community.description != null && showDescription" >{{community.description}}</p>
          </div>
        </div>

        <!--uk-margin-small-bottom-->
        <!--uk-position-bottom-->
        <div *ngIf="isManager" class=" uk-margin-small ">
          <manage [communityId]="community.communityId"></manage>
        </div>
      </div>
      <modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
          <div class="uk-text-center">
              The profile will be presented in a new tab.<br>
              Are you sure that you want to proceed?
          </div>
      </modal-alert>
    `
})

export class BrowseCommunityComponent {
  @Input() public community: CommunityInfo = null;
  @Input() public isManager: boolean = false;
  @Input() public showDescription: boolean = true;
  @ViewChild('AlertModal') modal;

  public hiddenMessage: string = "Community is hidden to registered users. It is visible only to users that have privileges to  manage community; delay: 100";
  // cut title too
  // check title length, if is manager, if is private and cut description accordingly
  public thresholdDescription: number = 150;
  properties:EnvProperties;

  constructor ( private route: ActivatedRoute,
                private router: Router,
                private location: Location) {}


  public ngOnInit() {
    this.route.data
          .subscribe((data: { envSpecific: EnvProperties }) => {
            this.properties = data.envSpecific;
          });
  }

  public ngOnDestroy() {}

  isProduction():boolean{
    return this.properties.environment!="development";
  }
  getProductionPrefix():string{
    return (this.properties.environment =="beta")?"beta.":""
  }

  public confirmModalOpen() {
      this.modal.cancelButton = true;
      this.modal.okButton = true;
      this.modal.alertTitle = 'You have selected ' + this.community.title;
      this.modal.alertMessage = false;
      this.modal.okButtonLeft = false;
      this.modal.okButtonText = 'Yes';
      this.modal.cancelButtonText = 'No';
      this.modal.open();
  }

  public goToCommunityPage(data: any) {
    let url = '';
    if(this.isProduction()) {
      url = 'https://'+ this.getProductionPrefix() + this.community.communityId +'.openaire.eu';
    } else {
      url = this.router.createUrlTree(['/'], {
        queryParams: { 'communityId': this.community.communityId} }).toString();
    }
    window.open(url, '_blank');
  }
}