openaire-library/claims/claim-utils/claimResultSearchForm.component.html

<div class="uk-flex uk-flex-center uk-flex-left@m">
  <div *ngIf="showOptions && showOptions.linkToEntities.length > 0" class="uk-width-xlarge@l uk-width-large" [ngClass]="centerAlign ? 'uk-align-center':''">
    <advanced-search-input (searchEmitter)="search(true)">
      <div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
           [options]="showOptions.selectOptions" class="uk-width-2-5"></div>
      <div class="uk-width-expand" input type="text" [(value)]="keyword" [searchable]="true" placeholder="Entities to link"
           [hint]="'Search for ' + openaireEntities.RESULTS.toLowerCase()  + '...'" tooltip="true"></div>
    </advanced-search-input>
  </div>
  <div *ngIf="!showOptions"  class="uk-width-xlarge@l uk-width-large">
    <div search-input [(value)]="keyword" [placeholder]="'Search for ' + openaireEntities.RESULTS.toLowerCase() + '...'"
         [searchInputClass]="'inner background'" (searchEmitter)="search(true)"></div>
  </div>
</div>
<div *ngIf="!showSearchResults">
  <div class="uk-text-center uk-text-large uk-text-meta uk-margin-large-top">
    No {{showOptions?openaireEntities.RESULTS.toLowerCase() :'sources'}} yet...<br>Use the searchbar to find and link
    {{showOptions?openaireEntities.RESULTS.toLowerCase() :'sources'}}.
  </div>
