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

<div class="uk-width-1-1">
  <helper position="top"></helper>
</div>
<div class="uk-grid  helper-grid">
  <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
  <div class="uk-width-expand">
    <!-- <div *ngIf="claims && claims.length > 0" class="uk-alert uk-alert-primary">
     <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
     Newly added links for OpenAIRE research results will be available on the next run of our algorithms.
     <div class="uk-margin-left">Links to external results (Crossref, Datacite, Orcid) are automatically added in OpenAIRE information space.</div>
   </div> -->
   <div *ngIf="showLatestClaims && recentClaims.length > 0" class="uk-section uk-section-muted uk-padding-small uk-padding-right uk-padding-left">
   <div  *ngIf="showLatestClaims && recentClaims.length > 0" class="uk-h5">
     <span uk-tooltip="title:<div class='uk-margin-small'> Claims created during the last 24 hours</div>">
       Recent links
     </span>
   </div>
   <table *ngIf="showLatestClaims && recentClaims.length > 0" class="uk-table uk-table-small uk-table-striped">
     <thead>
        <tr>
           <th><a (click)="changeOrderby('target')" >Research Result</a> </th>
           <th><a (click)="changeOrderby('source')" >Link to</a> </th>
           <th *ngIf="showUserEmail"><a (click)="changeOrderby('user')" >Claimed by</a> </th>
           <th><a (click)="changeOrderby('date')"> Claimed Date</a></th>
           <th *ngIf="showLatestClaims">Status</th>
        </tr>
     </thead>
     <tbody>
         <tr *ngFor="let claim of recentClaims " >
           <td><claim-entity [entity]="claim.target" [type]="claim.targetType" [(properties)]=properties> </claim-entity></td>
            <td><claim-entity [entity]="claim.source" [type]="claim.sourceType" [(properties)]=properties> </claim-entity></td>
           <td *ngIf="showUserEmail">{{claim.userMail}}</td>
           <td>{{claim.date}}</td>
           <td *ngIf="showLatestClaims">

             <span   class="uk-icon" [attr.uk-tooltip]="'title:<div class=\'uk-margin-small\'>'+getclaimStatus(claim)+'</div>'">
               <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question" ratio="1">
                 <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle cx="10.44" cy="14.42" r="1.05"></circle><path fill="none" stroke="#000" stroke-width="1.2" d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path></svg>
             </span>
           </td>
        </tr>
     </tbody>
   </table>
 </div>

    <form class="">

        <div class="-row">
            <span class="uk-text-bold">Filter By:</span>
            <input type="text" class=" uk-input form-control" placeholder="Search for keywords in titles ..." aria-describedby="sizing-addon2"  [(ngModel)]="inputkeyword"  (keyup)="changekeyword()" name="claims-keyword" ></div>
        <div class="uk-margin-small-top">
          <label class="uk-margin-small-right"> <input [(ngModel)]="projectCB" type="checkbox" (ngModelChange)="changeType()"  name="project"  />
            <span class="uk-icon"  ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="5" y="2" width="10" height="1"></rect><rect x="3" y="4" width="14" height="1"></rect><rect fill="none" stroke="#000" x="1.5" y="6.5" width="17" height="11"></rect></svg></span>
            Project </label>
          <label  class="uk-margin-small-right"> <input [(ngModel)]="publicationCB" type="checkbox"  (ngModelChange)="changeType()" name="publication"  />
            <span class="uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>
            Publication </label>
          <label  class="uk-margin-small-right"> <input [(ngModel)]="datasetCB" type="checkbox" (ngModelChange)="changeType()"  name="dataset"  />
             <span class="uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><ellipse fill="none" stroke="#000" cx="10" cy="4.64" rx="7.5" ry="3.14"></ellipse><path fill="none" stroke="#000" d="M17.5,8.11 C17.5,9.85 14.14,11.25 10,11.25 C5.86,11.25 2.5,9.84 2.5,8.11"></path><path fill="none" stroke="#000" d="M17.5,11.25 C17.5,12.99 14.14,14.39 10,14.39 C5.86,14.39 2.5,12.98 2.5,11.25"></path><path fill="none" stroke="#000" d="M17.49,4.64 L17.5,14.36 C17.5,16.1 14.14,17.5 10,17.5 C5.86,17.5 2.5,16.09 2.5,14.36 L2.5,4.64"></path></svg></span>
             Research Data </label>
           <label  class="uk-margin-small-right"> <input [(ngModel)]="softwareCB" type="checkbox" (ngModelChange)="changeType()"  name="software"  />
              <span class="uk-icon" >
                <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"> <circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle> <path fill="none" stroke="#000" d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
              </span>
              Software
           </label>
          <label  class="uk-margin-small-right"> <input [(ngModel)]="otherCB" type="checkbox" (ngModelChange)="changeType()"  name="other"  />
                 <span class="uk-icon" >
                   <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polygon fill="none" stroke="#000" points="2.5,5.7 10,1.3 17.5,5.7 17.5,14.3 10,18.7 2.5,14.3"></polygon> <circle fill="none" stroke="#000" cx="10" cy="10" r="3.5"></circle></svg>
                 </span>
                 Other product
          </label>
          <label  class="uk-margin-small-right"> <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  name="context"  />
            <span class="uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg></span>
             Community </label>
      </div>

    </form>
    <div class="searchPaging uk-panel uk-margin-top" data-uk-grid-margin="">

        <div *ngIf="resultsNum" class="uk-float-right">
            <paging-no-load [currentPage]="page" [totalResults]="resultsNum"      [size]="size"  (pageChange)="pageChange($event)"> </paging-no-load>
         </div>

      <div *ngIf="resultsNum>0" class="uk-width-1-2">
        <span > Show
          <select *ngIf="resultsNum>10"  class="uk-width-small uk-select" [(ngModel)]="size" name="select_size"  (ngModelChange)="changeSize(size)" >
            <option *ngFor="let size of sizes"  [value]="size">{{size}}</option>
          </select>
        </span>
        <span >Showing {{(size*page - size +1) | number}} to {{(size*page>resultsNum)?(resultsNum | number):((size*page) | number)}} of {{resultsNum | number}} claims </span>

      </div>
    </div>


     <div *ngIf="showErrorMessage " class = "uk-alert uk-alert-danger " >
         An Error occured.
     </div>
     <div *ngIf="showForbiddenMessage " class = "uk-alert uk-alert-danger " >
         You are not allowed to access this page.
     </div>
     <div *ngIf="userValidMessage.length > 0 " class = "uk-alert uk-alert-danger " >
         User session is not valid. Please login again.
     </div>


    <!--  Buttons for selecting and Delete Claims -->
    <div *ngIf="enableDelete">
      <div *ngIf="selected.length>0 && resultsNum > 0 ">
        <div class = "uk-alert uk-alert-primary " >
          You have selected {{selected.length | number}} claim(s)
        </div>
      </div>
      <div *ngIf="deleteMessage.length>0 "   [innerHTML]="deleteMessage">

      </div>


       <!--button *ngIf="claims && claims.length > 0" class=" uk-button uk-button-default"  (click)="confirmOpen()"> <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="trash" ratio="1"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Delete</button-->
    </div>
    <br>


    <div *ngIf=" claims && claims.length == 0" >
      <div class = "uk-alert uk-alert-primary " >No entries found.</div>
    </div>

    <div class="">
    <table *ngIf="claims && claims.length > 0" class="uk-table uk-table-small uk-table-striped">
      <thead>
         <tr>
            <th *ngIf="enableDelete" class="uk-padding-remove-right" title="Select all">
              <input id="checkAll" type="checkbox" (click)="selectAll($event)" [ngModel]="selected.length==claims.length" />
            </th>
            <th class="uk-padding-remove-right uk-padding-remove-left" title="Delete selected">
              <a [class]=" 'uk-text-danger '+(selected.length > 0?'':'uk-disabled')"  (click)="confirmOpen()"  >
                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="trash" ratio="1"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span>
              </a>
            </th>
            <!--<th>Id</th>
            <!--  <th>Target Type</th> -->
              <th><a (click)="changeOrderby('target')" >Research Result</a> </th>
            <!--<th>Source type</th> -->
            <th><a (click)="changeOrderby('source')" >Link to</a> </th>

            <th *ngIf="showUserEmail"><a (click)="changeOrderby('user')" >Claimed by</a> </th>
            <th><a (click)="changeOrderby('date')"> Claimed Date</a></th>
         </tr>
      </thead>
      <tbody>
          <tr *ngFor="let claim of claims " >
           <td *ngIf="enableDelete"><input [id]="claim.id" type="checkbox" (click)="select(claim,$event)"  [ngModel]="isSelected(claim.id)"/></td>
           <td></td>
            <td><claim-entity [entity]="claim.target" [type]="claim.targetType" [(properties)]=properties> </claim-entity></td>
             <td><claim-entity [entity]="claim.source" [type]="claim.sourceType" [(properties)]=properties> </claim-entity></td>
            <td *ngIf="showUserEmail">{{claim.userMail}}</td>
            <td>{{claim.date}}</td>
         </tr>
      </tbody>
    </table>
    </div>
    <helper position="bottom"></helper>

