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

portal-2/package.json

@@ -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",

portal-2/src/app/claims/claimsByToken/claimsByToken.component.ts

@@ -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) {

portal-2/src/app/claims/claimsByToken/claimsByToken.module.ts

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

portal-2/src/app/claims/claimsByToken/claimsByToken.service.ts

@@ -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"
+        let url = OpenaireProperties.getClaimsAPIURL()+"project/claims?token="+jwtToken+"&projectToken="+token;
-                    +"?&token="+jwtToken;
+
         let key = url;
-        if (this._cache.has(key)) {
+        //if (this._cache.has(key)) {
-          return Observable.of(this._cache.get(key));
+        //  return Observable.of(this._cache.get(key));
-        }
+        //}
         return this.http.get(url)
                     //.map(res => <any> res.text())
-                    .map(request => <any> request.json())
+                    .map(request => <any> request.json());
-                    .do(res => {
+                    //.do(res => {
-                      this._cache.set(key, res);
+                    //  this._cache.set(key, res);
-                    });
+                    //});
     }