Project

General

Profile

« Previous | Next » 

Revision 47058

Added by Konstantina Galouni over 7 years ago

claimsByToken page: claims displayed as datatables (https://www.npmjs.com/package/angular2-datatable)

View differences:

modules/uoa-services-portal/trunk/portal-2/package.json
53 53 
    "@angularclass/bootloader": "~1.0.1",
54 54 
    "@angularclass/idle-preload": "~1.0.4",
55 55 
    "@types/clipboard": "^1.5.31",
56 
    "angular2-datatable": "^0.6.0",
56 57 
    "angular2-express-engine": "~2.1.0-rc.1",
57 58 
    "angular2-platform-node": "~2.1.0-rc.1",
58 59 
    "angular2-universal": "~2.1.0-rc.1",
modules/uoa-services-portal/trunk/portal-2/src/app/claims/claimsByToken/claimsByToken.service.ts
13 13 
    getClaims(token: string, jwtToken: string):any {
14 14 
        console.info("getClaims in service");
15 15 

  		




  16
  
  
    
        let url = OpenaireProperties.getClaimsAPIURL()+"projects/corda__h2020::94c962e736df90a5075a7f660ba3d7f6/claims"


  		




  17
  
  
    
                    +"?&token="+jwtToken;


  		




  
  16
  
    
        let url = OpenaireProperties.getClaimsAPIURL()+"project/claims?token="+jwtToken+"&projectToken="+token;


  		




  
  17
  
    

  		




  18
  18
  
    
        let key = url;


  		




  19
  
  
    
        if (this._cache.has(key)) {


  		




  20
  
  
    
          return Observable.of(this._cache.get(key));


  		




  21
  
  
    
        }


  		




  
  19
  
    
        //if (this._cache.has(key)) {


  		




  
  20
  
    
        //  return Observable.of(this._cache.get(key));


  		




  
  21
  
    
        //}


  		




  22
  22
  
    
        return this.http.get(url)


  		




  23
  23
  
    
                    //.map(res => <any> res.text())


  		




  24
  
  
    
                    .map(request => <any> request.json())


  		




  25
  
  
    
                    .do(res => {


  		




  26
  
  
    
                      this._cache.set(key, res);


  		




  27
  
  
    
                    });


  		




  
  24
  
    
                    .map(request => <any> request.json());


  		




  
  25
  
    
                    //.do(res => {


  		




  
  26
  
    
                    //  this._cache.set(key, res);


  		




  
  27
  
    
                    //});


  		




  28
  28
  
    
    }


  		




  29
  29
  
    

  		




  30
  30
  
    

  		












  

    
      modules/uoa-services-portal/trunk/portal-2/src/app/claims/claimsByToken/claimsByToken.component.ts
    
  





  15
  15
  
    
    selector: 'claims-project-manager',


  		




  16
  16
  
    
    template: `


  		




  17
  17
  
    

  		




  18
  
  
    
      <!--div class="page-header">


  		




  19
  
  
    
          <h1> Claims Manager </h1>


  		




  20
  
  
    
      </div-->


  		




  21
  
  
    

  		




  22
  18
  
    
      <!--div *ngIf="accessStatus=='empty'" class="uk-margin-top uk-width-medium-2-3 uk-container-center">


  		




  23
  19
  
    
        <div class="uk-block uk-block-primary uk-block-large uk-contrast uk-text-center">


  		




  24
  20
  
    
          <p class="uk-text-large">Please enter your email and then press 'See Claims' button.</p>


  		




  ......




  40
  36
  
    
      </div>


  		




  41
  37
  
    

  		




  42
  38
  
    
      <div *ngIf="accessStatus=='valid'">


  		




  43
  
  
    
        <h1> Pending Claims for project:


  		




  
  39
  
    
        <h1 class="page-header">


  		




  44
  40
  
    
          <a [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])"


  		




  45
  41
  
    
              routerLinkActive="router-link-active"


  		




  46
  42
  
    
              routerLink="/search/project" >


  		




  47
  43
  
    
                {{project['name']}} ({{project['funderName']}})


  		




  48
  44
  
    
          </a>


  		




  49
  
  
    
         </h1>


  		




  
  45
  
    
        </h1>


  		




  
  46
  
    
        <h2> Pending Claims</h2>


  		




  50
  47
  
    

  		




  51
  48
  
    
        <div *ngIf=" pending_claims && pending_claims.length == 0" >


  		




  52
  49
  
    
          <div class = "uk-alert uk-alert-info " >No pending claims found.</div>


  		




  53
  50
  
    
        </div>


  		




  54
  51
  
    

  		




  55
  52
  
    
        <div class="uk-overflow-container">


  		




  56
  
  
    
        <table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped">


  		




  
  53
  
    
        <!--table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped">


  		




  57
  54
  
    
          <thead>


  		




  58
  55
  
    
             <tr>


  		




  59
  56
  
    
                <th>Research Result</th>


  		




  60
  
  
    
                <!--th>Link to</th-->


  		




  61
  57
  
    
                <th class="uk-text-center">Claimed by</th>


  		




  62
  58
  
    
                <th class="uk-text-center">Claimed Date</th>


  		




  63
  59
  
    
                <th class="uk-text-center">Approve</th>


  		




  ......




  69
  65
  
    
                <td class="uk-width-1-6 uk-text-center" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>


  		




  70
  66
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>


  		




  71
  67
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.date}}</td>


  		




  72
  
  
    
                <!--td>


  		




  73
  
  
    
                  <label>


  		




  74
  
  
    
                   Yes <input [id]="claim.id" type="checkbox" (click)="selectApprove(claim.id,$event)"  [ngModel]="isSelectedRight(claim.id)"/>


  		




  
  68
  
    
                <td class="uk-width-1-6 uk-text-center">


  		




  
  69
  
    

  		




  
  70
  
    
                 <label>


  		




  
  71
  
    
                    Yes <input [id]="claim.id" type="checkbox" (click)="selectApprove(claim.id,$event)"  [ngModel]="isSelectedRight(claim.id)"/>


  		




  75
  72
  
    
                  </label>


  		




  76
  73
  
    
                  <label>


  		




  77
  
  
    
                    No <input [id]="claim.id" type="checkbox" (click)="selectDisapprove(claim.id,$event)"  [ngModel]="isSelectedWrong(claim.id)"/>


  		




  
  74
  
    
                    No  <input [id]="claim.id" type="checkbox" (click)="selectDisapprove(claim.id,$event)"  [ngModel]="isSelectedWrong(claim.id)"/>


  		




  78
  75
  
    
                  </label>


  		




  79
  
  
    
                </td-->


  		




  
  76
  
    
                </td>


  		




  
  77
  
    
              </tr>


  		




  
  78
  
    
          </tbody>


  		




  
  79
  
    
        </table-->


  		




  
  80
  
    

  		




  
  81
  
    
        <table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped"


  		




  
  82
  
    
                [mfData]="pending_claims" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1"


  		




  
  83
  
    
                [(mfSortBy)]="sortByClaimDate" [(mfSortOrder)]="sortOrder">


  		




  
  84
  
    
          <thead>


  		




  
  85
  
    
             <tr>


  		




  
  86
  
    
                <th><mfDefaultSorter [by]="sortByTitle">Research Result</mfDefaultSorter></th>


  		




  
  87
  
    
                <th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed By</mfDefaultSorter></th>


  		




  
  88
  
    
                <th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate">Claimed Date</mfDefaultSorter></th>


  		




  
  89
  
    
                <th class="uk-text-center">Approve</th>


  		




  
  90
  
    
             </tr>


  		




  
  91
  
    
          </thead>


  		




  
  92
  
    
          <tbody>


  		




  
  93
  
    
              <tr class="uk-table-middle" *ngFor="let claim of mf.data">


  		




  
  94
  
    
                <td  class="uk-width-2-6" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" > </claim-entity></td>


  		




  
  95
  
    
                <td class="uk-width-1-6 uk-text-center" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>


  		




  
  96
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>


  		




  
  97
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.date}}</td>


  		




  80
  98
  
    
                <td class="uk-width-1-6 uk-text-center">


  		




  81
  99
  
    

  		




  82
  100
  
    
                 <label>


  		




  ......




  88
  106
  
    
                </td>


  		




  89
  107
  
    
              </tr>


  		




  90
  108
  
    
          </tbody>


  		




  
  109
  
    
          <tfoot>


  		




  
  110
  
    
            <tr>


  		




  
  111
  
    
              <td>


  		




  
  112
  
    
                <!--mfBootstrapPaginator></mfBootstrapPaginator-->


  		




  
  113
  
    
              </td>


  		




  
  114
  
    
              <td></td>


  		




  
  115
  
    
              <td></td>


  		




  
  116
  
    
              <td>


  		




  
  117
  
    
                <paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf, $event)"></paging-no-load>


  		




  
  118
  
    
              </td>


  		




  
  119
  
    
            </tr>


  		




  
  120
  
    
          </tfoot>


  		




  91
  121
  
    
        </table>


  		




  
  122
  
    
        </div>


  		




  92
  123
  
    

  		




  93
  
  
    
        <h1> Already Curated Claims </h1>


  		




  
  124
  
    
        <h2> Already Curated Claims</h2>


  		




  94
  125
  
    

  		




  95
  126
  
    
        <div *ngIf=" curated_claims && curated_claims.length == 0" >


  		




  96
  127
  
    
          <div class = "uk-alert uk-alert-info " >No curated claims found.</div>


  		




  97
  128
  
    
        </div>


  		




  98
  129
  
    

  		




  99
  130
  
    
        <div class="uk-overflow-container">


  		




  100
  
  
    
        <table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped">


  		




  
  131
  
    
        <!--table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped">


  		




  101
  132
  
    
          <thead>


  		




  102
  133
  
    
             <tr>


  		




  103
  134
  
    
                <th>Research Result</th>


  		




  104
  
  
    
                <!--th>Link to</th-->


  		




  105
  135
  
    
                <th class="uk-text-center">Claimed by</th>


  		




  106
  136
  
    
                <th class="uk-text-center">Claimed Date</th>


  		




  107
  137
  
    
                <th class="uk-text-center">Curated by</th>


  		




  ......




  126
  156
  
    
                  <label>


  		




  127
  157
  
    
                    No  <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isWrong(claim)"/>


  		




  128
  158
  
    
                  </label>


  		




  
  159
  
    
                </td>


  		




  
  160
  
    
              </tr>


  		




  
  161
  
    
          </tbody>


  		




  
  162
  
    
        </table-->


  		




  129
  163
  
    

  		




  
  164
  
    
        <table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped"


  		




  
  165
  
    
                      [mfData]="curated_claims" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1"


  		




  
  166
  
    
                      [(mfSortBy)]="sortByCurationDate" [(mfSortOrder)]="sortOrder">


  		




  
  167
  
    
          <thead>


  		




  
  168
  
    
             <tr>


  		




  
  169
  
    
                <th><mfDefaultSorter [by]="sortByTitle">Research Result</mfDefaultSorter></th>


  		




  
  170
  
    
                <!--th>Link to</th-->


  		




  
  171
  
    
                <th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed by</mfDefaultSorter></th>


  		




  
  172
  
    
                <th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate">Claimed Date</mfDefaultSorter></th>


  		




  
  173
  
    
                <th class="uk-text-center"><mfDefaultSorter by="curatedBy">Curated by</mfDefaultSorter></th>


  		




  
  174
  
    
                <th class="uk-text-center"><mfDefaultSorter [by]="sortByCurationDate">Curation Date</mfDefaultSorter></th>


  		




  
  175
  
    
                <th class="uk-text-center">Approved</th>


  		




  
  176
  
    
             </tr>


  		




  
  177
  
    
          </thead>


  		




  
  178
  
    
          <tbody>


  		




  
  179
  
    
              <tr class="uk-table-middle" *ngFor="let claim of mf.data let i=index">


  		




  
  180
  
    
                <td class="uk-width-1-6" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" > </claim-entity></td>


  		




  
  181
  
    
                <td class="uk-width-1-6" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" > </claim-entity></td>


  		




  
  182
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.userMail}}</td>


  		




  
  183
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.date}}</td>


  		




  
  184
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.curatedBy}}</td>


  		




  
  185
  
    
                <td class="uk-width-1-6 uk-text-center">{{claim.curationDate}}</td>


  		




  
  186
  
    
                <td class="uk-width-1-6 uk-text-center">


  		




  
  187
  
    

  		




  
  188
  
    
                 <label>


  		




  
  189
  
    
                    Yes <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isRight(claim)"/>


  		




  
  190
  
    
                  </label>


  		




  
  191
  
    

  		




  
  192
  
    
                  <label>


  		




  
  193
  
    
                    No  <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isWrong(claim)"/>


  		




  
  194
  
    
                  </label>


  		




  
  195
  
    

  		




  130
  196
  
    
                </td>


  		




  131
  197
  
    
                <!--td><input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" (click)="selectDisapprove(claim.id,$event)"  [ngModel]="isWrong(claim)"/></td-->


  		




  132
  198
  
    
                <!--td><button class="uk-button" (click)="editable.add(i)">Edit</button></td-->


  		




  133
  199
  
    
              </tr>


  		




  134
  200
  
    
          </tbody>


  		




  
  201
  
    
            <tfoot>


  		




  
  202
  
    
              <tr>


  		




  
  203
  
    
                <td>


  		




  
  204
  
    
                  <!--mfBootstrapPaginator></mfBootstrapPaginator-->


  		




  
  205
  
    
                </td>


  		




  
  206
  
    
                <td></td>


  		




  
  207
  
    
                <td></td>


  		




  
  208
  
    
                <td></td>


  		




  
  209
  
    
                <td></td>


  		




  
  210
  
    
                <td>


  		




  
  211
  
    
                  <paging-no-load [currentPage]="1" [totalResults]="curated_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf, $event)"> </paging-no-load>


  		




  
  212
  
    
                </td>


  		




  
  213
  
    
              </tr>


  		




  
  214
  
    
            </tfoot>


  		




  135
  215
  
    
        </table>


  		




  136
  216
  
    

  		




  
  217
  
    
        </div>


  		




  137
  218
  
    

  		




  138
  219
  
    
        <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>


  		




  139
  220
  
    
        <button class="uk-button uk-button-success uk-float-right" type="button" (click)="saveChanges()">Save Changes</button>


  		




  ......




  160
  241
  
    
  // when 'empty' show form to fill email, when 'valid' show proper claims, when 'invalid' show no matched entry-wanna retry


  		




  161
  242
  
    
  public accessStatus: string;// = "empty";


  		




  162
  243
  
    

  		




  
  244
  
    
  public rowsOnPage = 5;


  		




  
  245
  
    
  public sortOrder = "desc";


  		




  
  246
  
    

  		




  
  247
  
    

  		




  163
  248
  
    
  @ViewChild (ModalSelect) selectModal : ModalSelect;


  		




  164
  249
  
    
  @ViewChild (ModalLoading) loading : ModalLoading ;


  		




  165
  250
  
    

  		




  ......




  182
  267
  
    
    );


  		




  183
  268
  
    
  }


  		




  184
  269
  
    

  		




  
  270
  
    
refreshTable(mf:any, $event:any) {


  		




  
  271
  
    
  mf.mfActivePage=$event.value;


  		




  
  272
  
    
  mf.setPage(mf.mfActivePage, this.rowsOnPage);


  		




  
  273
  
    
}


  		




  
  274
  
    

  		




  
  275
  
    
public sortByClaimDate = (claim: any) => {


  		




  
  276
  
    
  return new Date(claim.date);


  		




  
  277
  
    
}


  		




  
  278
  
    

  		




  
  279
  
    
public sortByCurationDate = (claim: any) => {


  		




  
  280
  
    
  return new Date(claim.curationDate);


  		




  
  281
  
    
}


  		




  
  282
  
    

  		




  
  283
  
    
public sortByTitle = (claim: any) => {


  		




  
  284
  
    
  if(claim.targetType != 'project') {


  		




  
  285
  
    
    return claim.target.title;


  		




  
  286
  
    
  } else {


  		




  
  287
  
    
    return claim.source.title;


  		




  
  288
  
    
  }


  		




  
  289
  
    
}


  		




  
  290
  
    

  		




  185
  291
  
    
  validateJWTandToken() {


  		




  186
  292
  
    
    var jwtToken=Session.getUserJwt();


  		




  187
  293
  
    
    if(this.token) {


  		












  

    
      modules/uoa-services-portal/trunk/portal-2/src/app/claims/claimsByToken/claimsByToken.module.ts
    
  





  1
  1
  
    
import { NgModule } from '@angular/core';


  		




  2
  2
  
    
import { RouterModule } from '@angular/router';


  		




  3
  3
  
    

  		




  
  4
  
    
import {DataTableModule} from "angular2-datatable";


  		




  
  5
  
    

  		




  4
  6
  
    
import { SharedModule } from '../../shared/shared.module';


  		




  5
  7
  
    
import { ClaimsByTokenComponent } from './claimsByToken.component';


  		




  6
  8
  
    
import { ClaimsByTokenService } from './claimsByToken.service';


  		




  ......




  13
  15
  
    

  		




  14
  16
  
    
import {LoginGuard} from'../../login/loginGuard.guard';


  		




  15
  17
  
    

  		




  
  18
  
    
import {PagingModule} from '../../utils/paging.module';


  		




  
  19
  
    

  		




  16
  20
  
    
@NgModule({


  		




  17
  21
  
    
  imports: [


  		




  18
  22
  
    
    RouterModule,


  		




  
  23
  
    
    DataTableModule,


  		




  19
  24
  
    
    SharedModule,


  		




  20
  25
  
    
    ClaimsByTokenRoutingModule,


  		




  21
  26
  
    
    ClaimEntityFormatterModule,


  		




  22
  27
  
    
    SelectModalModule,


  		




  23
  
  
    
    LoadingModalModule


  		




  
  28
  
    
    LoadingModalModule,


  		




  
  29
  
    
    PagingModule


  		




  24
  30
  
    
    // ClaimServiceModule,


  		




  25
  31
  
    
    //DisplayClaimsModule


  		




  26
  32
  
    

  		












Also available in:  Unified diff