D-Net

<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> <input [(ngModel)]="projectCB" type="checkbox" (ngModelChange)="changeType()"  name="project"  />

            <span class="uk-margin-small-right 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> <input [(ngModel)]="publicationCB" type="checkbox"  (ngModelChange)="changeType()" name="publication"  />

            <span class="uk-margin-small-right 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> <input [(ngModel)]="datasetCB" type="checkbox" (ngModelChange)="changeType()"  name="dataset"  />

             <span class="uk-margin-small-right 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> <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  name="context"  />

            <span class="uk-margin-small-right 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>

             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="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" > </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>

    </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>