claimsByToken page: claims displayed as datatables (https://www.npmjs.com/package/angular2-datatable)
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@47058 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni
parent
2f431db0b2
commit
e629fffebe
|
|
@ -53,6 +53,7 @@
|
|||
"@angularclass/bootloader": "~1.0.1",
|
||||
"@angularclass/idle-preload": "~1.0.4",
|
||||
"@types/clipboard": "^1.5.31",
|
||||
"angular2-datatable": "^0.6.0",
|
||||
"angular2-express-engine": "~2.1.0-rc.1",
|
||||
"angular2-platform-node": "~2.1.0-rc.1",
|
||||
"angular2-universal": "~2.1.0-rc.1",
|
||||
|
|
|
|||
|
|
@ -15,10 +15,6 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
selector: 'claims-project-manager',
|
||||
template: `
|
||||
|
||||
<!--div class="page-header">
|
||||
<h1> Claims Manager </h1>
|
||||
</div-->
|
||||
|
||||
<!--div *ngIf="accessStatus=='empty'" class="uk-margin-top uk-width-medium-2-3 uk-container-center">
|
||||
<div class="uk-block uk-block-primary uk-block-large uk-contrast uk-text-center">
|
||||
<p class="uk-text-large">Please enter your email and then press 'See Claims' button.</p>
|
||||
|
|
@ -40,24 +36,24 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
</div>
|
||||
|
||||
<div *ngIf="accessStatus=='valid'">
|
||||
<h1> Pending Claims for project:
|
||||
<h1 class="page-header">
|
||||
<a [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])"
|
||||
routerLinkActive="router-link-active"
|
||||
routerLink="/search/project" >
|
||||
{{project['name']}} ({{project['funderName']}})
|
||||
</a>
|
||||
</h1>
|
||||
</h1>
|
||||
<h2> Pending Claims</h2>
|
||||
|
||||
<div *ngIf=" pending_claims && pending_claims.length == 0" >
|
||||
<div class = "uk-alert uk-alert-info " >No pending claims found.</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-overflow-container">
|
||||
<table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped">
|
||||
<!--table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Research Result</th>
|
||||
<!--th>Link to</th-->
|
||||
<th class="uk-text-center">Claimed by</th>
|
||||
<th class="uk-text-center">Claimed Date</th>
|
||||
<th class="uk-text-center">Approve</th>
|
||||
|
|
@ -69,14 +65,6 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
<td class="uk-width-1-6 uk-text-center" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.date}}</td>
|
||||
<!--td>
|
||||
<label>
|
||||
Yes <input [id]="claim.id" type="checkbox" (click)="selectApprove(claim.id,$event)" [ngModel]="isSelectedRight(claim.id)"/>
|
||||
</label>
|
||||
<label>
|
||||
No <input [id]="claim.id" type="checkbox" (click)="selectDisapprove(claim.id,$event)" [ngModel]="isSelectedWrong(claim.id)"/>
|
||||
</label>
|
||||
</td-->
|
||||
<td class="uk-width-1-6 uk-text-center">
|
||||
|
||||
<label>
|
||||
|
|
@ -88,20 +76,62 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table-->
|
||||
|
||||
<h1> Already Curated Claims </h1>
|
||||
<table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped"
|
||||
[mfData]="pending_claims" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1"
|
||||
[(mfSortBy)]="sortByClaimDate" [(mfSortOrder)]="sortOrder">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><mfDefaultSorter [by]="sortByTitle">Research Result</mfDefaultSorter></th>
|
||||
<th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed By</mfDefaultSorter></th>
|
||||
<th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate">Claimed Date</mfDefaultSorter></th>
|
||||
<th class="uk-text-center">Approve</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="uk-table-middle" *ngFor="let claim of mf.data">
|
||||
<td class="uk-width-2-6" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" > </claim-entity></td>
|
||||
<td class="uk-width-1-6 uk-text-center" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.date}}</td>
|
||||
<td class="uk-width-1-6 uk-text-center">
|
||||
|
||||
<label>
|
||||
Yes <input [id]="claim.id" type="checkbox" (click)="selectApprove(claim.id,$event)" [ngModel]="isSelectedRight(claim.id)"/>
|
||||
</label>
|
||||
<label>
|
||||
No <input [id]="claim.id" type="checkbox" (click)="selectDisapprove(claim.id,$event)" [ngModel]="isSelectedWrong(claim.id)"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
<!--mfBootstrapPaginator></mfBootstrapPaginator-->
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
<paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(mf, $event)"></paging-no-load>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2> Already Curated Claims</h2>
|
||||
|
||||
<div *ngIf=" curated_claims && curated_claims.length == 0" >
|
||||
<div class = "uk-alert uk-alert-info " >No curated claims found.</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-overflow-container">
|
||||
<table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped">
|
||||
<!--table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Research Result</th>
|
||||
<!--th>Link to</th-->
|
||||
<th class="uk-text-center">Claimed by</th>
|
||||
<th class="uk-text-center">Claimed Date</th>
|
||||
<th class="uk-text-center">Curated by</th>
|
||||
|
|
@ -111,6 +141,42 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr class="uk-table-middle" *ngFor="let claim of curated_claims let i=index">
|
||||
<td class="uk-width-1-6" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" > </claim-entity></td>
|
||||
<td class="uk-width-1-6" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.date}}</td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.curatedBy}}</td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.curationDate}}</td>
|
||||
<td class="uk-width-1-6 uk-text-center">
|
||||
|
||||
<label>
|
||||
Yes <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isRight(claim)"/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
No <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isWrong(claim)"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table-->
|
||||
|
||||
<table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped"
|
||||
[mfData]="curated_claims" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1"
|
||||
[(mfSortBy)]="sortByCurationDate" [(mfSortOrder)]="sortOrder">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><mfDefaultSorter [by]="sortByTitle">Research Result</mfDefaultSorter></th>
|
||||
<!--th>Link to</th-->
|
||||
<th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed by</mfDefaultSorter></th>
|
||||
<th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate">Claimed Date</mfDefaultSorter></th>
|
||||
<th class="uk-text-center"><mfDefaultSorter by="curatedBy">Curated by</mfDefaultSorter></th>
|
||||
<th class="uk-text-center"><mfDefaultSorter [by]="sortByCurationDate">Curation Date</mfDefaultSorter></th>
|
||||
<th class="uk-text-center">Approved</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="uk-table-middle" *ngFor="let claim of mf.data let i=index">
|
||||
<td class="uk-width-1-6" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" > </claim-entity></td>
|
||||
<td class="uk-width-1-6" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>
|
||||
<td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>
|
||||
|
|
@ -132,8 +198,23 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
<!--td><button class="uk-button" (click)="editable.add(i)">Edit</button></td-->
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
<!--mfBootstrapPaginator></mfBootstrapPaginator-->
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
<paging-no-load [currentPage]="1" [totalResults]="curated_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(mf, $event)"> </paging-no-load>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="uk-text-small uk-text-right">*Note that claims you did not approved or disapproved are considered as right (but not curated)</div>
|
||||
<button class="uk-button uk-button-success uk-float-right" type="button" (click)="saveChanges()">Save Changes</button>
|
||||
|
|
@ -160,6 +241,10 @@ export class ClaimsByTokenComponent {
|
|||
// when 'empty' show form to fill email, when 'valid' show proper claims, when 'invalid' show no matched entry-wanna retry
|
||||
public accessStatus: string;// = "empty";
|
||||
|
||||
public rowsOnPage = 5;
|
||||
public sortOrder = "desc";
|
||||
|
||||
|
||||
@ViewChild (ModalSelect) selectModal : ModalSelect;
|
||||
@ViewChild (ModalLoading) loading : ModalLoading ;
|
||||
|
||||
|
|
@ -182,6 +267,27 @@ export class ClaimsByTokenComponent {
|
|||
);
|
||||
}
|
||||
|
||||
refreshTable(mf:any, $event:any) {
|
||||
mf.mfActivePage=$event.value;
|
||||
mf.setPage(mf.mfActivePage, this.rowsOnPage);
|
||||
}
|
||||
|
||||
public sortByClaimDate = (claim: any) => {
|
||||
return new Date(claim.date);
|
||||
}
|
||||
|
||||
public sortByCurationDate = (claim: any) => {
|
||||
return new Date(claim.curationDate);
|
||||
}
|
||||
|
||||
public sortByTitle = (claim: any) => {
|
||||
if(claim.targetType != 'project') {
|
||||
return claim.target.title;
|
||||
} else {
|
||||
return claim.source.title;
|
||||
}
|
||||
}
|
||||
|
||||
validateJWTandToken() {
|
||||
var jwtToken=Session.getUserJwt();
|
||||
if(this.token) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import {DataTableModule} from "angular2-datatable";
|
||||
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
import { ClaimsByTokenComponent } from './claimsByToken.component';
|
||||
import { ClaimsByTokenService } from './claimsByToken.service';
|
||||
|
|
@ -13,14 +15,18 @@ import {LoadingModalModule} from '../../utils/modal/loadingModal.module';
|
|||
|
||||
import {LoginGuard} from'../../login/loginGuard.guard';
|
||||
|
||||
import {PagingModule} from '../../utils/paging.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule,
|
||||
DataTableModule,
|
||||
SharedModule,
|
||||
ClaimsByTokenRoutingModule,
|
||||
ClaimEntityFormatterModule,
|
||||
SelectModalModule,
|
||||
LoadingModalModule
|
||||
LoadingModalModule,
|
||||
PagingModule
|
||||
// ClaimServiceModule,
|
||||
//DisplayClaimsModule
|
||||
|
||||
|
|
|
|||
|
|
@ -13,18 +13,18 @@ export class ClaimsByTokenService {
|
|||
getClaims(token: string, jwtToken: string):any {
|
||||
console.info("getClaims in service");
|
||||
|
||||
let url = OpenaireProperties.getClaimsAPIURL()+"projects/corda__h2020::94c962e736df90a5075a7f660ba3d7f6/claims"
|
||||
+"?&token="+jwtToken;
|
||||
let url = OpenaireProperties.getClaimsAPIURL()+"project/claims?token="+jwtToken+"&projectToken="+token;
|
||||
|
||||
let key = url;
|
||||
if (this._cache.has(key)) {
|
||||
return Observable.of(this._cache.get(key));
|
||||
}
|
||||
//if (this._cache.has(key)) {
|
||||
// return Observable.of(this._cache.get(key));
|
||||
//}
|
||||
return this.http.get(url)
|
||||
//.map(res => <any> res.text())
|
||||
.map(request => <any> request.json())
|
||||
.do(res => {
|
||||
this._cache.set(key, res);
|
||||
});
|
||||
.map(request => <any> request.json());
|
||||
//.do(res => {
|
||||
// this._cache.set(key, res);
|
||||
//});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue