D-Net

<div class="container">

<div class="row row-offcanvas row-offcanvas-right">

  <div class="col-xs-12 col-sm-3">

<div class="panel panel-default">

  <!-- Default panel contents -->

  <div class="panel-heading">Claims related to</div>

  <!-- List group -->

  <div class="panel-body">

    <p>

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

    </p>

    <p>

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

    </p>

    <p>

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

    </p>

    <p>

      <label> <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  /> Context </label>

    </p>

    <p class="align-right">

      <button  class="btn btn-primary"  (click)="clearFilters()">Clear filters</button>

    </p>

  </div>

</div>

</div>

<div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">

<h4 *ngIf="resultsNum>0" >Showing {{(size*page - size +1)}} to {{(size*page>resultsNum)?resultsNum:(size*page)}} of {{resultsNum}} claims</h4>

<div *ngIf="resultsNum>size*page " class="text-right">

  <span class="dropdown">

    Show <button class="btn btn-default dropdown-toggle" type="button" id="pagingDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

     {{size}}

      </button>

     <ul class="dropdown-menu" aria-labelledby="pagingDropdown">

        <li *ngIf="resultsNum > 10" ><a  (click)="changeSize(10)  " >10 </a></li>

        <li *ngIf="resultsNum > 20" ><a  (click)="changeSize(20)" >20 </a></li>

        <li *ngIf="resultsNum > 30" ><a  (click)="changeSize(30)" >30 </a></li>

        <li *ngIf="resultsNum > 50" ><a  (click)="changeSize(40)" >50 </a></li>

     </ul>

   </span>

 </div>

 <div *ngIf="showErrorMessage " class = "alert alert-danger " >

     An Error occured.

 </div>

<div class="text-right" *ngIf="resultsNum">

  <!--<paging  [currentPage]="page" [totalResults]="resultsNum"  [navigateTo]="navigateTo" [size]="size" [params]="getParameters()" > </paging>-->

  <paging-no-load [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="navigateTo"  [params]="getParameters()" [size]="size"  (pageChange)="pageChange($event)"> </paging-no-load>

</div>

<!--  Buttons for selecting and Delete Claims -->

<div *ngIf="enableDelete">

  <div *ngIf="selected.length>0 && resultsNum > 0 ">

    <div class = "alert alert-info " >

      You have selected {{selected.length}} claim(s)

    </div>

  </div>

  <div *ngIf="deleteMessage.length>0 " [innerHTML]="deleteMessage">

  </div>

  <button class="btn btn-default" (click)="selectAll()">Select All</button> <button class="btn btn-default" (click)="deselectAll()">Deselect All</button> <button class="btn btn-default" (click)="confirmOpen()">Delete</button>

</div>

<br>

<div class="input-group col-lg-6">

  <span class="input-group-addon" id="sizing-addon2">Filter</span>

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

</div>

<div *ngIf=" claims && claims.length == 0" >

  <div class = "alert alert-info " >No entries found.</div>

</div>

<div class="">

<table *ngIf="claims && claims.length > 0" class="table table-striped">

  <thead>

     <tr>

        <th *ngIf="enableDelete"></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><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>{{claim.userMail}}</td>

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

     </tr>

  </tbody>

</table>

</div>

</div>

</div>

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

</modal-alert>

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