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

<div *ngIf="result" class="uk-card" [class.uk-card-default]="isMobile">
  <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>
              <h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
                <a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="createParam()"
                   [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
                  <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>
                </a>
                <a *ngIf="externalUrl && result.id" (click)="onClick()"
                   target="_blank" [href]="externalUrl+result.id"
                   class="custom-external uk-link uk-text-decoration-none uk-width-expand">
                  <span *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>
                  </span>
                  <span *ngIf="!result.title && !result.acronym">
                  [no title available]
                </span>
                </a>
                <div *ngIf="!result.id" class="uk-width-expand">
                  <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>
                </div>
              </h2>
            </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" [projects]="result.projects"
                               [subjects]="showSubjects?result.subjects:null" [organizations]="showOrganizations?result.organizations:null"
              ></entity-metadata>
            </div>
          </div>
          <!-- 2nd section (funders, budget, authors, PIDs, publisher etc.) -->
          <div class="uk-text-small uk-margin-small-bottom uk-visible@m">
            <!-- 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"
                           [showAll]=true></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"
          class="uk-text-small uk-margin-top" [class.uk-border-bottom]="!isMobile"
           [class.uk-visible@m]="!result.measure?.bip.length && result.measure?.counts.length">
        <div
            class="uk-grid uk-grid-small uk-flex-between uk-text-xsmall uk-flex-middle uk-grid-divider uk-margin-xsmall-bottom"
            uk-grid>
          <div *ngIf="result.hostedBy_collectedFrom?.length" class="uk-width-auto uk-visible@m">
            <availableOn [availableOn]="result.hostedBy_collectedFrom"></availableOn>
          </div>
          <div *ngIf="hasActions" class="uk-width-expand uk-visible@m">
            <entity-actions [cite]="cite" [share]="share" [linking]="linking" [type]="result.resultType"
                            [result]="result" [id]="result.objId"
                            [url]="properties.domain + properties.baseLink + url + '?' + urlParam + '=' + result.id">
					<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="result.measure?.bip.length || result.measure?.counts.length"
               class="uk-text-xsmall uk-width-auto metrics 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 class="uk-margin-xsmall-left">{{result.measure.bip[0].value}}</span>
              </a>
              <div uk-drop="pos: top-right" 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 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>
            </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">{{result.measure.counts[0].value}}</span>
              </a>
              <div uk-drop="pos: top-right" 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}}</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="BIP!">
                </div>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>