D-Net

<form class="">

    <div class="-row">

        <span class="uk-text-bold">Filter By:</span>

        <input type="text" class=" uk-input form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="inputkeyword"  (keyup)="changekeyword()" name="claims-keyword" ></div>

    <div class="-row">

      <label> <input [(ngModel)]="projectCB" type="checkbox" (ngModelChange)="changeType()"  name="project"  /> Project </label>

      <label> <input [(ngModel)]="publicationCB" type="checkbox"  (ngModelChange)="changeType()" name="publication"  /> Publication </label>

      <label> <input [(ngModel)]="datasetCB" type="checkbox" (ngModelChange)="changeType()"  name="dataset"  /> Dataset </label>

      <label> <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  name="context"  /> Context </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="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 uk-icon="icon: trash"></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" > </claim-entity></td>

         <td><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>

        <td *ngIf="showUserEmail">{{claim.userMail}}</td>

        <td>{{claim.date}}</td>

     </tr>

  </tbody>

</table>

<modal-alert (alertOutput)="confirmClose($event)">

</modal-alert>

<modal-loading [message]= "'Please wait...'"></modal-loading>