1. errorCodes.ts - errorMessages.component.ts: add code 'NOT_SAVED' and appropriate message when a save/update query fails.

2. Fix datatables of claimsByToken.component.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@52622 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2018-06-29 13:24:49 +00:00
parent 66a4a8e457
commit a180be6167
6 changed files with 513 additions and 220 deletions

View File

@ -2,161 +2,176 @@
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container">
<!--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>
<form class="uk-form">
<fieldset data-uk-margin>
<input type="text" placeholder="example@email.com" name="email" [(ngModel)]="email">
<button (click)="validateJWTandToken()" class=" uk-button uk-button-default">See Claims</button>
</fieldset>
</form>
</div>
</div-->
<div *ngIf="accessStatus=='invalid'" 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">Oops! There is no entry for you! Please retry with another email or for another project.</p-->
<!--button (click)="accessStatus='empty'" class=" uk-button uk-button-default">Retry</button-->
<p class="uk-text-large">Oops! Your email does not give you the authority to view claims for the selected project. Please contact the administrators.</p>
</div>
</div>
<div *ngIf="accessStatus=='valid'">
<div class="uk-article-title custom-article-title">
Claims Administrator
<a [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])"
routerLinkActive="router-link-active"
routerLink="/search/project" >
{{project['name']}} ({{project['funderName']}})
</a>
<div class="uk-article-title custom-article-title">
Claims Administrator
<a [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])"
routerLinkActive="router-link-active"
routerLink="/search/project" >
{{project['name']}} ({{project['funderName']}})
</a>
</div>
<h2> Pending Claims</h2>
<ul class="uk-margin-large-top" uk-tab="connect: #tab-content">
<li [class]="mode == 'pending' ? 'uk-active' : ''" (click)="mode='pending'"><a>Pending Claims</a></li>
<li [class]="mode == 'curated' ? 'uk-active' : ''" (click)="mode='curated'"><a>Curated Claims</a></li>
</ul>
<ul class="uk-switcher uk-margin"><!-- uk-switcher="connect: #tab-content"-->
<li [class]="mode == 'pending' ? 'uk-active' : ''" (click)="mode='pending'">
<h2>Pending Claims</h2>
<!-- <div *ngIf=" pending_claims && pending_claims.length == 0" >
<div class = "uk-alert uk-alert-primary " >No pending claims found.</div>
</div> -->
<errorMessages [status]="[pending_status]" [type]="'pending claims'"></errorMessages>
<div *ngIf=" pending_claims && pending_claims.length == 0" >
<div class = "uk-alert uk-alert-primary " >No pending claims found.</div>
</div>
<div class="uk-overflow-container custom-dataTable-content">
<div class="uk-overflow-container custom-dataTable-content">
<div class="uk-alert-warning" uk-alert>Note that claims you do not select (approve or disapprove) are considered as approved (but not curated)</div>
<div class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
<form class="uk-text-center uk-panel">
<input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="filterQuery" name="keyword" />
</form>
</div>
<div class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
<form class="uk-text-center uk-panel">
<input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="keyword1" name="keyword" />
<button (click)="refreshTable(1, 'pending')" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
</span>Search
</button>
</form>
</div>
<span *ngIf="pending_claims && pending_claims.length > 0 && totalPendingResults.count > 0">
{{totalPendingResults.count | number}} pending claims, page {{activePendingPage.page | number}} of {{totalPages(totalPendingResults.count) | number}}
<paging-no-load class="uk-float-right" [currentPage]="activePendingPage.page" [totalResults]="totalPendingResults.count" [size]="rowsOnPage" (pageChange)="refreshTable(table1, $event, 'pending')"></paging-no-load>
</span>
<table #filtered1 *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped">
<!--[mfData]="pending_claims | claimsDatatable : [filterQuery, totalPendingResults, activePendingPage]" #mf1="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1"-->
<!--[(mfSortBy)]="sortByClaimDate1" (mfSortOrder)="sortOrder"-->
<thead>
<tr>
<th> Research Result </th>
<th class="uk-text-center">Claimed By </th>
<th class="uk-text-center">Claimed Date </th>
<th class="uk-text-center">Approve</th>
</tr>
</thead>
<tbody>
<tr class="uk-table-middle" *ngFor="let claim1 of mf1.data">
<td class="uk-width-2-5" *ngIf="claim1.targetType != 'project'"><claim-entity [entity]="claim1.target" [type]="claim1.targetType" [(properties)]=properties> </claim-entity></td>
<td class="uk-width-2-5 uk-text-center" *ngIf="claim1.sourceType != 'project'"><claim-entity [entity]="claim1.source" [type]="claim1.sourceType" [(properties)]=properties> </claim-entity></td>
<td class="uk-width-1-5 uk-text-center">{{claim1.userMail}}</td>
<td class="uk-width-1-5 uk-text-center">{{claim1.date}}</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngIf="pending_claims && pending_claims.length > 0 && totalPendingResults.count > 0">
{{totalPendingResults.count | number}} pending claims, page {{activePendingPage.page | number}} of {{totalPages(totalPendingResults.count) | number}}
<paging-no-load class="uk-float-right" [currentPage]="activePendingPage.page" [totalResults]="totalPendingResults.count" [size]="rowsOnPage" (pageChange)="refreshTable($event.value, 'pending')"></paging-no-load>
</span>
<!-- *ngIf="showTables" -->
<table #table1 datatable class="uk-table uk-table-striped divider-table" [dtOptions]="dtOptions[0]" [dtTrigger]="dtTrigger[0]" dtInstance="dtInstanceCallback" id="table1">
<thead>
<tr>
<th> Research Result </th>
<th class="uk-text-center">Claimed By </th>
<th class="uk-text-center">Claimed Date </th>
<th class="uk-text-center">Approve</th>
</tr>
</thead>
<tbody>
<tr class="uk-table-middle" *ngFor="let claim of pending_claims">
<td class="uk-width-2-5" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" [(properties)]=properties> </claim-entity></td>
<td class="uk-width-2-5 uk-text-center" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" [(properties)]=properties> </claim-entity></td>
<td class="uk-width-1-5 uk-text-center">{{claim.userMail}}</td>
<td class="uk-width-1-5 uk-text-center">{{claim.date}}</td>
<td class="uk-width-1-5 uk-text-center">
<label>
Yes <input [id]="claim1.id" type="checkbox" (click)="selectApprove(claim1.id,$event)" [ngModel]="isSelectedRight(claim1.id)"/>
</label>
<label>
No <input [id]="claim1.id" type="checkbox" (click)="selectDisapprove(claim1.id,$event)" [ngModel]="isSelectedWrong(claim1.id)"/>
</label>
</td>
</tr>
</tbody>
</table>
</div>
<label>
Yes <input [id]="claim.id" type="checkbox" (click)="selectApprove(claim.id,$event,'pending')" [ngModel]="isSelected(claim.id, selectedRight_PendingMode)"/>
</label>
<label>
No <input [id]="claim.id" type="checkbox" (click)="selectDisapprove(claim.id,$event,'pending')" [ngModel]="isSelected(claim.id, selectedWrong_PendingMode)"/>
</label>
</td>
</tr>
</tbody>
</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-primary uk-float-right" type="submit" (click)="saveChanges()">Save Changes</button>
<div class="uk-alert-primary" uk-alert>
You have selected <span class="uk-badge">{{(selectedWrong_PendingMode.size+selectedRight_PendingMode.size)}}</span> claims to curate
</div>
<div class="uk-float-right">
<button (click)="clearCheckboxes()" [class]="((selectedWrong_PendingMode.size+selectedRight_PendingMode.size) == 0) ? 'uk-button uk-disabled' : 'uk-button'">Reset</button>
<h2> Already Curated Claims</h2>
<span title="Approve or dissaprove at least one claim"
[attr.uk-tooltip]="((selectedWrong_PendingMode.size+selectedRight_PendingMode.size) == 0) ? 'pos:right; cls: uk-active' : 'cls: uk-invisible'">
<button [class]="((selectedWrong_PendingMode.size+selectedRight_PendingMode.size) == 0) ? 'uk-disabled uk-button uk-button-primary' : 'uk-button uk-button-primary'"
type="submit" (click)="saveChanges()">
<!-- <button class="uk-button uk-button-primary" type="submit" (click)="saveChanges()"> -->
Save Changes
</button>
</span>
</div>
</li>
<li [class]="mode == 'curated' ? 'uk-active' : ''" (click)="mode='curated'">
<h2>Curated Claims</h2>
<div *ngIf=" curated_claims && curated_claims.length == 0" >
<div class = "uk-alert uk-alert-primary " >No curated claims found.</div>
</div>
<!-- <div *ngIf=" curated_claims && curated_claims.length == 0" >
<div class = "uk-alert uk-alert-primary " >No curated claims found.</div>
</div> -->
<div class="uk-overflow-container custom-dataTable-content">
<errorMessages [status]="[curated_status]" [type]="'curated claims'"></errorMessages>
<div class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
<form class="uk-text-center uk-panel">
<input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="filterQuery2" name="keyword" />
</form>
</div>
<div class="uk-overflow-container custom-dataTable-content">
<span *ngIf="curated_claims && curated_claims.length > 0 && totalCuratedResults.count > 0">
{{totalCuratedResults.count | number}} curated claims, page {{activeCuratedPage.page | number}} of {{totalPages(totalCuratedResults.count) | number}}
<paging-no-load class="uk-float-right" [currentPage]="activeCuratedPage.page" [totalResults]="totalCuratedResults.count" [size]="rowsOnPage" (pageChange)="refreshTable(table2, $event, 'curated')"> </paging-no-load>
</span>
<div class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
<form class="uk-text-center uk-panel">
<input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="keyword2" name="keyword" />
<button (click)="refreshTable(1, 'curated')" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
</span>Search
</button>
</form>
</div>
<table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped" >
<!--[mfData]="curated_claims | claimsDatatable : [filterQuery2, totalCuratedResults, activeCuratedPage]" #mf2="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1"-->
<!--[(mfSortBy)]="sortByCurationDate2" [(mfSortOrder)]="sortOrder"-->
<thead>
<!--tr>
<td colspan="6">
<form class="uk-text-center uk-panel uk-background-muted">
<input type="text" class="uk-input uk-width-1-3" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="filterQuery2" name="keyword" />
</form>
</td>
</tr-->
<!--tr>
<td>
Filter curated claims:
<input class="uk-input uk-width-1-3" [(ngModel)]="filterQuery2"/>
</td>
</tr-->
<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>
<th class="uk-text-center">Curation Date </th>
<th class="uk-text-center">Approved</th>
</tr>
</thead>
<tbody>
<tr class="uk-table-middle" *ngFor="let claim of mf2.data let i=index">
<td class="uk-width-1-6" *ngIf="claim.targetType != 'project'"><claim-entity [entity]="claim.target" [type]="claim.targetType" [(properties)]=properties> </claim-entity></td>
<td class="uk-width-1-6" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" [(properties)]=properties> </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">
<span *ngIf="curated_claims && curated_claims.length > 0 && totalCuratedResults.count > 0">
{{totalCuratedResults.count | number}} curated claims, page {{activeCuratedPage.page | number}} of {{totalPages(totalCuratedResults.count) | number}}
<paging-no-load class="uk-float-right" [currentPage]="activeCuratedPage.page" [totalResults]="totalCuratedResults.count" [size]="rowsOnPage" (pageChange)="refreshTable($event.value, 'curated')"> </paging-no-load>
</span>
<label>
Yes <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isRight(claim)"/>
</label>
<!-- [dtTrigger]="dtTrigger2" dtInstance="dtInstanceCallback" -->
<!-- *ngIf="showTables" -->
<table #table2 datatable class="uk-table uk-table-striped divider-table" [dtOptions]="dtOptions[1]" [dtTrigger]="dtTrigger[1]" dtInstance="dtInstanceCallback" id="table2">
<thead>
<tr>
<th>Research Result</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>
<th class="uk-text-center">Curation Date </th>
<th class="uk-text-center">Approved</th>
<th class="uk-text-center">Actions</th>
</tr>
</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" [(properties)]=properties> </claim-entity></td>
<td class="uk-width-1-6" *ngIf="claim.sourceType != 'project'"><claim-entity [entity]="claim.source" [type]="claim.sourceType" [(properties)]=properties> </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 uk-form-controls">
<label [class]="!editable.has(i) ? 'uk-disabled' : ''">
Yes <input [id]="claim.id" class="uk-radio" type="radio" [disabled]="!editable.has(i)" [checked]="isRight_CuratedMode(claim)" (click)="selectApprove(claim.id,$event,'curated')"/>
</label>
<label>
No <input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" [ngModel]="isWrong(claim)"/>
</label>
<label [class]="!editable.has(i) ? 'uk-disabled' : ''">
No <input [id]="claim.id" class="uk-radio" type="radio" [disabled]="!editable.has(i)" [checked]="isWrong_CuratedMode(claim)" (click)="selectDisapprove(claim.id,$event,'curated')"/>
</label>
</td>
<!--td><input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" (click)="selectDisapprove(claim.id,$event)" [ngModel]="isWrong(claim)"/></td-->
<!--td><button class="uk-button" (click)="editable.add(i)">Edit</button></td-->
</tr>
</tbody>
</table>
</div>
</td>
<!-- <td><input [id]="claim.id" type="checkbox" [disabled]="!editable.has(i)" (click)="selectDisapprove(claim.id,$event)" [ngModel]="isWrong(claim)"/></td> -->
<td class="uk-text-center">
<span *ngIf="!editable.has(i)"><button class="uk-button" (click)="editable.add(i)">Edit</button></span>
<!-- class="uk-button-group" -->
<span *ngIf="editable.has(i)">
<!-- [disabled]="!selectedRight_CuratedMode.has(claim.id) && !selectedWrong_CuratedMode.has(claim.id)" -->
<button class="uk-width-1-1 uk-button uk-button-primary uk-button-small" type="submit" (click)="saveEdited(claim, i)">Save</button>
<button class="uk-width-1-1 uk-button uk-button-small" (click)="editable.delete(i); cancelEditOfCuration(claim)">Cancel</button>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
<!--modal-select (alertOutput)="curatorSelected($event)"></modal-select-->
<modal-loading [message]= "'Loading...'"></modal-loading>
</div>