</div>
<div *ngIf="showSearchResults" class="uk-margin-top uk-animation">
  <ul class="uk-tab" uk-tab="animation: uk-animation-fade">
    <li (click)="clickTab('openaire')" [class]="(activeTab == 'openaire')?'uk-active':''"><a>Openaire <span
      *ngIf="!(openaireResultsNum==0 && openaireResultsStatus === errorCodes.LOADING)">
      ({{openaireResultsNum| number}})</span></a>
    </li>
    <li (click)="clickTab('crossref')" [class]="(activeTab == 'crossref')?'uk-active':''"><a>Crossref
      <span
        *ngIf="crossrefResultsNum != null && crossrefResultsNum >= 0 ">({{crossrefResultsNum | number}})</span>
    </a></li>
    <li (click)="clickTab('datacite')" [class]="(activeTab == 'datacite')?'uk-active':''"><a>Datacite <span
      *ngIf="dataciteResultsNum!=null && dataciteResultsNum >= 0">({{dataciteResultsNum | number}})</span></a>
    </li>
    <li (click)="clickTab('orcid')" [class]="(activeTab == 'orcid')?'uk-active':''"><a>Orcid <span
      *ngIf="orcidResultsNum !=null">({{(orcidResultsNum > 0) ? (orcidResultsNum | number) : 0}})</span></a></li>
  </ul>

  <div *ngIf="activeTab == 'crossref'" id="crossref">
    <div class="uk-margin-top">
      <div *ngIf="crossrefStatus == errorCodes.NONE" class="uk-alert uk-alert-primary"
           role="alert">No Results found
      </div>
      <div *ngIf="crossrefStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured
      </div>
      <div *ngIf="crossrefStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
           role="alert">Service not available
      </div>
      <div *ngIf="crossrefResultsNum != null && crossrefResultsNum > 0" class="uk-clearfix ">
        <div class="uk-grid">

        </div>
      </div>
      <div *ngIf="crossrefStatus === errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1"
           role="alert"><span class="loading-gif  uk-align-center"></span></div>
      <div>

        <claim-results [localStoragePrefix]=localStoragePrefix [results]=crossrefResults
                       [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
      </div>
      <div class="uk-flex uk-flex-center" *ngIf="crossrefStatus != errorCodes.LOADING && crossrefResultsNum>0 ">
        <paging-no-load
                       [currentPage]="crossrefPage" [totalResults]="crossrefResultsNum"
                      [term]="keyword"
                      [size]="size" (pageChange)="crossrefPageChange($event)"></paging-no-load>
      </div>
    </div>
  </div>
  <div *ngIf="activeTab == 'openaire'" id="openaire" class="uk-animation-fade">

    <div class="uk-grid">

      <div class="search-filters  uk-width-1-1">

        <div *ngIf="openaireResultsNum > 0" class="uk-grid uk-grid-small" uk-grid>
          <ng-container *ngFor="let filter of rangeFilters">
            <div>
              <dropdown-filter [name]="filter.selectedFromAndToValues?filter.selectedFromAndToValues:filter.title"
                               dropdownMinWidth="450">
                <div class="uk-padding-small">
                  <range-filter [isDisabled]="openaireResultsStatus == errorCodes.LOADING"
                                [filter]="filter" (onFilterChange)="dateFilterChanged(filter)"
                                [showQuickButtons]="false"
                  ></range-filter>
                </div>
              </dropdown-filter>
            </div>

          </ng-container>
          <ng-container *ngFor="let filter of openaireResultsfilters ">
            <div *ngIf="(filter.values.length != 0 )">
              <dropdown-filter [count]="filter.countSelectedValues" [name]="filter.title"
                               dropdownMinWidth="450">
                <div class="uk-padding-small">
                  <search-filter  [isDisabled]="openaireResultsStatus == errorCodes.LOADING"
                                  [filter]="filter" [filterValuesNum]="0" [showResultCount]=true
                                  (onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
                </div>
              </dropdown-filter>
            </div>
          </ng-container>
        </div>
      </div>
      <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
        <div class="">
          <div *ngIf="openaireResultsStatus == errorCodes.NONE" class="uk-alert uk-alert-primary"
               role="alert">No Results found
          </div>
          <div *ngIf="openaireResultsStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning"
               role="alert">An Error Occured
          </div>
          <div *ngIf="openaireResultsStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
               role="alert">Service not available
          </div>

          <div *ngIf="openaireResultsStatus === errorCodes.LOADING"
               class="uk-animation-fade uk-margin-top  uk-width-1-1"
               role="alert"><span class="loading-gif  uk-align-center">Loading...</span></div>
          <claim-results [localStoragePrefix]=localStoragePrefix
                         [results]=openaireResults [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
          <div  class="uk-flex uk-flex-center" *ngIf=" openaireResultsStatus != errorCodes.LOADING  && openaireResultsNum != null && openaireResultsNum > 0" >
            <paging-no-load [currentPage]="openaireResultsPage"
                            [totalResults]="openaireResultsNum" [term]="keyword"
                            [size]="size" (pageChange)="openaireResultsPageChange($event)"></paging-no-load>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="activeTab == 'orcid'" id="orcid" class="uk-animation-fade">
    <div class="uk-margin-top">

      <div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured</div>
      <div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
           role="alert">Service not available
      </div>
      <div *ngIf="orcidStatus == errorCodes.NONE && orcidResultsNum == -1"
           class="uk-alert uk-alert-primary "> No results found
      </div>
      
      <div *ngIf="orcidResultsNum >= 0" class="panel-body">
               <span><span class="uk-text-bold">Showing results for</span>
                 <a target="_blank" href="http://orcid.org/{{authorId}}"> <span
                   class="custom-external"></span>  {{authorGivenName}} {{authorFamilyName}} - {{authorId}}  </a> :
               </span>
        <div *ngIf="authors.length > 1" class=""> In Orcid you can search only by Author. Not the
          author you are looking for?

          <div class="dropdown">

            <mat-select [(ngModel)]="selectAuthorId" name="select_author"
                    (ngModelChange)="getOrcidResultsById(selectAuthorId)" class="matSelection"
                    [disableOptionCentering]="true"
                    panelClass="matSelectionPanel">
              <mat-option value="0">Choose another one:</mat-option>
              <mat-option *ngFor=" let item of authors let i = index"
                      [value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </mat-option>
            </mat-select>
          </div>

        </div>


        <div>
          <claim-results [localStoragePrefix]=localStoragePrefix
                         *ngIf="orcidResultsNum >0  && orcidResultsToShow.length > 0 " [results]=orcidResultsToShow
                         [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
          <div *ngIf="orcidResultsNum == 0" class="uk-alert uk-alert-primary uk-margin-top"> No results found</div>
        </div>
        <div *ngIf=" ((orcidResultsNum >0) && (totalPages > 1) && ( 0 < page &&  page <= totalPages )) "
             class="uk uk-flex uk-flex-center">
         
              <paging-no-load [currentPage]="orcidPage" [totalResults]="orcidResultsNum"
                              [term]="keyword" [size]="size"
                              (pageChange)="orcidPageChange($event)"></paging-no-load>
             
        
        </div>
      </div>
      <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
        <span class="loading-gif  uk-align-center"></span></div>
    </div>
  </div>
  <div *ngIf="activeTab == 'datacite'" id="datacite" class="uk-animation-fade">
    <div *ngIf="dataciteStatus == errorCodes.NONE" class="uk-alert uk-alert-primary" role="alert">No Results found</div>
    <div *ngIf="dataciteStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured
    </div>
    <div *ngIf="dataciteStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
         role="alert">Service not available
    </div>
    <div class="uk-margin-top">
      
      <div *ngIf="dataciteStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1"
           role="alert"><span class="loading-gif  uk-align-center"></span></div>
      <div>
        <claim-results [localStoragePrefix]=localStoragePrefix *ngIf="dataciteResults.length > 0 "
                       [results]=dataciteResults [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
      </div>
      <div *ngIf="dataciteResultsNum != null && dataciteResultsNum > 0" class="uk uk-flex uk-flex-center ">
            <paging-no-load [currentPage]="datacitePage" [totalResults]="dataciteResultsNum"
                            [term]="keyword"
                            [size]="size" (pageChange)="datacitePageChange($event)"></paging-no-load>
      </div>
    </div>
  </div>

</div>