[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
parent
2a76d93fdf
commit
c09ad8d257
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
</div>
|
||||
<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">
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
|
|
@ -15,24 +15,30 @@
|
|||
</div>
|
||||
<div class="uk-margin-small-top ">
|
||||
<label class="uk-margin-small-right"> <input [(ngModel)]="projectCB" type="checkbox"
|
||||
[disabled]="pageLoading"
|
||||
(ngModelChange)="changeType()" name="project"/>
|
||||
|
||||
Projects </label>
|
||||
<label class="uk-margin-small-right"> <input [(ngModel)]="publicationCB" type="checkbox"
|
||||
[disabled]="pageLoading"
|
||||
(ngModelChange)="changeType()" name="publication"/>
|
||||
Publications </label>
|
||||
<label class="uk-margin-small-right"> <input [(ngModel)]="datasetCB" type="checkbox"
|
||||
[disabled]="pageLoading"
|
||||
(ngModelChange)="changeType()" name="dataset"/>
|
||||
Research Data </label>
|
||||
<label class="uk-margin-small-right"> <input [(ngModel)]="softwareCB" type="checkbox"
|
||||
[disabled]="pageLoading"
|
||||
(ngModelChange)="changeType()" name="software"/>
|
||||
Software
|
||||
</label>
|
||||
<label class="uk-margin-small-right"> <input [(ngModel)]="otherCB" type="checkbox"
|
||||
[disabled]="pageLoading"
|
||||
(ngModelChange)="changeType()" name="other"/>
|
||||
Other products
|
||||
</label>
|
||||
<label class="uk-margin-small-right"> <input [(ngModel)]="contextCB" type="checkbox"
|
||||
[disabled]="pageLoading"
|
||||
(ngModelChange)="changeType()" name="context"/>
|
||||
Communities </label>
|
||||
|
||||
|
|
@ -44,7 +50,8 @@
|
|||
d="M14,14 L18,18 L14,14 Z"></path></svg>
|
||||
</span>
|
||||
<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">
|
||||
<span *ngIf="inputkeyword.length > 0" class="uk-margin-small-right uk-icon" style="cursor: pointer;"
|
||||
(click)="inputkeyword=''; changekeyword();">
|
||||
|
|
@ -67,7 +74,7 @@
|
|||
<div class="uk-width-1-2 uk-margin-top uk-margin-bottom">
|
||||
<span> Results per page
|
||||
<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>
|
||||
</select>
|
||||
</span>
|
||||
|
|
@ -81,6 +88,7 @@
|
|||
</div>
|
||||
<div *ngIf="resultsNum" class="uk-width-1-2 ">
|
||||
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
|
||||
[loading]="pageLoading"
|
||||
(pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,9 +130,7 @@
|
|||
<div *ngIf="userValidMessage.length > 0 " class="uk-alert uk-alert-danger ">
|
||||
User session is not valid. Please login again.
|
||||
</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>
|
||||
|
||||
|
|
@ -153,10 +159,12 @@
|
|||
(click)="changeOrderby('date')">
|
||||
Claim Date
|
||||
</th>
|
||||
<th >Status
|
||||
<th>Status
|
||||
<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>'" >
|
||||
<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>
|
||||
[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>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -179,25 +187,26 @@
|
|||
<td>
|
||||
|
||||
<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"-->
|
||||
<!-- [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"-->
|
||||
<!-- ratio="1">-->
|
||||
<!-- <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle cx="10.44"-->
|
||||
<!-- cy="14.42"-->
|
||||
<!-- r="1.05"></circle><path-->
|
||||
<!-- 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>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span class="uk-icon"-->
|
||||
<!-- [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"-->
|
||||
<!-- ratio="1">-->
|
||||
<!-- <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle cx="10.44"-->
|
||||
<!-- cy="14.42"-->
|
||||
<!-- r="1.05"></circle><path-->
|
||||
<!-- 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>-->
|
||||
<!-- </span>-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="portal-hr uk-grid">
|
||||
<div *ngIf="resultsNum>0" class="uk-width-1-2 uk-padding-remove-left">
|
||||
<div class="portal-hr uk-margin-top">
|
||||
<div class="uk-grid ">
|
||||
<div *ngIf="resultsNum>0" class="uk-width-1-2">
|
||||
<span class="portal-color">{{resultsNum|number}}</span> links, page <span
|
||||
class="portal-color">{{page | number}}</span> of <span
|
||||
class="portal-color">{{totalPages(resultsNum)|number}}</span>
|
||||
|
|
@ -208,6 +217,7 @@
|
|||
(pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export class DisplayClaimsComponent {
|
|||
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)
|
||||
types = ["All", "Project", "Context", "Result", "User"];
|
||||
pageLoading:boolean = false;
|
||||
@Input() fetchBy: string;
|
||||
@Input() fetchId: string;
|
||||
@Input() user: User;
|
||||
|
|
@ -157,7 +158,7 @@ export class DisplayClaimsComponent {
|
|||
}
|
||||
|
||||
getClaims() {
|
||||
if (!this.user) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.userValidMessage = "User session has expired. Please login again.";
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
|
|
@ -173,10 +174,12 @@ export class DisplayClaimsComponent {
|
|||
for (let type of this.entityTypes) {
|
||||
types += (types.length > 0 ? '&' : '') + "types=" + type;
|
||||
}
|
||||
this.pageLoading = true;
|
||||
if (this.fetchBy == "Project") {
|
||||
this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
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(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err);
|
||||
this.pageLoading = false;
|
||||
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(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err);
|
||||
this.pageLoading = false;
|
||||
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(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err);
|
||||
this.pageLoading = false;
|
||||
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(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err);
|
||||
this.pageLoading = false;
|
||||
DisplayClaimsComponent.handleError("Error getting claims", err);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import {UserManagementService} from "../../services/user-management.service";
|
|||
<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="uk-container uk-margin-top">
|
||||
<div class="uk-h5 uk-text-bold">
|
||||
<div class="uk-container">
|
||||
<div class="uk-article-title custom-article-title">
|
||||
My links
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import{EnvProperties} from './properties/env-properties';
|
|||
@Component({
|
||||
selector: 'paging-no-load',
|
||||
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">
|
||||
<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;
|
||||
properties:EnvProperties;
|
||||
@Input()
|
||||
public loading:boolean = false;
|
||||
|
||||
constructor (private route: ActivatedRoute) {
|
||||
}
|
||||
|
|
@ -91,10 +93,11 @@ export class pagingFormatterNoLoad {
|
|||
});
|
||||
}
|
||||
onPage(pageNum: number){
|
||||
|
||||
this.currentPage=pageNum;
|
||||
if(!this.loading) {
|
||||
this.currentPage = pageNum;
|
||||
this.pageChange.emit({
|
||||
value: this.currentPage
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue