explore-services/src/app/claimPages/claims/claims.component.html

111 lines
4.5 KiB
HTML

<div class="container">
<!-- KI
<h3>Filter claims by type:</h3>
<form>
<select [(ngModel)]="fetchBy">
<option *ngFor="let type of types" [value]="type">{{type}}</option>
</select>
<input type="text" [(ngModel)]="fetchId" />
<button class="btn btn-default" type = "submit" (click)="goTo()">Fetch</button>
</form>
-->
<!-- KI-->
<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)="size=10 " >10 </a></li>
<li *ngIf="resultsNum > 20" ><a (click)="size = 20 " >20 </a></li>
<li *ngIf="resultsNum > 30" ><a (click)="size = 30 " >30 </a></li>
<li *ngIf="resultsNum > 50" ><a (click)="size = 50 " >50 </a></li>
</ul>
</span>
</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-success " >
You have selected {{selected.length}} claim(s)
</div>
</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" class = "alert alert-info " >No entries found.</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]="selectAllClaims"/></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>
<alert (alertOutput)="confirmClose($event)">
</alert>
<loading [message]= "'Please wait...'"></loading>