MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library]: Display Claims: Disable inputs and pages while data are loading 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57209 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-10-01 08:26:17 +00:00
parent 2a76d93fdf
commit c09ad8d257
4 changed files with 65 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
claims/claim-utils/displayClaims/displayClaims.component.html
View File

@ -3,7 +3,7 @@
</div> </div>
<div class="uk-grid helper-grid"> <div class="uk-grid helper-grid">
<!-- <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>--> <!-- <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>-->
<div class="uk-width-expand uk-margin-top"> <div class="uk-width-expand uk-margin-top">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [texts]="pageContents['top']"></helper>
@ -15,24 +15,30 @@
</div> </div>
<div class="uk-margin-small-top "> <div class="uk-margin-small-top ">
<label class="uk-margin-small-right"> <input [(ngModel)]="projectCB" type="checkbox" <label class="uk-margin-small-right"> <input [(ngModel)]="projectCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="project"/> (ngModelChange)="changeType()" name="project"/>
Projects </label> Projects </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="publicationCB" type="checkbox" <label class="uk-margin-small-right"> <input [(ngModel)]="publicationCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="publication"/> (ngModelChange)="changeType()" name="publication"/>
Publications </label> Publications </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="datasetCB" type="checkbox" <label class="uk-margin-small-right"> <input [(ngModel)]="datasetCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="dataset"/> (ngModelChange)="changeType()" name="dataset"/>
Research Data </label> Research Data </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="softwareCB" type="checkbox" <label class="uk-margin-small-right"> <input [(ngModel)]="softwareCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="software"/> (ngModelChange)="changeType()" name="software"/>
Software Software
</label> </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="otherCB" type="checkbox" <label class="uk-margin-small-right"> <input [(ngModel)]="otherCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="other"/> (ngModelChange)="changeType()" name="other"/>
Other products Other products
</label> </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="contextCB" type="checkbox" <label class="uk-margin-small-right"> <input [(ngModel)]="contextCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="context"/> (ngModelChange)="changeType()" name="context"/>
Communities </label> Communities </label>
@ -44,7 +50,8 @@
d="M14,14 L18,18 L14,14 Z"></path></svg> d="M14,14 L18,18 L14,14 Z"></path></svg>
</span> </span>
<input type="text" class=" uk-input uk-width-medium form-control" placeholder="Search links" <input type="text" class=" uk-input uk-width-medium form-control" placeholder="Search links"
aria-describedby="sizing-addon2" [(ngModel)]="inputkeyword" (keyup)="changekeyword()" aria-describedby="sizing-addon2"
[(ngModel)]="inputkeyword" (keyup)="changekeyword()"
name="claims-keyword"> name="claims-keyword">
<span *ngIf="inputkeyword.length > 0" class="uk-margin-small-right uk-icon" style="cursor: pointer;" <span *ngIf="inputkeyword.length > 0" class="uk-margin-small-right uk-icon" style="cursor: pointer;"
(click)="inputkeyword=''; changekeyword();"> (click)="inputkeyword=''; changekeyword();">
@ -67,7 +74,7 @@
<div class="uk-width-1-2 uk-margin-top uk-margin-bottom"> <div class="uk-width-1-2 uk-margin-top uk-margin-bottom">
<span> Results per page <span> Results per page
<select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select" [(ngModel)]="size" name="select_size" <select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select" [(ngModel)]="size" name="select_size"
(ngModelChange)="changeSize()"> (ngModelChange)="changeSize()" [disabled]="pageLoading">
<option *ngFor="let size of sizes" [value]="size">{{size}}</option> <option *ngFor="let size of sizes" [value]="size">{{size}}</option>
</select> </select>
</span> </span>
@ -81,6 +88,7 @@
</div> </div>
<div *ngIf="resultsNum" class="uk-width-1-2 "> <div *ngIf="resultsNum" class="uk-width-1-2 ">
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size" <paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
[loading]="pageLoading"
(pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load> (pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
</div> </div>
</div> </div>
@ -122,9 +130,7 @@
<div *ngIf="userValidMessage.length > 0 " class="uk-alert uk-alert-danger "> <div *ngIf="userValidMessage.length > 0 " class="uk-alert uk-alert-danger ">
User session is not valid. Please login again. User session is not valid. Please login again.
</div> </div>
<div *ngIf="claims && claims.length == 0">
<div *ngIf=" claims && claims.length == 0">
<div class="uk-alert uk-alert-primary ">No entries found.</div> <div class="uk-alert uk-alert-primary ">No entries found.</div>
</div> </div>
@ -153,10 +159,12 @@
(click)="changeOrderby('date')"> (click)="changeOrderby('date')">
Claim Date Claim Date
</th> </th>
<th >Status <th>Status
<span class="uk-icon" <span class="uk-icon"
[attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>Status declares if the link information is available in the portal and the APIs<br> If it is pending, the information will be added in the next content provision workflow.</div>'" > [attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>Status declares if the link information is available in the portal and the APIs<br> If it is pending, the information will be added in the next content provision workflow.</div>'">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg> <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="info" ratio="1"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
</span> </span>
</th> </th>
</tr> </tr>
@ -179,25 +187,26 @@
<td> <td>
<span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success">available</span> <span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success">available</span>
<ng-template #notAvailable> <span class="uk-label uk-label-warning">pending</span></ng-template> <ng-template #notAvailable><span class="uk-label uk-label-warning">pending</span></ng-template>
<!-- <span class="uk-icon"--> <!-- <span class="uk-icon"-->
<!-- [attr.uk-tooltip]="'title:<div class=\'uk-margin-small\'>'+isClaimAvailable(claim)+'</div>'">--> <!-- [attr.uk-tooltip]="'title:<div class=\'uk-margin-small\'>'+isClaimAvailable(claim)+'</div>'">-->
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question"--> <!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question"-->
<!-- ratio="1">--> <!-- ratio="1">-->
<!-- <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle cx="10.44"--> <!-- <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle cx="10.44"-->
<!-- cy="14.42"--> <!-- cy="14.42"-->
<!-- r="1.05"></circle><path--> <!-- r="1.05"></circle><path-->
<!-- fill="none" stroke="#000" stroke-width="1.2"--> <!-- fill="none" stroke="#000" stroke-width="1.2"-->
<!-- d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path></svg>--> <!-- d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path></svg>-->
<!-- </span>--> <!-- </span>-->
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="portal-hr uk-grid"> <div class="portal-hr uk-margin-top">
<div *ngIf="resultsNum>0" class="uk-width-1-2 uk-padding-remove-left"> <div class="uk-grid ">
<div *ngIf="resultsNum>0" class="uk-width-1-2">
<span class="portal-color">{{resultsNum|number}}</span> links, page <span <span class="portal-color">{{resultsNum|number}}</span> links, page <span
class="portal-color">{{page | number}}</span> of <span class="portal-color">{{page | number}}</span> of <span
class="portal-color">{{totalPages(resultsNum)|number}}</span> class="portal-color">{{totalPages(resultsNum)|number}}</span>
@ -208,6 +217,7 @@
(pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load> (pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
</div> </div>
</div> </div>
</div>
</div> </div>
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0" <helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"

13
claims/claim-utils/displayClaims/displayClaims.component.ts
View File

@ -44,6 +44,7 @@ export class DisplayClaimsComponent {
keyword: string; // the keyword string to give to the request as parameter keyword: string; // the keyword string to give to the request as parameter
inputkeyword: string; // the string written in the input field (keyword=inputkeyword when its length is bigger than 3 and the user stops typing) inputkeyword: string; // the string written in the input field (keyword=inputkeyword when its length is bigger than 3 and the user stops typing)
types = ["All", "Project", "Context", "Result", "User"]; types = ["All", "Project", "Context", "Result", "User"];
pageLoading:boolean = false;
@Input() fetchBy: string; @Input() fetchBy: string;
@Input() fetchId: string; @Input() fetchId: string;
@Input() user: User; @Input() user: User;
@ -157,7 +158,7 @@ export class DisplayClaimsComponent {
} }
getClaims() { getClaims() {
if (!this.user) { if (!Session.isLoggedIn()) {
this.userValidMessage = "User session has expired. Please login again."; this.userValidMessage = "User session has expired. Please login again.";
this._router.navigate(['/user-info'], { this._router.navigate(['/user-info'], {
queryParams: { queryParams: {
@ -173,10 +174,12 @@ export class DisplayClaimsComponent {
for (let type of this.entityTypes) { for (let type of this.entityTypes) {
types += (types.length > 0 ? '&' : '') + "types=" + type; types += (types.length > 0 ? '&' : '') + "types=" + type;
} }
this.pageLoading = true;
if (this.fetchBy == "Project") { if (this.fetchBy == "Project") {
this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe( this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
data => { data => {
this.manageAPIData(data); this.manageAPIData(data);
this.pageLoading = false;
}, },
err => { err => {
this.handleErrors(err); this.handleErrors(err);
@ -187,9 +190,11 @@ export class DisplayClaimsComponent {
this._claimService.getClaimsByUser(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe( this._claimService.getClaimsByUser(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
data => { data => {
this.manageAPIData(data); this.manageAPIData(data);
this.pageLoading = false;
}, },
err => { err => {
this.handleErrors(err); this.handleErrors(err);
this.pageLoading = false;
DisplayClaimsComponent.handleError("Error getting claims for user with id: " + this.fetchId, err); DisplayClaimsComponent.handleError("Error getting claims for user with id: " + this.fetchId, err);
} }
); );
@ -197,9 +202,11 @@ export class DisplayClaimsComponent {
this._claimService.getClaimsByResult(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe( this._claimService.getClaimsByResult(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
data => { data => {
this.manageAPIData(data); this.manageAPIData(data);
this.pageLoading = false;
}, },
err => { err => {
this.handleErrors(err); this.handleErrors(err);
this.pageLoading = false;
DisplayClaimsComponent.handleError("Error getting claims for entity with id: " + this.fetchId, err); DisplayClaimsComponent.handleError("Error getting claims for entity with id: " + this.fetchId, err);
} }
); );
@ -207,9 +214,11 @@ export class DisplayClaimsComponent {
this._claimService.getClaimsBycontext(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe( this._claimService.getClaimsBycontext(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
data => { data => {
this.manageAPIData(data); this.manageAPIData(data);
this.pageLoading = false;
}, },
err => { err => {
this.handleErrors(err); this.handleErrors(err);
this.pageLoading = false;
DisplayClaimsComponent.handleError("Error getting claims for context with id: " + this.fetchId, err); DisplayClaimsComponent.handleError("Error getting claims for context with id: " + this.fetchId, err);
} }
); );
@ -217,9 +226,11 @@ export class DisplayClaimsComponent {
this._claimService.getClaims(this.size, this.page, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe( this._claimService.getClaims(this.size, this.page, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
data => { data => {
this.manageAPIData(data); this.manageAPIData(data);
this.pageLoading = false;
}, },
err => { err => {
this.handleErrors(err); this.handleErrors(err);
this.pageLoading = false;
DisplayClaimsComponent.handleError("Error getting claims", err); DisplayClaimsComponent.handleError("Error getting claims", err);
} }
); );

4
claims/myClaims/myClaims.component.ts
View File

@ -10,8 +10,8 @@ import {UserManagementService} from "../../services/user-management.service";
<div class="uk-grid" > <div class="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="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top"> <div class="uk-container">
<div class="uk-h5 uk-text-bold"> <div class="uk-article-title custom-article-title">
My links My links
</div> </div>

9
utils/pagingFormatterNoLoad.component.ts
View File

@ -7,7 +7,7 @@ import{EnvProperties} from './properties/env-properties';
@Component({ @Component({
selector: 'paging-no-load', selector: 'paging-no-load',
template: ` template: `
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " class="uk-pagination"> <ul disabled *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " class="uk-pagination">
<li *ngIf=" currentPage > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous"> <li *ngIf=" currentPage > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
<span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li> <span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li>
@ -45,6 +45,8 @@ export class pagingFormatterNoLoad {
private limit: number; private limit: number;
properties:EnvProperties; properties:EnvProperties;
@Input()
public loading:boolean = false;
constructor (private route: ActivatedRoute) { constructor (private route: ActivatedRoute) {
} }
@ -91,10 +93,11 @@ export class pagingFormatterNoLoad {
}); });
} }
onPage(pageNum: number){ onPage(pageNum: number){
if(!this.loading) {
this.currentPage=pageNum; this.currentPage = pageNum;
this.pageChange.emit({ this.pageChange.emit({
value: this.currentPage value: this.currentPage
}); });
} }
}
} }