View File

@ -1,12 +1,14 @@
import {Component, ViewChild, Input} from '@angular/core';
import {Component, ViewChild, ViewChildren, QueryList, Input, ViewEncapsulation} from '@angular/core';
import {Location} from '@angular/common';
import {ActivatedRoute, Params} from '@angular/router';
import {Title, Meta} from '@angular/platform-browser';
import {DataTableDirective} from 'angular-datatables';
import {Observable} from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import{EnvProperties} from '../../utils/properties/env-properties';
import {ErrorCodes} from '../../utils/properties/errorCodes';
import {ClaimsDatatablePipe} from '../../utils/pipes/claimsDatatable.pipe';
@ -20,7 +22,15 @@ import {ClaimsByTokenService} from './claimsByToken.service';
@Component({
selector: 'claims-project-manager',
templateUrl: 'claimsByToken.component.html'
templateUrl: 'claimsByToken.component.html',
styles: [`
#table1_info, #table1_paginate, #table1_length, #table1_filter,
#table2_info, #table2_paginate, #table2_length, #table2_filter{
display: none;
}
`],
encapsulation: ViewEncapsulation.None // this used in order styles to work
})
export class ClaimsByTokenComponent {
@ -30,29 +40,40 @@ export class ClaimsByTokenComponent {
private claims:any = [];
public pending_claims: any = [];
public curated_claims: any = [];
public selectedRight: Set<string>;
public selectedWrong: Set<string>;
public editable: Set<string>;
public selectedRight_PendingMode: Set<string>;
public selectedWrong_PendingMode: Set<string>;
public selectedRight_CuratedMode: Set<string>;
public selectedWrong_CuratedMode: Set<string>;
public editable: Set<number>;
public contact_person: string[] = ["Konstantina", "Argiro", "Katerina"];
private errorCodes: ErrorCodes;
public pending_status: number;
public curated_status: number;
// when 'valid' show proper claims, when 'invalid' show no matched entry-wanna retry
public accessStatus: string;// = "empty";
public mode: string = "pending";
public showTables: boolean = true;
public rowsOnPage = 5;
public sortOrder = "asc";
public filterQuery:string = "";
public filterQuery2:string = "";
public keyword1:string = "";
public keyword2:string = "";
public activePendingPage:any = {page: 1};
public totalPendingResults:any = {count: 0};
public activeCuratedPage:any = {page: 1};
public totalCuratedResults:any = {count: 0};
dtTrigger: Subject<any>[] = [];
private triggered: boolean = false;
@ViewChild('mf1') table1: any;//DataTable;
@ViewChild('mf2') table2: any;//DataTable;
@ViewChild('filtered1') filteredItems1;
dtOptions: DataTables.Settings[] = [];
@ViewChildren(DataTableDirective)
dtElements: QueryList<any>;
//@ViewChild("table1") table1: DataTableDirective;
//@ViewChild("table2") table2: DataTableDirective;
@ViewChild (ModalSelect) selectModal : ModalSelect;
@ViewChild (ModalLoading) loading : ModalLoading ;
@ -64,7 +85,9 @@ export class ClaimsByTokenComponent {
constructor (private route: ActivatedRoute,
private claimsByTokenService: ClaimsByTokenService,
private _meta: Meta, private _title: Title) {
this.errorCodes = new ErrorCodes();
this.pending_status = this.errorCodes.LOADING;
this.curated_status = this.errorCodes.LOADING;
}
ngOnInit() {
this.route.data
@ -73,69 +96,179 @@ export class ClaimsByTokenComponent {
});
this.sub = this.route.queryParams.subscribe(params => {
this.mode = "pending";
this.token = params['token'];
this.selectedRight = new Set<string>();
this.selectedWrong = new Set<string>();
this.editable = new Set<string>();
//this.openSelect();
//this.setMessageSelect("Please select your identity:");
//this.setOptionsSelect(this.contact_person);
this.selectedRight_PendingMode = new Set<string>();
this.selectedWrong_PendingMode = new Set<string>();
this.selectedRight_CuratedMode = new Set<string>();
this.selectedWrong_CuratedMode = new Set<string>();
this.editable = new Set<number>();
this.validateJWTandToken();
this.updateTitle("Claims For Project Managers");
}
);
this.dtOptions[0] = {
//"paging": false,
//"searching": false,
//"lengthChange": false,
"pageLength": this.rowsOnPage,
"columnDefs": [ {
"type": "date",
"targets": 2
} ],
"order": [[ 2, 'desc' ]]
//"pagingType": 'full_numbers',
/*"language": {
"search": "",
"searchPlaceholder": "Search projects..."
}*/
};
console.info("configure dtOptions1: ",this.dtOptions[0]);
this.dtOptions[1] = {
"pageLength": this.rowsOnPage,
"columnDefs": [ {
"type": "date",
"targets": [2,4]
} ],
"order": [[ 4, 'desc' ]]
};
console.info("configure dtOptions2: ",this.dtOptions[1]);
this.dtTrigger[0] = new Subject<any>();
this.dtTrigger[1] = new Subject<any>();
}
refreshTable(table:any, $event:any, whichTable: string) {
ngAfterViewInit(): void {
$.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {
if(settings.sTableId == 'table1') {
if (this.filterData(data, this.keyword1)) {
return true;
}
return false;
} else if(settings.sTableId == 'table2') {
if (this.filterData(data, this.keyword2)) {
return true;
}
return false;
}
});
}
ngOnDestroy(): void {
$.fn['dataTable'].ext.search.pop();
// Do not forget to unsubscribe the event
this.dtTrigger[0].unsubscribe();
this.dtTrigger[1].unsubscribe();
}
/*
Trigger a table draw in order to get the initial filtering
*/
triggerInitialLoad(){
this.triggered = true;
console.info("triggerInitialLoad");
setTimeout(function(){
/*var table1 = <any>$('#table1').DataTable();
table1.page( 0 ).draw( false );
var table2 = <any>$('#table2').DataTable();
table2.page( 0 ).draw( false );*/
}, 500);
setTimeout(() => {
this.dtTrigger[0].next();
this.dtTrigger[1].next();
});
}
rerender(): void {
console.info("RERENDER");
this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {
dtElement.dtInstance.then((dtInstance: any) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger[index].next();
});
});
}
filterData(row: any, query: string) {
let returnValue: boolean = false;
if(query) {
for(var i=0; i <3; i++){
var r= this.filterQuery(row[i], query);
if(r) {
returnValue = true;
break;
}
}
if(!returnValue) {
return false;
}
}
return true;
}
filterQuery(data, query){
if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){
return true;
}else{
return false;
}
}
refreshTable(page:number, whichTable: string) {
if(whichTable == "pending") {
this.activePendingPage.page = $event.value;
var table = $('#table1').DataTable();
table.page( page - 1 ).draw( false );
var info = table.page.info();
console.info("records: "+info.recordsDisplay);
this.activePendingPage.page = page;//$event.value;
this.totalPendingResults.count = info.recordsDisplay;
} else if(whichTable == 'curated') {
this.activeCuratedPage.page = $event.value;
var table = $('#table2').DataTable();
table.page( page - 1 ).draw( false );
var info = table.page.info();
console.info("records: "+info.recordsDisplay);
this.activeCuratedPage.page = page;//$event.value;
this.totalCuratedResults.count = info.recordsDisplay;
}
table.mfActivePage=$event.value;
table.setPage(table.mfActivePage, this.rowsOnPage);
}
public sortByClaimDate1 = (claim: any) => {
return new Date(claim.date);
//table.mfActivePage=$event.value;
//table.setPage(table.mfActivePage, this.rowsOnPage);
}
public sortByCurationDate1 = (claim: any) => {
return new Date(claim.curationDate);
}
public sortByTitle1 = (claim: any) => {
if(claim.targetType != 'project') {
return claim.target.title;
} else {
return claim.source.title;
}
}
public sortByClaimDate2 = (claim: any) => {
return new Date(claim.date);
}
public sortByCurationDate2 = (claim: any) => {
console.info(new Date(claim.curationDate));
return new Date(claim.curationDate);
}
public sortByTitle2= (claim: any) => {
if(claim.targetType != 'project') {
return claim.target.title;
} else {
return claim.source.title;
}
}
validateJWTandToken() {
if(this.token) {
this.pending_status = this.errorCodes.LOADING;
this.curated_status = this.errorCodes.LOADING;
this.showTables = false;
this.pending_claims = [];
this.curated_claims = [];
this.activePendingPage.page = 1;
this.totalPendingResults.count = 0;
this.activeCuratedPage.page = 1;
this.totalCuratedResults.count = 0;
this.claimsByTokenService.getClaims(this.token, this.properties.claimsAPIURL).subscribe(
data => {
this.closeLoading();
//this.closeLoading();
this.accessStatus = "valid";
//console.info(data);
this.claims = data.data;
@ -156,10 +289,52 @@ public sortByTitle2= (claim: any) => {
this.totalCuratedResults.count = this.curated_claims.length;
this.updateTitle("Claims For Project Managers - "+this.project.name);
this.showTables = true;
if(!this.triggered) {
console.info("initial load");
this.triggerInitialLoad();
} else {
console.info("rerender");
var table1 = $('#table1').DataTable();
table1.clear();
var table2 = $('#table2').DataTable();
table2.clear();
this.rerender();
}
this.pending_status = this.errorCodes.DONE;
this.curated_status = this.errorCodes.DONE;
},
err => {
this.accessStatus = "invalid";
console.log(err);
if(err.status == '404') {
this.pending_status = this.errorCodes.NOT_FOUND;
this.curated_status = this.errorCodes.NOT_FOUND;
} else if(err.status == '500') {
this.pending_status = this.errorCodes.ERROR;
this.curated_status = this.errorCodes.ERROR;
} else {
this.pending_status = this.errorCodes.NOT_AVAILABLE;
this.curated_status = this.errorCodes.NOT_AVAILABLE;
}
this.showTables = true;
if(!this.triggered) {
this.triggerInitialLoad();
} else {
var table1 = $('#table1').DataTable();
table1.clear();
var table2 = $('#table2').DataTable();
table2.clear();
this.rerender();
}
this.accessStatus = "invalid";
console.log(err);
}
);
} else {
@ -167,70 +342,150 @@ public sortByTitle2= (claim: any) => {
}
}
selectApprove(id:string, event) {
selectApprove(id:string, event, mode: string) {
var value = event.currentTarget.checked;
if(value){
this.selectedRight.add(id);
this.selectedWrong.delete(id);
console.info(this.selectedRight);
if(mode == "pending") {
this.selectedRight_PendingMode.add(id);
this.selectedWrong_PendingMode.delete(id);
} else {
this.selectedRight_CuratedMode.add(id);
this.selectedWrong_CuratedMode.delete(id);
}
}else{
this.selectedRight.delete(id);
console.info(this.selectedRight);
if(mode == "pending") {
this.selectedRight_PendingMode.delete(id);
}
// } else {
// this.selectedRight_CuratedMode.delete(id);
// this.selectedWrong_CuratedMode.add(id);
// }
}
}
selectDisapprove(id:string,event) {
selectDisapprove(id:string, event, mode: string) {
var value = event.currentTarget.checked;
if(value){
this.selectedWrong.add(id);
this.selectedRight.delete(id);
if(mode == "pending") {
this.selectedWrong_PendingMode.add(id);
this.selectedRight_PendingMode.delete(id);
} else {
this.selectedWrong_CuratedMode.add(id);
this.selectedRight_CuratedMode.delete(id);
}
}else{
this.selectedWrong.delete(id);
if(mode == "pending") {
this.selectedWrong_PendingMode.delete(id);
}
// } else {
// this.selectedWrong_CuratedMode.delete(id);
// this.selectedRight_CuratedMode.add(id);
// }
}
}
isSelectedRight(id:string) {
return this.selectedRight.has(id);
isSelected(id:string, set:Set<string>) {
return set.has(id);
}
/*
isSelectedWrong(id:string) {
return this.selectedWrong.has(id);
}
isRight(claim: any) {
//claim.approved = true;
if(this.isSelectedRight(claim.id)) {
*/
isRight_CuratedMode(claim: any) {
if(this.isSelected(claim.id, this.selectedRight_CuratedMode)) {
return true;
} else if(claim.approved == true && !this.isSelectedWrong(claim.id)) {
} else if(claim.approved == true && !this.isSelected(claim.id, this.selectedWrong_CuratedMode)) {
return true;
}
return false;
}
isWrong(claim: any) {
if(this.isSelectedWrong(claim.id)) {
isWrong_CuratedMode(claim: any) {
if(this.isSelected(claim.id, this.selectedWrong_CuratedMode)) {
return true;
} else if(claim.approved == false && !this.isSelectedRight(claim.id)) {
} else if(claim.approved == false && !this.isSelected(claim.id, this.selectedRight_CuratedMode)) {
return true;
}
return false;
}
cancelEditOfCuration(claim: any) {
console.info("cancelEditOfCuration - approved:"+claim.approved);
if(claim.approved) {
//this.selectedRight_CuratedMode.add(claim.id);
this.selectedWrong_CuratedMode.delete(claim.id);
} else {
this.selectedRight_CuratedMode.delete(claim.id);
//this.selectedWrong_CuratedMode.add(claim.id);
}
}
saveEdited(claim: any, editable_index: number) {
this.curated_status = this.errorCodes.LOADING;
let approved: boolean = this.isRight_CuratedMode(claim);
if(approved == claim.approved) {
this.selectedRight_CuratedMode.delete(claim.id);
this.selectedWrong_CuratedMode.delete(claim.id);
this.editable.delete(editable_index);
this.curated_status = this.errorCodes.DONE;
} else {
let claimCurationInfo: {"id": string, "approved": boolean} = {"id": claim.id, "approved": approved};
this.claimsByTokenService.updateClaimCuration(claimCurationInfo, this.properties.claimsAPIURL).subscribe(
data => {
console.info(data);
this.selectedRight_CuratedMode.delete(claim.id);
this.selectedWrong_CuratedMode.delete(claim.id);
this.editable.delete(editable_index);
this.validateJWTandToken();
},
err => {
console.log(err);
this.curated_status = this.errorCodes.NOT_SAVED;
}
);
}
}
saveChanges() {
console.info("Changes Saved!");
this.claimsByTokenService.updateClaimsCuration(this.selectedRight, this.selectedWrong, this.properties.claimsAPIURL).subscribe(
this.pending_status = this.errorCodes.LOADING;
//this.openLoading();
console.info("Changes Saved!, right-wrong", this.selectedRight_PendingMode, this.selectedWrong_PendingMode);
this.claimsByTokenService.updateClaimsCuration(this.selectedRight_PendingMode, this.selectedWrong_PendingMode, this.properties.claimsAPIURL).subscribe(
data => {
console.info(data);
//this.closeLoading();
console.info(data);
this.mode = "curated";
this.clearCheckboxes();
this.validateJWTandToken();
},
err => {
console.log(err);
//this.closeLoading();
console.log(err);
this.pending_status = this.errorCodes.NOT_SAVED;
}
);
}
clearCheckboxes() {
this.pending_status = this.errorCodes.LOADING;
this.selectedRight_PendingMode.clear();
this.selectedWrong_PendingMode.clear();
this.pending_status = this.errorCodes.DONE;
}
public openLoading(){
if(this.loading){
this.loading.open();
}
}
public closeLoading(){
if(this.loading){
this.loading.close();

View File

@ -16,7 +16,7 @@ import {PagingModule} from '../../utils/paging.module';
import {ClaimsDatatablePipe} from '../../utils/pipes/claimsDatatable.pipe';
import {PreviousRouteRecorder} from '../../utils/piwik/previousRouteRecorder.guard';
import {IsRouteEnabled} from '../../error/isRouteEnabled.guard';
import {ErrorMessagesModule} from '../../utils/errorMessages.module';
@NgModule({
imports: [
@ -26,8 +26,8 @@ import {IsRouteEnabled} from '../../error/isRouteEnabled.guard';
ClaimEntityFormatterModule,
SelectModalModule,
LoadingModalModule,
PagingModule
PagingModule,
ErrorMessagesModule
],
providers:[
ClaimsByTokenService,

View File

@ -44,7 +44,7 @@ export class ClaimsByTokenService {
let claimsCurationInfo: any = []; //e.g.: [{"id":"2","approved":true},{"id":"1","approved":true}]
selectedRight.forEach(function(selected) {
console.info(selected);
//console.info(selected);
let claimCurationInfo: {"id": string, "approved": boolean} = {"id": selected, "approved": true};
claimsCurationInfo.push(claimCurationInfo);
});
@ -54,7 +54,7 @@ export class ClaimsByTokenService {
claimsCurationInfo.push(claimCurationInfo);
});
console.info("\n\n"+claimsCurationInfo);
console.info(claimsCurationInfo);
let body = JSON.stringify( claimsCurationInfo );
@ -67,6 +67,24 @@ export class ClaimsByTokenService {
.catch(this.handleError);
}
updateClaimCuration( claimCurationInfo: {"id": string, "approved": boolean}, apiURL:string) {
let url = apiURL + "curate/bulk";
let claimsCurationInfo: any = []; //e.g.: [{"id":"2","approved":true},{"id":"1","approved":true}]
claimsCurationInfo.push(claimCurationInfo);
console.info(claimsCurationInfo);
let body = JSON.stringify( claimsCurationInfo );
console.warn('Json body: : '+body);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(url, body, CustomOptions.getAuthOptionsWithBody())
.map(res => res.json())
.do(request => console.info("Insert Response:"+request.status) )
.catch(this.handleError);
}
private handleError (error: Response) {
// in a real world app, we may send the error to some remote logging infrastructure
// instead of just logging it to the console

View File

@ -24,7 +24,11 @@ import {ErrorCodes} from './properties/errorCodes';
No {{type}} found
</div>
<div *ngIf="status.every(checkErroCode(errorCodes.OUT_OF_BOUND))"
[class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">Requested page out of bounds</div>
[class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">Requested page out of bounds
</div>
<div *ngIf="status.some(checkErroCode(errorCodes.NOT_SAVED))"
[class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">Changes could not be saved
</div>
`
})

View File

@ -6,4 +6,5 @@ export class ErrorCodes {
public NOT_AVAILABLE = 4;
public OUT_OF_BOUND = 5;
public NOT_FOUND = 6;
public NOT_SAVED = 7;
}