Add dropdown-filter component. Fix Paging format base on new mocks. Make some alignments in subscribers, pages, search-page and result-prview. UI of Manage Links page except result preview.
This commit is contained in:
parent
13ef173406
commit
7ebf4f7f90
|
|
@ -1,174 +1,100 @@
|
|||
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
|
||||
<div class="uk-width-1-1">
|
||||
|
||||
</div>
|
||||
<div class="uk-grid helper-grid">
|
||||
<div class="uk-width-expand ">
|
||||
<div
|
||||
class="uk-card-body uk-padding-remove-bottom uk-padding-remove-top " [class.paging-hr]="
|
||||
!pageLoading && claims && claims.length > 0">
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
|
||||
<form *ngIf="filterForm" class="">
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
|
||||
<div #searchInputComponent search-input [searchControl]="filterForm.controls.keyword" placeholder="Search links"
|
||||
(searchEmitter)="changekeyword()" [expandable]="true"></div>
|
||||
</div>
|
||||
<div class=" uk-grid uk-flex-middle">
|
||||
<div class="">Filter by: </div>
|
||||
<div class="uk-width-medium uk-padding-remove uk-margin-small-left" input
|
||||
[formInput]="filterForm.get('entities')"
|
||||
placeholder="Search by entities"
|
||||
type="chips" [options]="allOptions" chipLabel="label">
|
||||
<div class="uk-grid">
|
||||
<div class="uk-width-expand uk-position-relative" style="min-height: 60vh">
|
||||
<div *ngIf="!loading">
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
<div *ngIf="filterForm" class="uk-margin-top">
|
||||
<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle">
|
||||
<div search-input [searchControl]="filterForm.controls.keyword" searchInputClass="outer"
|
||||
placeholder="Search links" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"
|
||||
(searchEmitter)="changeKeyword()" [expandable]="true"></div>
|
||||
</div>
|
||||
<div class="">Sort by: </div>
|
||||
<div class="uk-width-medium uk-padding-remove uk-margin-small-left" input
|
||||
[formInput]="filterForm.get('sort')"
|
||||
type="select"
|
||||
[options]="sortOptions">
|
||||
<div class="uk-margin-medium-top">
|
||||
<results-and-pages [type]="resultsNum !== 1?'Links':'Link'" [page]="page" [pageSize]="size"
|
||||
[totalResults]="resultsNum" customClasses="uk-margin-remove"></results-and-pages>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div *ngIf="!(pageLoading || showErrorMessage || showForbiddenMessage || userValidMessage.length > 0 || (claims &&
|
||||
claims.length
|
||||
==0))"
|
||||
class="searchPaging uk-panel uk-margin-medium-top uk-margin-bottom"
|
||||
data-uk-grid-margin="">
|
||||
|
||||
<div class="uk-grid uk-flex-middle">
|
||||
<div class="uk-width-1-2">
|
||||
<div *ngIf="enableDelete && claims && claims.length > 0">
|
||||
<span class="uk-margin-small-top">
|
||||
<input id="checkAll" type="checkbox" (click)="selectAll($event)"
|
||||
[ngModel]="selected.length==claims.length"/>
|
||||
</span>
|
||||
<a [class]=" ' grey-portal-link uk-margin-medium-left '+(selected.length > 0?'':'uk-disabled')"
|
||||
(click)="confirmOpen()">
|
||||
<span class="uk-icon "><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
||||
icon="trash" ratio="1"><polyline fill="none" stroke="#000"
|
||||
points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline
|
||||
fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7"
|
||||
width="1"
|
||||
height="9"></rect><rect
|
||||
x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span>
|
||||
Delete <span
|
||||
*ngIf="selected.length > 0 && selected.length < resultsNum">{{selected.length | number}}</span><span
|
||||
*ngIf="selected.length == resultsNum"> all </span> links
|
||||
|
||||
</a>
|
||||
|
||||
<div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
|
||||
<div>
|
||||
<dropdown-filter #dropdownFilter dropdownClass="uk-width-medium uk-padding-small"
|
||||
name="Type of Entity" [count]="entities.length">
|
||||
<h6 class="uk-margin-remove-bottom" title="Type of Entity">Type of Entity</h6>
|
||||
<ul class="uk-list uk-margin-remove-bottom">
|
||||
<li *ngFor="let option of allOptions">
|
||||
<a class="uk-link-text">
|
||||
<label (click)="select(option.value, $event, dropdownFilter)" class="uk-flex uk-flex-middle">
|
||||
<input class="uk-checkbox"
|
||||
type="checkbox" [checked]="isSelected(option.value)">
|
||||
<span class="uk-margin-small-left">{{option.label}}</span>
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dropdown-filter>
|
||||
</div>
|
||||
<div input inputClass="flat x-small" placeholder="Sort by"
|
||||
[formInput]="filterForm.get('sort')"
|
||||
type="select" [options]="sortOptions">
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
|
||||
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
|
||||
[loading]="false" (pageChange)="pageChange($event)"></paging-no-load>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div *ngIf="resultsNum" class="uk-width-1-2 uk-grid uk-flex-right uk-flex-middle ">
|
||||
<!-- <div class="uk-text-muted uk-text-uppercase">-->
|
||||
<!-- <span class="uk-text-bold">{{resultsNum|number}}</span> links, page <span-->
|
||||
<!-- class="uk-text-bold">{{page | number}}</span> of <span-->
|
||||
<!-- class="uk-text-bold">{{totalPages(resultsNum)|number}}</span>-->
|
||||
<!-- </div>-->
|
||||
<results-and-pages type="links" [page]="page" [pageSize]="size" [totalResults]="resultsNum"></results-and-pages>
|
||||
|
||||
<!-- <paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"-->
|
||||
<!-- [loading]="pageLoading"-->
|
||||
<!-- (pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<loading *ngIf="pageLoading" class="uk-padding"></loading>
|
||||
<div *ngIf="!pageLoading" >
|
||||
<div *ngIf="showErrorMessage " class="uk-alert uk-alert-danger ">
|
||||
An Error occured.
|
||||
</div>
|
||||
<div *ngIf="showForbiddenMessage " class="uk-alert uk-alert-danger ">
|
||||
You are not authorized to view the results.
|
||||
</div>
|
||||
<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" class="uk-margin-top">
|
||||
<div class="uk-alert uk-alert-primary ">No entries found.</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-small-top">
|
||||
|
||||
<div *ngFor="let claim of claims "
|
||||
class="uk-card uk-card-default uk-card-body uk-margin-bottom ng-star-inserted">
|
||||
<div class="uk-grid">
|
||||
<div *ngIf="enableDelete">
|
||||
<input [id]="claim.id" type="checkbox" (click)="select(claim,$event)"
|
||||
[ngModel]="isSelected(claim.id)"/>
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-margin-bottom">
|
||||
<claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
|
||||
[externalPortalUrl]=externalPortalUrl [source]="true"></claim-entity>
|
||||
</div>
|
||||
<div class="uk-margin-bottom">
|
||||
<loading *ngIf="loading" class="uk-position-center"></loading>
|
||||
<div *ngIf="!loading" class="uk-section uk-section-small">
|
||||
<div *ngIf="claims && claims.length == 0" class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||
<div>No links found</div>
|
||||
</div>
|
||||
<ul class="uk-margin-small-top uk-list uk-list-xlarge">
|
||||
<li *ngFor="let claim of claims; let i=index" class="uk-card uk-card-default">
|
||||
<div class="uk-card-body">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-margin-bottom">
|
||||
<claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
|
||||
[externalPortalUrl]=externalPortalUrl [source]="true"></claim-entity>
|
||||
</div>
|
||||
<div class="uk-margin-bottom">
|
||||
<span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>The link information is available in the portal and the APIs.</div>'"
|
||||
>available
|
||||
</span>
|
||||
<ng-template #notAvailable><span class="uk-label uk-label-danger"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>The link information will be added in the portal and the APIs in the next content provision workflow.</div>'"
|
||||
>pending</span></ng-template>
|
||||
</div>
|
||||
<ng-template #notAvailable><span class="uk-label uk-label-danger"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>The link information will be added in the portal and the APIs in the next content provision workflow.</div>'"
|
||||
>pending</span></ng-template>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-small-bottom uk-text-small"><span *ngIf="showUserEmail" class="uk-margin-right"><span class="title">Claimed by:</span>
|
||||
{{claim.userMail}}</span>
|
||||
<span
|
||||
class="title">Claimed date:</span> {{claim.date}}</div>
|
||||
<div class="uk-text-small">
|
||||
<!-- <span class="title">Link to:</span> -->
|
||||
<claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
|
||||
[externalPortalUrl]=externalPortalUrl></claim-entity>
|
||||
<div class="uk-margin-small-bottom uk-text-small"><span *ngIf="showUserEmail"
|
||||
class="uk-margin-right"><span class="title">Claimed by:</span>
|
||||
{{claim.userMail}}</span>
|
||||
<span
|
||||
class="title">Claimed date:</span> {{claim.date}}</div>
|
||||
<div class="uk-text-small">
|
||||
<!-- <span class="title">Link to:</span> -->
|
||||
<claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
|
||||
[externalPortalUrl]=externalPortalUrl></claim-entity>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-card-footer uk-flex uk-flex-right">
|
||||
<button class="uk-button uk-button-link" (click)="deleteOpen(i)">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="uk-margin-medium-top uk-flex uk-flex-center uk-flex-right@m">
|
||||
<paging-no-load *ngIf="resultsNum" [currentPage]="page" [totalResults]="resultsNum" [size]="size"
|
||||
(pageChange)="pageChange($event)"></paging-no-load>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div *ngIf="!( showErrorMessage || showForbiddenMessage || userValidMessage.length > 0 || (claims
|
||||
&& claims.length
|
||||
==0))" class="paging-hr uk-margin-top">
|
||||
<!-- <div class="uk-grid ">-->
|
||||
<!-- <div *ngIf="resultsNum>0" class="uk-width-1-2 uk-text-muted uk-text-uppercase">-->
|
||||
<!-- <span class="uk-text-bold">{{resultsNum|number}}</span> links, page <span-->
|
||||
<!-- class="uk-text-bold">{{page | number}}</span> of <span-->
|
||||
<!-- class="uk-text-bold">{{totalPages(resultsNum)|number}}</span>-->
|
||||
<!---->
|
||||
<!-- </div>-->
|
||||
<!-- <div *ngIf="resultsNum" class="uk-width-1-2 ">-->
|
||||
<!-- <paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"-->
|
||||
<!-- (pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <no-load-paging *ngIf="resultsNum" type="links" [totalResults]="resultsNum" [pageSize]="size" [page]="page" (pageChange)="pageChange($event)"></no-load-paging>-->
|
||||
<paging-no-load *ngIf="resultsNum" [currentPage]="page" [totalResults]="resultsNum" [size]="size"
|
||||
(pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
|
||||
[texts]="pageContents['right']" class="uk-width-1-5"></helper>
|
||||
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
||||
[texts]="pageContents['bottom']"></helper>
|
||||
<modal-alert (alertOutput)="confirmClose()">
|
||||
<h4 class="modal-title uk-text-bold " id="myModalLabel">Are you sure?</h4>
|
||||
<p>
|
||||
You are about to delete {{this.selected.length}} link(s) you selected. <br>
|
||||
<span class="uk-text-bold">
|
||||
Usually it takes 2-4 weeks for the links to permanently disappear from the Openaire platfrom.
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p>Do you want to delete the link(s)?</p>
|
||||
</modal-alert>
|
||||
<modal-loading [message]="'Please wait...'"></modal-loading>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
|
||||
[texts]="pageContents['right']" class="uk-width-1-5"></helper>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
||||
[texts]="pageContents['bottom']"></helper>
|
||||
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="delete()">
|
||||
</modal-alert>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,8 @@ import {ActivatedRoute, Router} from '@angular/router';
|
|||
import {Subject, Subscriber} from 'rxjs';
|
||||
import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
|
||||
import {ClaimsService} from '../service/claims.service';
|
||||
import {ModalLoading} from '../../../utils/modal/loading.component';
|
||||
import {AlertModal} from '../../../utils/modal/alert';
|
||||
import {Session, User} from '../../../login/utils/helper.class';
|
||||
import {User} from '../../../login/utils/helper.class';
|
||||
import {EnvProperties} from '../../../utils/properties/env-properties';
|
||||
import {LoginErrorCodes} from '../../../login/utils/guardHelper.class';
|
||||
import {SEOService} from '../../../sharedComponents/SEO/SEO.service';
|
||||
import {IndexInfoService} from '../../../utils/indexInfo.service';
|
||||
import {ClaimDBRecord} from '../claimHelper.class';
|
||||
|
|
@ -17,18 +14,16 @@ import {HelperService} from '../../../utils/helper/helper.service';
|
|||
import {Meta, Title} from '@angular/platform-browser';
|
||||
import {PiwikService} from '../../../utils/piwik/piwik.service';
|
||||
import {properties} from '../../../../../environments/environment';
|
||||
import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';
|
||||
import {FormBuilder, FormGroup} from '@angular/forms';
|
||||
import {Option} from '../../../sharedComponents/input/input.component';
|
||||
import {SearchInputComponent} from '../../../sharedComponents/search-input/search-input.component';
|
||||
import {OpenaireEntities} from "../../../utils/properties/searchFields";
|
||||
import {HelperFunctions} from "../../../utils/HelperFunctions.class";
|
||||
import {NotificationHandler} from "../../../utils/notification-handler";
|
||||
import {DropdownFilterComponent} from "../../../utils/dropdown-filter/dropdown-filter.component";
|
||||
|
||||
declare var UIkit;
|
||||
@Component({
|
||||
selector: 'displayClaims',
|
||||
templateUrl: 'displayClaims.component.html',
|
||||
// providers: [ClaimsService]
|
||||
|
||||
})
|
||||
export class DisplayClaimsComponent {
|
||||
@Input() piwikSiteId = null;
|
||||
|
|
@ -44,74 +39,63 @@ export class DisplayClaimsComponent {
|
|||
@Input() isAdmin: boolean = false;
|
||||
page: number = 1;
|
||||
size: number = 50;
|
||||
defaultSize:number = 50;
|
||||
sizes = [10, 20, 30, 50];
|
||||
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)
|
||||
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
||||
types = ["All", "Project", "Context", "Result", "User"];
|
||||
pageLoading:boolean = false;
|
||||
loading: boolean = false;
|
||||
@Input() fetchBy: string;
|
||||
@Input() fetchId: string;
|
||||
@Input() user: User;
|
||||
resultsNum: number;
|
||||
resultsNum: number = 0;
|
||||
claims: ClaimDBRecord[];
|
||||
@Input() externalPortalUrl: string = null;
|
||||
@Input() claimsInfoURL: string;// ="https://www.openaire.eu/linking";
|
||||
lastIndexDate = null;
|
||||
|
||||
@ViewChild(ModalLoading) loading: ModalLoading;
|
||||
public filterForm: FormGroup;
|
||||
public entitiesCtrl: FormArray;
|
||||
|
||||
allOptions: Option[] = [{label: OpenaireEntities.PROJECTS, value: "project"},{label: OpenaireEntities.PUBLICATIONS, value:"publication"},{label: OpenaireEntities.DATASETS, value: "dataset"},
|
||||
{label: OpenaireEntities.SOFTWARE, value: "software"},{label: OpenaireEntities.OTHER, value: "other"},{label: OpenaireEntities.COMMUNITIES, value: "context"}];
|
||||
public entities: string[] = [];
|
||||
|
||||
allOptions: Option[] = [
|
||||
{label: OpenaireEntities.PUBLICATIONS, value: "publication"},
|
||||
{label: OpenaireEntities.DATASETS, value: "dataset"},
|
||||
{label: OpenaireEntities.SOFTWARE, value: "software"},
|
||||
{label: OpenaireEntities.OTHER, value: "other"},
|
||||
{label: OpenaireEntities.PROJECTS, value: "project"},
|
||||
{label: OpenaireEntities.COMMUNITIES, value: "context"}];
|
||||
|
||||
sortOptions: Option[] = [
|
||||
{label:"Date (recent) ", value:{ sort: "date", descending: true }}, {label:"Date (oldest) ", value:{ sort: "date",descending:false }},
|
||||
// {label:"User (desc) ", value:{ sort: "user",descending: true }}, {label:"User (asc) ", value:{ sort: "user",descending:false }},
|
||||
// {label:"Title (desc) ", value:{ sort: "source",descending: true }}, {label:"Title (asc) ", value:{ sort: "source",descending:false }},
|
||||
{label:"Title (desc) ", value:{ sort: "target",descending: true }}, {label:"Title (asc) ", value: { sort: "target",descending:false }},
|
||||
{label: "Date (recent) ", value: {sort: "date", descending: true}},
|
||||
{label: "Date (oldest) ", value: {sort: "date", descending: false}},
|
||||
{label: "Title (desc) ", value: {sort: "target", descending: true}},
|
||||
{label: "Title (asc) ", value: {sort: "target", descending: false}},
|
||||
];
|
||||
|
||||
entityTypes: string[] = [];
|
||||
|
||||
// descending = true;
|
||||
// sortby = "date";
|
||||
|
||||
selected = [];
|
||||
// deleteMessage: string = "";
|
||||
showErrorMessage: boolean = false;
|
||||
showForbiddenMessage: boolean = false;
|
||||
userValidMessage: string = "";
|
||||
|
||||
//params for pagingFormatter to use when navigate to page
|
||||
index: number;
|
||||
params;
|
||||
@ViewChild(AlertModal) alert;
|
||||
|
||||
@ViewChild("deleteModal") deleteModal;
|
||||
|
||||
claimsDeleted: number = 0;
|
||||
@Input() communityId: string = null;
|
||||
|
||||
|
||||
url = null;
|
||||
public pageContents = null;
|
||||
|
||||
|
||||
constructor(private _claimService: ClaimsService, private route: ActivatedRoute, private _router: Router, private location: Location,
|
||||
private _meta: Meta, private _title: Title, private _piwikService: PiwikService,
|
||||
private seoService: SEOService, private indexInfoService: IndexInfoService, private helper: HelperService, private _fb: FormBuilder) {
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
this.entitiesCtrl = this._fb.array([]);
|
||||
this.entities = [];
|
||||
this.filterForm = this._fb.group({
|
||||
keyword: [''],
|
||||
entities: this.entitiesCtrl,
|
||||
entities: this._fb.control(this.entities),
|
||||
sort: this._fb.control(this.sortOptions[0].value)
|
||||
});
|
||||
|
||||
|
||||
this.properties = properties;
|
||||
this.url = properties.domain + properties.baseLink + this._router.url;
|
||||
if(!this.myClaims){
|
||||
this.sortOptions.push({label:"User (desc) ", value:{ sort: "user",descending: true }});
|
||||
this.sortOptions.push( {label:"User (asc) ", value:{ sort: "user",descending:false }})
|
||||
if (!this.myClaims) {
|
||||
this.sortOptions.push({label: "User (desc) ", value: {sort: "user", descending: true}});
|
||||
this.sortOptions.push({label: "User (asc) ", value: {sort: "user", descending: false}})
|
||||
}
|
||||
var description = "Openaire, linking, claim, publication, research data, software, other research product, project, community";
|
||||
this.updateTitle(this.pageTitle);
|
||||
|
|
@ -120,7 +104,7 @@ export class DisplayClaimsComponent {
|
|||
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
|
||||
this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.piwikSiteId).subscribe());
|
||||
}
|
||||
|
||||
|
||||
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {
|
||||
this.pageContents = contents;
|
||||
}));
|
||||
|
|
@ -129,7 +113,7 @@ export class DisplayClaimsComponent {
|
|||
}));
|
||||
this.subscriptions.push(this.route.queryParams.subscribe(params => {
|
||||
this.seoService.createLinkForCanonicalURL(this.url, false);
|
||||
|
||||
|
||||
if (this.myClaims) {
|
||||
this.fetchBy = "User";
|
||||
this.fetchId = this.user.email;
|
||||
|
|
@ -139,18 +123,13 @@ export class DisplayClaimsComponent {
|
|||
this.fetchId = (this.fetchId) ? this.fetchId : params['fetchId'];
|
||||
this.fetchId = this.fetchId ? this.fetchId : '';
|
||||
}
|
||||
|
||||
let page = (params['page'] === undefined) ? 1 : +params['page'];
|
||||
let size = (params['size'] === undefined) ? this.defaultSize : +params['size'];
|
||||
|
||||
this.keyword = (params['keyword'] ? params['keyword'] : "");
|
||||
this.filterForm.get('keyword').setValue(this.keyword);
|
||||
this.inputkeyword = this.keyword;
|
||||
this.page = (page <= 0) ? 1 : page;
|
||||
this.size = (size <= 0) ? this.defaultSize : size;
|
||||
this.entityTypes = [];//(params['types']?params['types']:[]);
|
||||
this.setTypes(params['types']); // check the appropriate checkboxes
|
||||
this.setSortby(params['sort']);
|
||||
this.setSortBy(params['sort']);
|
||||
this.getClaims();
|
||||
this.subscriptions.push(this.searchTermStream
|
||||
.pipe(debounceTime(300), distinctUntilChanged())
|
||||
|
|
@ -167,323 +146,194 @@ export class DisplayClaimsComponent {
|
|||
}));
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof Subscriber) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
if(this.subResults){
|
||||
if (this.subResults) {
|
||||
this.subResults.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getClaims() {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.userValidMessage = "User session has expired. Please login again.";
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this._router.url
|
||||
let types = '';
|
||||
for (let type of this.entities) {
|
||||
types += (types.length > 0 ? '&' : '') + "types=" + type;
|
||||
}
|
||||
this.loading = true;
|
||||
if (this.subResults) {
|
||||
this.subResults.unsubscribe();
|
||||
}
|
||||
if (this.fetchBy == "Project") {
|
||||
this.subResults = this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.loading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for project with id: " + this.fetchId);
|
||||
}
|
||||
});
|
||||
);
|
||||
} else if (this.fetchBy == "User") {
|
||||
this.subResults = this._claimService.getClaimsByUser(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.loading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for user with id: " + this.fetchId);
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
} else if (this.fetchBy == "Result") {
|
||||
this.subResults = this._claimService.getClaimsByResult(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.loading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for entity with id: " + this.fetchId);
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
} else if (this.fetchBy == "Context") {
|
||||
this.subResults = this._claimService.getClaimsBycontext(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.loading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for context with id: " + this.fetchId);
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.selected = [];
|
||||
let types = '';
|
||||
this.showErrorMessage = false;
|
||||
this.showForbiddenMessage = false;
|
||||
for (let type of this.entitiesCtrl.getRawValue()) {
|
||||
types += (types.length > 0 ? '&' : '') + "types=" + type;
|
||||
}
|
||||
this.pageLoading = true;
|
||||
if(this.subResults){
|
||||
this.subResults.unsubscribe();
|
||||
}
|
||||
if (this.fetchBy == "Project") {
|
||||
this.subResults = this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for project with id: " + this.fetchId);
|
||||
}
|
||||
);
|
||||
} else if (this.fetchBy == "User") {
|
||||
this.subResults = this._claimService.getClaimsByUser(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for user with id: " + this.fetchId);
|
||||
this.pageLoading = false;
|
||||
}
|
||||
);
|
||||
} else if (this.fetchBy == "Result") {
|
||||
this.subResults = this._claimService.getClaimsByResult(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for entity with id: " + this.fetchId);
|
||||
this.pageLoading = false;
|
||||
}
|
||||
);
|
||||
} else if (this.fetchBy == "Context") {
|
||||
this.subResults = this._claimService.getClaimsBycontext(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims for context with id: " + this.fetchId);
|
||||
this.pageLoading = false;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.subResults = this._claimService.getClaims(this.size, this.page, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.pageLoading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims");
|
||||
this.pageLoading = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
this.subResults = this._claimService.getClaims(this.size, this.page, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
data => {
|
||||
this.manageAPIData(data);
|
||||
this.loading = false;
|
||||
},
|
||||
err => {
|
||||
this.handleErrors(err, "Error getting claims");
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
manageAPIData(data) {
|
||||
this.claims = data.data;
|
||||
this.resultsNum = data.total;
|
||||
|
||||
|
||||
this.resultsNum = +data.total;
|
||||
}
|
||||
|
||||
|
||||
handleErrors(err, message) {
|
||||
|
||||
this.showErrorMessage = true;
|
||||
console.error("Dispaly Claims (component): " + message +" " + (err && err.error?err.error:''));
|
||||
try {
|
||||
let error = err && err.error?err.error:err;
|
||||
if (error.code && error.code == 403) {
|
||||
this.showErrorMessage = false;
|
||||
this.showForbiddenMessage = true;
|
||||
if(!Session.isLoggedIn()) {
|
||||
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this._router.url
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
|
||||
NotificationHandler.rise(message, "danger");
|
||||
console.error("Dispaly Claims (component): " + message + " " + (err && err.error ? err.error : ''));
|
||||
}
|
||||
|
||||
|
||||
goTo(page: number = 1) {
|
||||
this.page = page;
|
||||
this.location.go(location.pathname, this.getParametersString());
|
||||
HelperFunctions.scroll();
|
||||
this.getClaims();
|
||||
}
|
||||
|
||||
|
||||
getParametersString() {
|
||||
let params = '';
|
||||
params += (this.page == 1 ? "" : (params.length > 0 ? '&' : '') + "page=" + this.page);
|
||||
params += (this.size == 10 ? "" : (params.length > 0 ? '&' : '') + "size=" + this.size);
|
||||
let types = "";
|
||||
for (let type of this.entitiesCtrl.getRawValue()) {
|
||||
for (let type of this.entities) {
|
||||
types += (types.length > 0 ? ',' : '') + type;
|
||||
}
|
||||
params += (this.entitiesCtrl.getRawValue().length > 0) ? (params.length > 0 ? '&' : '') + "types=" + types : "";
|
||||
params += (this.entities.length > 0) ? (params.length > 0 ? '&' : '') + "types=" + types : "";
|
||||
if (this.isAdmin) {
|
||||
params += (this.fetchBy == 'All' ? "" : (params.length > 0 ? '&' : '') + "fetchBy=" + this.fetchBy);
|
||||
params += (this.fetchId == '' ? "" : (params.length > 0 ? '&' : '') + "fetchId=" + this.fetchId);
|
||||
}
|
||||
params += (this.filterForm.get("sort").value.sort == 'date' && this.filterForm.get("sort").value.descending ? "" : (params.length > 0 ? '&' : '') + "sort=" +this.filterForm.get("sort").value.sort + "-" + this.filterForm.get("sort").value.descending);
|
||||
params += (this.filterForm.get("sort").value.sort == 'date' && this.filterForm.get("sort").value.descending ? "" : (params.length > 0 ? '&' : '') + "sort=" + this.filterForm.get("sort").value.sort + "-" + this.filterForm.get("sort").value.descending);
|
||||
params += (this.keyword == '' ? "" : (params.length > 0 ? '&' : '') + "keyword=" + this.keyword);
|
||||
if (this.communityId != null) {
|
||||
params += "&communityId=" + this.communityId;
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
setSortby(sortby: string) {
|
||||
|
||||
setSortBy(sortby: string) {
|
||||
let sort = "date";
|
||||
let desc = "desc";
|
||||
if(sortby && sortby.split("-").length == 2){
|
||||
if (sortby && sortby.split("-").length == 2) {
|
||||
sort = sortby.split("-")[0];
|
||||
desc = sortby.split("-")[1];
|
||||
}
|
||||
|
||||
let option = this.sortOptions.find( option => option.value.sort == sort && ((option.value.descending && desc=="desc") || (!option.value.descending && desc=="asc")));
|
||||
this.filterForm.get("sort").setValue(option?option.value:this.sortOptions[0].value);
|
||||
|
||||
let option = this.sortOptions.find(option => option.value.sort == sort && ((option.value.descending && desc == "desc") || (!option.value.descending && desc == "asc")));
|
||||
this.filterForm.get("sort").setValue(option ? option.value : this.sortOptions[0].value);
|
||||
}
|
||||
|
||||
|
||||
setTypes(typesParam: string) {
|
||||
for(let type of typesParam?typesParam.split(','):[]){
|
||||
this.entitiesCtrl.push(new FormControl(type));
|
||||
for (let type of typesParam ? typesParam.split(',') : []) {
|
||||
this.entities.push(type);
|
||||
}
|
||||
}
|
||||
|
||||
changekeyword() {
|
||||
|
||||
changeKeyword() {
|
||||
if (this.filterForm.get("keyword") && (this.filterForm.get("keyword").value.length >= 3 || this.filterForm.get("keyword").value.length == 0)) {
|
||||
this.searchTermStream.next(this.filterForm.get("keyword").value);
|
||||
}
|
||||
}
|
||||
|
||||
select(item: any, event) {
|
||||
let value = event.currentTarget.checked;
|
||||
if (value) {
|
||||
this.selected.push(item);
|
||||
} else {
|
||||
for (var _i = 0; _i < this.selected.length; _i++) {
|
||||
let claim = this.selected[_i];
|
||||
if (claim['id'] == item.id) {
|
||||
this.selected.splice(_i, 1);
|
||||
|
||||
select(value: string, event, dropdownFilter: DropdownFilterComponent) {
|
||||
if(event.target instanceof HTMLInputElement) {
|
||||
dropdownFilter.closeDropdown();
|
||||
if(event.target.checked && !this.entities.find(entity => value === entity)) {
|
||||
this.entities.push(value);
|
||||
} else if(!event.target.checked) {
|
||||
let index = this.entities.indexOf(value);
|
||||
if(index !== -1) {
|
||||
this.entities.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.filterForm.get('entities').setValue(this.entities);
|
||||
}
|
||||
}
|
||||
|
||||
selectAll(event) {
|
||||
let value = event.currentTarget.checked;
|
||||
if (value) {
|
||||
this.selected = [];
|
||||
for (let _i = 0; _i < this.claims.length; _i++) {
|
||||
let claim = this.claims[_i];
|
||||
this.selected.push(claim);
|
||||
}
|
||||
} else {
|
||||
this.selected = [];
|
||||
}
|
||||
|
||||
isSelected(value: string) {
|
||||
return this.filterForm && this.filterForm.get('entities').value.find(entity => entity === value)
|
||||
}
|
||||
|
||||
isSelected(id: string) {
|
||||
for (let _i = 0; _i < this.selected.length; _i++) {
|
||||
let claim = this.selected[_i];
|
||||
if (claim['id'] == id) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
|
||||
deleteOpen(index: number) {
|
||||
this.index = index;
|
||||
this.deleteModal.alertTitle = 'Delete Confirmation';
|
||||
this.deleteModal.message = 'Are you sure you want to delete this link?';
|
||||
this.deleteModal.okButtonText = 'Yes';
|
||||
this.deleteModal.open();
|
||||
}
|
||||
|
||||
|
||||
confirmOpen() {
|
||||
if (this.selected.length <= 0) {
|
||||
|
||||
} else {
|
||||
this.alert.cancelButton = true;
|
||||
this.alert.okButton = true;
|
||||
this.alert.alertTitle = "";// "Delete " + this.selected.length + " links(s)";
|
||||
this.alert.okButtonLeft = false;
|
||||
// this.alert.message = this.selected.length + " links will be deleted. Do you want to proceed? ";
|
||||
this.alert.okButtonText = "Delete";
|
||||
this.alert.cancelButtonText = "Cancel";
|
||||
this.alert.open();
|
||||
}
|
||||
}
|
||||
|
||||
confirmClose() {
|
||||
this.delete();
|
||||
}
|
||||
|
||||
|
||||
delete() {
|
||||
this.loading.open();
|
||||
this.claimsDeleted = 0;
|
||||
let ids = [];
|
||||
for (let i = 0; i < this.selected.length; i++) {
|
||||
let id = this.selected[i].id;
|
||||
ids.push(id);
|
||||
|
||||
}
|
||||
this.batchDeleteById(ids);
|
||||
}
|
||||
|
||||
batchDeleteById(ids: string[]) {
|
||||
if (!this.user) {
|
||||
this.userValidMessage = "User session has expired. Please login again.";
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this._router.url
|
||||
this.subscriptions.push(this._claimService.deleteBulk([this.claims[this.index].id], this.properties.claimsAPIURL).subscribe(
|
||||
res => {
|
||||
this.claims.splice(this.index, 1);
|
||||
this.resultsNum = this.resultsNum - 1;
|
||||
NotificationHandler.rise('Link has been deleted successfully');
|
||||
let goToPage = this.page;
|
||||
if (this.totalPages(this.resultsNum) < this.page && this.page > 0) {
|
||||
goToPage = this.page - 1;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//console.warn("Deleting claim with ids:"+ids);
|
||||
this.subscriptions.push(this._claimService.deleteBulk(ids, this.properties.claimsAPIURL).subscribe(
|
||||
res => {
|
||||
//console.info('Delete response'+res.code );
|
||||
//console.warn("Deleted ids:"+ res.deletedIds);
|
||||
//console.warn("Not found ids:"+ res.notFoundIds);
|
||||
//remove this claim from the
|
||||
let newClaims = this.claims;
|
||||
for (let id of res.deletedIds) {
|
||||
for (let _i = 0; _i < this.claims.length; _i++) {
|
||||
let claim = this.claims[_i];
|
||||
if (claim['id'] == id) {
|
||||
newClaims.splice(_i, 1);
|
||||
}
|
||||
}
|
||||
for (let _i = 0; _i < this.selected.length; _i++) {
|
||||
let claim = this.selected[_i];
|
||||
if (claim['id'] == id) {
|
||||
this.selected.splice(_i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.claims = newClaims;
|
||||
this.resultsNum = this.resultsNum - res.deletedIds.length;
|
||||
this.loading.close();
|
||||
if (res.deletedIds.length > 0) {
|
||||
UIkit.notification('<div class = " " >' + res.deletedIds.length + ' link(s) successfully deleted.</div>', {
|
||||
status: 'success',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
}
|
||||
if (res.notFoundIds.length > 0) {
|
||||
UIkit.notification('<div class = " " >' + res.notFoundIds.length + ' link(s) couldn\'t be deleted.</div>', {
|
||||
status: 'danger',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
}
|
||||
|
||||
let goToPage = this.page;
|
||||
if (this.totalPages(this.resultsNum) < this.page && this.page > 0) {
|
||||
goToPage = this.page - 1;
|
||||
}
|
||||
this.goTo(goToPage);
|
||||
}, err => {
|
||||
//console.log(err);
|
||||
this.handleErrors(err,"Error deleting claims with ids: " + ids);
|
||||
this.showErrorMessage = true;
|
||||
this.loading.close();
|
||||
|
||||
}));
|
||||
}
|
||||
this.goTo(goToPage);
|
||||
}, err => {
|
||||
this.handleErrors(err, "Error deleting claim with id: " + this.claims[this.index].id);
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
pageChange($event) {
|
||||
let page: number = +$event.value;
|
||||
this.goTo(page);
|
||||
}
|
||||
|
||||
|
||||
isClaimAvailable(claim: ClaimDBRecord): boolean {
|
||||
//claim.target.collectedFrom == "infrastruct_::openaire" &&
|
||||
let lastUpdateDate = new Date((this.lastIndexDate != null) ? this.lastIndexDate : this.properties.lastIndexUpdate);
|
||||
|
|
@ -493,14 +343,10 @@ export class DisplayClaimsComponent {
|
|||
if (claimDateStr < lastUpdateDateStr) {
|
||||
return true;
|
||||
} else {
|
||||
if (claim.target.collectedFrom != "infrastruct_::openaire" && claim.indexed) {
|
||||
// check if direct index succeded
|
||||
return true
|
||||
}
|
||||
return claim.target.collectedFrom != "infrastruct_::openaire" && claim.indexed;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
totalPages(totalResults: number): number {
|
||||
let totalPages: any = totalResults / (this.size);
|
||||
if (!(Number.isInteger(totalPages))) {
|
||||
|
|
@ -508,33 +354,25 @@ export class DisplayClaimsComponent {
|
|||
}
|
||||
return totalPages;
|
||||
}
|
||||
|
||||
|
||||
private updateDescription(description: string) {
|
||||
this._meta.updateTag({content: description}, "name='description'");
|
||||
this._meta.updateTag({content: description}, "property='og:description'");
|
||||
}
|
||||
|
||||
|
||||
private updateTitle(title: string) {
|
||||
var _prefix = "";
|
||||
if (!this.communityId) {
|
||||
_prefix = "OpenAIRE | ";
|
||||
}
|
||||
var _title = _prefix + ((title.length > 50) ? title.substring(0, 50) : title);
|
||||
if(this.myClaims) {
|
||||
if (this.myClaims) {
|
||||
this._title.setTitle(_title);
|
||||
}
|
||||
this._meta.updateTag({content: _title}, "property='og:title'");
|
||||
}
|
||||
|
||||
|
||||
private updateUrl(url: string) {
|
||||
this._meta.updateTag({content: url}, "property='og:url'");
|
||||
}
|
||||
public onSearchClose() {
|
||||
this.inputkeyword = this.filterForm.get('keyword').value;
|
||||
}
|
||||
|
||||
public resetInput() {
|
||||
this.inputkeyword = null;
|
||||
this.searchInputComponent.reset()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,15 @@ import {SearchInputModule} from '../../../sharedComponents/search-input/search-i
|
|||
import {InputModule} from '../../../sharedComponents/input/input.module';
|
||||
import {LoadingModule} from '../../../utils/loading/loading.module';
|
||||
import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module";
|
||||
import {IconsModule} from "../../../utils/icons/icons.module";
|
||||
import {DropdownFilterModule} from "../../../utils/dropdown-filter/dropdown-filter.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule, ClaimServiceModule, LoadingModalModule, AlertModalModule,
|
||||
ClaimEntityFormatterModule, PagingModule, HelperModule, Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
|
||||
IndexInfoServiceModule, MatSelectModule, SearchInputModule, MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatSlideToggleModule, InputModule, LoadingModule, NoLoadPaging
|
||||
|
||||
IndexInfoServiceModule, MatSelectModule, SearchInputModule, MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatSlideToggleModule, InputModule, LoadingModule, NoLoadPaging, IconsModule, DropdownFilterModule
|
||||
|
||||
],
|
||||
declarations: [
|
||||
DisplayClaimsComponent
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import {Subscriber} from "rxjs";
|
|||
@Component({
|
||||
selector: 'claims-admin',
|
||||
template: `
|
||||
|
||||
<div id="tm-main" [class]="((isConnect)?'':'uk-section') +' uk-padding-remove-top tm-middle'">
|
||||
<div uk-grid class="uk-margin-small-top">
|
||||
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
|
||||
|
|
@ -30,9 +29,7 @@ import {Subscriber} from "rxjs";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`,
|
||||
|
||||
})
|
||||
export class ClaimsAdminComponent {
|
||||
@Input() fetchBy: string;
|
||||
|
|
|
|||
|
|
@ -43,8 +43,8 @@
|
|||
<div class="form-group uk-margin-large-top"
|
||||
[ngClass]="{'has-error':!myForm.controls.content.valid &&
|
||||
myForm.controls.content.dirty}" >
|
||||
<label class="uk-text-bold">Content</label>
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-text-bold uk-margin-bottom">Content</div>
|
||||
<div>
|
||||
<ckeditor (change)="contentChanged()"
|
||||
[readonly]="false"
|
||||
debounce="500"
|
||||
|
|
|
|||
|
|
@ -39,14 +39,14 @@
|
|||
<span class="uk-text-bold uk-margin-small-right">Select Status (Enable/ disable)</span>
|
||||
<mat-slide-toggle [checked]="myForm.get('isActive').value"
|
||||
(change)="changeStatus()"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '> Enable or disable help text to show or hide it from the dashboard</div></div>"
|
||||
uk-tooltip="title:<div><div class='uk-text-bold'> Enable or disable help text to show or hide it from the dashboard</div></div>"
|
||||
></mat-slide-toggle>
|
||||
</div>
|
||||
<div class="form-group uk-margin-large-top"
|
||||
[ngClass]="{'has-error':!myForm.controls.content.valid &&
|
||||
myForm.controls.content.dirty}">
|
||||
<label class="uk-text-bold">Content</label>
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-text-bold uk-margin-bottom">Content</div>
|
||||
<div>
|
||||
<ckeditor (change)="contentChanged()"
|
||||
[readonly]="false"
|
||||
debounce="500"
|
||||
|
|
|
|||
|
|
@ -210,5 +210,5 @@
|
|||
</form>
|
||||
|
||||
</modal-alert>
|
||||
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages($event)"
|
||||
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages()"
|
||||
classTitle="uk-background-primary uk-light"></modal-alert>
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ export class PagesComponent implements OnInit {
|
|||
this.deleteModal.open();
|
||||
}
|
||||
|
||||
public confirmedDeletePages(data: any) {
|
||||
public confirmedDeletePages() {
|
||||
this.showLoading = true;
|
||||
this.subscriptions.push(this._helpContentService.deletePages(this.selectedPages, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@
|
|||
</div>
|
||||
<div class="uk-flex uk-flex-right uk-margin-small-top">
|
||||
<paging-no-load [currentPage]="page"
|
||||
customClasses="uk-margin-remove-bottom"
|
||||
[totalResults]="subscribers.length" [size]="pageSize"
|
||||
(pageChange)="updatePage($event)">
|
||||
</paging-no-load>
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@
|
|||
</div>
|
||||
<!-- Related results for Custom Filter Alert -->
|
||||
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
|
||||
class="uk-alert uk-text-center uk-margin-small-top ">
|
||||
class="uk-alert uk-margin-small-top ">
|
||||
<span *ngIf="customFilter">The following results are related to <span class="uk-text-primary uk-text-bold"
|
||||
>{{customFilter.valueName}}</span>.</span>
|
||||
Are you interested to view more results? Visit
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ declare var UIkit;
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="!longView">
|
||||
<div dashboard-input [formInput]="inviteForm.get('recipients')" type="chips" placeholder="Write email(s)" [addExtraChips]="true" [validators]="validators" [gridSmall]="true"></div>
|
||||
<div input [formInput]="inviteForm.get('recipients')" type="chips" placeholder="Recipients" [addExtraChips]="true" [validators]="validators"></div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['subscriber-invite.component.css']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import {Component, Input, ViewChild} from "@angular/core";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
selector: 'dropdown-filter',
|
||||
template: `
|
||||
<button class="uk-button uk-button-default uk-flex uk-flex-middle">
|
||||
<span>{{name}}<span *ngIf="count > 0">({{count}})</span></span>
|
||||
<icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen(dropdown)?'less':'more')"></icon>
|
||||
</button>
|
||||
<div #dropdown class="uk-dropdown" [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class DropdownFilterComponent {
|
||||
@Input()
|
||||
public name;
|
||||
@Input()
|
||||
public count: number = 0;
|
||||
@Input()
|
||||
public dropdownClass: string;
|
||||
@ViewChild("dropdown") dropdown;
|
||||
|
||||
isOpen(element) {
|
||||
return UIkit.dropdown(element).isActive();
|
||||
}
|
||||
|
||||
closeDropdown() {
|
||||
UIkit.dropdown(this.dropdown).hide();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {NgModule} from "@angular/core";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {DropdownFilterComponent} from "./dropdown-filter.component";
|
||||
import {IconsModule} from "../icons/icons.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, IconsModule],
|
||||
declarations: [DropdownFilterComponent],
|
||||
exports: [DropdownFilterComponent]
|
||||
})
|
||||
export class DropdownFilterModule {}
|
||||
|
|
@ -6,8 +6,8 @@ import {properties} from "../../../environments/environment";
|
|||
@Component({
|
||||
selector: 'paging',
|
||||
template: `
|
||||
<ul *ngIf=" (getTotalPages() > 0 ) && (getTotalPages() > 1) && (currentPage > 0 && currentPage <= getTotalPages()) "
|
||||
[class.uk-disabled]="isDisabled" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position">
|
||||
<ul *ngIf="currentPage > 0 && currentPage <= getTotalPages()"
|
||||
[class.uk-disabled]="isDisabled" [class.uk-invisible]="getTotalPages() < 2" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position">
|
||||
<li [class.uk-invisible]="currentPage <= 1">
|
||||
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
|
||||
[routerLink]=baseUrl aria-label="Previous">
|
||||
|
|
|
|||
|
|
@ -3,34 +3,29 @@ import {ActivatedRoute} from '@angular/router';
|
|||
import{EnvProperties} from './properties/env-properties';
|
||||
import {properties} from "../../../environments/environment";
|
||||
|
||||
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [term]="keyword"> </paging>
|
||||
|
||||
@Component({
|
||||
selector: 'paging-no-load',
|
||||
template: `
|
||||
<ul disabled *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " [ngClass]="customClasses"
|
||||
class="uk-pagination uk-flex uk-flex-middle ">
|
||||
|
||||
<li [class.uk-invisible]="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>
|
||||
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{(currentPage -2) | number}}</a></li>
|
||||
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{(currentPage -1) | number}}</a></li>
|
||||
<li class="uk-active"><span >{{currentPage | number}}</span></li>
|
||||
<li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{(currentPage +1) | number}}</a></li>
|
||||
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) " class="uk-visible@l"><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) " class="uk-visible@l"><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</a></li>
|
||||
<li [class.uk-invisible]="getTotalPages() <= currentPage">
|
||||
<a (click)="onPage(currentPage +1)" aria-label="Next">
|
||||
<span class="uk-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<ul *ngIf="currentPage > 0 && currentPage <= getTotalPages()"
|
||||
[class.uk-disabled]="loading" [class.uk-invisible]="getTotalPages() < 2" class="uk-pagination uk-margin-remove" [ngClass]="customClasses">
|
||||
<li [class.uk-invisible]="currentPage <= 1">
|
||||
<a (click)="onPage((currentPage -1))" aria-label="Previous">
|
||||
<icon name="chevron_left" ratio="1.2" [flex]="true" customClass="uk-pagination-previous"></icon>
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{(currentPage -2) | number}}</a></li>
|
||||
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{(currentPage -1) | number}}</a></li>
|
||||
<li class="uk-active"><span >{{currentPage | number}}</span></li>
|
||||
<li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{(currentPage +1) | number}}</a></li>
|
||||
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -2 <= 0) && (currentPage +3 <= getTotalPages()) " class="uk-visible@l"><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -1 <= 0) && (currentPage +4 <= getTotalPages()) " class="uk-visible@l"><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</a></li>
|
||||
<li [class.uk-invisible]="getTotalPages() <= currentPage">
|
||||
<a (click)="onPage(currentPage +1)" aria-label="Next">
|
||||
<icon name="chevron_right" ratio="1.2" [flex]="true" customClass="uk-pagination-next"></icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<div *ngIf="result" [ngClass]="{'uk-card uk-card-default': isCard}">
|
||||
<div [ngClass]="{'uk-card-body': isCard}">
|
||||
<!-- Before title -->
|
||||
<div class="uk-grid uk-flex uk-flex-middle">
|
||||
<div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId" class=" uk-inline uk-width-auto uk-text-center uk-visible-toggle">
|
||||
<img class="uk-width-medium" [src]="properties.enermapsURL +'/images/datasets/' + result.enermapsId + '.png'"
|
||||
|
|
@ -24,7 +23,7 @@
|
|||
</a>
|
||||
</span> -->
|
||||
<!-- Small subtitle above title -->
|
||||
<div class="uk-text-small uk-margin-small-bottom">
|
||||
<div class="uk-text-small uk-margin-xsmall-bottom">
|
||||
<span *ngIf="type" class="uk-text-capitalize type">{{type}}</span>
|
||||
<span *ngIf="type && beforeTitle.length > 0"> . </span>
|
||||
<span *ngIf="beforeTitle.length > 0" class="uk-text-capitalize">
|
||||
|
|
@ -313,7 +312,7 @@
|
|||
<div *ngIf="(result.pop_inf && result.DOI) ||
|
||||
((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
|
||||
((showOrcid && result.identifiers && result.identifiers.size > 0 && isResultType) || result.orcidCreationDates?.length > 0))"
|
||||
class="result-preview-bottom uk-text-small"
|
||||
class="uk-text-small"
|
||||
[ngClass]="{'uk-card-footer': isCard}">
|
||||
<!-- Impact Factors-->
|
||||
<span class="uk-flex uk-flex-top uk-flex-wrap" style="grid-gap: 10px;">
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import {Component, Input} from "@angular/core";
|
|||
@Component({
|
||||
selector: 'results-and-pages',
|
||||
template: `
|
||||
<h6 *ngIf="type && totalResults" [ngClass]="customClasses">
|
||||
<h6 *ngIf="type" [ngClass]="customClasses">
|
||||
<span>{{totalResults | number}}</span>
|
||||
<span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
|
||||
<span>{{page}}</span>
|
||||
<span>{{currentPage}}</span>
|
||||
<span class="uk-text-meta"> of </span>
|
||||
<span>{{getTotalPages() | number}}</span>
|
||||
</h6>
|
||||
|
|
@ -17,11 +17,19 @@ export class ResultsAndPagesNumComponent {
|
|||
@Input() type: string;
|
||||
@Input() page: number = 1;
|
||||
@Input() pageSize: number = 10;
|
||||
@Input() totalResults: number;
|
||||
@Input() totalResults: number = 0;
|
||||
@Input() customClasses: string = "";
|
||||
|
||||
constructor() {}
|
||||
|
||||
|
||||
get currentPage() {
|
||||
if(this.page > this.getTotalPages()) {
|
||||
return this.getTotalPages();
|
||||
} else {
|
||||
return this.page;
|
||||
}
|
||||
}
|
||||
|
||||
getTotalPages(){
|
||||
let total: number;
|
||||
let i= this.totalResults/this.pageSize;
|
||||
|
|
@ -30,4 +38,4 @@ export class ResultsAndPagesNumComponent {
|
|||
|
||||
return total;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue