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

<form class="  uk-margin-top">
  <div class="uk-margin-small-bottom">Start searching Research Results and add them to the Basket to Link
    <!-- <helper  div="link-entity-form" styleName="" tooltip=true></helper>  -->
  </div>

  <input class=" uk-input uk-width-large   form-control" [(ngModel)]="keyword" name="keyword"
         placeholder="Search for research results..."/>
  <span class="input-group-btn">
    <button (click)="search(true)" type="submit" class=" uk-button portal-button">Search</button>
  </span>

  <!--helper  div="link-entity-form" styleName="uk-width-medium"></helper-->

</form>
<div *ngIf="!showSearchResults">
  <div class="uk-text-center uk-text-large uk-text-muted uk-margin-large-top">
    No research results yet...<br>Start searching for research results to add them in the Basket
  </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="!(totalOpenaireCount==0 && openaireResultsStatus === errorCodes.LOADING)">
      ({{totalOpenaireCount| 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 portal-hr">
        <div class="uk-grid">
          <div *ngIf="crossrefResultsNum>0" class="uk-width-1-2">
            <span class="portal-color">{{crossrefResultsNum|number}}</span> results, page <span
            class="portal-color">{{crossrefPage | number}}</span> of <span
            class="portal-color">{{countTotalPages(crossrefResultsNum)|number}}</span>

          </div>
          <div class="uk-width-1-2">
            <paging-no-load class="uk-float-right" [currentPage]="crossrefPage" [totalResults]="crossrefResultsNum"
                            [term]="keyword"
                            [size]="size" (pageChange)="crossrefPageChange($event)"></paging-no-load>
          </div>
        </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>
  </div>
  <div *ngIf="activeTab == 'openaire'" id="openaire" class="uk-animation-fade">

    <div class="uk-grid">
      <div class="search-filters  uk-width-medium">
        <!-- <div   class="uk-width-1-1   uk-margin-small-bottom ">

           <div *ngIf="countFilters()>0" class="uk-margin-small-bottom">

             &lt;!&ndash;<span *ngIf = "searchUtils.keyword.length > 0"><span class="uk-text-bold">Keywords:</span>
             <a (click) = "clearKeywords() " title="Remove keywords" [class]="((disableForms)?'  uk-disabled':'  ')+'  portal-color '"><span class=" clickable " aria-hidden="true"><span class="uk-icon ">
               <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
               </span></span></a>
             <span [innerHtml]="searchUtils.keyword"></span>

             </span>&ndash;&gt;
             <div *ngFor="let filter of openaireResultsfilters " >
               <span *ngIf = "filter.countSelectedValues > 0"> <span class="uk-text-bold">{{filter.title}}:</span>
                 <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; " >
                   <a [title]="'Remove '+value.name"(click) = "removeFilter(value, filter) "
                      [class]="((openaireResultsStatus === errorCodes.LOADING)?'  uk-disabled':'  ')+'  portal-color '"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
                     <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
                     </span></span></a>
                   <span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" [title]="value.name"></span><span *ngIf="!end" class="   ">, </span>
                 </span>
               </span>
             </div>
           </div>

          <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">
            <a  *ngIf="countFilters()>1" (click)="clearFilters()" [class]="((openaireResultsStatus ===
            errorCodes.LOADING)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
              Clear All
            </a>

         </div>
         </div>-->
        <!-- Type filter-->
        <ul class="uk-list">
          <li class="uk-open uk-margin-small-bottom">
            <h5 class="uk-margin-bottom-remove ">Result Type (4)
            </h5>
            <div aria-expanded="false">
              <div class="searchFilterBoxValues ">
                <div *ngFor="let type of openaireTypeValues" class="uk-animation-fade filterItem">

                  <div title="{{type.title}}">
                    <input [value]="type.value" [(ngModel)]="openaireResultsType" [name]=type.value
                           type="radio" (ngModelChange)="openaireTypeChanged(type.value)"/>
                    {{_formatName(type.title,type.count)}}
                    <span *ngIf="type.count!=null">{{' (' + (type.count|number) + ')'}}</span>
                  </div>

                </div>
              </div>
            </div>
          </li>
          <li class="uk-open">
            <h5 class="uk-margin-bottom-remove">Published in
            </h5>
            <div aria-expanded="false">
              <div class="searchFilterBoxValues ">
                <form class="uk-inline">

                  <input class=" uk-input  uk-width-small" [(ngModel)]="openaireYear" name="keyword"
                         placeholder="Year (e.g. 2010)"/>
                  <button type="submit" (click)="yearChanged()" style="cursor: pointer;" class="uk-icon">
                    <svg width="20" height="20"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"
                         icon="chevron-right"
                         ratio="1">
                      <polyline
                        fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>
                    </svg>
                  </button>

                </form>
              </div>
            </div>
          </li>
        </ul>

        <search-filter *ngFor="let filter of openaireResultsfilters " [isDisabled]="false" [filter]="filter"
                       [showResultCount]=true
                       (onFilterChange)="filterChanged($event)"></search-filter>
      </div>
      <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
        <div class="uk-margin-top">

          <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="openaireResultsNum != null && openaireResultsNum > 0" class="uk-clearfix portal-hr ">
            <div class="uk-grid">
              <div *ngIf="openaireResultsNum>0" class="uk-width-1-2">
                <span class="portal-color">{{openaireResultsNum|number}}</span> results, page <span
                class="portal-color">{{openaireResultsPage | number}}</span> of <span
                class="portal-color">{{countTotalPages(openaireResultsNum)|number}}</span>

              </div>
              <div class="uk-width-1-2  uk-padding-remove">
                <paging-no-load class="uk-float-right" [currentPage]="openaireResultsPage"
                                [totalResults]="openaireResultsNum" [term]="keyword"
                                [size]="size" (pageChange)="openaireResultsPageChange($event)"></paging-no-load>
              </div>
            </div>
          </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"></span></div>
          <claim-results [localStoragePrefix]=localStoragePrefix
                         [results]=openaireResults [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
        </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) && (totalPages > 1) && ( 0 < page &&  page <= totalPages )) "
           class="uk-clearfix portal-hr">
        <div class="uk-grid">
          <div *ngIf="orcidResultsNum>0" class="uk-width-1-2">
            <span class="portal-color">{{orcidResultsNum|number}}</span> results, page <span
            class="portal-color">{{orcidPage | number}}</span> of <span
            class="portal-color">{{countTotalPages(orcidResultsNum)|number}}</span>

          </div>
          <div class="uk-width-1-2">
            <paging-no-load class="uk-float-right" [currentPage]="orcidPage" [totalResults]="orcidResultsNum"
                            [term]="keyword" [size]="size"
                            (pageChange)="orcidPageChange($event)"></paging-no-load>
          </div>
        </div>
      </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>
      <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="dataciteResultsNum != null && dataciteResultsNum > 0" class="uk-clearfix portal-hr">
        <div class="uk-grid">
          <div *ngIf="dataciteResultsNum>0" class="uk-width-1-2">
            <span class="portal-color">{{dataciteResultsNum|number}}</span> results, page <span
            class="portal-color">{{datacitePage | number}}</span> of <span
            class="portal-color">{{countTotalPages(dataciteResultsNum)|number}}</span>

          </div>
          <div class="uk-width-1-2 ">
            <paging-no-load class="uk-float-right" [currentPage]="datacitePage" [totalResults]="dataciteResultsNum"
                            [term]="keyword"
                            [size]="size" (pageChange)="datacitePageChange($event)"></paging-no-load>
          </div>
        </div>
      </div>
      <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>
  </div>

</div>