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">
    <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)]="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-1-2 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)}} to {{(size*page>resultsNum)?resultsNum:(size*page)}} of {{resultsNum}} 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}} claim(s)
        </div>
      </div>
      <div *ngIf="deleteMessage.length>0 "   [innerHTML]="deleteMessage">

      </div>
       <button 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-striped">
      <thead>
         <tr>
            <th *ngIf="enableDelete"><input id="checkAll" type="checkbox" (click)="selectAll($event)" [ngModel]="selected.length==claims.length" /></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><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="right" styleName=" uk-width-1-5"></helper>
</div>
<helper position="bottom"></helper>
<modal-alert (alertOutput)="confirmClose($event)">
</modal-alert>
<modal-loading [message]= "'Please wait...'"></modal-loading>