</div>
<div class="uk-width-1-5">
  <div class="uk-card portal-card uk-padding" *ngIf="moreClaimsURL || claimsInfoURL">
    <h6 *ngIf="moreClaimsURL.indexOf('http')==-1" class="uk-h6">
      <a class="el-content uk-link-text" [routerLink]="moreClaimsURL">Claim more links?</a>
    </h6>
    <h6 *ngIf="moreClaimsURL.indexOf('http')!=-1"  class="uk-h6">
      <a class="el-content uk-link-text" [href]="moreClaimsURL" target="_blank">Claim more links?</a>
    </h6>
    <h6  *ngIf="claimsInfoURL" class="uk-h6 uk-margin-small-top">
      <a class="el-content uk-link-text" [href]="claimsInfoURL" target="_blank">Learn more</a>
    </h6>
    <!-- <div  *ngIf="moreClaimsURL.indexOf('http')==-1"><a  [routerLink]="moreClaimsURL">Claim more links?</a></div>
    <div *ngIf="moreClaimsURL.indexOf('http')!=-1" ><a  [href]="moreClaimsURL" target="_blank">Claim more links?</a></div>
    <div><a  [href]="claimsInfoURL" target="_blank">Learn more</a></div> -->
  </div>
  <helper position="right" styleName=" uk-width-1-5"></helper>
</div>
</div>
<modal-alert (alertOutput)="confirmClose($event)">
</modal-alert>
<modal-loading [message]= "'Please wait...'"></modal-loading>