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
2017-05-04 13:36:41 +00:00 · 2017-05-04 13:36:41 +00:00 · e629fffebe
parent 2f431db0b2
commit e629fffebe
4 changed files with 143 additions and 30 deletions
--- a/portal-2/package.json
+++ b/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",
--- a/portal-2/src/app/claims/claimsByToken/claimsByToken.component.ts
+++ b/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) {
--- a/portal-2/src/app/claims/claimsByToken/claimsByToken.module.ts
+++ b/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

--- a/portal-2/src/app/claims/claimsByToken/claimsByToken.service.ts
+++ b/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"
-                    +"?&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);
+                    //});
    }