openaire-library/utils/result-preview/result-preview.component.html

<ng-template #resultTitle>
  <div *ngIf="(result.title) || result.acronym">
    <span *ngIf="result.acronym">
      {{result.acronym}}
    </span>
    <span *ngIf="result.acronym && (result.title)"> (</span>
    <span *ngIf="result.title" [innerHTML]="result.title"></span>
    <span *ngIf="result.acronym && result.title">)</span>
  </div>
  <div *ngIf="!result.title && !result.acronym">
    [no title available]
  </div>
</ng-template>
<div *ngIf="result" class="uk-card uk-card-hover" [ngClass]="modifier">
  <div class="uk-padding-small">
    <div>
      <div class="uk-grid uk-flex uk-flex-middle">
        <div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId"
             class=" uk-inline uk-width-auto  uk-text-center uk-visible-toggle">
          <img class="uk-width-medium" [src]="properties.enermapsURL +'/images/datasets/' + result.enermapsId + '.png'"
               alt="Enermaps tool preview" loading="lazy">
          <div
                  class="uk-overlay uk-margin-medium-left uk-overlay-default uk-position-bottom uk-hidden-hover uk-padding-small">
            <p>Visit <a
                    class="custom-external uk-margin-right uk-margin-small-top"
                    [href]="properties.enermapsURL + '/?shared_id=' + result.enermapsId" target="_blank">
              Enermaps tool
            </a></p>
          </div>
        </div>
        <div class="uk-width-expand">
          <!-- 1st section (title, metadata) -->
          <div class="uk-margin-small-bottom">
            <!-- Title -->
            <div class="uk-grid">
              <div [ngClass]="result.websiteURL && promoteWebsiteURL && !isMobile ? 'uk-flex uk-flex-between uk-width-1-1' : 'uk-width-expand'">
                <div *ngIf="result.websiteURL && promoteWebsiteURL" class="uk-flex uk-flex-right"
                     [ngClass]="isMobile ? 'uk-width-1-1 uk-margin-small-bottom' : 'uk-flex-last uk-margin-left uk-width-auto'">
                  <span>
                    <a href="{{result.websiteURL}}" target="_blank" type="submit"
                       class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
                        <span class="uk-flex uk-flex-middle">
                          <icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>
                          <span>Go to repository</span>
                        </span>
                    </a>
                  </span>
                </div>
                <div class="multi-line-ellipsis lines-3 uk-width-expand">
                  <h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
                    <a *ngIf="!externalUrl && result.id && !customUrl" (click)="onClick()" [queryParams]="addEoscPrevInParams(createParam())"
                      [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand" [class.uk-disabled]="result.id == '-1'">
                      <ng-container *ngTemplateOutlet="resultTitle"></ng-container>
                    </a>
                    <a *ngIf="externalUrl && result.id && !customUrl" (click)="onClick()"
                      target="_blank" [href]="externalUrl+result.id"
                      class="custom-external uk-link uk-text-decoration-none uk-width-expand">
                      <ng-container *ngTemplateOutlet="resultTitle"></ng-container>
                    </a>
                    <a *ngIf="customUrl" routerLink="./{{customUrl}}"
                      class="uk-link uk-text-decoration-none uk-width-expand">
                      <ng-container *ngTemplateOutlet="resultTitle"></ng-container>
                    </a>
                    <div *ngIf="!result.id && !customUrl" class="uk-width-expand">
                      <ng-container *ngTemplateOutlet="resultTitle"></ng-container>
                    </div>
                  </h2>
                </div>
              </div>
              <div *ngIf="result.hostedBy_collectedFrom && result.hostedBy_collectedFrom.length > 0" class="uk-hidden@m uk-width-auto">
                <div class="uk-margin-small-bottom uk-flex uk-flex-middle"
                     [ngClass]="(result.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
                     uk-tooltip [title]="getAccessLabel(result.hostedBy_collectedFrom[0].accessRight)">
                  <icon [name]="result.hostedBy_collectedFrom[0].accessRightIcon" [flex]="true" [ratio]="1.2"></icon>
                </div>
              </div>
            </div>
            <!-- Metadata -->
            <div class="uk-margin-xsmall-top">
              <entity-metadata [entityType]="type" [types]="result.types" [startYear]="result.startYear?.toString()"
                               [endYear]="result.endYear?.toString()"
                               [year]="result.year?.toString()"
                               [openAccessMandatePublications]="result.openAccessMandatePublications"
                               [openAccessMandateDatasets]="result.openAccessMandateDatasets" [date]=""
                               [embargoEndDate]="result.embargoEndDate"
                               [publisher]="result.publisher" [countries]="result.countries"
                               [languages]="result.languages" [programmingLanguages]="result.programmingLanguages"
                               [compatibilityString]="result.compatibility" [type]="type"
                               [publiclyFunded]="result.publiclyFunded" [projects]="result.projects"
                               [subjects]="showSubjects?result.subjects:null" [organizations]="showOrganizations?result.organizations:null"
                               [relationName]="relationName" [provenanceAction]="provenanceAction" [prevPath]="prevPath"
              ></entity-metadata>
            </div>
          </div>
          <!-- 2nd section (funders, budget, authors, PIDs, publisher etc.) -->
          <div class="uk-text-small uk-margin-small-bottom">
            <!-- Funder -->
            <div *ngIf="result.funderShortname || result.code" class="uk-margin-xsmall-bottom">
						<span *ngIf="result.funderShortname">
							<span class="uk-text-meta">Funder: </span>
                          {{result.funderShortname}}
						</span>
              <span *ngIf="result.code" [class.uk-margin-left]="result.funderShortname">
							<span class="uk-text-meta">{{openaireEntities.PROJECT}} Code: </span>
                {{result.code}}
						</span>
              <!--      Currently not parsed -->
              <!--      <span *ngIf="result.callIdentifier" [class.uk-margin-left]="(result.funderShortname || result.code)">-->
              <!--    <span class="uk-text-muted">Call for proposal: </span>-->
              <!--        {{result.callIdentifier}}-->
              <!--  </span>-->
            </div>
            <!-- Funder Budget -->
            <div *ngIf="result.budget || result.contribution" class="uk-margin-xsmall-bottom">
						<span *ngIf="result.budget">
							<span class="uk-text-meta">Overall Budget: </span>
                          {{result.budget | number}}
                          <span *ngIf="result.currency">{{result.currency}}</span>
						</span>
              <span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
							<span class="uk-text-meta">Funder Contribution: </span>
                {{result.contribution | number}}
                <span *ngIf="result.currency">{{result.currency}}</span>
						</span>
            </div>
            <!-- Authors -->
            <div *ngIf="result.authors" class="uk-margin-xsmall-bottom">
              <showAuthors [authors]="result.authors" [authorsLimit]=4 [modal]="modal" [isMobile]="isMobile" [isModal]="isDeletedByInferenceModal"
                           [showAll]=true [showInline]="showInline"></showAuthors>
            </div>
            <!-- Identifiers -->
            <div *ngIf="result.identifiers && result.identifiers.size > 0" class="uk-margin-xsmall-bottom">
              <showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
            </div>
            <!-- Website URL -->
            <div *ngIf="result.websiteURL && result.websiteURL != '' && !promoteWebsiteURL"
                 class="uk-margin-xsmall-bottom">
              <span class="uk-text-meta">Website URL: </span>
              <span>
                <a href="{{result.websiteURL}}" target="_blank" class="custom-external">
                  {{result.websiteURL}}
                </a>
              </span>
            </div>
            <!-- OAI-PMH URL-->
            <div *ngIf="result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
              <span class="uk-text-meta">OAI-PMH URL: </span>
              <span>
              <a href="{{result.OAIPMHURL}}" target="_blank" class="custom-external">
                {{result.OAIPMHURL}}
              </a>
            </span>
            </div>
          </div>
          <!-- 3rd section (description) -->
          <div class="uk-text-small uk-visible@m">
            <!-- Description -->
            <div *ngIf="result.description" class="multi-line-ellipsis lines-2">
              <p class="uk-margin-remove" [innerHTML]="result.description"></p>
            </div>
          </div>
          <!-- 5th section(deposit only) -->
<!--          <div>-->
<!--            <span *ngIf="result.websiteURL && promoteWebsiteURL" class="uk-flex uk-flex-right uk-margin-small-top">-->
<!--              <a href="{{result.websiteURL}}" target="_blank" type="submit"-->
<!--                 class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">-->
<!--                  <span class="uk-flex uk-flex-middle">-->
<!--                    <icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>-->
<!--                    <span>Go to repository</span>-->
<!--                  </span>-->
<!--              </a>-->
<!--            </span>-->
<!--          </div>-->
        </div>
      </div>
      <div *ngIf="(result.hostedBy_collectedFrom || ((hasActions || result.measure?.bip.length || result.measure?.counts.length) && (!isDeletedByInferenceModal && showEntityActions)))"
           class="uk-text-small uk-margin-top" [class.uk-border-bottom]="!isMobile">
        <div uk-grid class="uk-grid uk-grid-small uk-text-xsmall uk-flex-middle uk-margin-xsmall-bottom"
             [class.uk-flex-between]="!isDeletedByInferenceModal && (result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
             [class.uk-flex-right]="!isDeletedByInferenceModal && !(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
             [class.uk-grid-divider]="!isMobile">
          <div *ngIf="result.hostedBy_collectedFrom?.length" class="uk-width-auto uk-visible@m">
            <availableOn [availableOn]="result.hostedBy_collectedFrom" [inModal]="isDeletedByInferenceModal"></availableOn>
          </div>
          <div *ngIf="!isDeletedByInferenceModal && hasActions && result.id" class="uk-width-expand uk-visible@m">
            <entity-actions [cite]="cite" [share]="share" [linking]="linking"
                            [deposit]="deposit" [embed]="embed"
                            [type]="result.resultType"
                            [result]="result" [id]="result.objId?result.objId:result.id"
                            [url]="properties.domain + properties.baseLink + url + '?' + urlParam + '=' + result.id"
                            [showTooltip]="false">
              <span *ngIf="orcid">
                <orcid-work *ngIf="showOrcid && result.identifiers && result.identifiers.size > 0"
                            [resultId]="result.relcanId" [resultTitle]="result.title"
                            [type]="result.resultType" [pageType]="'search'"
                            [putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers">
                </orcid-work>
              </span>
              <span *ngIf="orcid" class="uk-width-expand uk-text-right">
                  <span *ngIf="result.orcidCreationDates?.length > 0" class="uk-display-inline-block">
                    <span class="uk-text-meta">
                      Added in ORCID:
                    </span>
                    <span *ngFor="let date of result.orcidCreationDates; let i=index">
                      {{date | date: 'dd MMM yyyy'}}
                      <span *ngIf="i < (result.orcidCreationDates.length - 1)">
                        &
                      </span>
                    </span>
                  </span>
              </span>
            </entity-actions>
          </div>

          <div *ngIf="!isDeletedByInferenceModal && (result.oaRoutes || result.measure?.bip.length || result.measure?.counts.length)"
            class="metrics uk-text-xsmall uk-width-auto uk-flex uk-flex-middle uk-flex-right uk-text-meta uk-grid uk-grid-small uk-grid-divider"
               [ngClass]="isMobile ? '' : 'uk-padding-remove-horizontal'">
          <div *ngIf="result.oaRoutes" class="uk-first-column">
<!--               class="metrics uk-text-xsmall uk-width-auto uk-flex uk-flex-middle uk-flex-right uk-text-meta">-->
            <a class="uk-flex uk-flex-middle uk-link-reset">
              <span #badge class="access-route-badge" [ngClass]="'dots-' + badge.children.length.toString()">
                <span *ngIf="result.oaRoutes.green" class="dot green"></span>
                <span *ngIf="result.oaRoutes.oaColor" class="dot" [ngClass]="result.oaRoutes.oaColor"></span>
                <span *ngIf="result.oaRoutes.isInDiamondJournal" class="dot diamond"></span>
              </span>
              <span class="uk-margin-xsmall-left">Access Routes</span>
            </a>
            <div uk-drop="pos: top-right; mode: click" class="uk-drop">
              <div class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
                <table>
                  <tr *ngIf="result.oaRoutes.green">
                    <td>
                      <span class="dot green"></span>
                    </td>
                    <td class="uk-text-capitalize">Green</td>
                  </tr>
                  <tr *ngIf="result.oaRoutes.oaColor">
                    <td>
                      <span class="dot" [ngClass]="result.oaRoutes.oaColor"></span>
                    </td>
                    <td class="uk-text-capitalize">{{result.oaRoutes.oaColor}}</td>
                  </tr>
                  <tr *ngIf="result.oaRoutes.isInDiamondJournal">
                    <td>
                      <span class="dot diamond"></span>
                    </td>
                    <td class="uk-text-capitalize">Published in a Diamond OA journal</td>
                  </tr>
                </table>
<!--                <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">-->
<!--                  <a class="uk-button uk-button-text" target="_blank" href="">Learn more</a>-->
<!--                </div>-->
              </div>
            </div>
          </div>

          <div *ngIf="result.measure?.bip.length || result.measure?.counts.length"
               [ngClass]="result.oaRoutes ? '' : 'uk-first-column'" class="uk-flex uk-flex-middle">
<!--               class="metrics uk-text-xsmall uk-width-auto uk-flex uk-flex-middle uk-flex-right  uk-text-meta">-->
            <ng-container *ngIf="result.measure?.bip.length">
              <a class="uk-flex uk-flex-middle uk-link-reset">
                <icon customClass="bip-icon-hover" [flex]="true" [ratio]="0.7"
                      [name]="result.measure.bip[0].icon"></icon>
                <span *ngIf="isNumber(result.measure.bip[0].value)" class="uk-margin-xsmall-left">{{formatNumber(result.measure.bip[0].value)}}</span>
                <span *ngIf="!isNumber(result.measure.bip[0].value)" class="uk-margin-xsmall-left">{{result.measure.bip[0].value}}</span>
              </a>
              <div uk-drop="pos: top-right; mode: click" class="uk-drop">
                <div class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
                  <table>
                    <tr *ngFor="let metric of result.measure.bip">
                      <td class="bip-icon">
                        <icon [flex]="true" [ratio]="0.7" [name]="metric.icon"></icon>
                      </td>
                      <td class="uk-text-capitalize">{{metric.name}}</td>
                      <td *ngIf="isNumber(metric.value)" class="uk-text-bolder">{{metric.value | number}}</td>
                      <td *ngIf="!isNumber(metric.value)" class="uk-text-bolder">{{metric.value}}</td>
                    </tr>
                  </table>
                  <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
                    <img class="uk-margin-xsmall-right" width="15" src="assets/common-assets/bip-minimal.svg"
                         loading="lazy" alt="BIP!">
                    <span class="uk-text-uppercase">Powered by <span class="uk-text-bolder">BIP!</span></span>
                  </div>
                </div>
              </div>
            </ng-container>
            <ng-container *ngIf="result.measure?.counts.length">
              <a class="uk-flex uk-flex-middle uk-margin-small-left uk-link-reset">
                <icon class="text-usage-counts-hover" [flex]="true" [ratio]="0.8"
                      [name]="result.measure.counts[0].icon"></icon>
                <span class="uk-margin-xsmall-left">{{formatNumber(result.measure.counts[0].value)}}</span>
              </a>
              <div uk-drop="pos: top-right; mode: click" class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
                <table>
                  <tr *ngFor="let metric of result.measure.counts">
                    <td class="text-usage-counts">
                      <icon [flex]="true" [ratio]="0.7" [name]="metric.icon"></icon>
                    </td>
                    <td class="uk-text-capitalize">{{metric.name}}</td>
                    <td class="uk-text-bolder">{{metric.value | number}}</td>
                  </tr>
                </table>
                <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
                  <span class="uk-text-uppercase">Powered by </span>
                  <img class="uk-margin-xsmall-left" width="15" src="assets/common-assets/logo-small-usage-counts.png"
                       loading="lazy" alt="Usage counts">
                </div>
              </div>
            </ng-container>
          </div>
          </div>

          <div *ngIf="result.hostedBy_collectedFrom?.length || (hasActions && !isDeletedByInferenceModal)" class="uk-hidden@m">
            <ng-container *ngIf="isDeletedByInferenceModal && result.hostedBy_collectedFrom?.length">
              <availableOn [availableOn]="result.hostedBy_collectedFrom" [inModal]="isDeletedByInferenceModal"></availableOn>
              <div class="uk-nav-divider"></div>
            </ng-container>

            <ng-container *ngIf="!isDeletedByInferenceModal">
              <a class="uk-link-reset uk-flex uk-flex-middle">
                <icon [flex]="true" name="more_vert"></icon>
              </a>
              <div class="uk-dropdown" uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0"> <!-- #element -->
                <ul class="uk-nav uk-dropdown-nav">
                  <ng-container *ngIf="result.hostedBy_collectedFrom?.length">
                    <availableOn [availableOn]="result.hostedBy_collectedFrom" [isMobile]="isMobile"></availableOn>
                    <div class="uk-nav-divider"></div>
                  </ng-container>
                  <ng-container *ngIf="hasActions">
                    <entity-actions [cite]="cite" [share]="share" [linking]="linking"
                                    [deposit]="deposit" [embed]="embed"
                                    [type]="result.resultType"
                                    [result]="result" [id]="result.objId?result.objId:result.id"
                                    [url]="properties.domain + properties.baseLink + url + '?' + urlParam + '=' + result.id"
                                    [isMobile]="isMobile"
                                    [showTooltip]="false">
                      <span *ngIf="orcid">
                        <orcid-work *ngIf="showOrcid && result.identifiers && result.identifiers.size > 0"
                                    [resultId]="result.relcanId" [resultTitle]="result.title"
                                    [type]="result.resultType" [pageType]="'search'"
                                    [putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers"
                                    [isMobile]="isMobile">
                        </orcid-work>
                      </span>
                      <span *ngIf="orcid" class="uk-width-expand uk-text-right">
                      <span *ngIf="result.orcidCreationDates?.length > 0" class="uk-display-inline-block">
                        <span class="uk-text-meta">
                          Added in ORCID:
                        </span>
                        <span *ngFor="let date of result.orcidCreationDates; let i=index">
                          {{date | date: 'dd MMM yyyy'}}
                          <span *ngIf="i < (result.orcidCreationDates.length - 1)">
                            &
                          </span>
                        </span>
                      </span>
                      </span>
                    </entity-actions>
                  </ng-container>
                </ul>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>