openaire-library/searchPages/searchUtils/portal-search-result.component.html

<ul class="uk-list uk-list-large uk-margin" [class.uk-list-xlarge]="!isMobile" [ngClass]="custom_class"
    uk-height-match="target: .uk-card-default; row: false">
  <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
  <li *ngFor="let result of results">
    <div class="uk-card uk-card-default uk-position-relative uk-flex uk-flex-column uk-flex-center"
			[ngClass]="result.type" [class.uk-disabled]="!hasPermission(result)">
      <div *ngIf="type === 'community' && result.isSubscribed" [class.uk-position-top-left]="!isMobile" [class.uk-position-top-right]="isMobile" class="uk-text-background uk-text-center uk-padding-small uk-text-uppercase uk-text-bold">
        <span>Member</span>
      </div>
      <div [ngClass]="isMobile?'uk-flex uk-flex-middle uk-margin-left uk-margin-small-top':'uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle'">
        <div *ngIf="type === 'community' && result.status === 'manager'">
          <icon [name]="visibilityIcon.get('RESTRICTED')" [ratio]="isMobile?0.8:1.2" [flex]="true"></icon>
          <span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">restricted</span>
        </div>
        <ng-container *ngIf="type === 'community' && result.status === 'hidden'">
          <icon [name]="visibilityIcon.get('PRIVATE')" [ratio]="isMobile?0.8:1.2"  [flex]="true"></icon>
          <span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">private</span>
        </ng-container>
        <ng-container *ngIf="result.visibility && result.visibility !== 'PUBLIC'">
          <icon [name]="visibilityIcon.get(result.visibility)" [ratio]="isMobile?0.8:1.2"  [flex]="true"></icon>
          <span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">{{result.visibility.toLowerCase()}}</span>
        </ng-container>
      </div>
      <div class="uk-card-body">
        <div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-right" uk-grid>
          <div class="uk-width-expand">
            <h5 [class.uk-h5]="!isMobile" [class.uk-h6]="isMobile">
              <div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
                <a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.title) ? result.title : result.shortTitle}}</a>
                <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</a>
                <div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</div>
              </div>
              <div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
                <a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.name) ? result.name : result.index_shortName}}</a>
                <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</a>
                <div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</div>
              </div>
            </h5>
            <div class="uk-text-small">
              <div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
                <span class="uk-text-meta">Creation Date: </span>
                <span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
                <span class="uk-margin-small-left"
                      *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
              </div>
              <div *ngIf="showType && result.type" class="uk-flex uk-flex-middle">
                <span class="uk-text-meta">Type:</span>
                <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
              </div>
            </div>
            <div *ngIf="result.description && !isMobile" class="uk-margin-top uk-text-small multi-line-ellipsis lines-3">
              <p class="uk-text-meta" [innerHTML]="result.description"></p>
            </div>
          </div>
          <div class="uk-width-1-5@m uk-width-1-3 uk-flex-first@m">
            <a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)" target="_blank">
              <ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
            </a>
            <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)">
              <ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
            </a>
            <div *ngIf="!hasPermission(result)">
              <ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
            </div>
          </div>
        </div>
        <div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
          <manage [communityId]="result.communityId" [alias]="result.alias"></manage>
        </div>
      </div>
    </div>
  </li>
</ul>
<modal-alert #AlertModal [overflowBody]="false" (alertOutput)="goToPage($event)">
</modal-alert>
<ng-template #resultPreview let-result="result">
  <div class="uk-flex uk-flex-center">
    <img [src]="result | logoUrl" class="uk-blend-multiply"
			[alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
  </div>
</ng-template>